From 8d5bdb771562a9906097b7867c6b32b826efed5b Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Mon, 10 Oct 2022 16:13:46 -0500 Subject: [PATCH 1/4] work on ui color scheme, more work on components --- client/src/components/Content/Philosophy.tsx | 12 +++- client/src/components/Home.tsx | 22 ++++--- client/src/components/Nav/Navbar.scss | 19 +++++- client/src/components/Nav/Navbar.tsx | 9 +-- client/src/components/Product/AllProducts.tsx | 6 +- client/src/components/_ui/Card/Card.tsx | 4 +- client/src/sass/App.scss | 4 +- client/src/sass/components/_Card.scss | 60 ++++++++++++++++++- client/src/sass/components/_Gallery.scss | 12 +--- client/src/sass/components/_Page.scss | 46 +++++++++++++- client/src/sass/helpers/__variables.scss | 0 client/src/sass/helpers/_placeholders.scss | 46 ++++++++++++++ .../helpers/{__queries.scss => _queries.scss} | 0 client/src/sass/helpers/_variables.scss | 5 ++ client/src/util/types.ts | 9 ++- 15 files changed, 215 insertions(+), 39 deletions(-) delete mode 100644 client/src/sass/helpers/__variables.scss create mode 100644 client/src/sass/helpers/_placeholders.scss rename client/src/sass/helpers/{__queries.scss => _queries.scss} (100%) create mode 100644 client/src/sass/helpers/_variables.scss diff --git a/client/src/components/Content/Philosophy.tsx b/client/src/components/Content/Philosophy.tsx index bef4023..0ce4e5c 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, 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 0ce4e5c..feb8d94 100644 --- a/client/src/components/Content/Philosophy.tsx +++ b/client/src/components/Content/Philosophy.tsx @@ -10,7 +10,7 @@ export default function Philosophy() { 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. diff --git a/client/src/sass/components/_Page.scss b/client/src/sass/components/_Page.scss index 5f73601..b6793b5 100644 --- a/client/src/sass/components/_Page.scss +++ b/client/src/sass/components/_Page.scss @@ -1,9 +1,13 @@ @import "../helpers/variables"; +@import "../helpers/placeholders"; .ui-page-component { display: flex; flex-flow: column nowrap; align-items: center; + background-color: $darkred; + + @extend %background-colors; &.homepage { height: 100vh; diff --git a/client/src/sass/helpers/_placeholders.scss b/client/src/sass/helpers/_placeholders.scss index e8bbd77..0a8c120 100644 --- a/client/src/sass/helpers/_placeholders.scss +++ b/client/src/sass/helpers/_placeholders.scss @@ -21,6 +21,16 @@ background-color: $papyrus; color: black; } + + &.lavender { + background-color: $lavender; + color: black; + } + + &.turmeric { + background-color: $turmeric; + color: black; + } } %text-colors { @@ -43,4 +53,12 @@ &.papyrus { color: $papyrus; } + + &.lavender { + color: $lavender; + } + + &.turmeric { + color: $turmeric; + } } \ No newline at end of file diff --git a/client/src/sass/helpers/_variables.scss b/client/src/sass/helpers/_variables.scss index f27774a..c965edc 100644 --- a/client/src/sass/helpers/_variables.scss +++ b/client/src/sass/helpers/_variables.scss @@ -2,4 +2,6 @@ $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); \ No newline at end of file +$papyrus: rgb(236, 231, 221); +$lavender: rgb(194, 182, 224); +$turmeric: rgb(207, 174, 39); \ No newline at end of file From 4965480aafcfbd5cfb109f91e99282a6f16367f4 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Mon, 10 Oct 2022 18:28:49 -0500 Subject: [PATCH 3/4] in progress: db support for tandem add to user table on supabase registration --- .../User/SettingsWidgets/UpdateUserInfo.tsx | 34 +++++++++++++++++++ client/src/components/User/UserProfile.tsx | 2 +- client/src/components/User/UserSettings.tsx | 17 +++++++++- client/src/util/apiUtils.ts | 11 ++++++ client/src/util/authHelpers.ts | 2 +- db/Seed.js | 2 +- models/UserModel.js | 15 ++++++++ routes/user.js | 9 +++++ services/UserService.js | 8 +++++ 9 files changed, 96 insertions(+), 4 deletions(-) create mode 100644 client/src/components/User/SettingsWidgets/UpdateUserInfo.tsx diff --git a/client/src/components/User/SettingsWidgets/UpdateUserInfo.tsx b/client/src/components/User/SettingsWidgets/UpdateUserInfo.tsx new file mode 100644 index 0000000..96ef235 --- /dev/null +++ b/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 ( + +

Update User Information

+ +
+
+ + 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/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..e688571 100644 --- a/client/src/util/authHelpers.ts +++ b/client/src/util/authHelpers.ts @@ -1,4 +1,5 @@ import { SupabaseClient } from "@supabase/supabase-js"; +import { updateUser } from "./apiUtils"; export interface FormInput { email: string @@ -22,7 +23,6 @@ export const handleRegister = async (supabase: SupabaseClient | undefined, input if (email && password) { const { user, session, error} = await supabase.auth.signUp({ email, password }); if (error) throw error; - console.log(user, session); } } diff --git a/db/Seed.js b/db/Seed.js index 21cdec3..7182b8d 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/models/UserModel.js b/models/UserModel.js index 003156b..3ade8de 100644 --- a/models/UserModel.js +++ b/models/UserModel.js @@ -62,4 +62,19 @@ module.exports = class UserModel { throw new Error(e); } } + + async createFromSupabase(data) { + try { + const statement = ''; + const result = await db.query(statement); + + if (result.rows.length) { + return result.rows[0]; + } + + return null; + } catch(e) { + throw new Error(e); + } + } } \ No newline at end of file diff --git a/routes/user.js b/routes/user.js index 5d08d4a..b04b272 100644 --- a/routes/user.js +++ b/routes/user.js @@ -26,4 +26,13 @@ module.exports = (app) => { next(e); } }) + + router.post('/', async (req, res, next) => { + try { + const data = req.body; + + } catch(e) { + next(e); + } + }) } \ No newline at end of file diff --git a/services/UserService.js b/services/UserService.js index 89880bb..194dc70 100644 --- a/services/UserService.js +++ b/services/UserService.js @@ -23,4 +23,12 @@ module.exports = class UserService { throw new Error(e); } } + + async insert(data) { + try { + const user = await UserInstance.create(data); + } catch(e) { + next(e); + } + } } \ No newline at end of file From b47730758f72aa7cf4937a4b9442dfac8a31d1c8 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Mon, 10 Oct 2022 18:47:10 -0500 Subject: [PATCH 4/4] experimental api changes --- client/src/util/authHelpers.ts | 25 +++++++++++++++++++++++-- models/UserModel.js | 15 --------------- routes/user.js | 3 ++- services/UserService.js | 3 ++- 4 files changed, 27 insertions(+), 19 deletions(-) diff --git a/client/src/util/authHelpers.ts b/client/src/util/authHelpers.ts index e688571..21cbda0 100644 --- a/client/src/util/authHelpers.ts +++ b/client/src/util/authHelpers.ts @@ -1,5 +1,4 @@ -import { SupabaseClient } from "@supabase/supabase-js"; -import { updateUser } from "./apiUtils"; +import { SupabaseClient, User } from "@supabase/supabase-js"; export interface FormInput { email: string @@ -22,7 +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; + + 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/models/UserModel.js b/models/UserModel.js index 3ade8de..003156b 100644 --- a/models/UserModel.js +++ b/models/UserModel.js @@ -62,19 +62,4 @@ module.exports = class UserModel { throw new Error(e); } } - - async createFromSupabase(data) { - try { - const statement = ''; - const result = await db.query(statement); - - if (result.rows.length) { - return result.rows[0]; - } - - return null; - } catch(e) { - throw new Error(e); - } - } } \ No newline at end of file diff --git a/routes/user.js b/routes/user.js index b04b272..9b55199 100644 --- a/routes/user.js +++ b/routes/user.js @@ -30,7 +30,8 @@ module.exports = (app) => { 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); } diff --git a/services/UserService.js b/services/UserService.js index 194dc70..6bb27a5 100644 --- a/services/UserService.js +++ b/services/UserService.js @@ -27,8 +27,9 @@ module.exports = class UserService { async insert(data) { try { const user = await UserInstance.create(data); + return user; } catch(e) { - next(e); + throw new Error(e); } } } \ No newline at end of file