update: implement account page reducer to manage account page state

This commit is contained in:
Aaron William Po
2023-06-02 00:08:50 -04:00
parent 81cb95391a
commit 02d753fb41
5 changed files with 121 additions and 37 deletions

View File

@@ -4,13 +4,21 @@ import { NextPage } from 'next';
import { Tab } from '@headlessui/react';
import Head from 'next/head';
import AccountInfo from '@/components/Account/AccountInfo';
import { useContext } from 'react';
import { useContext, useReducer } from 'react';
import UserContext from '@/contexts/UserContext';
import Security from '@/components/Account/Security';
import DeleteAccount from '@/components/Account/DeleteAccount';
import accountPageReducer from '@/reducers/accountPageReducer';
const AccountPage: NextPage = () => {
const { user } = useContext(UserContext);
const [pageState, dispatch] = useReducer(accountPageReducer, {
accountInfoOpen: false,
securityOpen: false,
deleteAccountOpen: false,
});
if (!user) return null;
return (
@@ -47,9 +55,9 @@ const AccountPage: NextPage = () => {
</Tab.List>
<Tab.Panels>
<Tab.Panel className="h-full space-y-5">
<AccountInfo />
<Security />
<DeleteAccount />
<AccountInfo pageState={pageState} dispatch={dispatch} />
<Security pageState={pageState} dispatch={dispatch} />
<DeleteAccount pageState={pageState} dispatch={dispatch} />
</Tab.Panel>
<Tab.Panel>Your posts!</Tab.Panel>
</Tab.Panels>