Ethan/profile page

src/api/supabase/queries/user_queries.ts

@@ -106,3 +106,26 @@ export async function arrayOfFavorites(): Promise<Product[]> {
 
   return arrayOfProducts;
 }
+
+/**
+ * fetchUserAddress: Get's a user's address based on their UUID
+ * @param uuid: String containing the uuid of the user
+ */
+ export async function fetchUserAddress(uuid: string) {
+  try {
+    const { data: user, error } = await supabase
+      .from('address')
+      .select('*')
+      .eq('user_id', uuid)
+      .single();
+
+    if (error) {
+      console.error('Error fetching user data:', error);
+    }
+
+    return user;
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  }
+}

src/app/profileScreenDelivery/page.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
+import { useEffect, useState } from 'react';
+import { Heading2, Heading4, Body2, Body3} from '@/styles/fonts';
+import supabase from '@/api/supabase/createClient';
+import { addOrRemoveProductFromFavorite, arrayOfFavorites, fetchUser, fetchUserAddress } from '@/api/supabase/queries/user_queries';
+import BackButton from '../../components/BackButton/BackButton';
+import {
+  LogOutButton,
+  GlobalStyle,
+  PopUp,
+  NavBarMovedUP,
+  FooterMoved,
+  AccountDetails,
+  HeadingBack,
+  HeadingSpacing,
+  TextSpacing,
+  OrderHistory,
+  FavoritesContainer,
+  FavoriteDiv,
+} from './styles';
+import { signOut } from '../../api/supabase/auth/auth';
+import 'react-toastify/dist/ReactToastify.css';
+import ViewAllButton from '@/components/ViewAllButton/ViewAllButton';
+import { Address, Product, User } from '@/schema/schema';
+import { HeartIcon, TransparentButton } from '../favorites/styles';
+
+export default function Profile() {
+  const [Favorites, setFavorites] = useState<Product[]>([]);
+  const [User, setUser] = useState<User>();
+    async function getUser() {
+        const data = await fetchUser();
+        setUser(data);
+
+    }
+    const [UserAddress, setUserAddress] =  useState<Address>();
+    async function getUserAddress() {
+        const data = await fetchUser();
+        const address = await fetchUserAddress(data.id);
+        setUserAddress(address);
+    }
+
+  async function fetchProducts() {
+    const data = (await arrayOfFavorites()) as Product[];
+    setFavorites(data);
+  }
+  useEffect(() => {
+    fetchProducts();
+    getUser();
+    getUserAddress();
+  }, []);
+
+  async function clickFunctions(props: { fav: Product }) {
+    const { fav } = props;
+    addOrRemoveProductFromFavorite(fav, false);
+    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
+  }
+  const router = useRouter();
+  const showToastMessage = () => {
+    signOut();
+    toast("You've been Logged Out! Redirecting...", {
+      position: toast.POSITION.TOP_CENTER,
+    });
+    setTimeout(() => {
+      router.push('/login');
+    }, 3000);
+  };
+  return (
+    <main>
+
+      <NavBarMovedUP />
+      <HeadingBack>
+      <BackButton destination= "./storefront" /> 
+      <Heading2> 
+        My Profile
+      </Heading2>
+      </HeadingBack>
+      <GlobalStyle />
+      <AccountDetails>
+        <Heading4>
+          Account Details
+        </Heading4> 
+        <HeadingSpacing>
+        <Body2> 
+          Email
+        </Body2>
+        </HeadingSpacing>
+        <TextSpacing>
+        <Body3> 
+          {User?.email}
+        </Body3>
+        </TextSpacing>
+        <HeadingSpacing>
+        <Body2> 
+          Name
+        </Body2>
+        </HeadingSpacing>
+        <TextSpacing>
+        <Body3> 
+          {User?.first_name} {User?.last_name}
+        </Body3>
+        </TextSpacing>
+        <HeadingSpacing>
+        <Body2> 
+          Address
+        </Body2>
+        </HeadingSpacing>
+        <TextSpacing>
+        <Body3> 
+        {UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode}
+        </Body3>
+        </TextSpacing>
+        <LogOutButton onClick={() => showToastMessage()}>Log Out</LogOutButton>
+      </AccountDetails>
+      <OrderHistory>
+      <Heading4> 
+        Order History
+      </Heading4>
+      <ViewAllButton destination = "./favorites"/>
+      </OrderHistory>
+      <FavoritesContainer>
+      <Heading4> 
+        Favorites
+      </Heading4>
+      <ViewAllButton destination = "./favorites"/>
+          {Favorites.slice(0,2).map(favorite => (
+            <FavoriteDiv key={favorite.id}>
+              <img
+                src={favorite.photo}
+                alt={favorite.name}
+                style={{ width: '75px', height: '75px' }}
+              />
+              <p>{favorite.name}<br></br>Product ID: {favorite.id}</p>
+              <TransparentButton
+                onClick={() => clickFunctions({ fav: favorite })}
+              >
+                <HeartIcon />
+              </TransparentButton>
+            </FavoriteDiv>
+          ))}
+      </FavoritesContainer>
+      {/* <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
+      <LogOutButton onClick={() => router.push('/favorites')}>
+        Favorites
+      </LogOutButton> */}
+      <FooterMoved />
+    </main>
+  );
+}

src/app/profileScreenDelivery/styles.ts

@@ -0,0 +1,111 @@
+import styled, { createGlobalStyle } from 'styled-components';
+
+import { ToastContainer } from 'react-toastify';
+
+import NavBar from '../../components/NavBarFolder/NavBar';
+
+import Footer from '../../components/FooterFolder/Footer';
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background:white;
+    color: black;
+    overflow: visible;
+
+  }
+`;
+
+export const TextSpacing = styled.div`
+  margin-top: 10px;
+
+`;
+export const HeadingSpacing = styled.div`
+  margin-top: 30px;
+
+`;
+
+export const HeadingBack = styled.div`
+  margin-left: 171px;
+  margin-top: 41px;
+
+`;
+
+export const AccountDetails = styled.div`
+  margin-left: 189px;
+  margin-top: 73px;
+  width: 350px;
+  height: 290px;
+  border-radius: 10px;
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  padding-right: 30px;
+`;
+
+export const OrderHistory = styled.div`
+  margin-left: 800px;
+  margin-top: -291px;
+  margin-bottom: 47px;
+  width: 543.4px;
+  height: 343px;
+  border-radius: 10px;
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
+`;
+
+export const FavoritesContainer = styled.div`
+  margin-left: 800px;
+  width: 543.4px;
+  height: 343px;
+  border-radius: 10px;
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
+`;
+
+export const LogOutButton = styled.button`
+  background: #00507f;
+  color: #fff;
+  text-align: center;
+  font-size: 25px;
+  font-family: normal;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  border: transparent;
+  border-radius: 5px;
+  width: 350px;
+  height: 300px;
+  z-index: 1000;
+  margin-top: 100px;
+  padding-top: 10px;
+  padding-right: 10px;
+  padding-left: 10px;
+  padding-bottom: 10px;
+`;
+/* transform: translateY(200px); */
+
+export const PopUp = styled(ToastContainer)`
+  transform: translate(-150px, 250px);
+  position: fixed;
+`;
+
+export const FooterMoved = styled(Footer)`
+  transform: translateY(400px);
+`;
+
+export const NavBarMovedUP = styled(NavBar)`
+  position: relative;
+`;
+
+export const FavoriteDiv = styled.div`
+display: flex;
+flex-direction: row;
+align-items: start;
+justify-content: space-around;
+width: 100%;
+margin-bottom: 50px;
+margin-top: 30px;
+
+`;