refactor: prettier applied (2064ae7b) · Commits · Jakub Krajčík / PB138 Ovládání domácnosti 2022

app/src/App.tsx

+35 −23

Original line number	Original line	Diff line number	Diff line
	import useSWR from "swr";		import useSWR from "swr";
	import fetcher from "./models/fetcher";		import fetcher from "./models/fetcher";
	import { useState } from 'react'		import { useState } from "react";
	import './App.css'		import "./App.css";
	import { BrowserRouter, Route, Routes, NavLink, Navigate } from 'react-router-dom'		import {
	import { Room } from './components/Room/Room'		BrowserRouter,
	import { Landing } from './components/Landing/Landing'		Route,
	import { v4 as uuidv4 } from 'uuid';		Routes,
			NavLink,
			Navigate,
			} from "react-router-dom";
			import { Room } from "./components/Room/Room";
			import { Landing } from "./components/Landing/Landing";
			import { v4 as uuidv4 } from "uuid";

	function App() {		function App() {
	const { data: dataRooms, error: errorRooms } = useSWR(`${import.meta.env.VITE_API}/api/rooms`, fetcher)		const { data: dataRooms, error: errorRooms } = useSWR(
			`${import.meta.env.VITE_API}/api/rooms`,
			fetcher
			);

	if (errorRooms) return <div>failed to load room information</div>		if (errorRooms) return <div>failed to load room information</div>;
	if (!dataRooms) return <div>loading room information...</div>		if (!dataRooms) return <div>loading room information...</div>;

	const roomMenuItems = dataRooms.map(room => {		const roomMenuItems = dataRooms.map((room) => {
	const nn = "room/" + room.name;		const nn = "room/" + room.name;
	return <NavLink className="menu-item" to={nn} key={uuidv4()}>{room.name}</NavLink>		return (
	})		<NavLink className="menu-item" to={nn} key={uuidv4()}>
			{room.name}
			</NavLink>
			);
			});

	return (		return (
	<div className="App">		<div className="App">
	<BrowserRouter>		<BrowserRouter>
	<nav className="menu">		<nav className="menu">
	<NavLink className="menu-item" to="main">Main</NavLink>		<NavLink className="menu-item" to="main">
			Main
			</NavLink>
	{roomMenuItems}		{roomMenuItems}
	</nav>		</nav>
	<div className="content">		<div className="content">
	@@ -30,16 +45,13 @@ function App() {
	<Routes>		<Routes>
	<Route path="/main" element={<Landing />} />		<Route path="/main" element={<Landing />} />
	<Route path="/room/:name" element={<Room />} />		<Route path="/room/:name" element={<Room />} />
	<Route		<Route path="*" element={<Navigate to="main" replace />} />
	path="*"
	element={<Navigate to="main" replace />}
	/>
	</Routes>		</Routes>
	</div>		</div>
	</div>		</div>
	</BrowserRouter>		</BrowserRouter>
	</div>		</div>
	)		);
	}		}

	export default App		export default App;

app/src/components/Blinds/Blinds.tsx

+30 −17

Original line number	Original line	Diff line number	Diff line
	@@ -7,14 +7,14 @@ import Stack from "@mui/material/Stack";
	import Typography from "@mui/material/Typography";		import Typography from "@mui/material/Typography";
	import { SyntheticEvent, useState } from "react";		import { SyntheticEvent, useState } from "react";
	import useSWR, { useSWRConfig } from "swr";		import useSWR, { useSWRConfig } from "swr";
	import fetcher from '../../models/fetcher';		import fetcher from "../../models/fetcher";
	import { IBlinds } from "../../models/types";		import { IBlinds } from "../../models/types";
	import { v4 as uuidv4 } from 'uuid';		import { v4 as uuidv4 } from "uuid";
	import { updateBlinds } from "../../models/databaseRequests";		import { updateBlinds } from "../../models/databaseRequests";

	const Step = 1;		const Step = 1;
	const MinRoll = 0		const MinRoll = 0;
	const MaxRoll = 10		const MaxRoll = 10;

	interface IBlindsProps {		interface IBlindsProps {
	roomName: string;		roomName: string;
	@@ -22,35 +22,44 @@ interface IBlindsProps {

	export const Blinds = ({ roomName }: IBlindsProps) => {		export const Blinds = ({ roomName }: IBlindsProps) => {
	const { mutate } = useSWRConfig();		const { mutate } = useSWRConfig();
	const { data: dataBlinds, error: errorBlinds } = useSWR(`${import.meta.env.VITE_API}/api/room/blinds?roomName=${roomName}`, fetcher);		const { data: dataBlinds, error: errorBlinds } = useSWR(
			`${import.meta.env.VITE_API}/api/room/blinds?roomName=${roomName}`,
			fetcher
			);

	if (errorBlinds) return <div>failed to load blinds</div>;		if (errorBlinds) return <div>failed to load blinds</div>;
	if (!dataBlinds) return <div>loading blinds...</div>;		if (!dataBlinds) return <div>loading blinds...</div>;

	const { state }: IBlinds = dataBlinds		const { state }: IBlinds = dataBlinds;

	function preventHorizontalKeyboardNavigation(event: React.KeyboardEvent) {		function preventHorizontalKeyboardNavigation(event: React.KeyboardEvent) {
	if (event.key === 'ArrowLeft' \|\| event.key === 'ArrowRight') {		if (event.key === "ArrowLeft" \|\| event.key === "ArrowRight") {
	event.preventDefault();		event.preventDefault();
	}		}
	}		}

	const handleChangeComplete = (event: Event \| SyntheticEvent<Element, Event>, newValue: number \| number[]) => {		const handleChangeComplete = (
	updateBlinds({ state: newValue as number, roomName, mutate })		event: Event \| SyntheticEvent<Element, Event>,
			newValue: number \| number[]
	}		) => {
			updateBlinds({ state: newValue as number, roomName, mutate });
			};

	const handleFullRoll = (newValue: number) => {		const handleFullRoll = (newValue: number) => {
	updateBlinds({ state: newValue, roomName, mutate })		updateBlinds({ state: newValue, roomName, mutate });
	}		};

	return (		return (
	<Box className="module" sx={{ padding: 1 }}>		<Box className="module" sx={{ padding: 1 }}>
	<Stack sx={{ height: '100%', padding: 2 }} direction="row" justifyContent="space-between">		<Stack
			sx={{ height: "100%", padding: 2 }}
			direction="row"
			justifyContent="space-between"
			>
	<Slider		<Slider
	sx={{		sx={{
	'& input[type="range"]': {		'& input[type="range"]': {
	WebkitAppearance: 'slider-vertical',		WebkitAppearance: "slider-vertical",
	},		},
	}}		}}
	key={uuidv4()}		key={uuidv4()}
	@@ -65,7 +74,11 @@ export const Blinds = ({ roomName }: IBlindsProps) => {
	onChangeCommitted={handleChangeComplete}		onChangeCommitted={handleChangeComplete}
	onKeyDown={preventHorizontalKeyboardNavigation}		onKeyDown={preventHorizontalKeyboardNavigation}
	/>		/>
	<Stack direction="column" justifyContent="space-between" alignItems="end">		<Stack
			direction="column"
			justifyContent="space-between"
			alignItems="end"
			>
	<Stack direction="column" alignItems="end">		<Stack direction="column" alignItems="end">
	<Typography>Roll state</Typography>		<Typography>Roll state</Typography>
	<Chip label={`${state}`} />		<Chip label={`${state}`} />
	@@ -83,4 +96,4 @@ export const Blinds = ({ roomName }: IBlindsProps) => {
	</Stack>		</Stack>
	</Box>		</Box>
	);		);
	}		};

app/src/components/Blinds/Blindt.stories.tsx

+5 −5

Original line number	Original line	Diff line number	Diff line
	import React from 'react';		import React from "react";
	import { ComponentMeta, ComponentStory } from '@storybook/react';		import { ComponentMeta, ComponentStory } from "@storybook/react";

	import { Blinds } from './Blinds';		import { Blinds } from "./Blinds";

	export default {		export default {
	title: 'Blinds',		title: "Blinds",
	component: Blinds,		component: Blinds,
	} as ComponentMeta<typeof Blinds>;		} as ComponentMeta<typeof Blinds>;

	const Template: ComponentStory<typeof Blinds> = () => <Blinds roomName={''} />;		const Template: ComponentStory<typeof Blinds> = () => <Blinds roomName={""} />;

	export const NewBlinds = Template.bind({});		export const NewBlinds = Template.bind({});

app/src/components/Dialog/DialogForm.tsx

+19 −14

Original line number	Original line	Diff line number	Diff line
	import { useState } from 'react';		import { useState } from "react";
	import Button from "@mui/material/Button";		import Button from "@mui/material/Button";
	import Dialog from "@mui/material/Dialog";		import Dialog from "@mui/material/Dialog";
	import DialogActions from "@mui/material/DialogActions";		import DialogActions from "@mui/material/DialogActions";
	@@ -6,9 +6,9 @@ import DialogContent from "@mui/material/DialogContent";
	import DialogContentText from "@mui/material/DialogContentText";		import DialogContentText from "@mui/material/DialogContentText";
	import DialogTitle from "@mui/material/DialogTitle";		import DialogTitle from "@mui/material/DialogTitle";
	import TextField from "@mui/material/TextField";		import TextField from "@mui/material/TextField";
	import { IRgba } from '../../models/types';		import { IRgba } from "../../models/types";
	import { updateLightName } from '../../models/databaseRequests';		import { updateLightName } from "../../models/databaseRequests";
	import { useSWRConfig } from 'swr';		import { useSWRConfig } from "swr";

	interface IDialogFormProps {		interface IDialogFormProps {
	open: boolean;		open: boolean;
	@@ -19,18 +19,25 @@ interface IDialogFormProps {
	roomName: string;		roomName: string;
	}		}

	export const DialogForm = ({ open, setOpen, name, isOn, state, roomName }: IDialogFormProps) => {		export const DialogForm = ({
	const { mutate } = useSWRConfig()		open,
			setOpen,
			name,
			isOn,
			state,
			roomName,
			}: IDialogFormProps) => {
			const { mutate } = useSWRConfig();
	const [newLightName, setNewName] = useState(name);		const [newLightName, setNewName] = useState(name);

	const handleClose = () => {		const handleClose = () => {
	setOpen(false);		setOpen(false);
	}		};

	const onSubmit = () => {		const onSubmit = () => {
	updateLightName({ currentLightName: name, newLightName, roomName, mutate})		updateLightName({ currentLightName: name, newLightName, roomName, mutate });
	handleClose()		handleClose();
	}		};

	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {		const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
	setNewName(event.target.value);		setNewName(event.target.value);
	@@ -40,9 +47,7 @@ export const DialogForm = ({ open, setOpen, name, isOn, state, roomName }: IDial
	<Dialog open={open} onClose={handleClose}>		<Dialog open={open} onClose={handleClose}>
	<DialogTitle>Submit</DialogTitle>		<DialogTitle>Submit</DialogTitle>
	<DialogContent>		<DialogContent>
	<DialogContentText>		<DialogContentText>Enter new name for the light.</DialogContentText>
	Enter new name for the light.
	</DialogContentText>
	<TextField		<TextField
	autoFocus		autoFocus
	margin="dense"		margin="dense"
	@@ -62,4 +67,4 @@ export const DialogForm = ({ open, setOpen, name, isOn, state, roomName }: IDial
	</DialogActions>		</DialogActions>
	</Dialog>		</Dialog>
	);		);
	}		};

app/src/components/Heating/Heating.stories.tsx

+7 −5

Original line number	Original line	Diff line number	Diff line
	import React from 'react';		import React from "react";
	import { ComponentMeta, ComponentStory } from '@storybook/react';		import { ComponentMeta, ComponentStory } from "@storybook/react";

	import { Heating } from './Heating';		import { Heating } from "./Heating";

	export default {		export default {
	title: 'Heating',		title: "Heating",
	component: Heating,		component: Heating,
	} as ComponentMeta<typeof Heating>;		} as ComponentMeta<typeof Heating>;

	const Template: ComponentStory<typeof Heating> = () => <Heating roomName={''} />;		const Template: ComponentStory<typeof Heating> = () => (
			<Heating roomName={""} />
			);

	export const Heat = Template.bind({});		export const Heat = Template.bind({});

Admin message