buyankhuu's edits

calblueprint · Feb 14, 2024 · dc09098 · dc09098
1 parent 66e4924
commit dc09098
Show file tree

Hide file tree

Showing 4 changed files with 196 additions and 114 deletions.
diff --git a/src/app/delivery/page.tsx b/src/app/delivery/page.tsx
@@ -17,6 +17,7 @@ import {
   InformationText,
   QtyText,
   NavBarMovedUP,
+  InputStyled,
 } from './styles';
 
 export default function App() {
@@ -39,9 +40,13 @@ export default function App() {
             Shipping
           </Normal700Text>
           <Normal700Text>Name</Normal700Text>
-          <InformationText>Ethan Auyeung</InformationText>
+          <InformationText>
+            <InputStyled placeholder="Ethan Auyeung"></InputStyled>
+          </InformationText>
           <Normal700Text>Address</Normal700Text>
-          <InformationText>123 Telegraph Ave</InformationText>
+          <InformationText>
+            <InputStyled placeholder="123 Telegraph Ave"></InputStyled>
+          </InformationText>
         </InformationContainer>
         <OrderContainer>
           <OrderSummary>

diff --git a/src/app/delivery/styles.ts b/src/app/delivery/styles.ts
@@ -51,6 +51,23 @@ export const InformationContainer = styled.div`
   height: 400px;
 `;
 
+export const InputStyled = styled.input`
+  width: 100%;
+  height: 100%;
+  border: 1px solid ${COLORS.neutralGrey};
+  background: ${COLORS.lightGrey};
+  background: ${COLORS.lightGrey};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  padding-left: 20px;
+  color: ${COLORS.black};
+  &::placeholder,
+  ::-webkit-input-placeholder {
+    color: ${COLORS.black};
+  }
+`;
+
 export const InformationText = styled.div`
   width: 730px;
   height: 50px;
@@ -65,7 +82,6 @@ export const InformationText = styled.div`
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  padding-left: 20px;
 `;
 
 export const OrderContainer = styled.div`

diff --git a/src/app/profileScreenDelivery/page.tsx b/src/app/profileScreenDelivery/page.tsx
@@ -32,36 +32,68 @@ import { signOut } from '../../api/supabase/auth/auth';
 import 'react-toastify/dist/ReactToastify.css';
 import { TransparentButton } from '../favorites/styles';
 
-export default function Profile() {
-  const [Favorites, setFavorites] = useState<Product[]>([]);
+function FavoriteSection(props: {
+  Favorites: Product[];
+  setFavorites: (category: Product[]) => void;
+}) {
+  async function clickFunctions(props: { fav: Product }) {
+    const { fav } = props;
+    addOrRemoveProductFromFavorite(fav, false);
+    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
+  }
+  const { Favorites, setFavorites } = props;
+  return (
+    <main>
+      <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 />
+              Product ID: {favorite.id}
+            </p>
+            <TransparentButton
+              onClick={() => clickFunctions({ fav: favorite })}
+            >
+              <HeartIcon />
+            </TransparentButton>
+          </FavoriteDiv>
+        ))}
+      </FavoritesContainer>
+    </main>
+  );
+}
+
+function OrderHistorySection() {
+  return (
+    <main>
+      <OrderHistory>
+        <Heading4>Order History</Heading4>
+        <ViewAllButton destination="./favorites" /> /
+      </OrderHistory>
+    </main>
+  );
+}
+function AccountDetailSection() {
   const [user, setUser] = useState<User>();
+  const [UserAddress, setUserAddress] = useState<Address>();
+  const router = useRouter();
   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...", {
@@ -71,16 +103,12 @@ export default function Profile() {
       router.push('/login');
     }, 3000);
   };
+  useEffect(() => {
+    getUser();
+    getUserAddress();
+  }, []);
   return (
     <main>
-      <NavBarMovedUP />
-      <HeadingBack>
-        <BackButtonDiv>
-          <BackButton destination="./storefront" />
-        </BackButtonDiv>
-        <Heading2>My Profile</Heading2>
-      </HeadingBack>
-      <GlobalStyle />
       <AccountDetails>
         <Heading4>Account Details</Heading4>
         <HeadingSpacing>
@@ -107,33 +135,33 @@ export default function Profile() {
         </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 />
-              Product ID: {favorite.id}
-            </p>
-            <TransparentButton
-              onClick={() => clickFunctions({ fav: favorite })}
-            >
-              <HeartIcon />
-            </TransparentButton>
-          </FavoriteDiv>
-        ))}
-      </FavoritesContainer>
+    </main>
+  );
+}
+
+export default function Profile() {
+  const [Favorites, setFavorites] = useState<Product[]>([]);
+  async function fetchProducts() {
+    const data = (await arrayOfFavorites()) as Product[];
+    setFavorites(data);
+  }
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  return (
+    <main>
+      <NavBarMovedUP />
+      <HeadingBack>
+        <BackButtonDiv>
+          <BackButton destination="./storefront" />
+        </BackButtonDiv>
+        <Heading2>My Profile</Heading2>
+      </HeadingBack>
+      <GlobalStyle />
+      <AccountDetailSection />
+      <OrderHistorySection />
+      <FavoriteSection Favorites={Favorites} setFavorites={setFavorites} />
       {/* <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
       <LogOutButton onClick={() => router.push('/favorites')}>
         Favorites