From bbb2973a12ce1d394ba14e4c6de633dbd182efff Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sat, 8 Oct 2022 15:47:00 -0500
Subject: [PATCH] building out some scss structure

---
 client/src/App.scss                           | 41 -------------------
 client/src/App.tsx                            | 11 +++--
 client/src/components/Home.tsx                |  2 +-
 client/src/components/Nav/Navbar.scss         |  1 +
 client/src/components/Product/AllProducts.tsx |  4 ++
 client/src/components/_ui/Card/Card.tsx       |  6 +--
 client/src/components/_ui/Page/Page.tsx       |  4 +-
 client/src/index.scss                         | 26 ------------
 client/src/sass/App.scss                      |  9 ++++
 .../components/_Button.scss}                  |  0
 client/src/sass/components/_Card.scss         |  3 ++
 client/src/sass/components/_Gallery.scss      | 18 ++++++++
 client/src/sass/components/_Page.scss         |  5 +++
 .../Card.scss => sass/helpers/__queries.scss} |  0
 .../helpers/__variables.scss}                 |  0
 .../Page.scss => sass/helpers/_mixins.scss}   |  0
 client/src/supabase/SupabaseContext.tsx       |  4 +-
 client/src/util/types.ts                      | 12 ++++--
 18 files changed, 62 insertions(+), 84 deletions(-)
 delete mode 100644 client/src/App.scss
 create mode 100644 client/src/sass/App.scss
 rename client/src/{components/_ui/Button/Button.scss => sass/components/_Button.scss} (100%)
 create mode 100644 client/src/sass/components/_Card.scss
 create mode 100644 client/src/sass/components/_Gallery.scss
 create mode 100644 client/src/sass/components/_Page.scss
 rename client/src/{components/_ui/Card/Card.scss => sass/helpers/__queries.scss} (100%)
 rename client/src/{components/_ui/Gallery/Gallery.scss => sass/helpers/__variables.scss} (100%)
 rename client/src/{components/_ui/Page/Page.scss => sass/helpers/_mixins.scss} (100%)

diff --git a/client/src/App.scss b/client/src/App.scss
deleted file mode 100644
index 2c5e2ef..0000000
--- a/client/src/App.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 425011a..d7e9a18 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -15,8 +15,8 @@ import OrderHistory from './components/Order/OrderHistory'
 import OrderRecord from './components/Order/OrderRecord'
 
 // util
-import { SupabaseProvider, getSupabaseClient, useSupabase } from './supabase/SupabaseContext'
-import './App.scss'
+import { SupabaseProvider, useSupabase } from './supabase/SupabaseContext'
+import './sass/App.scss'
 
 export default function App() {
   const supabase = useSupabase();
@@ -26,12 +26,12 @@ export default function App() {
   }, [supabase])
 
   return (
-    <SupabaseProvider value={getSupabaseClient()}>
+    <SupabaseProvider value={supabase}>
       <BrowserRouter>
         <div className="App">
-        <Navbar />
-          <Routes>
+          <Navbar />
 
+          <Routes>
             {/* Top level home page */}
             <Route path="/" element={<Home />} />
 
@@ -51,7 +51,6 @@ export default function App() {
             {/* Order data */}
             <Route path="/orders" element={<OrderHistory />} />
             <Route path="/orders/:orderId" element={<OrderRecord />} />
-
           </Routes>
         </div>
       </BrowserRouter>
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index aecdbb8..4bcc83c 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -6,7 +6,7 @@ export default function Home() {
     const navigate = useNavigate();
 
     return (
-        <Page>
+        <Page additionalClasses="homepage">
             <h1>The finest spice shop on the internet.</h1>
             <p>Or at the very least, what their website could look like.</p>
 
diff --git a/client/src/components/Nav/Navbar.scss b/client/src/components/Nav/Navbar.scss
index 5bf3555..eca2898 100644
--- a/client/src/components/Nav/Navbar.scss
+++ b/client/src/components/Nav/Navbar.scss
@@ -1,4 +1,5 @@
 #navbar-section {
+    background-color: green;
     display: flex;
     align-items: baseline;
 }
\ No newline at end of file
diff --git a/client/src/components/Product/AllProducts.tsx b/client/src/components/Product/AllProducts.tsx
index 319ece4..42b3c4f 100644
--- a/client/src/components/Product/AllProducts.tsx
+++ b/client/src/components/Product/AllProducts.tsx
@@ -15,6 +15,10 @@ export default function AllProducts() {
         .then(res => res.json())
         .then(res => setProductData(res));
     }, [])
+    
+    useEffect(() => {
+        console.log(productData);
+    }, [productData])
 
     useEffect(() => {
         setView(
diff --git a/client/src/components/_ui/Card/Card.tsx b/client/src/components/_ui/Card/Card.tsx
index 0382765..04b4a34 100644
--- a/client/src/components/_ui/Card/Card.tsx
+++ b/client/src/components/_ui/Card/Card.tsx
@@ -1,8 +1,8 @@
-import { UICompWithChildren } from "../../../util/types"
+import { UICardType } from "../../../util/types"
 
-const Card: UICompWithChildren = ({ children, additionalClasses = "" }) => {
+const Card: UICardType = ({ children, additionalClasses = "", width = 45 }) => {
     return (
-        <section className={`ui-card-component ${additionalClasses}`}>
+        <section className={`ui-card-component ${additionalClasses} width-${width}`}>
             { children }
         </section>
     )
diff --git a/client/src/components/_ui/Page/Page.tsx b/client/src/components/_ui/Page/Page.tsx
index 8329449..d66abca 100644
--- a/client/src/components/_ui/Page/Page.tsx
+++ b/client/src/components/_ui/Page/Page.tsx
@@ -1,6 +1,6 @@
-import { UICompWithChildren } from "../../../util/types";
+import { UIPageType } from "../../../util/types";
 
-const Page: UICompWithChildren = ({ children, additionalClasses = "" }) => {
+const Page: UIPageType = ({ children, additionalClasses = "" }) => {
     return (
         <section className={`ui-page-component ${additionalClasses}`}>
             { children }
diff --git a/client/src/index.scss b/client/src/index.scss
index 917888c..16c3987 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -24,19 +24,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
 button {
   border-radius: 8px;
   border: 1px solid transparent;
@@ -55,16 +42,3 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/client/src/sass/App.scss b/client/src/sass/App.scss
new file mode 100644
index 0000000..db56f7f
--- /dev/null
+++ b/client/src/sass/App.scss
@@ -0,0 +1,9 @@
+@import "./components/Page";
+@import "./components/Gallery";
+
+#root {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/client/src/components/_ui/Button/Button.scss b/client/src/sass/components/_Button.scss
similarity index 100%
rename from client/src/components/_ui/Button/Button.scss
rename to client/src/sass/components/_Button.scss
diff --git a/client/src/sass/components/_Card.scss b/client/src/sass/components/_Card.scss
new file mode 100644
index 0000000..b9a0044
--- /dev/null
+++ b/client/src/sass/components/_Card.scss
@@ -0,0 +1,3 @@
+.ui-card-component {
+    
+}
\ No newline at end of file
diff --git a/client/src/sass/components/_Gallery.scss b/client/src/sass/components/_Gallery.scss
new file mode 100644
index 0000000..8948858
--- /dev/null
+++ b/client/src/sass/components/_Gallery.scss
@@ -0,0 +1,18 @@
+.ui-gallery-component {
+    background-color: red;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem 0;
+    
+    &.product-card-list {
+        .ui-card-component {
+            width: 30%;
+            margin: 1rem;
+            padding: 1rem 0;
+            color: black;
+            background-color: white;
+        }
+    }
+}
\ No newline at end of file
diff --git a/client/src/sass/components/_Page.scss b/client/src/sass/components/_Page.scss
new file mode 100644
index 0000000..8a6ead3
--- /dev/null
+++ b/client/src/sass/components/_Page.scss
@@ -0,0 +1,5 @@
+.ui-page-component {
+    &.homepage {
+      background-color: purple;
+    }
+}
\ No newline at end of file
diff --git a/client/src/components/_ui/Card/Card.scss b/client/src/sass/helpers/__queries.scss
similarity index 100%
rename from client/src/components/_ui/Card/Card.scss
rename to client/src/sass/helpers/__queries.scss
diff --git a/client/src/components/_ui/Gallery/Gallery.scss b/client/src/sass/helpers/__variables.scss
similarity index 100%
rename from client/src/components/_ui/Gallery/Gallery.scss
rename to client/src/sass/helpers/__variables.scss
diff --git a/client/src/components/_ui/Page/Page.scss b/client/src/sass/helpers/_mixins.scss
similarity index 100%
rename from client/src/components/_ui/Page/Page.scss
rename to client/src/sass/helpers/_mixins.scss
diff --git a/client/src/supabase/SupabaseContext.tsx b/client/src/supabase/SupabaseContext.tsx
index c385ba5..4236a57 100644
--- a/client/src/supabase/SupabaseContext.tsx
+++ b/client/src/supabase/SupabaseContext.tsx
@@ -1,11 +1,11 @@
 import { createContext, FC, ReactNode, useContext } from "react";
 import { createClient, SupabaseClient } from "@supabase/supabase-js";
 
-export const getSupabaseClient = () => {
+const getSupabaseClient = () => {
     return createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY);
 }
 
-const SupabaseContext = createContext<SupabaseClient | undefined>(getSupabaseClient());
+const SupabaseContext = createContext<SupabaseClient>(getSupabaseClient());
 
 export const SupabaseProvider: FC<{children: ReactNode, value: SupabaseClient}> = ({ children }) => {
     return (
diff --git a/client/src/util/types.ts b/client/src/util/types.ts
index 1c99676..5f98de0 100644
--- a/client/src/util/types.ts
+++ b/client/src/util/types.ts
@@ -4,8 +4,9 @@ import { FC, ReactNode } from "react";
 export type AuthFormType = FC<{ format: string }>
 export type ProductCardType = FC<{ data: ProductModel }>
 export type UIButtonType = FC<UIButtonParams>
-export type UICompWithChildren = FC<UICompChildrenParams>
+export type UICardType = FC<UICardParams>
 export type UIGalleryType = FC<UIGalleryParams>
+export type UIPageType = FC<UIPageParams>
 
 // definitions for component params
 interface UIParams {
@@ -17,7 +18,12 @@ interface UIButtonParams extends UIParams {
     children?: string
 }
 
-interface UICompChildrenParams extends UIParams { children: ReactNode }
+interface UIPageParams extends UIParams { children: ReactNode }
+
+interface UICardParams extends UIParams {
+    children: ReactNode
+    width?: number
+}
 
 interface UIGalleryParams extends UIParams {
     children: ReactNode
@@ -26,7 +32,7 @@ interface UIGalleryParams extends UIParams {
 
 // data models
 
-export interface ProductModel {
+export interface ProductModel extends UICardParams {
     id: number
     name: string
     description: string