building out some scss structure

client/src/App.scss

@@ -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;
-}

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 { SupabaseProvider, useSupabase } from './supabase/SupabaseContext'
-import './App.scss'
+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 />
+          <Navbar />
-          <Routes>
 
+          <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>

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>
 

client/src/components/Nav/Navbar.scss

@@ -1,4 +1,5 @@
 #navbar-section {
+    background-color: green;
     display: flex;
     align-items: baseline;
 }

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(

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>
     )

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 }

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;
-  }
-}

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;
+}

client/src/sass/components/_Card.scss

@@ -0,0 +1,3 @@
+.ui-card-component {
+    
+}

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;
+        }
+    }
+}

client/src/sass/components/_Page.scss

@@ -0,0 +1,5 @@
+.ui-page-component {
+    &.homepage {
+      background-color: purple;
+    }
+}

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 (

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