diff --git a/apps/frontend/src/app/error.tsx b/apps/frontend/src/app/error.tsx index 015278e..21ff48d 100644 --- a/apps/frontend/src/app/error.tsx +++ b/apps/frontend/src/app/error.tsx @@ -1,31 +1,29 @@ 'use client'; -// import { useEffect } from 'react'; +import { useEffect } from 'react'; -export default function Error() { - // { - // error, - // reset, - // }: { - // error: Error & { digest?: string }; - // reset: () => void; - // } - // useEffect(() => { - // console.error(error); - // }, [error]); +export default function Error({ + error, + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + useEffect(() => { + console.error(error); + }, [error]); return ( - <> - //
- //

Something went wrong!

- // - //
+
+

Something went wrong!

+ +
); } diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx index 1c7311f..6ecc80a 100644 --- a/apps/frontend/src/app/layout.tsx +++ b/apps/frontend/src/app/layout.tsx @@ -1,18 +1,18 @@ -// import '@mdxeditor/editor/style.css'; -// import { Viewport } from 'next'; -// import { Roboto } from 'next/font/google'; -// import { Application } from '../shared/components/application/application.component'; +import '@mdxeditor/editor/style.css'; +import { Viewport } from 'next'; +import { Roboto } from 'next/font/google'; +import { Application } from '../shared/components/application/application.component'; import './global.css'; -// const roboto = Roboto({ -// weight: ['300', '400', '500', '700'], -// subsets: ['latin'], -// }); +const roboto = Roboto({ + weight: ['300', '400', '500', '700'], + subsets: ['latin'], +}); -// export const viewport: Viewport = { -// initialScale: 1, -// width: 'device-width', -// }; +export const viewport: Viewport = { + initialScale: 1, + width: 'device-width', +}; export default function RootLayout({ children, @@ -20,11 +20,10 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - - {/* {children} */} + + + {children} + ); } diff --git a/apps/frontend/src/app/not-found.tsx b/apps/frontend/src/app/not-found.tsx index 29d751a..b03da22 100644 --- a/apps/frontend/src/app/not-found.tsx +++ b/apps/frontend/src/app/not-found.tsx @@ -1,45 +1,44 @@ 'use client'; -// import MuiLink from '@mui/material/Link'; -// import Typography from '@mui/material/Typography'; -// import Grid2 from '@mui/material/Unstable_Grid2'; -// import Link from 'next/link'; +import MuiLink from '@mui/material/Link'; +import Typography from '@mui/material/Typography'; +import Grid2 from '@mui/material/Unstable_Grid2'; +import Link from 'next/link'; export default function NotFound() { return ( - <> - // - // - // - // 404 - // - // - // - // - // Page not found - // - // - // - // - // Go to the front page → - // - // - // + + + + 404 + + + + + Page not found + + + + + Go to the front page → + + + ); } diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx index 75b516e..ab3b2c6 100644 --- a/apps/frontend/src/app/page.tsx +++ b/apps/frontend/src/app/page.tsx @@ -1,6 +1,6 @@ import { Metadata, Viewport } from 'next'; -// import { Latest } from '../shared/components/latest/latest.component'; -// import { SubHeader } from '../shared/components/sub-header/sub-header.component'; +import { Latest } from '../shared/components/latest/latest.component'; +import { SubHeader } from '../shared/components/sub-header/sub-header.component'; export const metadata: Metadata = { title: 'you-say', @@ -15,8 +15,8 @@ export const viewport: Viewport = { export default function Index() { return (
- {/* - */} + +
); } diff --git a/apps/frontend/src/app/profile/[username]/edit/page.tsx b/apps/frontend/src/app/profile/[username]/edit/page.tsx index 97f7fc9..ff7a700 100644 --- a/apps/frontend/src/app/profile/[username]/edit/page.tsx +++ b/apps/frontend/src/app/profile/[username]/edit/page.tsx @@ -1,54 +1,54 @@ -// 'use client'; +'use client'; -// import { useFusionAuth } from '@fusionauth/react-sdk'; -// import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'; -// import Avatar from '@mui/material/Avatar'; -// import Box from '@mui/material/Box'; -// import Button from '@mui/material/Button'; -// import Container from '@mui/material/Container'; -// import FormControl from '@mui/material/FormControl'; -// import FormControlLabel from '@mui/material/FormControlLabel'; -// import FormGroup from '@mui/material/FormGroup'; -// import MuiLink from '@mui/material/Link'; -// import Stack from '@mui/material/Stack'; -// import Switch from '@mui/material/Switch'; -// import Typography from '@mui/material/Typography'; -// import Grid2 from '@mui/material/Unstable_Grid2'; -// import { styled } from '@mui/material/styles'; -// import Link from 'next/link'; -// import { PropsWithChildren } from 'react'; -// import { DefaultCoverImage } from '../../../../shared/components/default-cover-image/default-cover-image.component'; -// import { RemovableList } from '../../../../shared/components/removable-list/removable-list.component'; -// import { WhiteTextField } from '../../../../shared/components/white-textfield/white-textfield.component'; +import { useFusionAuth } from '@fusionauth/react-sdk'; +import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'; +import Avatar from '@mui/material/Avatar'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Container from '@mui/material/Container'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormGroup from '@mui/material/FormGroup'; +import MuiLink from '@mui/material/Link'; +import Stack from '@mui/material/Stack'; +import Switch from '@mui/material/Switch'; +import Typography from '@mui/material/Typography'; +import Grid2 from '@mui/material/Unstable_Grid2'; +import { styled } from '@mui/material/styles'; +import Link from 'next/link'; +import { PropsWithChildren } from 'react'; +import { DefaultCoverImage } from '../../../../shared/components/default-cover-image/default-cover-image.component'; +import { RemovableList } from '../../../../shared/components/removable-list/removable-list.component'; +import { WhiteTextField } from '../../../../shared/components/white-textfield/white-textfield.component'; -// const VisuallyHiddenInput = styled('input')({ -// clip: 'rect(0 0 0 0)', -// clipPath: 'inset(50%)', -// height: 1, -// overflow: 'hidden', -// position: 'absolute', -// bottom: 0, -// left: 0, -// whiteSpace: 'nowrap', -// width: 1, -// }); -// const EditProfileGrid2Box = styled(Grid2)({ -// width: '100%', -// backgroundColor: '#455572', -// borderRadius: '8px', -// }); -// const EditProfileTitle = ({ -// children, -// marginBottom = 2, -// }: Readonly>) => ( -// -// {children} -// -// ); +const VisuallyHiddenInput = styled('input')({ + clip: 'rect(0 0 0 0)', + clipPath: 'inset(50%)', + height: 1, + overflow: 'hidden', + position: 'absolute', + bottom: 0, + left: 0, + whiteSpace: 'nowrap', + width: 1, +}); +const EditProfileGrid2Box = styled(Grid2)({ + width: '100%', + backgroundColor: '#455572', + borderRadius: '8px', +}); +const EditProfileTitle = ({ + children, + marginBottom = 2, +}: Readonly>) => ( + + {children} + +); const gap = 2; // TODO: Disable primary button when nothing has changed. @@ -56,204 +56,203 @@ const gap = 2; export default function EditProfile({ params, }: Readonly) { - // const { userInfo } = useFusionAuth(); - // const username = params.username; + const { userInfo } = useFusionAuth(); + const username = params.username; const handleRemoveInterest = (value: string) => { console.log(value); }; return ( - <> - // - // - // Edit User Profile - // - // Preview - // - // - // - // - // - // - // - // - // - // - // Your photo - // - // - // This will be displayed on your profile. - // - // - // - // - // - // - // - // - // - // Personal information - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // Bio - // - // - // - // - // - // - // Interests - // - // - // - // - // - // - // - // - // Email notifications - // - // - // - // - // } - // value="Newsletter" - // /> - // - // - // - // - // - // - // - // - // + + + Edit User Profile + + Preview + + + + + + + + + + + Your photo + + + This will be displayed on your profile. + + + + + + + + + + Personal information + + + + + + + + + + + + + + + Bio + + + + + + + Interests + + + + + + + + + Email notifications + + + + + } + value="Newsletter" + /> + + + + + + + + + ); } diff --git a/apps/frontend/src/app/profile/[username]/page.tsx b/apps/frontend/src/app/profile/[username]/page.tsx index 8346b45..4945d20 100644 --- a/apps/frontend/src/app/profile/[username]/page.tsx +++ b/apps/frontend/src/app/profile/[username]/page.tsx @@ -1,62 +1,61 @@ -// 'use client'; +'use client'; -// import { useFusionAuth } from '@fusionauth/react-sdk'; -// import Avatar from '@mui/material/Avatar'; -// import Container from '@mui/material/Container'; -// import List from '@mui/material/List'; -// import ListItem from '@mui/material/ListItem'; -// import ListItemText from '@mui/material/ListItemText'; -// import Stack from '@mui/material/Stack'; -// import Typography from '@mui/material/Typography'; -// import { DefaultCoverImage } from '../../../shared/components/default-cover-image/default-cover-image.component'; +import { useFusionAuth } from '@fusionauth/react-sdk'; +import Avatar from '@mui/material/Avatar'; +import Container from '@mui/material/Container'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { DefaultCoverImage } from '../../../shared/components/default-cover-image/default-cover-image.component'; // TODO: utilize useFusionAuth + http calls to fetch necessary data for profile page export default function Profile({ params }: Readonly) { - // const { userInfo } = useFusionAuth(); - // const username = params.username; + const { userInfo } = useFusionAuth(); + const username = params.username; const bio = 'water earth fire air '.repeat(50).trim(); return ( - <> - // - // - // - // - // - // {userInfo?.given_name + ' ' + userInfo?.family_name} - // - // - // {username} - // - // - // {bio} - // - // - // {['interest 1', 'interest 2'].map((value) => ( - // - // - // - // ))} - // - // - // + + + + + + {userInfo?.given_name + ' ' + userInfo?.family_name} + + + {username} + + + {bio} + + + {['interest 1', 'interest 2'].map((value) => ( + + + + ))} + + + ); } diff --git a/apps/frontend/src/app/shop/page.tsx b/apps/frontend/src/app/shop/page.tsx index e451fe6..09ef6d8 100644 --- a/apps/frontend/src/app/shop/page.tsx +++ b/apps/frontend/src/app/shop/page.tsx @@ -1,10 +1,7 @@ -// 'use client'; +'use client'; -// import Container from '@mui/material/Container'; +import Container from '@mui/material/Container'; export default function Shop() { - return ( - <> - // SHOP - ); + return SHOP; } diff --git a/apps/frontend/src/app/sign-up/page.tsx b/apps/frontend/src/app/sign-up/page.tsx index cd96538..19c66fb 100644 --- a/apps/frontend/src/app/sign-up/page.tsx +++ b/apps/frontend/src/app/sign-up/page.tsx @@ -1,69 +1,68 @@ -// 'use client'; +'use client'; -// import Button from '@mui/material/Button'; -// import Container from '@mui/material/Container'; -// import Stack from '@mui/material/Stack'; -// import { FormEvent } from 'react'; -// import { useSignUpMutation } from '../../shared/api/auth.api'; -// import { WhiteTextField } from '../../shared/components/white-textfield/white-textfield.component'; -// import { useSubmit } from '../../shared/hooks/use-submit.hook'; +import Button from '@mui/material/Button'; +import Container from '@mui/material/Container'; +import Stack from '@mui/material/Stack'; +import { FormEvent } from 'react'; +import { useSignUpMutation } from '../../shared/api/auth.api'; +import { WhiteTextField } from '../../shared/components/white-textfield/white-textfield.component'; +import { useSubmit } from '../../shared/hooks/use-submit.hook'; export default function SignUp() { - // const submit = useSubmit({ - // useMutation: useSignUpMutation, - // successMessage: 'Signed up successfully, Now check your email!', - // onSuccessRedirectTo: '/', - // }); - // const handleSubmit = async (event: FormEvent) => { - // event.preventDefault(); + const submit = useSubmit({ + useMutation: useSignUpMutation, + successMessage: 'Signed up successfully, Now check your email!', + onSuccessRedirectTo: '/', + }); + const handleSubmit = async (event: FormEvent) => { + event.preventDefault(); - // await submit(event.currentTarget); - // }; + await submit(event.currentTarget); + }; return ( - <> - // - // - // - // - // - // - // - // + + + + + + + + ); }