Merge branch 'master' of https://github.com/innocuous-symmetry/e-commerce

changed script to iniitialize database

client/src/components/Auth/AuthForm.tsx

@@ -6,6 +6,7 @@ import { loginHTML, registerHTML } from "./authExtraText";
 import { useState } from "react";
 import Button from "../_ui/Button/Button";
 import Page from "../_ui/Page/Page";
+import Card from "../_ui/Card/Card";
 
 const AuthForm: AuthFormType = ({ format }) => {
     const [input, setInput] = useState<FormInput>({ email: "", password: "" });
@@ -15,20 +16,23 @@ const AuthForm: AuthFormType = ({ format }) => {
     const formHTML = format == "login" ? loginHTML : registerHTML;
 
     return (
-        <Page>
+        <Page additionalClasses="turmeric">
-            <h1>{formText}</h1>
+            <Card additionalClasses="papyrus">
-            {formHTML}
+                {formHTML}
+            </Card>
 
-            <form className="auth-form">
+            <Card additionalClasses="papyrus">
-                <div className="form-row">
+                <form className="auth-form">
-                    <label htmlFor="auth-form-email">Email:</label>
+                    <div className="form-row">
-                    <input id="auth-form-email" required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
+                        <label htmlFor="auth-form-email">Email:</label>
-                </div>
+                        <input autoComplete="email" id="auth-form-email" required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
-                <div className="form-row">
+                    </div>
-                    <label htmlFor="auth-form-password">Password:</label>
+                    <div className="form-row">
-                    <input id="auth-form-password" required type="password" onChange={(e) => setInput({...input, password: e.target.value})} />
+                        <label htmlFor="auth-form-password">Password:</label>
-                </div>
+                        <input autoComplete="password" id="auth-form-password" required type="password" onChange={(e) => setInput({...input, password: e.target.value})} />
-            </form>
+                    </div>
+                </form>
+            </Card>
 
             <div className="auth-actions">
                 <Button onClick={formFunction}>{formText}</Button>

client/src/components/Auth/authExtraText.tsx

@@ -1,6 +1,6 @@
 export const loginHTML = (
     <>
-    <h2>Welcome back!</h2>
+    <h1>Welcome back!</h1>
     <p>It's great to see you again.</p>
     <p>Please enter your credentials below to login:</p>
     </>
@@ -8,8 +8,8 @@ export const loginHTML = (
 
 export const registerHTML = (
     <>
-    <h2>Hi there!</h2>
+    <h1>Hi there!</h1>
     <p>Thank you so much for your interest in the site!</p>
-    <p>Please use the form below to register.</p>
+    <p>Please use the form below to register:</p>
     </>
 )

client/src/components/Content/Philosophy.tsx

@@ -1,12 +1,20 @@
+import Card from "../_ui/Card/Card";
 import Page from "../_ui/Page/Page";
 
 export default function Philosophy() {
     return (
         <Page>
             <h1>The Express Spices Philosophy</h1>
+            <p>
+                Things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.<br/>
+                Furthermore, things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.
+            </p>
 
-            <p>Things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.</p>
+            <Card additionalClasses="medium short thyme" />
-            <p>Furthermore, things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.</p>
+
+            <p>
+                We care a lot about things and stuff at Express Spice Market. If you're ever concerned about our things and stuff we will do what we can to alleviate your concerns.
+            </p>
         </Page>
     )
 }

client/src/components/Home.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom"
 import Button from "./_ui/Button/Button";
+import Card from "./_ui/Card/Card";
 import Page from "./_ui/Page/Page";
 
 export default function Home() {
@@ -7,14 +8,21 @@ export default function Home() {
 
     return (
         <Page additionalClasses="homepage">
-            <h1>The finest spice shop on the internet.</h1>
+            <Card additionalClasses="welcome-section coffee bigtext">
-            <p>Or at the very least, what their website could look like.</p>
+                <h1>The finest spice shop on the internet.</h1>
+                <p>Or at the very least, what their website could look like.</p>
+            </Card>
 
-            <div className="button-row">
+            <Card additionalClasses="med-short-h med-short-len thyme" />
-                <Button onClick={() => navigate('/products')}>View our Products</Button>
+
-                <Button onClick={() => navigate('/philosophy')}>Our Philosophy</Button>
+            <Card additionalClasses="long coffee">
-                <Button onClick={() => navigate('/contact')}>Contact Us</Button>
+                <p>Our mission: to deliver quality herbs and spices.<br/>See our offerings and learn more about us below:</p>
-            </div>
+                <div className="button-row">
+                    <Button onClick={() => navigate('/products')}>View our Products</Button>
+                    <Button onClick={() => navigate('/philosophy')}>Our Philosophy</Button>
+                    <Button onClick={() => navigate('/contact')}>Contact Us</Button>
+                </div>
+            </Card>
         </Page>
     )
 }

client/src/components/Nav/Navbar.scss

@@ -1,5 +1,22 @@
+@import "../../sass/helpers/variables";
+
 #navbar-section {
-    background-color: green;
+    background-color: $coffee;
     display: flex;
     align-items: baseline;
+    justify-content: space-between;
+
+    a {
+        margin: 0 0 0 1rem;
+        color: $nutmeg;
+    }
+
+    .user-data {
+        display: flex;
+        width: 50%;
+        justify-content: flex-end;
+        .ui-button-component {
+            margin: 0 6px;
+        }
+    }
 }

client/src/components/Nav/Navbar.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSupabase } from "../../supabase/SupabaseContext"
+import Button from "../_ui/Button/Button";
 import "./Navbar.scss";
 
 export default function Navbar() {
@@ -24,15 +25,15 @@ export default function Navbar() {
                         user?.email && (
                             <>
                             <p>{user.email}</p>
-                            <button onClick={() => navigate('/my-profile')}>View Profile</button>
+                            <Button onClick={() => navigate('/my-profile')}>View Profile</Button>
                             </>
                         )
                     }
                     {
-                        user ? <button onClick={handleLogout}>Log Out</button> : (
+                        user ? <Button onClick={handleLogout}>Log Out</Button> : (
                             <>
-                            <button onClick={() => navigate('/login')}>Log In</button>
+                            <Button onClick={() => navigate('/login')}>Log In</Button>
-                            <button onClick={() => navigate('/register')}>Register</button>
+                            <Button onClick={() => navigate('/register')}>Register</Button>
                             </>
                         )
                     }

client/src/components/Product/AllProducts.tsx

@@ -9,7 +9,7 @@ import ProductCard from "./ProductCard";
 
 export default function AllProducts() {
     const [productData, setProductData] = useState<ProductModel[]>();
-    const [view, setView] = useState<JSX.Element>(<h1>Loading...</h1>);
+    const [view, setView] = useState<JSX.Element>(<Page additionalClasses="products-page"><h1>Loading...</h1></Page>);
 
     useEffect(() => {
         getAllProducts()
@@ -23,10 +23,10 @@ export default function AllProducts() {
 
     useEffect(() => {
         setView(
-            <Page>
+            <Page additionalClasses="products-page">
                 <h1>Product Catalog</h1>
                 
-                <Card additionalClasses="all-products-filter">
+                <Card additionalClasses="all-products-filter med-short-len">
                     <div>
                         <p>Filter results by:</p>
                         <select>

client/src/components/User/SettingsWidgets/UpdateUserInfo.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import Button from "../../_ui/Button/Button";
+import Card from "../../_ui/Card/Card"
+
+const UpdateUserInfo = () => {
+    const [input, setInput] = useState({first: "", last: ""});
+
+    const handleUpdate = () => {
+        if (!input.first || !input.last) return;
+        
+    }
+
+    return (
+        <Card>
+            <h1>Update User Information</h1>
+
+            <form>
+                <div>
+                    <label htmlFor="first-name">First Name: </label>
+                    <input onChange={(e) => setInput({...input, first: e.target.value})} type="text" autoComplete="First Name"></input>
+                </div>
+
+                <div>
+                    <label htmlFor="last-name">Last Name: </label>
+                    <input onChange={(e) => setInput({...input, last: e.target.value})} type="text" autoComplete="Last Name"></input>
+                </div>
+            </form>
+
+            <Button onClick={handleUpdate}>Update</Button>
+        </Card>
+    )
+}
+
+export default UpdateUserInfo;

client/src/components/User/UserProfile.tsx

@@ -16,7 +16,7 @@ export default function UserProfile() {
             <div className="user-profile-options">
                 <Button onClick={() => navigate('/cart')}>View my Cart</Button>
                 <Button onClick={() => navigate('/orders')}>View my Order History</Button>
-                <Button onClick={() => {}}>Manage Account Settings</Button>
+                <Button onClick={() => navigate('/user-settings')}>Manage Account Settings</Button>
             </div>
         </Page>
     )

client/src/components/User/UserSettings.tsx

@@ -1,3 +1,18 @@
+import { useEffect, useState } from "react";
+import { useSupabase } from "../../supabase/SupabaseContext"
+import Page from "../_ui/Page/Page";
+import UpdateUserInfo from "./SettingsWidgets/UpdateUserInfo";
+
 export default function UserSettings() {
-    return <h1>User Settings!</h1>
+    const supabase = useSupabase();
+    const [activeSections, setActiveSections] = useState({
+        userInfo: false
+    });
+
+    return (
+        <Page>
+            <h1>User Settings!</h1>
+            { activeSections.userInfo && <UpdateUserInfo /> }
+        </Page>
+    )
 }

client/src/components/_ui/Card/Card.tsx

@@ -1,8 +1,8 @@
 import { UICardType } from "../../../util/types"
 
-const Card: UICardType = ({ children, additionalClasses = "", width = 45 }) => {
+const Card: UICardType = ({ children = <></>, additionalClasses = "" }) => {
     return (
-        <section className={`ui-card-component ${additionalClasses} width-${width}`}>
+        <section className={`ui-card-component ${additionalClasses}`}>
             { children }
         </section>
     )

client/src/sass/App.scss

@@ -1,5 +1,7 @@
-@import "./components/Page";
+@import "./components/Button";
+@import "./components/Card";
 @import "./components/Gallery";
+@import "./components/Page";
 
 #root {
   margin: 0;

client/src/sass/components/_Card.scss

@@ -1,3 +1,61 @@
+@import "../helpers/variables";
+@import "../helpers/placeholders";
+
 .ui-card-component {
-    
+    background-color: gray;
+    display: block;
+    height: auto;
+    width: auto;
+    border-radius: 18px;
+    padding: 1rem;
+    margin: 2rem;
+
+    @extend %background-colors;
+
+    &.long {
+        width: 75vw;
+    }
+
+    &.medheight {
+        height: 50vh;
+    }
+
+    &.medlen {
+        width: 50vw;
+    }
+
+    &.medium {
+        height: 50vh;
+        width: 50vw;
+    }
+
+    &.med-short-len {
+        width: 30vw;
+    }
+
+    &.med-short-h {
+        height: 30vh;
+    }
+
+    &.short {
+        height: 20vh;
+    }
+
+    &.xshort {
+        height: 10vh;
+    }
+
+    &.skinny {
+        width: 20vw;
+    }
+
+    &.center {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &.column {
+        flex-flow: column nowrap;
+    }
 }

client/src/sass/components/_Gallery.scss

@@ -1,18 +1,8 @@
 .ui-gallery-component {
-    background-color: red;
+    background-color: inherit;
     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

@@ -1,5 +1,51 @@
+@import "../helpers/variables";
+@import "../helpers/placeholders";
+
 .ui-page-component {
-    &.homepage {
+  display: flex;
-      background-color: purple;
+  flex-flow: column nowrap;
+  align-items: center;
+  background-color: $darkred;
+
+  @extend %background-colors;
+
+  &.homepage {
+    height: 100vh;
+    background-color: $nutmeg;
+    .welcome-section {
+      h1 {
+        font-size: 1.8rem;
+      }
     }
+
+    .button-row {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: center;
+      .ui-button-component {
+        margin: 0 1rem;
+      }
+    }
+  }
+
+  &.products-page {
+    background-color: $thyme;
+    .all-products-filter {
+      background-color: $coffee;
+    }
+
+    .product-card-list {
+      background-color: inherit;
+      .product-card {
+        background-color: $papyrus;
+        color: $coffee;
+        width: 30%;
+        margin: 1rem;
+        padding: 1rem 0;
+
+        p { padding: 0 1rem; }
+      }
+    }
+  }
 }

client/src/sass/helpers/_placeholders.scss

@@ -0,0 +1,64 @@
+%background-colors {
+    &.darkred {
+        background-color: $darkred;
+    }
+
+    &.coffee {
+        background-color: $coffee;
+    }
+
+    &.nutmeg {
+        background-color: $nutmeg;
+        color: black;
+    }
+
+    &.thyme {
+        background-color: $thyme;
+        color: black;
+    }
+
+    &.papyrus {
+        background-color: $papyrus;
+        color: black;
+    }
+
+    &.lavender {
+        background-color: $lavender;
+        color: black;
+    }
+
+    &.turmeric {
+        background-color: $turmeric;
+        color: black;
+    }
+}
+
+%text-colors {
+    &.darkred {
+        color: $darkred;
+    }
+
+    &.coffee {
+        color: $coffee;
+    }
+
+    &.nutmeg {
+        color: $nutmeg;
+    }
+
+    &.thyme {
+        color: $thyme;
+    }
+
+    &.papyrus {
+        color: $papyrus;
+    }
+
+    &.lavender {
+        color: $lavender;
+    }
+
+    &.turmeric {
+        color: $turmeric;
+    }
+}

client/src/sass/helpers/_variables.scss

@@ -0,0 +1,7 @@
+$coffee: rgb(58, 21, 21);
+$darkred: rgb(100, 31, 31);
+$nutmeg: rgb(144, 113, 90);
+$thyme: rgb(63, 82, 53);
+$papyrus: rgb(236, 231, 221);
+$lavender: rgb(194, 182, 224);
+$turmeric: rgb(207, 174, 39);

client/src/util/apiUtils.ts

@@ -9,6 +9,17 @@ export const getByProductId = async (id: string) => {
     return response;
 }
 
+export const updateUser = async (id: string, body: object) => {
+    const response = await fetch(`https://mikayla-spice-market-api.herokuapp.com/users/${id}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(body)
+    });
+    return response;
+}
+
 // order functions
 export const getOrder = async () => {
     return;

client/src/util/authHelpers.ts

@@ -1,4 +1,4 @@
-import { SupabaseClient } from "@supabase/supabase-js";
+import { SupabaseClient, User } from "@supabase/supabase-js";
 
 export interface FormInput {
     email: string
@@ -21,8 +21,10 @@ export const handleRegister = async (supabase: SupabaseClient | undefined, input
     const { email, password } = input;
     if (email && password) {
         const { user, session, error} = await supabase.auth.signUp({ email, password });
+        if (!user) return;
         if (error) throw error;
-        console.log(user, session);
+
+        insertNewUser(user);
     }
 }
 
@@ -30,3 +32,22 @@ export const getSession = async (supabase: SupabaseClient | undefined) => {
     if (!supabase) return;
     console.log(supabase.auth.session());
 }
+
+export const insertNewUser = async (data: User) => {
+    if (!data) return;
+    const { email } = data;
+    const formattedData = {
+        email: email,
+        supabaseUser: data
+    }
+
+    const response = await fetch("https://mikayla-spice-market-api.com/users/", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(formattedData)
+    })
+
+    return response;
+}

client/src/util/types.ts

@@ -9,7 +9,7 @@ export type UIGalleryType = FC<UIGalleryParams>
 export type UIPageType = FC<UIPageParams>
 
 // definitions for component params
-interface UIParams {
+export interface UIParams {
     additionalClasses?: string
 }
 
@@ -18,11 +18,8 @@ interface UIButtonParams extends UIParams {
     children?: string
 }
 
-interface UIPageParams extends UIParams { children: ReactNode }
-
 interface UICardParams extends UIParams {
-    children: ReactNode
+    children?: ReactNode
-    width?: number
 }
 
 interface UIGalleryParams extends UIParams {
@@ -30,6 +27,8 @@ interface UIGalleryParams extends UIParams {
     columns: number
 }
 
+interface UIPageParams extends UIParams { children: ReactNode }
+
 // data models
 
 export interface ProductModel extends UICardParams {

db/Seed.js

@@ -14,7 +14,7 @@ async function main() {
         CREATE TABLE IF NOT EXISTS users (
             id                  INT             PRIMARY KEY GENERATED ALWAYS AS IDENTITY NOT NULL,
             email               VARCHAR         NOT NULL,
-            password            VARCHAR         NOT NULL,
+            supabaseUser        JSON            NOT NULL,
             firstname           VARCHAR,
             lastname            VARCHAR,
             isadmin             BOOLEAN         DEFAULT FALSE

routes/user.js

@@ -26,4 +26,14 @@ module.exports = (app) => {
             next(e);
         }
     })
+
+    router.post('/', async (req, res, next) => {
+        try {
+            const data = req.body;
+            const response = await UserServiceInstance.insert(data);
+            res.status(200).send(response);
+        } catch(e) {
+            next(e);
+        }
+    })
 }

services/UserService.js

@@ -23,4 +23,13 @@ module.exports = class UserService {
             throw new Error(e);
         }
     }
+
+    async insert(data) {
+        try {
+            const user = await UserInstance.create(data);
+            return user;
+        } catch(e) {
+            throw new Error(e);
+        }
+    }
 }