innocuous-symmetry/e-commerce
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
changed script to iniitialize database
This commit is contained in:
Mikayla Dobson
2022-10-18 13:12:10 -05:00
parent 5d7188bbaa b47730758f
commit cd6b12ccc1
25 changed files with 364 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/components/Auth/AuthForm.tsx
View File

@@ -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>
<h1>{formText}</h1>
{formHTML}
<Page additionalClasses="turmeric">
<Card additionalClasses="papyrus">
{formHTML}
</Card>
<form className="auth-form">
<div className="form-row">
<label htmlFor="auth-form-email">Email:</label>
<input id="auth-form-email" required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
</div>
<div className="form-row">
<label htmlFor="auth-form-password">Password:</label>
<input id="auth-form-password" required type="password" onChange={(e) => setInput({...input, password: e.target.value})} />
</div>
</form>
<Card additionalClasses="papyrus">
<form className="auth-form">
<div className="form-row">
<label htmlFor="auth-form-email">Email:</label>
<input autoComplete="email" id="auth-form-email" required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
</div>
<div className="form-row">
<label htmlFor="auth-form-password">Password:</label>
<input autoComplete="password" id="auth-form-password" required type="password" onChange={(e) => setInput({...input, password: e.target.value})} />
</div>
</form>
</Card>
<div className="auth-actions">
<Button onClick={formFunction}>{formText}</Button>

6
client/src/components/Auth/authExtraText.tsx
View File

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

12
client/src/components/Content/Philosophy.tsx
View File

@@ -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>
<p>Furthermore, 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>
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>
)
}

22
client/src/components/Home.tsx
View File

@@ -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>
<p>Or at the very least, what their website could look like.</p>
<Card additionalClasses="welcome-section coffee bigtext">
<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">
<Button onClick={() => navigate('/products')}>View our Products</Button>
<Button onClick={() => navigate('/philosophy')}>Our Philosophy</Button>
<Button onClick={() => navigate('/contact')}>Contact Us</Button>
</div>
<Card additionalClasses="med-short-h med-short-len thyme" />
<Card additionalClasses="long coffee">
<p>Our mission: to deliver quality herbs and spices.<br/>See our offerings and learn more about us below:</p>
<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>
)
}

19
client/src/components/Nav/Navbar.scss
View File

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

9
client/src/components/Nav/Navbar.tsx
View File

@@ -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('/register')}>Register</button>
<Button onClick={() => navigate('/login')}>Log In</Button>
<Button onClick={() => navigate('/register')}>Register</Button>
</>
)
}

6
client/src/components/Product/AllProducts.tsx
View File

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

34
client/src/components/User/SettingsWidgets/UpdateUserInfo.tsx Normal file
View File

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

2
client/src/components/User/UserProfile.tsx
View File

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

17
client/src/components/User/UserSettings.tsx
View File

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

4
client/src/components/_ui/Card/Card.tsx
View File

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

4
client/src/sass/App.scss
View File

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

60
client/src/sass/components/_Card.scss
View File

@@ -1,3 +1,61 @@
.ui-card-component {
@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;
}
}

12
client/src/sass/components/_Gallery.scss
View File

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

50
client/src/sass/components/_Page.scss
View File

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

0
client/src/sass/helpers/__variables.scss
View File

64
client/src/sass/helpers/_placeholders.scss Normal file
View File

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

0
client/src/sass/helpers/__queries.scss → client/src/sass/helpers/_queries.scss
View File

7
client/src/sass/helpers/_variables.scss Normal file
View File

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

11
client/src/util/apiUtils.ts
View File

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

25
client/src/util/authHelpers.ts
View File

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

9
client/src/util/types.ts
View File

@@ -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
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 {

2
db/Seed.js
View File

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

10
routes/user.js
View File

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

9
services/UserService.js
View File

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