🎨 - Fixed anti patern js-0108

package.json

@@ -13,6 +13,7 @@
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\" --config ./.prettierrc",
     "clean": "rimraf dist",
     "start": "parcel",
+    "dev": "parcel",
     "watch": "parcel watch",
     "build": "npm run clean && npm run format && parcel build",
     "serve": "npm run build && npm run start"

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 // Providers
 import AuthProvider from './Providers/AuthProvider';

src/Components/Burger.tsx

@@ -7,12 +7,14 @@ const Burger = ({ open, setOpen, ...props }) => {
         type='button'
         className={open ? 'menu opened' : 'menu'}
         onClick={() => setOpen(!open)}
-        aria-label={open ? 'Close Menu' : 'Open Menu'}>
+        aria-label={open ? 'Close Menu' : 'Open Menu'}
+      >
         <svg
           width='50'
           height='50'
           viewBox='0 0 100 100'
-          aria-label='burger-menu'>
+          aria-label='burger-menu'
+        >
           <path
             className='line line1'
             d='M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058'

src/Components/Navbar.tsx

@@ -112,7 +112,8 @@ const Navbar = () => {
       <nav>
         <ul
           aria-hidden={open ? 'false' : 'true'}
-          className={open ? 'nav-links open' : 'nav-links'}>
+          className={open ? 'nav-links open' : 'nav-links'}
+        >
           {Pages.map((page) => {
             if (hasPermission(page.reqAuthState)) {
               return (
@@ -124,7 +125,8 @@ const Navbar = () => {
                     }`}
                     aria-hidden={open ? 'false' : 'true'}
                     tabIndex={open ? 0 : -1}
-                    onClick={handleLinkClick}>
+                    onClick={handleLinkClick}
+                  >
                     {page.name}
                   </Link>
                 </li>
@@ -141,7 +143,8 @@ const Navbar = () => {
                       type='button'
                       aria-hidden={open ? 'false' : 'true'}
                       tabIndex={open ? 0 : -1}
-                      onClick={() => button.action(handleLinkClick)}>
+                      onClick={() => button.action(handleLinkClick)}
+                    >
                       {button.label}
                     </button>
                   </div>

src/Pages/Cards.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Cards as CardList, Card } from '../types/card';
+import { Card } from '../classes/Card';
+import { Cards as CardList } from '../classes/Cards';
 
 const Cards = () => {
   const [cardsList, setCardsList] = useState<Card[]>([]);

src/Pages/Home.tsx

@@ -13,17 +13,15 @@ const Home = () => {
           height: '40vh',
           width: '100%',
           textAlign: 'center',
-        }}
-      >
+        }}>
         <h1>&lt;/&gt; AvaRose</h1>
       </div>
       <section
         style={{
           margin: '0 auto',
           textAlign: 'center',
           maxWidth: '800px',
-        }}
-      >
+        }}>
         <h2>🎉 Welcome to my website 👋</h2>
         <p>
           My name is Avery and I am a College Student at{' '}

src/Pages/Settings.tsx

@@ -46,8 +46,7 @@ const Settings = () => {
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
-        }}
-      >
+        }}>
         <Avatar src={avatar} style={{ width: 100, height: 100 }} />
         <h4 style={{ textAlign: 'center', marginTop: '1rem' }}>
           {user?.displayName}
@@ -57,8 +56,7 @@ const Settings = () => {
           style={{
             textAlign: 'center',
             marginTop: '0.5rem',
-          }}
-        >
+          }}>
           {email}
         </h5>
         <div
@@ -68,17 +66,15 @@ const Settings = () => {
             alignItems: 'center',
             marginTop: '1rem',
             gap: '1rem',
-          }}
-        >
+          }}>
           <span>Reveal</span>
           <Switch bordered onChange={toggleShowEmail} checked={displayEmail} />
         </div>
         <Button
           onClick={() => {
             signOut(getAuth());
           }}
-          style={{ marginTop: '1rem' }}
-        >
+          style={{ marginTop: '1rem' }}>
           Sign Out
         </Button>
       </Container>
@@ -88,8 +84,7 @@ const Settings = () => {
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
-        }}
-      >
+        }}>
         {/* <FormControlLabel
           control={<Switch />}
           label='Dark Mode'
@@ -98,8 +93,7 @@ const Settings = () => {
         <h4
           style={{
             textAlign: 'center',
-          }}
-        >
+          }}>
           🚧 Under Construction 🚧
         </h4>
       </div>

src/classes/Card.ts

@@ -0,0 +1,13 @@
+import { ICard } from '../interfaces/Card';
+
+export class Card {
+  id: number;
+  name: string;
+  body: string;
+
+  constructor({ id, name, body }: ICard) {
+    this.id = id;
+    this.name = name;
+    this.body = body;
+  }
+}

src/types/card.ts → src/classes/Cards.ts

@@ -1,24 +1,6 @@
-export interface ICard {
-  id: number;
-  name: string;
-  body: string;
-}
-
-export interface ICardList {
-  cards: ICard[];
-}
-
-export class Card {
-  id: number;
-  name: string;
-  body: string;
-
-  constructor({ id, name, body }: ICard) {
-    this.id = id;
-    this.name = name;
-    this.body = body;
-  }
-}
+import { Card } from './Card';
+import { ICard } from '../interfaces/Card';
+import { ICardList } from '../interfaces/CardList';
 
 export class Cards {
   cards: Card[];

src/interfaces/Card.ts

@@ -0,0 +1,5 @@
+export interface ICard {
+  id: number;
+  name: string;
+  body: string;
+}

src/interfaces/CardList.ts

@@ -0,0 +1,5 @@
+import { ICard } from './Card';
+
+export interface ICardList {
+  cards: ICard[];
+}