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

Merge pull request #6 from innocuous-symmetry/new-front-end

Browse Source 
started a new branch with only the new front end directory
This commit is contained in:
Mikayla Dobson
2022-10-07 17:47:05 -05:00
committed by GitHub
parent f09227210c 6563140629
commit bc0d5dde94
34 changed files with 0 additions and 4343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
_client/.gitignore vendored
View File

@@ -1,24 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

13
_client/index.html
View File

@@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mikayla's Store</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

3139
_client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
_client/package.json
View File

@@ -1,24 +0,0 @@
{
"name": "client",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@supabase/supabase-js": "^1.35.7",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"sass": "^1.52.1"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"typescript": "^4.6.3",
"vite": "^2.9.9"
}
}

134
_client/src/App.scss
View File

@@ -1,134 +0,0 @@
/* todo: define and import fonts */
/* color variables */
$lightblue-1: rgb(81, 144, 147);
$midblue-1: rgb(65, 65, 159);
$darkblue-1: rgb(51, 53, 66);
/* universal styles */
.page {
display: flex;
position: relative;
width: 100vw;
height: 100vh;
top: 4rem;
flex-direction: column;
align-items: center;
z-index: 7;
background-color: $midblue-1;
}
.light-page {
background-color: $lightblue-1;
}
/* navbar styles */
nav {
display: flex;
position: absolute;
background-color: rgb(12, 6, 6);
color: white;
top: 0;
justify-content: space-around;
align-items: center;
width: 100%;
height: 4rem;
border-bottom: 1px solid white;
z-index: 9;
a {
color: white;
}
}
/* landing page styles */
.landing {
* {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
text-align: center;
}
header {
margin-top: 4rem;
width: 45vw;
}
section {
width: 60vw;
}
header, section {
background-color: $lightblue-1;
padding: 1.2rem;
margin-bottom: 5rem;
}
header, section, .shop-buttons {
box-shadow: 4px 4px white;
transition: box-shadow ease 1s;
}
header:hover, section:hover, .shop-buttons:hover {
box-shadow: 12px 12px white;
transition: box-shadow ease 600ms;
}
button {
background-color: $midblue-1;
color: white;
border-radius: 12px;
border-style: outset;
border-color: $lightblue-1;
width: 8rem;
height: 3rem;
}
button:hover {
background-color: $lightblue-1;
border-color: $midblue-1;
box-shadow: 0 0 4px 4px red;
}
button:active {
background-color: black;
border-style: inset;
border-color: white;
}
.shop-buttons {
display: flex;
flex-flow: row nowrap;
width: 45vw;
height: 8rem;
justify-content: space-around;
background-color: $darkblue-1
}
}
// Login page styles
.login {
display: flex;
}
// products styles
.products-results {
display: flex;
}
.product-card {
background-color: white;
padding: 0.8rem;
margin: 0.5rem;
}
// cart styles
.cart-item-panel {
display: flex;
flex-direction: column;
padding: 0 2rem;
background-color: white;
width: 75vw;
}

47
_client/src/App.tsx
View File

@@ -1,47 +0,0 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useReducer } from 'react';
import { AppContext, initialState, reducer } from './store/store';
import NavBar from './components/Navbar';
import LandingPage from './components/LandingPage';
import Products from './components/Products/Products';
import LoginForm from './components/User/LoginForm';
import Register from './components/User/Register';
import UserProfile from './components/User/UserProfile';
import ProductPage from './components/Products/ProductPage';
import Cart from './components/Cart/Cart';
import './App.scss'
import AdminHome from './components/AdminPortal/AdminHome';
import Auth from './components/SupabaseAuth/Auth';
import SupabaseLogin from './components/SupabaseAuth/SupabaseLogin';
import SupabaseRegister from './components/SupabaseAuth/SupabaseRegister';
function App() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<BrowserRouter>
<AppContext.Provider value={[state, dispatch]}>
<NavBar/>
<Routes>
<Route path="/" element={<LandingPage/>} />
<Route path="/login" element={<LoginForm/>} />
<Route path="/users/:userID" element={<UserProfile profile={state.user.id} />} />
<Route path="/register" element={<Register/>} />
<Route path="/products/" element={<Products />} />
<Route path="/cart/" element={<Cart />} />
<Route path="/products/:productID" element={<ProductPage />} />
<Route path="/admin" element={<AdminHome />} />
<Route path="/supabase" element={<Auth />} />
<Route path="/supabase/supabase-auth/login" element={<SupabaseLogin />} />
<Route path="/supabase/supabase-auth/register" element={<SupabaseRegister />} />
</Routes>
</AppContext.Provider>
</BrowserRouter>
)
}
export default App

33
_client/src/components/AdminPortal/AdminHome.tsx
View File

@@ -1,33 +0,0 @@
import { useContext } from "react";
import { AppContext } from "../../store/store";
import Page from "../../util/Page";
export default function AdminHome() {
const [state, dispatch] = useContext(AppContext);
// to do: provide protected access based on a list of approved admin users
if (state.user.name) return (
<Page>
<h1>Admin Management Portal</h1>
<h2>Welcome, {state.user.name || ''}</h2>
<section>
<h3>This is where administrative tasks will be supported for the store.</h3>
<p>Choose from the options below:</p>
<div className="admin-options">
<button>Access product listings and inventory</button>
<button>Manage registered users</button>
<button>Database options</button>
</div>
</section>
</Page>
)
return (
<Page>
<h1>Administrative access required to view this page.</h1>
<p>Please click <a href="/">here</a> to return home.</p>
</Page>
)
}

44
_client/src/components/Cart/Cart.tsx
View File

@@ -1,44 +0,0 @@
import { useCallback, useContext, useEffect, useState } from "react";
import { v4 } from "uuid";
import { AppContext } from "../../store/store";
import { ActionType } from "../../store/store_types";
import { Product } from '../../types/main';
import { getSubtotal } from "../../util/helpers";
import Page from "../../util/Page";
import CartItem from "./CartItem";
function Cart() {
const [state, dispatch] = useContext(AppContext);
const [data, setData] = useState<any>();
const [subtotal, setSubtotal] = useState('loading...');
return (
<Page>
{
state.user.firstName ?
<h1>Hello, {state.user.firstName}!</h1>
:
<h1>Please <a href='/login'>log in</a> to start your cart.</h1>
}
<section id="cart-contents">
{ state.cart &&
<>
<p>You have {state.cart.contents.length} items in your cart!</p>
<div>
{state.cart.contents.map((product: Product) => <CartItem key={v4()} product={product} />)}
</div>
</>
}
</section>
<section id="subtotal">
<p>Subtotal: {subtotal}</p>
</section>
</Page>
)
}
export default Cart;

21
_client/src/components/Cart/CartItem.tsx
View File

@@ -1,21 +0,0 @@
import { useEffect, useState } from "react";
import { v4 } from "uuid";
function CartItem({ product }: any) {
const [quantity, setQuantity] = useState(product.quantity || 0);
// useEffect(() => {
// updateQuantity(product, quantity);
// }, [quantity]);
return (
<div className="cart-item-panel">
<strong>{product.name}</strong>
<p>{product.price}</p>
<p>Quantity: {quantity}</p>
<input type="number" min="0" value={quantity} onChange={(e) => setQuantity(Number(e.target.value))}></input>
</div>
)
}
export default CartItem;

28
_client/src/components/LandingPage.tsx
View File

@@ -1,28 +0,0 @@
import Page from "../util/Page";
import { useNavigate } from "react-router-dom";
function LandingPage() {
const navigate = useNavigate();
return (
<Page classes="landing">
<header>
<h1>Welcome to Mikayla's Mostly Useless Little Store!</h1>
<p>Thanks so much for visiting!</p>
</header>
<section className="site-description">
<p>This site was built as part of the curriculum for the Codecademy Full Stack Engineer career path. The listings you see on this site do correspond to
real life products, which can be purchased through a functioning payment system powered by Stripe. Personal data is rigorously encoded and
protected. Feel free to shoot me a message with any questions or comments about this project, and enjoy browsing!</p>
</section>
<div className="shop-buttons">
<button onClick={() => navigate('/products')}>SHOP ALL</button>
<button>SHOP BY...</button>
</div>
</Page>
)
}
export default LandingPage;

52
_client/src/components/Navbar.tsx
View File

@@ -1,52 +0,0 @@
import { useReducer, useState, useEffect, useContext } from "react";
import { AppContext, initialState, reducer } from "../store/store";
import { ActionType } from "../store/store_types";
import { useNavigate } from 'react-router-dom';
function NavBar() {
const [loggedIn, setLoggedIn] = useState(false);
const [profText, setProfText] = useState(null);
const [searchInput, setSearchInput] = useState('');
const [state, dispatch] = useContext(AppContext);
const navigate = useNavigate();
const handleSearch = () => {
if (searchInput === '') return;
dispatch({ type: ActionType.SEARCH, payload: searchInput });
navigate(`/products?query=${searchInput}`);
}
useEffect(() => {
if (state === initialState) return;
if (state.user && state.user.headers?.authenticated) {
setProfText(state.user.email);
setLoggedIn(true);
} else if (!state.user.authenticated) {
setLoggedIn(false);
}
}, [state]);
return (
<nav>
<button onClick={() => navigate("/")}>Logo</button>
<div className="searchbar">
<input type="text" placeholder="Search products" onChange={(e) => setSearchInput(e.target.value)}/>
<button onClick={handleSearch}>Search</button>
<button onClick={() => console.log(state)}>Render</button>
</div>
{loggedIn ?
<>
<button onClick={() => navigate(`/users/${state.user.id}`)}>{profText}</button>
<button onClick={() => navigate('/cart')}>Your cart</button>
</>
:
<button onClick={() => navigate("/login")}>Log In</button>}
</nav>
)
}
export default NavBar;

35
_client/src/components/Products/ProductCard.tsx
View File

@@ -1,35 +0,0 @@
import { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { ActionType } from "../../store/store_types";
import { AppContext } from "../../store/store";
export default function ProductCard({ productData }: any) {
const { name, category, description, price, id } = productData;
const [state, dispatch] = useContext(AppContext);
const navigate = useNavigate();
const addToCart = () => {
dispatch({ type: ActionType.ADDTOCART, payload: productData });
}
return (
<div className="card product-card" key={`product-id-${id}`}>
<div className="product-photo"></div>
<h1>{name}</h1>
<p>Category: {category}</p>
<p>{description}</p>
<p>Price: {`$${price}` || "Free, apparently!"}</p>
<div className="product-options">
<button onClick={() => navigate(`/products/${id}`)}>More info</button>
{
state.user.headers && state.user.headers.authenticated ?
<button onClick={addToCart}>Add to Cart</button>
:
<button onClick={() => navigate('/login')}>Login to add to your cart</button>
}
</div>
</div>
)
}

3
_client/src/components/Products/ProductFilter.tsx
View File

@@ -1,3 +0,0 @@
export default function ProductFilter() {
return;
}

27
_client/src/components/Products/ProductPage.tsx
View File

@@ -1,27 +0,0 @@
import Page from "../../util/Page"
import { getProductDetails } from "../../util/apiUtils"
import { useEffect, useState } from "react"
import { useParams } from "react-router-dom";
import { Product } from "../../types/main";
export default function ProductPage() {
const [info, setInfo] = useState<Product>();
const { productID }: any = useParams();
useEffect(() => {
getProductDetails(productID).then(res => setInfo(res));
}, [])
return (
info ?
<Page>
<h1>{info.name}</h1>
<h2>Category: {info.category}</h2>
<p>(a photo here)</p>
<p>{info.description}</p>
<p>Price: ${info.price}</p>
</Page>
: <></>
)
}

49
_client/src/components/Products/Products.tsx
View File

@@ -1,49 +0,0 @@
import Page from "../../util/Page";
import ProductCard from "./ProductCard";
import { getAllProducts } from '../../util/apiUtils';
import { useState, useEffect } from "react";
type ProductResponse = {
category: string,
category_id?: number,
description: string,
id: number,
inventory: number,
minidescription?: string,
name: string,
price: string
}
function Products() {
const [productData, setProductData] = useState([]);
const [productFeed, setProductFeed] = useState<Array<JSX.Element>>([]);
useEffect(() => {
getAllProducts().then(res => setProductData(res));
}, [])
useEffect(() => {
if (!productData) return;
const results = productData.map((each: ProductResponse) => {
return <ProductCard key={each.id} productData={each} />
});
setProductFeed(results);
}, [productData]);
return (
<Page>
<h1>Found {productFeed.length} products</h1>
<div className="filter-results">
</div>
<div className="products-results">
{ productFeed || <p>Loading...</p> }
</div>
</Page>
)
}
export default Products;

26
_client/src/components/SupabaseAuth/Auth.tsx
View File

@@ -1,26 +0,0 @@
import Page from "../../util/Page";
import { createClient } from '@supabase/supabase-js';
import { Link } from "react-router-dom";
const anonKey = import.meta.env.VITE_SUPABASE_KEY;
const projURL = import.meta.env.VITE_SUPABASE_URL;
const supabase = createClient(projURL, anonKey);
export default function Auth() {
const handleRegister = async () => {
await supabase.auth.signUp({});
}
const handleLogin = async () => {
await supabase.auth.signIn({});
}
return (
<Page>
<h1>Supabase user auth portal</h1>
<Link to="/supabase/supabase-auth/login">Login</Link>
<Link to="/supabase/supabase-auth/register">Register</Link>
</Page>
)
}

9
_client/src/components/SupabaseAuth/SupabaseLogin.tsx
View File

@@ -1,9 +0,0 @@
import Page from "../../util/Page";
export default function SupabaseLogin() {
return (
<Page>
<h1>Login</h1>
</Page>
)
}

40
_client/src/components/SupabaseAuth/SupabaseRegister.tsx
View File

@@ -1,40 +0,0 @@
import { useState } from "react";
import { createClient } from "@supabase/supabase-js";
import Page from "../../util/Page";
interface FormInput {
email: string
password: string
}
const anonKey = import.meta.env.VITE_SUPABASE_KEY;
const projURL = import.meta.env.VITE_SUPABASE_URL;
const supabase = createClient(projURL, anonKey);
export default function SupabaseRegister() {
const [input, setInput] = useState<FormInput>({email: "", password: ""});
const handleRegister = async () => {
const { user, session, error } = await supabase.auth.signUp(input);
console.log(user, session, error);
}
return (
<Page>
<h1>Register</h1>
<form>
<div>
<label>Email:</label>
<input required type="text" onChange={(e) => setInput({...input, email: e.target.value})} />
</div>
<div>
<label>Password:</label>
<input required type="text" onChange={(e) => setInput({...input, password: e.target.value})} />
</div>
</form>
<button onClick={handleRegister}>Register</button>
</Page>
)
}

89
_client/src/components/User/LoginForm.tsx
View File

@@ -1,89 +0,0 @@
import { useState, useEffect, useContext } from "react";
import { AppContext } from "../../store/store";
import { ActionType } from "../../store/store_types";
import { userInfo } from "../../types/main";
import { handleLogin } from "../../util/apiUtils";
import Page from "../../util/Page";
enum PassVisible {
hide = 'password',
show = 'text'
}
function LoginForm() {
const [state, dispatch] = useContext(AppContext);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [showPass, setShowPass] = useState(PassVisible.hide);
const displaySession = async () => {
if (username === '' || password === '') return;
try {
const response = await handleLogin(username, password);
const json = await response?.json();
if (json) {
console.log(json);
const { session, userProfile } = json;
let thisUser: userInfo = {
firstName: userProfile.first_name,
lastName: userProfile.last_name,
id: userProfile.id,
email: userProfile.email,
password: userProfile.password,
headers: session
}
dispatch({ type: ActionType.USERLOGIN, payload: thisUser });
}
} catch(e) {
console.log(e);
}
}
return (
<Page classes="login light-page">
<h1>Welcome back to my store!</h1>
<section className="login-form-section">
<div className="oauth-section">
<p>Log in with a third party provider:</p>
</div>
<h2>Have a log in? Use the form below:</h2>
<form>
<div>
<label htmlFor="username-login">Username:</label>
<input
type="text"
id="username-login"
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div>
<label htmlFor="password-login">Password:</label>
<input
type={showPass}
id="password-login"
onChange={(e) => setPassword(e.target.value)}
/>
<button type="button"
onClick={() => setShowPass((showPass === PassVisible.hide) ? PassVisible.show : PassVisible.hide)}
>Show password</button>
</div>
</form>
<button onClick={displaySession}>Log In</button>
</section>
<section className="link-to-register">
<p>New here? <a href="/register">Click here</a> to register!</p>
</section>
</Page>
)
}
export default LoginForm;

111
_client/src/components/User/Register.tsx
View File

@@ -1,111 +0,0 @@
import { useEffect, useReducer, useState } from "react";
import { useNavigate } from "react-router-dom";
import { initialState, reducer } from "../../store/store";
import { ActionType, emptySessionHeader } from "../../store/store_types";
import { userInfo } from '../../types/main';
import { handleLogin, registerNewUser, unwrapLogin } from "../../util/apiUtils";
import Page from "../../util/Page";
function Register() {
const formInitialState: userInfo = {
firstName: '',
lastName: '',
email: '',
password: '',
verifyPassword: '',
created: '',
headers: emptySessionHeader
}
const navigate = useNavigate();
const [state, dispatch] = useReducer(reducer, initialState);
const [userInput, setUserInput] = useState(formInitialState);
const [warningText, setWarningText] = useState('initial');
// checks password complexity
useEffect(() => {
if (!userInput.password) return;
switch (true) {
case (!userInput.verifyPassword):
setWarningText('Verify your password below.');
break;
case (userInput.verifyPassword !== userInput.password):
setWarningText('Passwords do not match.');
break;
case (userInput.verifyPassword && !userInput.verifyPassword.includes('!')):
setWarningText('Password does not meet safety criteria.');
break;
case (userInput.verifyPassword === userInput.password):
setWarningText('');
break;
default:
throw new Error("Password switch case is faulty");
}
}, [userInput.password, userInput.verifyPassword]);
// interrupts rendering loop by setting warning text on password data
useEffect(() => {
if (warningText === '') {
setWarningText('Conditions met!');
}
}, [userInput, warningText]);
// allows registration submission if warning text has correct value and userData is defined with all required values
const handleRegistration = async () => {
if (userInput === formInitialState) return;
if (warningText !== "Conditions met!") return;
let register = await registerNewUser(userInput);
if (register.ok) {
setUserInput(formInitialState);
navigate('/');
} else {
console.log('Something went wrong');
}
}
return (
<Page classes="register light-page">
<h1>Thanks for your interest! Enter the info below to register:</h1>
<form>
<div className="form-row">
<label htmlFor="first-name-register">First Name:</label>
<input required type="text" id="name-register" value={userInput.firstName} onChange={(e) => setUserInput({...userInput, firstName: e.target.value})}/>
</div>
<div className="form-row">
<label htmlFor="last-name-register">Last Name:</label>
<input required type="text" id="last-name-register" value={userInput.lastName} onChange={(e) => setUserInput({...userInput, lastName: e.target.value})}/>
</div>
<div className="form-row">
<label htmlFor="email-register">Email address:</label>
<input required type="email" id="email-register" value={userInput.email} onChange={(e) => setUserInput({...userInput, email: e.target.value})}/>
</div>
<p style={(warningText === 'initial') ? {display: 'none'} : {display: 'block'}}>{warningText}</p>
<div className="form-row">
<label htmlFor="password-register" style={(warningText && warningText !== 'Conditions met!') ? {color: 'red'} : {color: 'green'}}>
Password:
</label>
<input required type="password" id="password-register" value={userInput.password} onChange={(e) => setUserInput({...userInput, password: e.target.value})}/>
</div>
<div className="form-row">
<label htmlFor="password-verify" style={(warningText && warningText !== 'Conditions met!') ? {color: 'red'} : {color: 'green'}}>
Re-enter password:
</label>
<input required type="password" id="password-verify" value={userInput.verifyPassword} onChange={(e) => setUserInput({...userInput, verifyPassword: e.target.value})}/>
</div>
</form>
<button disabled={warningText !== 'Conditions met!'} onClick={handleRegistration}>Create my account</button>
</Page>
);
}
export default Register;

26
_client/src/components/User/UserProfile.tsx
View File

@@ -1,26 +0,0 @@
import { useContext } from "react"
import { AppContext } from "../../store/store"
import Page from "../../util/Page";
export default function UserProfile(profile: any): JSX.Element {
const [state, dispatch] = useContext(AppContext);
if (state.user) return (
<Page classes="light-page">
<h1>User Profile</h1>
<h2>Thanks for supporting us{`, ${state.user.firstName}!` || '!'}</h2>
<h2>{state.user.id || 'Profile not found'}</h2>
<h3>{state.user.email}</h3>
<div className="profile-options">
<button>Order History</button>
<button>Open Orders</button>
<button>Edit Profile</button>
<button>Profile Settings</button>
</div>
</Page>
);
return (<></>)
}

15
_client/src/favicon.svg
View File

@@ -1,15 +0,0 @@
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

13
_client/src/index.scss
View File

@@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

5
_client/src/main.tsx
View File

@@ -1,5 +0,0 @@
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.scss'
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

71
_client/src/store/store.ts
View File

@@ -1,71 +0,0 @@
import { createContext } from "react";
import { ActionType, userAction, appState, undefinedUser, emptyCart } from './store_types';
export const initialState: appState = {
searchTerm: '',
user: undefinedUser,
cart: emptyCart
}
export const reducer = (state: appState, action: userAction) => {
const { type, payload } = action;
switch (type) {
case ActionType.GETALL:
return state;
case ActionType.GETCATEGORY:
return state;
case ActionType.REGISTERNEW:
return state;
case ActionType.UPDATEONE:
return state;
case ActionType.SEARCH:
return {
...state,
searchTerm: payload
}
case ActionType.USERLOGIN:
return {
...state,
user: payload
}
case ActionType.ADDTOCART:
let foundItem = state.cart.contents.find(item => item.id === action.payload.id);
if (!foundItem) {
let updatedContents = state.cart.contents;
updatedContents.push(action.payload);
return {
...state,
cart: {
...state.cart,
contents: updatedContents
}
}
} else {
let updatedState = state;
let updatedItem = foundItem;
if (updatedItem.quantity) {
updatedItem.quantity += 1;
} else {
updatedItem.quantity = 2;
}
updatedState.cart.contents = updatedState.cart.contents.filter(item => item.id !== action.payload.id);
updatedState.cart.contents.push(updatedItem);
return updatedState;
}
case ActionType.UPDATESUBTOTAL:
return {
...state,
cart: {
...state.cart,
subtotal: action.payload
}
}
default:
return state;
}
}
export const AppContext = createContext<appState | any>(initialState)

63
_client/src/store/store_types.ts
View File

@@ -1,63 +0,0 @@
import { userInfo, Cart } from '../types/main';
// type definitions for reducer
export enum ActionType {
GETALL,
GETPROFILE,
GETCATEGORY,
REGISTERNEW,
UPDATEONE,
SEARCH,
USERLOGIN,
ADDTOCART,
UPDATESUBTOTAL
}
export interface userAction {
type: ActionType;
payload: any;
}
export interface appState {
searchTerm: string,
user: userInfo,
cart: Cart
}
export type SessionHeader = {
authenticated: boolean
cookie: {
expires: string
httpOnly: boolean
originalMaxAge: number
path: string
secure: boolean
}
user?: userInfo
}
// empty object templates for initial state
export const undefinedUser: userInfo = {
email: '',
name: '',
password: '',
}
export const emptyCart: Cart = {
cartID: 0,
userInfo: undefinedUser,
checkedOut: false,
contents: []
}
export const emptySessionHeader: SessionHeader = {
authenticated: false,
cookie: {
expires: "",
httpOnly: false,
originalMaxAge: 0,
path: "",
secure: false,
},
user: undefinedUser
}

62
_client/src/types/main.d.ts vendored
View File

@@ -1,62 +0,0 @@
import { SessionHeader } from "../store/store_types";
// user details and metadata
export type userInfo = {
firstName?: string
lastName?: string
email: string
id?: number
// NOTE: userInfo.name => displayName?
name?: string
password: string
verifyPassword?: string
headers?: SessionHeader
created?: string
modified?: string
}
export type LoginHeaders = {
email: string,
password: string
}
// product info
export type Product = {
name: string,
productID?: number,
category?: string
price?: string | number,
// when item is included in cart
id?: number,
quantity?: number,
shortDescription?: string,
longDescription?: string,
description?: string
minidescription?: string
categoryID: number,
inventory: number
}
export type Category = {
id?: number,
name: string,
shortDescription?: string,
longDescription?: string
}
// user-specific cart and order details
export type Cart = {
cartID: number,
userInfo: userInfo,
checkedOut: boolean,
contents: Product[],
subTotal?: number
}
export type Order = {
orderID: number,
cartID: Cart.cartID,
shipped: boolean,
delivered: boolean
}

9
_client/src/util/Page.tsx
View File

@@ -1,9 +0,0 @@
function Page({ children, classes }: any) {
return (
<section className={`page ${classes}`}>
{children}
</section>
)
}
export default Page;

72
_client/src/util/apiUtils.ts
View File

@@ -1,72 +0,0 @@
import { userInfo } from '../types/main';
const APISTRING = import.meta.env.VITE_API_URL;
export const getAllUsers = async () => {
let serverCall = await fetch(APISTRING + 'users')
.then(res => res.json());
return serverCall;
}
export const getOneUser = async (email: string) => {
let serverCall = await fetch(`${APISTRING}users?email=${email}`)
.then(res => res.json());
return serverCall;
}
export const registerNewUser = async (user: userInfo) => {
let serverCall = await fetch(APISTRING + 'register', {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(user)
});
if (serverCall.ok) console.log('User added successfully.');
return serverCall;
}
export const handleLogin = async (email: string, password: string) => {
const url = APISTRING + 'login';
console.log(url);
const res = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ email: email, password: password })
});
return res;
}
export const unwrapLogin = async (email: string, password: string) => {
const response = await handleLogin(email, password);
const { session, userProfile } = await response.json();
return { session, userProfile };
}
export const getAllProducts = async () => {
let serverCall = await fetch(APISTRING + 'product', {
method: "GET",
headers: {
"Content-Type": "application/json"
}
}).then(res => res.json());
return serverCall;
}
export const getProductDetails = async (productID: string) => {
let serverCall = await fetch(`${APISTRING}product/${productID}`, {
method: "GET",
headers: {
"Content-Type": "application/json"
}
}).then(res => res.json());
return serverCall;
}

18
_client/src/util/helpers.ts
View File

@@ -1,18 +0,0 @@
import { Product } from "../types/main";
export const getSubtotal = (cartData: Product[]) => {
let total = 0;
if (!cartData) return;
for (let item of cartData) {
if (typeof item.price === 'number') {
total += (item.price * (item.quantity || 1));
} else {
const converted = Number(item.price);
total += (converted * (item.quantity || 1));
}
}
return total;
}

1
_client/src/vite-env.d.ts vendored
View File

@@ -1 +0,0 @@
/// <reference types="vite/client" />

25
_client/tsconfig.json
View File

@@ -1,25 +0,0 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"typeRoots": [
"./src/types/main.d.ts",
"./node_modules/@types"
]
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

8
_client/tsconfig.node.json
View File

@@ -1,8 +0,0 @@
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}

7
_client/vite.config.ts
View File

@@ -1,7 +0,0 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})