[#75] settings view + profile view (#80)

* [#75] Settings View

- components for tabs in profile view and settings

* [#75] settings view

- adjustments for bigger screens

* [#75]  settings view

- apply changes requested in code review

* [#75] settings view

- eslint-related corrections

client/src/components/NavBars/TopNavBar.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import { Search } from '../Search';

client/src/components/ProfileComponent/CheckboxDaysRevision.tsx

@@ -0,0 +1,43 @@
+import { useState, ReactElement } from 'react';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { Checkbox, Typography } from '@material-ui/core';
+
+const CheckboxLabels = (): ReactElement => {
+    const [state, setState] = useState([
+        { label: 'poniedziałki', name: 'mon', checked: false },
+        { label: 'wtorki', name: 'tue', checked: false },
+        { label: 'środy', name: 'wed', checked: false },
+        { label: 'czwartki', name: 'thu', checked: false },
+        { label: 'piątki', name: 'fri', checked: false },
+        { label: 'soboty', name: 'sat', checked: false },
+        { label: 'niedziele', name: 'sun', checked: false }
+    ]);
+
+    const handleChange = (event: { target: { name: string; checked: boolean } }) => {
+        setState(
+            state.map((item) => {
+                return item.name === event.target.name ? { ...item, checked: !item.checked } : item;
+            })
+        );
+    };
+
+    return (
+        <FormGroup row>
+            {state.map((item, index) => (
+                <FormControlLabel
+                    key={index}
+                    control={
+                        <Checkbox checked={item.checked} onChange={handleChange} name={item.name} color="secondary" />
+                    }
+                    label={
+                        <Typography variant="subtitle1" color="textSecondary">
+                            {item.label}
+                        </Typography>
+                    }
+                />
+            ))}
+        </FormGroup>
+    );
+};
+export default CheckboxLabels;

client/src/components/ProfileComponent/ProfileInputFields.tsx

@@ -0,0 +1,64 @@
+import React, { ReactElement } from 'react';
+import { Paper, TextField, IconButton, Box } from '@material-ui/core';
+import { useState } from 'react';
+import DoneOutlineIcon from '@material-ui/icons/DoneOutline';
+
+const ProfileInputFields = (): ReactElement => {
+    const [username, setUsername] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    const updateUsername = (e: React.SyntheticEvent<EventTarget>) => {
+        setUsername((e.target as HTMLInputElement).value);
+    };
+    const updateEmail = (e: React.SyntheticEvent<EventTarget>) => {
+        setEmail((e.target as HTMLInputElement).value);
+    };
+    const updatePassword = (e: React.SyntheticEvent<EventTarget>) => {
+        setPassword((e.target as HTMLInputElement).value);
+    };
+    return (
+        <Paper>
+            <Box m={2} p={1}>
+                <form>
+                    <TextField
+                        onChange={updateUsername}
+                        autoFocus
+                        label="Nickname"
+                        value={username || ''}
+                        variant="standard"
+                        size="small"
+                    />
+                    <IconButton edge="end" aria-label="zapisz" color="primary">
+                        <DoneOutlineIcon />
+                    </IconButton>
+                </form>
+                <form>
+                    <TextField
+                        label="Email"
+                        value={email || ''}
+                        variant="standard"
+                        size="small"
+                        onChange={updateEmail}
+                    />
+                    <IconButton edge="end" aria-label="zapisz" color="primary">
+                        <DoneOutlineIcon />
+                    </IconButton>
+                </form>
+                <form>
+                    <TextField
+                        label="Hasło"
+                        value={password || ''}
+                        variant="standard"
+                        size="small"
+                        onChange={updatePassword}
+                    />
+                    <IconButton edge="end" aria-label="zapisz" color="primary">
+                        <DoneOutlineIcon />
+                    </IconButton>
+                </form>
+            </Box>
+        </Paper>
+    );
+};
+export default ProfileInputFields;

client/src/components/ProfileComponent/SettingsComponent.tsx

@@ -0,0 +1,71 @@
+import React, { ReactElement } from 'react';
+import { Grid, Typography, Button, Box, Switch, FormControlLabel } from '@material-ui/core';
+import { useState } from 'react';
+import DoneOutlineIcon from '@material-ui/icons/DoneOutline';
+import CheckboxLabels from './CheckboxDaysRevision';
+import ProfileInputFields from './ProfileInputFields';
+
+const SettingsComponent = (): ReactElement => {
+    const [notification, setNotifications] = useState({
+        checkedA: true,
+        checkedB: true
+    });
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setNotifications({ ...notification, [event.target.name]: event.target.checked });
+    };
+
+    return (
+        <>
+            <Grid container direction="column" justify="center" alignItems="center" alignContent="center" spacing={4}>
+                <Grid item xs={12}>
+                    <ProfileInputFields />
+                </Grid>
+                <Grid container justify="center" alignItems="center" spacing={2}>
+                    <Grid item xs={11} sm={4}>
+                        <Typography variant="body1" align="center" color="textPrimary">
+                            Harmonogram powtórek
+                        </Typography>
+                        <Box textAlign="center" mb={4} mt={2}>
+                            <CheckboxLabels />
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                size="medium"
+                                type="submit"
+                                startIcon={<DoneOutlineIcon />}
+                            >
+                                Zapisz
+                            </Button>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Grid>
+            <Grid container direction="row" justify="center" alignItems="center" spacing={2}>
+                <Grid item xs={9} sm={3}>
+                    <Typography variant="body1" color="textPrimary" align="left">
+                        Powiadomienia e-mail
+                    </Typography>
+                </Grid>
+                <Grid item xs={3} sm={1}>
+                    <FormControlLabel
+                        value="bottom"
+                        control={
+                            <Switch
+                                checked={notification.checkedB}
+                                onChange={handleChange}
+                                name="checkedB"
+                                color="secondary"
+                                edge="end"
+                                aria-label="Włącz"
+                                size="small"
+                            />
+                        }
+                        label="Włącz"
+                        labelPlacement="bottom"
+                    />
+                </Grid>
+            </Grid>
+        </>
+    );
+};
+export default SettingsComponent;

client/src/components/Tabs/TabPanel.tsx

@@ -0,0 +1,26 @@
+import React, { ReactElement } from 'react';
+import { Box, Grid } from '@material-ui/core';
+
+interface TabPanelProps {
+    children?: React.ReactNode;
+    dir?: string;
+    index: number;
+    value: number;
+}
+
+const TabPanel = ({ children, value, index, ...other }: TabPanelProps): ReactElement => {
+    return (
+        <Grid
+            item
+            role="tabpanel"
+            hidden={value !== index}
+            id={`full-width-tabpanel-${index}`}
+            aria-labelledby={`full-width-tab-${index}`}
+            {...other}
+        >
+            {value === index && <Box p={3}>{children}</Box>}
+        </Grid>
+    );
+};
+
+export default TabPanel;

client/src/themes/theme.tsx

@@ -6,6 +6,11 @@ const theme = createMuiTheme({
         primary: grey,
         secondary: deepPurple
     },
+    typography: {
+        body1: {
+            fontWeight: 600
+        }
+    },
     props: {
         MuiTypography: {
             variantMapping: {

client/src/views/App/App.tsx

@@ -1,14 +1,15 @@
-import React, { FC } from 'react';
+import React, { ReactElement } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { About } from '../../components/About';
 import { Home } from '../../components/Home';
 import { TopNavBar } from '../../components/NavBars/TopNavBar';
 import { BottomNavBar } from '../../components/NavBars/BottomNavBar';
 import NotFound from '../../components/NotFound';
+import ProfileComponent from '../ProfileComponent';
 import Login from '../Login/Login';
 import Register from '../Register/Register';
 
-const App = () => {
+const App = (): ReactElement => {
     return (
         <div>
             <header>
@@ -18,6 +19,7 @@ const App = () => {
                     <Switch>
                         <Route exact path="/about" component={About} />
                         <Route exact path="/" component={Home} />
+                        <Route exact path="/profil" component={ProfileComponent} />
                         <Route exact path="/register" component={Register} />
                         <Route exact path="/login" component={Login} />
                         <Route component={NotFound} />

client/src/views/ProfileComponent.tsx

@@ -0,0 +1,36 @@
+import React, { ReactElement, useState } from 'react';
+import TabPanel from '../components/Tabs/TabPanel';
+import { Tabs, Tab } from '@material-ui/core';
+import SettingsIcon from '@material-ui/icons/Settings';
+import LocalLibraryIcon from '@material-ui/icons/LocalLibrary';
+import SettingsComponent from '../components/ProfileComponent/SettingsComponent';
+
+const ProfileComponent = (): ReactElement => {
+    const [value, setValue] = useState(0);
+    const handleChange = (event: React.SyntheticEvent<EventTarget>, value: number) => {
+        setValue(value);
+    };
+    return (
+        <>
+            (
+            <Tabs
+                value={value}
+                onChange={handleChange}
+                variant="fullWidth"
+                indicatorColor="secondary"
+                textColor="secondary"
+            >
+                <Tab icon={<LocalLibraryIcon />} label={'Statystyki'} value={0} />
+                <Tab icon={<SettingsIcon />} label={'Ustawienia'} value={1} />
+            </Tabs>
+            <TabPanel value={value} index={0}>
+                Treść dla statystyk
+            </TabPanel>
+            <TabPanel value={value} index={1}>
+                <SettingsComponent />
+            </TabPanel>
+            )
+        </>
+    );
+};
+export default ProfileComponent;

client/tsconfig.json

@@ -1,30 +1,22 @@
 {
-  "compilerOptions": {
-    "types": [
-      "@emotion/react"
-    ],
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react"
-  },
-  "include": [
-    "src"
-  ]
+    "compilerOptions": {
+        "types": ["@emotion/react"],
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "es6"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react"
+    },
+    "include": ["src"]
 }