Skip to content

Commit

Permalink
cleaned up the profile screen, more to be done
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidqing6432
davidqing6432 committed Mar 27, 2024
1 parent 7cc1d91 commit 1f22052
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 102 deletions.
101 changes: 51 additions & 50 deletions src/app/profileScreen/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,25 @@ import {
} from '@/api/supabase/queries/user_queries';
import { Address, Product, User } from '@/schema/schema';
import ViewAllButton from '@/components/ViewAllButton/ViewAllButton';
import NavBar from '@/components/NavBarFolder/NavBar';
import BackButton from '../../components/BackButton/BackButton';
import {
LogOutButton,
NavBarMovedUP,
AccountDetails,
HeadingBack,
HeadingSpacing,
TextSpacing,
OrderHistory,
FavoritesContainer,
ProductNameDiv,
FavoriteDiv,
HeartIcon,
BackButtonDiv,
BlankSpace,
HeaderDiv,
Fullscreen,
MainContainer,
AccountDiv,
InfoDiv,
ContentContainer,
FlexContainer,
PageContainer,
} from './styles';
import { signOut } from '../../api/supabase/auth/auth';
import 'react-toastify/dist/ReactToastify.css';
Expand Down Expand Up @@ -97,22 +99,12 @@ function OrderHistorySection() {
function AccountDetailSectionDelivery(props: { user: User }) {
const { user } = props;
const [UserAddress, setUserAddress] = useState<Address>();
const router = useRouter();

async function getUserAddress() {
const data = await fetchUser();
const address = await fetchUserAddress(data.id);
setUserAddress(address);
}
const showToastMessage = () => {
signOut();
toast("You've been Logged Out! Redirecting...", {
position: toast.POSITION.TOP_CENTER,
});
setTimeout(() => {
router.push('/login');
}, 3000);
};

useEffect(() => {
getUserAddress();
Expand Down Expand Up @@ -143,26 +135,13 @@ function AccountDetailSectionDelivery(props: { user: User }) {
{UserAddress?.street}, {UserAddress?.city}, {UserAddress?.zipcode}
</Body1>
</TextSpacing>
<LogOutButton onClick={() => showToastMessage()}>Log Out</LogOutButton>
</AccountDetails>
</main>
);
}
function AccountDetailSectionPickUp(props: { user: User }) {
const { user } = props;

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>
<AccountDetails>
Expand All @@ -187,7 +166,6 @@ function AccountDetailSectionPickUp(props: { user: User }) {
<TextSpacing>
<Body2>+1 510-123-4567 {/* User?.phone */}</Body2>
</TextSpacing>
<LogOutButton onClick={() => showToastMessage()}>Log Out</LogOutButton>
</AccountDetails>
</main>
);
Expand All @@ -196,6 +174,7 @@ function AccountDetailSectionPickUp(props: { user: User }) {
export default function Profile() {
const [Favorites, setFavorites] = useState<Product[]>([]);
const [user, setUser] = useState<User>();
const router = useRouter();

async function fetchProducts() {
const data = (await arrayOfFavorites()) as Product[];
Expand All @@ -212,34 +191,56 @@ export default function Profile() {
if (user === undefined) {
return <p>Error Loading User</p>;
}

const showToastMessage = () => {
signOut();
toast("You've been Logged Out! Redirecting...", {
position: toast.POSITION.TOP_CENTER,
});
setTimeout(() => {
router.push('/login');
}, 3000);
};

return (
<Fullscreen>
<NavBarMovedUP />
<HeadingBack>
<BackButtonDiv>
<BackButton destination="./storefront" />
</BackButtonDiv>
<Heading1>My Profile</Heading1>
</HeadingBack>
<PageContainer>
<ToastContainer
position="top-right"
autoClose={500}
limit={1}
hideProgressBar
/>
<NavBar />
<FlexContainer>
<MainContainer>
<BackButton destination="./storefront" />
<Heading1>My Profile</Heading1>
<ContentContainer>
<AccountDiv>
{user.delivery_allowed ? (
<AccountDetailSectionDelivery user={user} />
) : (
<AccountDetailSectionPickUp user={user} />
)}
<LogOutButton onClick={() => showToastMessage()}>
Log Out
</LogOutButton>
</AccountDiv>
<InfoDiv>
<OrderHistorySection />
<FavoriteSection
Favorites={Favorites}
setFavorites={setFavorites}
/>
</InfoDiv>
</ContentContainer>

{user.delivery_allowed ? (
<AccountDetailSectionDelivery user={user} />
) : (
<AccountDetailSectionPickUp user={user} />
)}
<OrderHistorySection />
<FavoriteSection Favorites={Favorites} setFavorites={setFavorites} />
{/* <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
<LogOutButton onClick={() => router.push('/favorites')}>
Favorites
</LogOutButton> */}
<BlankSpace />
</Fullscreen>
{/* <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
<LogOutButton onClick={() => router.push('/favorites')}>
Favorites
</LogOutButton> */}
</MainContainer>
</FlexContainer>
</PageContainer>
);
}
98 changes: 65 additions & 33 deletions src/app/profileScreen/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ToastContainer } from 'react-toastify';

import { Heart } from 'react-feather';

import COLORS from '@/styles/colors';
import NavBar from '../../components/NavBarFolder/NavBar';

import Footer from '../../components/FooterFolder/Footer';
Expand All @@ -20,30 +21,22 @@ export const HeadingBack = styled.div`
`;

export const AccountDetails = styled.div`
margin-left: 300px;
margin-top: 50px;
width: 500px;
height: 350px;
width: 100%;
height: 100%;
border-radius: 10px;
background: var(--White, #fff);
background: ${COLORS.white};
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
align-items: left;
padding-top: 29px;
padding-right: 29px;
padding-left: 29px;
padding-bottom: 29px;
align-items: flex-start;
padding: 32px;
`;

export const OrderHistory = styled.div`
margin-left: 900px;
margin-top: -350px;
margin-bottom: 47px;
width: 600px;
height: 350px;
width: 100%;
height: 100%;
border-radius: 10px;
background: var(--White, #fff);
background: ${COLORS.white};
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
padding-top: 23px;
padding-right: 23px;
Expand All @@ -52,11 +45,10 @@ export const OrderHistory = styled.div`
`;

export const FavoritesContainer = styled.div`
margin-left: 900px;
width: 600px;
height: 350px;
width: 100%;
height: 100%;
border-radius: 10px;
background: var(--White, #fff);
background: ${COLORS.white};
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
padding-top: 23px;
padding-right: 23px;
Expand All @@ -65,7 +57,7 @@ export const FavoritesContainer = styled.div`
`;

export const LogOutButton = styled.button`
background: #1b3679;
background: ${COLORS.navy};
color: #fff;
text-align: center;
font-size: 20px;
Expand All @@ -75,18 +67,8 @@ export const LogOutButton = styled.button`
line-height: normal;
border: transparent;
border-radius: 5px;
width: 405px;
height: 300px;
z-index: 1000;
margin-top: 115px;
padding-top: 10px;
margin-left: 15px;
margin-right: 2px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
`;
/* transform: translateY(200px); */
padding: 8px;
`;

export const PopUp = styled(ToastContainer)`
transform: translate(-150px, 250px);
Expand Down Expand Up @@ -143,3 +125,53 @@ export const Fullscreen = styled.div`
width: 100%;
height: 100%;
`;

export const PageContainer = styled.div`
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
`;

export const FlexContainer = styled.div`
flex-grow: 1;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
gap: 16px;
padding: 16px;
background-color: ${COLORS.offWhite};
`;

export const MainContainer = styled.div`
display: flex;
flex-direction: column;
gap: 16px;
`;

export const ContentContainer = styled.div`
display: flex;
flex-direction: row;
gap: 64px;
width: 100%;
height: 100%;
`;

export const AccountDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
width: 500px;
height: 400px;
`;

export const InfoDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
width: 500px;
height: 500px;
`;
13 changes: 5 additions & 8 deletions src/components/BackButton/BackButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import Link from 'next/link';
import { Body2Bold } from '@/styles/fonts';
import { BackDiv, ArrowLeftIcon } from './styles';
import { BackLink, ArrowLeftIcon } from './styles';

export default function BackButton(props: { destination: string }) {
const { destination } = props;
return (
<Link href={destination}>
<BackDiv>
<ArrowLeftIcon />
<Body2Bold>Back</Body2Bold>
</BackDiv>
</Link>
<BackLink href={destination}>
<ArrowLeftIcon />
<Body2Bold>Back</Body2Bold>
</BackLink>
);
}
13 changes: 2 additions & 11 deletions src/components/BackButton/styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,16 @@
import styled from 'styled-components';
import { ArrowLeft } from 'react-feather';
import Image from 'next/image';
import Link from 'next/link';
import COLORS from '../../styles/colors';

export const BackDiv = styled.button`
export const BackLink = styled(Link)`
display: flex;
flex-direction: row;
align-items: center;
color: ${COLORS.black};
background-color: transparent;
border: transparent;
margin-left: 0px;
margin-top: 55px;
gap: 5px;
`;

export const ImageWithSize = styled(Image)`
width={23}
height={23}
`;

export const ArrowLeftIcon = styled(ArrowLeft)`
width: 17px;
height: 17px;
Expand Down

0 comments on commit 1f22052

Please sign in to comment.