Merge pull request #4 from LinumLabs/feature/rr/FAIR-85

Feature/rr/fair 85

components/Button/index.tsx

@@ -1,15 +1,33 @@
-import { ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 // import ChevronDown from 'assets/icons/chevron-down.svg';
 
+type ButtonTypes = 'button' | 'submit' | 'reset';
+
 type Props = {
+  type?: ButtonTypes;
   children: ReactNode;
+  symbol?: FunctionComponent;
+  className?: string;
 };
 
-const Button = ({ children }: Props) => {
+const Button = ({
+  children,
+  className = '',
+  type = 'button',
+  symbol: Symbol,
+}: Props) => {
   return (
-    <button className="w-44 text-xs flex items-center justify-between text-purple bg-white rounded-md px-2.5 py-2.5 text-left">
+    <button
+      type={type}
+      className={[
+        className,
+        'bg-blue border-blue border-2 rounded-lg',
+        'py-2.5 px-4 flex items-center justify-between text-purple',
+        'text-left hover:bg-indigo-100 focus:bg-indigo-200',
+      ].join(' ')}
+    >
       <span>{children}</span>
-      {/* <ChevronDown className="float-right mr-1" /> */}
+      {Symbol && <Symbol />}
     </button>
   );
 };

components/Layout/index.tsx

@@ -1,17 +1,32 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
+import Router from 'next/router';
 import Topbar from 'components/Topbar';
 import Sidebar from 'components/Sidebar';
+import useUser from 'hooks/useUser';
+import useApp from 'hooks/useApp';
 
 type Props = {
   children: ReactNode;
 };
 
 const Layout = ({ children }: Props) => {
+  const { isAuthenticated } = useUser();
+  const { sidebarVisible, setSidebarVisible } = useApp();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setSidebarVisible(false);
+      Router.push('/login');
+    }
+  }, [isAuthenticated, setSidebarVisible]);
+
   return (
     <section className="relative w-full min-h-screen">
       <Topbar />
-      <main className="pl-64 pt-20">{children}</main>
-      <Sidebar />
+      <main className={`${sidebarVisible ? 'pl-64' : ''} pt-20 px-8`}>
+        {children}
+      </main>
+      {sidebarVisible && <Sidebar />}
     </section>
   );
 };

components/TextInput/index.tsx

@@ -0,0 +1,22 @@
+type InputTypes = 'text' | 'password';
+
+type Props = {
+  type?: InputTypes;
+  label?: string;
+  placeholder?: string;
+};
+
+const TextInput = ({ type = 'text', label, placeholder }: Props) => {
+  return (
+    <div className="mb-8">
+      {!!label && <label className="block mb-3">{label}</label>}
+      <input
+        type={type}
+        placeholder={placeholder}
+        className="text-purple border-blue border-2 rounded-lg py-2.5 px-4 w-full md:w-1/3"
+      />
+    </div>
+  );
+};
+
+export default TextInput;

components/Title/Title.module.scss

@@ -0,0 +1,15 @@
+@import 'styles/theme';
+
+.root {
+  @apply inline-block;
+  @apply font-semibold;
+  @apply text-2xl;
+  @apply my-6;
+
+  &:after {
+    content: '';
+    width: 70%;
+    border-bottom: 1px solid $color-purple;
+    @apply inline-block;
+  }
+}

components/Title/index.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import classes from './Title.module.scss';
+
+type Props = {
+  children: ReactNode;
+};
+
+const Title = ({ children }: Props) => {
+  return <h1 className={`${classes.root} text-purple`}>{children}</h1>;
+};
+
+export default Title;

components/Topbar/index.tsx

@@ -5,8 +5,11 @@ import SearchBar from 'components/SearchBar';
 import Logo from 'assets/logo.svg';
 import UserIcon from 'assets/icons/user.svg';
 import DappIcon from 'assets/icons/dapp.svg';
+import useUser from 'hooks/useUser';
 
 const Topbar = () => {
+  const { user, isAuthenticated } = useUser();
+
   return (
     <header
       className={`fixed flex top-0 left-0 right-0 z-10 h-20 bg-gray ${classes.root}`}
@@ -22,25 +25,30 @@ const Topbar = () => {
 
       <div className="flex-grow flex items-center justify-between">
         <div className="pl-2">
-          <Dropdown>FairOS (Server)</Dropdown>
+          {isAuthenticated && <Dropdown>FairOS (Server)</Dropdown>}
         </div>
 
         <div className="flex items-center mr-8">
-          <SearchBar />
+          {isAuthenticated && <SearchBar />}
 
           <Link href="/">
             <a>
               <DappIcon className="mx-3" />
             </a>
           </Link>
-          <Link href="/">
-            <a className="mx-3 text-purple">Activity</a>
-          </Link>
-          <Link href="/">
-            <a className="ml-3">
-              <UserIcon />
-            </a>
-          </Link>
+
+          {isAuthenticated && (
+            <>
+              <Link href="/">
+                <a className="mx-3 text-purple">Activity</a>
+              </Link>
+              <Link href="/logout">
+                <a className="ml-3">
+                  <UserIcon />
+                </a>
+              </Link>
+            </>
+          )}
         </div>
       </div>
     </header>

contexts/App.tsx

@@ -1,12 +1,10 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
 
-export type ContextProps = {
-  theme: string;
-  setTheme?: Dispatch<SetStateAction<string>>;
-};
+export interface ContextProps {
+  sidebarVisible: boolean;
+  setSidebarVisible: Dispatch<SetStateAction<boolean>>;
+}
 
-export const AppContext = createContext<ContextProps>({
-  theme: 'dark',
-});
+export const AppContext = createContext<ContextProps>({} as ContextProps);
 
 export default AppContext.Provider;

contexts/User.tsx

@@ -1,12 +1,18 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
 
-export type UserContextProps = {
-  user: any;
-  setUser?: Dispatch<SetStateAction<any>>;
+export type UserObject = {
+  username: string;
 };
 
-export const UserContext = createContext<UserContextProps>({
-  user: null,
-});
+export interface UserContextProps {
+  user: UserObject;
+  setUser: Dispatch<SetStateAction<UserObject>>;
+  logout: () => void;
+  isAuthenticated: boolean;
+}
+
+export const UserContext = createContext<UserContextProps>(
+  {} as UserContextProps
+);
 
 export default UserContext.Provider;

pages/_app.tsx

@@ -6,17 +6,26 @@ import AppProvider from 'contexts/App';
 import UserProvider from 'contexts/User';
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
-  const [theme, setTheme] = useState('dark');
+  const [sidebarVisible, setSidebarVisible] = useState(false);
   const [user, setUser] = useState(null);
 
+  const userProviderValue = {
+    user,
+    setUser,
+    isAuthenticated: !!user,
+    logout: () => {
+      setUser(null);
+    },
+  };
+
   return (
     <>
       <Head>
         <title>PhotoAlbum | Fairdrive Apps</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <AppProvider value={{ theme, setTheme }}>
-        <UserProvider value={{ user, setUser }}>
+      <AppProvider value={{ sidebarVisible, setSidebarVisible }}>
+        <UserProvider value={userProviderValue}>
           <Component {...pageProps} />
         </UserProvider>
       </AppProvider>

pages/index.tsx

@@ -1,15 +1,24 @@
 import type { NextPage } from 'next';
 import Layout from 'components/Layout';
 import useUser from 'hooks/useUser';
+import Router from 'next/router';
+import { useEffect } from 'react';
 
 const Home: NextPage = () => {
-  const { user } = useUser();
+  const { isAuthenticated } = useUser();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      Router.push('/login');
+    }
+  }, [isAuthenticated]);
 
   return (
-    <Layout>
-      <h1 className="text-center">Fairdrive</h1>
-      {!user && <h3 className="text-center">user loggeout</h3>}
-    </Layout>
+    isAuthenticated && (
+      <Layout>
+        <h1 className="text-center">Fairdrive</h1>
+      </Layout>
+    )
   );
 };
 

pages/login.tsx

@@ -0,0 +1,46 @@
+import type { NextPage } from 'next';
+import Layout from 'components/Layout';
+import Title from 'components/Title';
+import TextInput from 'components/TextInput';
+import Button from 'components/Button';
+import useUser from 'hooks/useUser';
+import Router from 'next/router';
+import { SyntheticEvent, useEffect } from 'react';
+import useApp from 'hooks/useApp';
+
+const Login: NextPage = () => {
+  const { setUser, isAuthenticated } = useUser();
+  const { setSidebarVisible } = useApp();
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      Router.push('/');
+    }
+  }, [isAuthenticated]);
+
+  const onSubmitHandler = (event: SyntheticEvent) => {
+    event.preventDefault();
+    console.log('onSubmitHandler');
+    setSidebarVisible(true);
+    setUser({
+      username: 'johndoe',
+    });
+    Router.push('/');
+  };
+
+  return (
+    <Layout>
+      <Title>Login page</Title>
+
+      <form onSubmit={onSubmitHandler}>
+        <TextInput placeholder="Username" />
+        <TextInput type="password" placeholder="Password" />
+        <Button type="submit" className="w-full md:w-1/3">
+          Login
+        </Button>
+      </form>
+    </Layout>
+  );
+};
+
+export default Login;

pages/logout.tsx

@@ -0,0 +1,21 @@
+import type { NextPage } from 'next';
+import Layout from 'components/Layout';
+import Title from 'components/Title';
+import useUser from 'hooks/useUser';
+import { useEffect } from 'react';
+
+const Login: NextPage = () => {
+  const { setUser } = useUser();
+
+  useEffect(() => {
+    setUser(null);
+  }, [setUser]);
+
+  return (
+    <Layout>
+      <Title>Logout page</Title>
+    </Layout>
+  );
+};
+
+export default Login;

styles/globals.scss

@@ -1,12 +1,9 @@
+@import './theme.scss';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --color-purple: #434d7e;
-  --color-gray: #e2e8f8;
-}
-
 html {
   font-size: 16px;
 }
@@ -18,13 +15,25 @@ body {
 }
 
 .text-purple {
-  color: var(--color-purple);
+  color: $color-purple;
 }
 
 .bg-purple {
-  background-color: var(--color-purple);
+  background-color: $color-purple;
+}
+
+.border-purple {
+  border-color: $color-purple;
 }
 
 .bg-gray {
-  background-color: var(--color-gray);
+  background-color: $color-gray;
+}
+
+.bg-blue {
+  background-color: $color-blue;
+}
+
+.border-blue {
+  border-color: $color-blue;
 }

styles/theme.scss

@@ -0,0 +1,3 @@
+$color-purple: #434d7e;
+$color-gray: #e2e8f8;
+$color-blue: #e2e8f8;