diff --git a/client/src/components/Auth/AuthForm.tsx b/client/src/components/Auth/AuthForm.tsx index 303ae1c..31f36eb 100644 --- a/client/src/components/Auth/AuthForm.tsx +++ b/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({ email: "", password: "" }); @@ -15,20 +16,23 @@ const AuthForm: AuthFormType = ({ format }) => { const formHTML = format == "login" ? loginHTML : registerHTML; return ( - -

{formText}

- {formHTML} + + + {formHTML} + -
-
- - setInput({...input, email: e.target.value})} /> -
-
- - setInput({...input, password: e.target.value})} /> -
-
+ +
+
+ + setInput({...input, email: e.target.value})} /> +
+
+ + setInput({...input, password: e.target.value})} /> +
+
+
diff --git a/client/src/components/Auth/authExtraText.tsx b/client/src/components/Auth/authExtraText.tsx index beee7b0..9f8a6ef 100644 --- a/client/src/components/Auth/authExtraText.tsx +++ b/client/src/components/Auth/authExtraText.tsx @@ -1,6 +1,6 @@ export const loginHTML = ( <> -

Welcome back!

+

Welcome back!

It's great to see you again.

Please enter your credentials below to login:

@@ -8,8 +8,8 @@ export const loginHTML = ( export const registerHTML = ( <> -

Hi there!

+

Hi there!

Thank you so much for your interest in the site!

-

Please use the form below to register.

+

Please use the form below to register:

) \ No newline at end of file diff --git a/client/src/components/Content/Philosophy.tsx b/client/src/components/Content/Philosophy.tsx index bef4023..feb8d94 100644 --- a/client/src/components/Content/Philosophy.tsx +++ b/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 (

The Express Spices Philosophy

+

+ Things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.
+ Furthermore, things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things. +

-

Things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.

-

Furthermore, things and stuff and things and stuff and things and stuff and things and stuff and things and stuff and things.

+ + +

+ 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. +

) } \ No newline at end of file diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx index 4bcc83c..f95ce50 100644 --- a/client/src/components/Home.tsx +++ b/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 ( -

The finest spice shop on the internet.

-

Or at the very least, what their website could look like.

+ +

The finest spice shop on the internet.

+

Or at the very least, what their website could look like.

+ -
- - - -
+ + + +

Our mission: to deliver quality herbs and spices.
See our offerings and learn more about us below:

+
+ + + +
+ ) } \ No newline at end of file diff --git a/client/src/components/Nav/Navbar.scss b/client/src/components/Nav/Navbar.scss index eca2898..dffe5e4 100644 --- a/client/src/components/Nav/Navbar.scss +++ b/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; + } + } } \ No newline at end of file diff --git a/client/src/components/Nav/Navbar.tsx b/client/src/components/Nav/Navbar.tsx index e3c539d..07051d0 100644 --- a/client/src/components/Nav/Navbar.tsx +++ b/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 && ( <>

{user.email}

- + ) } { - user ? : ( + user ? : ( <> - - + + ) } diff --git a/client/src/components/Product/AllProducts.tsx b/client/src/components/Product/AllProducts.tsx index 7f3882e..fe1229d 100644 --- a/client/src/components/Product/AllProducts.tsx +++ b/client/src/components/Product/AllProducts.tsx @@ -9,7 +9,7 @@ import ProductCard from "./ProductCard"; export default function AllProducts() { const [productData, setProductData] = useState(); - const [view, setView] = useState(

Loading...

); + const [view, setView] = useState(

Loading...

); useEffect(() => { getAllProducts() @@ -23,10 +23,10 @@ export default function AllProducts() { useEffect(() => { setView( - +

Product Catalog

- +

Filter results by:

setInput({...input, first: e.target.value})} type="text" autoComplete="First Name"> +
+ +
+ + setInput({...input, last: e.target.value})} type="text" autoComplete="Last Name"> +
+ + + + + ) +} + +export default UpdateUserInfo; \ No newline at end of file diff --git a/client/src/components/User/UserProfile.tsx b/client/src/components/User/UserProfile.tsx index e24b73f..1407eaa 100644 --- a/client/src/components/User/UserProfile.tsx +++ b/client/src/components/User/UserProfile.tsx @@ -16,7 +16,7 @@ export default function UserProfile() {
- +
) diff --git a/client/src/components/User/UserSettings.tsx b/client/src/components/User/UserSettings.tsx index 45a0234..c5fef0a 100644 --- a/client/src/components/User/UserSettings.tsx +++ b/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

User Settings!

+ const supabase = useSupabase(); + const [activeSections, setActiveSections] = useState({ + userInfo: false + }); + + return ( + +

User Settings!

+ { activeSections.userInfo && } + + ) } \ No newline at end of file diff --git a/client/src/components/_ui/Card/Card.tsx b/client/src/components/_ui/Card/Card.tsx index 04b4a34..ac7928c 100644 --- a/client/src/components/_ui/Card/Card.tsx +++ b/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 ( -
+
{ children }
) diff --git a/client/src/sass/App.scss b/client/src/sass/App.scss index db56f7f..914774c 100644 --- a/client/src/sass/App.scss +++ b/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; diff --git a/client/src/sass/components/_Card.scss b/client/src/sass/components/_Card.scss index b9a0044..f7598e7 100644 --- a/client/src/sass/components/_Card.scss +++ b/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; + } } \ No newline at end of file diff --git a/client/src/sass/components/_Gallery.scss b/client/src/sass/components/_Gallery.scss index 8948858..7d661f1 100644 --- a/client/src/sass/components/_Gallery.scss +++ b/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; - } - } } \ No newline at end of file diff --git a/client/src/sass/components/_Page.scss b/client/src/sass/components/_Page.scss index 8a6ead3..b6793b5 100644 --- a/client/src/sass/components/_Page.scss +++ b/client/src/sass/components/_Page.scss @@ -1,5 +1,51 @@ +@import "../helpers/variables"; +@import "../helpers/placeholders"; + .ui-page-component { - &.homepage { - background-color: purple; + display: flex; + 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; } + } + } + } } \ No newline at end of file diff --git a/client/src/sass/helpers/__variables.scss b/client/src/sass/helpers/__variables.scss deleted file mode 100644 index e69de29..0000000 diff --git a/client/src/sass/helpers/_placeholders.scss b/client/src/sass/helpers/_placeholders.scss new file mode 100644 index 0000000..0a8c120 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/client/src/sass/helpers/__queries.scss b/client/src/sass/helpers/_queries.scss similarity index 100% rename from client/src/sass/helpers/__queries.scss rename to client/src/sass/helpers/_queries.scss diff --git a/client/src/sass/helpers/_variables.scss b/client/src/sass/helpers/_variables.scss new file mode 100644 index 0000000..c965edc --- /dev/null +++ b/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); \ No newline at end of file diff --git a/client/src/util/apiUtils.ts b/client/src/util/apiUtils.ts index fb578c0..8ea2abd 100644 --- a/client/src/util/apiUtils.ts +++ b/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; diff --git a/client/src/util/authHelpers.ts b/client/src/util/authHelpers.ts index 281f083..21cbda0 100644 --- a/client/src/util/authHelpers.ts +++ b/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; +} diff --git a/client/src/util/types.ts b/client/src/util/types.ts index 5f98de0..adc676c 100644 --- a/client/src/util/types.ts +++ b/client/src/util/types.ts @@ -9,7 +9,7 @@ export type UIGalleryType = FC export type UIPageType = FC // 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 - width?: number + children?: ReactNode } 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 { diff --git a/db/Seed.js b/db/Seed.js index 9abcd45..d1c5bd1 100644 --- a/db/Seed.js +++ b/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 diff --git a/routes/user.js b/routes/user.js index 5d08d4a..9b55199 100644 --- a/routes/user.js +++ b/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); + } + }) } \ No newline at end of file diff --git a/services/UserService.js b/services/UserService.js index 89880bb..6bb27a5 100644 --- a/services/UserService.js +++ b/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); + } + } } \ No newline at end of file