Merge branch 'frontend-devel' into devel

client/public/index.html

@@ -16,6 +16,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> 
     <title>ryoko | plan your projects like a journey</title>
 </head>
 

client/src/App.tsx

 
 import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import { isLoggedIn } from 'adapters/api';
+import ProtectedRoute from 'components/helpers/Rerouters/ProtectedRoute'; 
+import LoginRoute from 'components/helpers/Rerouters/LoginRoute'; 
 
 const Home = lazy(() => import('pages/Home'));
 const Login = lazy(() => import('pages/Login'));
 const Register = lazy(() => import('pages/Register'));
 const Tasks = lazy(() => import('pages/Tasks'));
-const Navigation = lazy(() => import('components/ui/Navigation'));
+const Projects = lazy(() => import('pages/Projects'));
+const Stats = lazy(() => import('pages/Stats'));
 
 export default function App() {
     return (
         <Router>
             <Suspense fallback={false}>
-                {isLoggedIn() && <Navigation />}
                 <Switch>
-                    {!isLoggedIn() && <Route path="/register" component={Register} />}
-                    {!isLoggedIn() && <Route exact path="/" component={Home} />}
-                    {!isLoggedIn() && <Route path="/" component={Login} />}
-                    <Route path="/" component={Tasks} />
+                    <ProtectedRoute path="/tasks" component={<Tasks />} />
+                    <ProtectedRoute path="/projects" component={<Projects />} />
+                    <ProtectedRoute path="/stats" component={<Stats />} />
+                    <LoginRoute path="/login" component={Login} />
+                    <LoginRoute path="/register" component={Register} />
+                    <Route path="/" component={Home} />
                 </Switch>
             </Suspense>
         </Router>

client/src/adapters/api.ts

-export const isLoggedIn = (): boolean => false;
+export const isLoggedIn = (): boolean => true;

client/src/components/helpers/Rerouters/LoginRoute.tsx

+import { ComponentType } from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { isLoggedIn } from 'adapters/api';
+
+interface Props {
+    path: string,
+    exact?: boolean,
+    component: ComponentType<any>
+}
+export default function ProtectedRoute({ path, exact, component }: Props) {
+    if (!isLoggedIn()) {
+        return (
+            <Route path={path} exact={exact} component={component} />
+        );
+    }
+    return (
+        <Redirect to="/tasks"/>
+    );
+}
\ No newline at end of file

client/src/components/helpers/Rerouters/ProtectedRoute.tsx

+
+import { Redirect, Route } from 'react-router-dom';
+import { isLoggedIn } from 'adapters/api';
+import Navigation from 'components/ui/Navigation';
+import Header from 'components/ui/Header';
+
+interface Props {
+    path: string,
+    exact?: boolean,
+    component: JSX.Element
+}
+
+
+export default function ProtectedRoute({ path, exact, component }: Props) {
+    console.log(component);
+
+
+    if (isLoggedIn()) {
+        return (
+            <Route path={path} exact={exact} render={() =>
+                <>
+                    <Header />
+                    <Navigation />
+                    { component }
+                </>
+            } />
+        );
+    }
+    return (
+        <Redirect to="/login" />
+    );
+}
\ No newline at end of file

client/src/components/ui/Header/header.scss

+.site-header {
+    display: flex;
+    justify-content: space-between;
+    img {
+        padding: 35px;
+    }
+}
\ No newline at end of file

client/src/components/ui/Header/index.tsx

+import './header.scss';
+import hamburger from 'images/svg/hamburger.svg';
+import profile from 'images/svg/profile.svg';
+
+export default function Header() {
+   return (
+       <header className="site-header">
+           <img src={hamburger} alt="Navigation"/>
+           <img src={profile} alt="Profile"/>
+       </header>
+   );
+}
\ No newline at end of file

client/src/components/ui/Navigation/index.tsx

+import { NavLink } from 'react-router-dom';
+
 import './navigation.scss';
+import background from 'images/svg/nav-bg.svg';
+
 
 export default function Navigation() {
     return (
-        <main>
-            <h1>Navigation</h1>
-        </main>
+        <nav className="site-nav">
+            <NavLink to="/tasks" activeClassName="active" className="nav-link">
+                <span className="icon material-icons-outlined">
+                    home
+                </span>
+                <span className="label">Home</span>
+            </NavLink>
+            <NavLink to="/projects" activeClassName="active" className="nav-link">
+                <span className="icon material-icons-outlined">
+                    public
+                </span>
+                <span className="label">Projects</span>
+            </NavLink>
+            <NavLink to="/stats" activeClassName="active" className="nav-link">
+                <span className="icon material-icons-outlined">
+                    public
+                </span>
+                <span className="label">Stats</span>
+            </NavLink>
+            <img src={background} alt="Background" className="background" />
+        </nav>
     );
 }
\ No newline at end of file

client/src/components/ui/Navigation/navigation.scss

+@use 'styles/settings.scss'as s;
+
+.site-nav {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .background {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        max-width: 100%;
+        height: auto;
+        z-index: -1;
+    }
+
+    .nav-link {
+        color: s.$body-color;
+        position: relative;
+        padding: 10px 30px;
+        display: flex;
+
+        .icon {
+            font-size: 24px;
+            line-height: 1;
+        }
+
+        .label {
+            position: absolute;
+            opacity: 0;
+            font-size: 12px;
+            top: 50%;
+            left: 60px;
+            transform: translateY(-50%);
+            z-index: -1;
+        }
+
+        &.active {
+            padding-right: 60px;
+            .icon {
+                font-family: 'Material Icons';
+            }
+
+            .label {
+                opacity: 1;
+            }
+        }
+    }
+}
\ No newline at end of file

client/src/images/svg/hamburger.svg

+<svg width="31" height="24" viewBox="0 0 31 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="31" height="4" rx="2" fill="#3A5255"/>
+<rect y="10" width="24" height="4" rx="2" fill="#3A5255"/>
+<rect y="20" width="12" height="4" rx="2" fill="#3A5255"/>
+</svg>

client/src/images/svg/nav-bg.svg

+<svg width="411" height="78" viewBox="0 0 411 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_b)">
+<path d="M208.5 1.00001C35.5 -4.4826 -0.5 25.5 -0.5 25.5V77.5H411V27C411 27 381.5 6.48262 208.5 1.00001Z" fill="white"/>
+</g>
+</svg>

client/src/images/svg/profile.svg

+<svg width="21" height="25" viewBox="0 0 21 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" width="15" height="15" rx="7.5" fill="#3A5255"/>
+<rect y="18" width="21" height="7" rx="3.5" fill="#3A5255"/>
+</svg>

client/src/index.scss

@@ -46,7 +46,7 @@ a {
     max-width: 1280px;
     width: 100%;
     margin: 0 auto;
-    padding: 20px;
+    padding: 30px;
 }
 
 h1, h2, h3, h4, h5, h6 {

client/src/pages/Projects/index.tsx

+
+import Navigation from 'components/ui/Navigation';
+import './projects.scss';
+
+export default function Tasks() {
+    return (
+        <div className="projects-page">
+            <Navigation />
+            <main>
+                <h1>Projects</h1>
+            </main>
+        </div>
+    );
+}
\ No newline at end of file

client/src/pages/Register/register.scss

+

client/src/pages/Stats/index.tsx

+
+import Navigation from 'components/ui/Navigation';
+import './stats.scss';
+
+export default function Tasks() {
+    return (
+        <div className="stats-page">
+            <Navigation />
+            <main>
+                <h1>Stats</h1>
+            </main>
+        </div>
+    );
+}
\ No newline at end of file

client/src/pages/Tasks/index.tsx

@@ -2,8 +2,13 @@ import './tasks.scss';
 
 export default function Tasks() {
     return (
-        <main>
-            <h1>Tasks</h1>
-        </main>
+        <>
+            <div className="tasks-page page-container">
+                <main className="content-container">
+                    <h1>Tasks</h1>
+                    <p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p>
+                </main>
+            </div>
+        </>
     );
 }
\ No newline at end of file