[#70] Nav bars (#79)

* added linter config files
* fixed styling (linter errors)
* removed redundant types

client/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

client/.eslintrc

@@ -0,0 +1,15 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint", "prettier"],
+
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+        "no-console": 1, // Means warning,
+        "prettier/prettier": "error"
+    }
+}

client/src/components/About.tsx

@@ -1,13 +1,12 @@
-import React, { FC, ReactElement } from 'react'
+import React, { FC, ReactElement } from 'react';
 import { NavLink } from 'react-router-dom';
 
 export const About: FC = (): ReactElement => {
-
-  console.log('about...')
-  return (
-    <div>
-      About meeeeee
-      <NavLink to="/">Go back to Home</NavLink>
-    </div>
-  );
-}
+    console.log('about...');
+    return (
+        <div>
+            About meeeeee
+            <NavLink to="/">Go back to Home</NavLink>
+        </div>
+    );
+};

client/src/components/FancyComponent/FancyComponent.tsx

@@ -3,15 +3,15 @@ import React from 'react';
 import StyledButton from './styles';
 
 const FancyComponent = () => {
-	return (
-		<React.Fragment>
-			<StyledButton test color="primary">
-				Click me!
-			</StyledButton>
-			<StyledButton color="secondary">Do not clik me!</StyledButton>
-			<Typography variant="h3">Custom header</Typography>
-		</React.Fragment>
-	);
+    return (
+        <React.Fragment>
+            <StyledButton test color="primary">
+                Click me!
+            </StyledButton>
+            <StyledButton color="secondary">Do not clik me!</StyledButton>
+            <Typography variant="h3">Custom header</Typography>
+        </React.Fragment>
+    );
 };
 
 export default FancyComponent;

client/src/components/FancyComponent/styles.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { Button } from '@material-ui/core';
 
 type StyledButtonProps = {
-	test?: boolean
+    test?: boolean;
 };
 
 const StyledButton = styled(Button)`

client/src/components/Home.tsx

@@ -1,9 +1,6 @@
-import { FC, ReactElement } from 'react'
+import { FC, ReactElement } from 'react';
 import WelcomeScreen from './WelcomeScreen/WelcomeScreen';
 
 export const Home: FC = (): ReactElement => {
-
-  return (
-    <WelcomeScreen />
-  )
-}
+    return <WelcomeScreen />;
+};

client/src/components/NavBars/BottomNavBar.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { FC, ReactElement } from 'react';
+import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
+import HomeIcon from '@material-ui/icons/Home';
+import AddCircleIcon from '@material-ui/icons/Add';
+import PersonIcon from '@material-ui/icons/Person';
+import MessageIcon from '@material-ui/icons/Message';
+import { Link } from 'react-router-dom';
+
+const StyledBottomNavigation = styled(BottomNavigation)`
+&& {
+    background-color: #f9f9f9;
+    bottom: 0;
+    position: fixed;
+    width: 100%;
+  },
+`;
+
+export const BottomNavBar = (): ReactElement => {
+    const [value, setValue] = React.useState(0);
+
+    return (
+        <StyledBottomNavigation
+            value={value}
+            onChange={(event, newValue) => {
+                setValue(newValue);
+            }}
+            showLabels
+        >
+            <BottomNavigationAction label="Start" icon={<HomeIcon />} component={Link} to="/" />
+            <BottomNavigationAction label="Stwórz" icon={<AddCircleIcon />} component={Link} to="/create" />
+            <BottomNavigationAction label="Czat" icon={<MessageIcon />} component={Link} to="/chat" />
+            <BottomNavigationAction label="Profil" icon={<PersonIcon />} component={Link} to="/profile" />
+        </StyledBottomNavigation>
+    );
+};

client/src/components/NavBars/TopNavBar.tsx

@@ -0,0 +1,28 @@
+import { FC, ReactElement } from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import { Search } from '../Search';
+import { StyledAppName } from '../../styles/StyledAppName';
+import styled from '@emotion/styled';
+
+export const StyledDiv = styled.div`
+    display: block;
+    flex-grow: 1;
+    padding-right: 2em;
+`;
+
+export const TopNavBar = (): ReactElement => {
+    return (
+        <AppBar position="sticky">
+            <Toolbar>
+                <StyledDiv>
+                    <StyledAppName>
+                        <span>Fisz</span>
+                        <span>QI</span>
+                    </StyledAppName>
+                </StyledDiv>
+                <Search />
+            </Toolbar>
+        </AppBar>
+    );
+};

client/src/components/NotFound.tsx

@@ -1,7 +1,7 @@
 export default function NotFound() {
-  return (
-      <div>
-        <h1>Sorry, can’t find that.</h1>
-      </div>
-  );
-}
+    return (
+        <div>
+            <h1>Sorry, can’t find that.</h1>
+        </div>
+    );
+}

client/src/components/Search.tsx

@@ -0,0 +1,63 @@
+import { ReactElement } from 'react';
+import SearchIcon from '@material-ui/icons/Search';
+import InputBase from '@material-ui/core/InputBase';
+import IconButton from '@material-ui/core/IconButton';
+import Paper from '@material-ui/core/Paper';
+import styled from '@emotion/styled';
+
+const StyledIconButton = styled(IconButton)`
+    padding: 0;
+`;
+const StyledIconButtonRoot = styled.span`
+    & .MuiIconButton-root {
+        padding: 6px;
+    }
+`;
+
+const StyledSearchIcon = styled(SearchIcon)`
+    color: #fff;
+    padding-right: -20px;
+`;
+
+const StyledInputBase = styled(InputBase)`
+    color: #fff;
+    border-radius: 7px;
+    padding-left: 1em;
+    & .MuiInputBase-input {
+        color: rgba(255, 255, 255, 0.9);
+    }
+`;
+
+const StyledPaper = styled(Paper)`
+    display: 'flex';
+    alignitems: 'center';
+    width: 400;
+`;
+
+const StyledMuiPaperRoot = styled.span`
+    & .MuiPaper-root {
+        background-color: rgba(255, 255, 255, 0.1);
+        :hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    }
+    display: flex;
+    justify-items: center;
+`;
+
+export const Search = (): ReactElement => {
+    return (
+        <div>
+            <StyledMuiPaperRoot>
+                <StyledPaper component="form" elevation={0}>
+                    <StyledInputBase placeholder="Szukaj..." />
+                    <StyledIconButtonRoot>
+                        <StyledIconButton type="submit" aria-label="search">
+                            <StyledSearchIcon />
+                        </StyledIconButton>
+                    </StyledIconButtonRoot>
+                </StyledPaper>
+            </StyledMuiPaperRoot>
+        </div>
+    );
+};

client/src/styles/StyledAppName.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const StyledAppName = styled.div`
+    font-family: righteous;
+    font-size: 2.5em;
+    & > span:first-of-type {
+        color: #ffffff;
+    }
+    & > span:last-of-type {
+        color: #606060;
+    }
+`;

client/src/themes/theme.tsx

@@ -2,26 +2,26 @@ import { createMuiTheme } from '@material-ui/core';
 import { grey, deepPurple } from '@material-ui/core/colors';
 
 const theme = createMuiTheme({
-	palette: {
-		primary: grey,
-		secondary: deepPurple
-	},
-	props: {
-		MuiTypography: {
-			variantMapping: {
-				h1: 'h2',
-				h2: 'h2',
-				h3: 'h3'
-			}
-		}
-	}
+    palette: {
+        primary: grey,
+        secondary: deepPurple
+    },
+    props: {
+        MuiTypography: {
+            variantMapping: {
+                h1: 'h2',
+                h2: 'h2',
+                h3: 'h3'
+            }
+        }
+    }
 });
 
 theme.typography.h3 = {
-	fontSize: '1.2rem',
-	'@media (min-width:600px)': {
-		fontSize: '1.5rem'
-	}
+    fontSize: '1.2rem',
+    '@media (min-width:600px)': {
+        fontSize: '1.5rem'
+    }
 };
 
 export default theme;

client/src/views/App/App.tsx

@@ -2,19 +2,24 @@ import React, { FC } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { About } from '../../components/About';
 import { Home } from '../../components/Home';
-import { NavBar } from '../../components/NavBar';
+import { TopNavBar } from '../../components/NavBars/TopNavBar';
+import { BottomNavBar } from '../../components/NavBars/BottomNavBar';
 import NotFound from '../../components/NotFound';
 
 export const App: FC = () => {
     return (
         <div>
             <header>
                 <BrowserRouter>
+                    <TopNavBar />
+
                     <Switch>
                         <Route exact path="/about" component={About} />
                         <Route exact path="/" component={Home} />
                         <Route component={NotFound} />
                     </Switch>
+
+                    <BottomNavBar />
                 </BrowserRouter>
             </header>
         </div>

server/src/routes/index.ts

@@ -20,7 +20,7 @@ const isAuthenticated = passport.authenticate('jwt', { session: false });
 
 const router = express.Router();
 
-const publicPath = path.join(__dirname, '../../client', '../../client/build', '../');
+const publicPath = path.join(__dirname, '../../../client/build');
 
 router.use('/api/register', register);
 
@@ -48,7 +48,7 @@ router.use('/api/search', isAuthenticated, search);
 router.use(serveStatic(publicPath));
 router.use('*', (req, res) => {
     // send `index.html` file from ./client
-    return res.sendFile(path.join(publicPath, '../../build/index.html'));
+    return res.sendFile(path.join(publicPath, './index.html'));
 });
 
 declare global {