refactor: context as a provider

jlsuh · Dec 7, 2024 · e0d9597 · e0d9597
1 parent 12143e9
commit e0d9597
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 19 deletions.
diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
@@ -2,11 +2,11 @@ import { PlanContext } from '@/context';
 import { plans } from '@/data';
 import { PlanPage } from '@/pages';
 import type { PlanContextProps } from '@/types';
-import { useContext } from 'react';
+import { use } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 function AppRouter() {
-  const { contextPlan } = useContext<PlanContextProps>(PlanContext);
+  const { contextPlan } = use<PlanContextProps>(PlanContext);
   const { id } = contextPlan;
 
   return (

diff --git a/src/components/ModeSelect.tsx b/src/components/ModeSelect.tsx
@@ -2,10 +2,10 @@ import { PlanContext } from '@/context';
 import type { PlanContextProps, SubjectProps } from '@/types';
 import { replaceWhiteSpace } from '@/utils';
 import { FormControl, InputLabel, NativeSelect } from '@mui/material';
-import { type ChangeEvent, useContext } from 'react';
+import { type ChangeEvent, use } from 'react';
 
 function ModeSelect({ subject }: { subject: SubjectProps }) {
-  const { contextPlan, updateMode } = useContext<PlanContextProps>(PlanContext);
+  const { contextPlan, updateMode } = use<PlanContextProps>(PlanContext);
   const targetSubject = contextPlan.subjects[subject.id];
   const contextMode = targetSubject.modes[0];
 

diff --git a/src/components/PlanSelect.tsx b/src/components/PlanSelect.tsx
@@ -7,7 +7,7 @@ import {
   Select,
   type SelectChangeEvent,
 } from '@mui/material';
-import { useContext } from 'react';
+import { use } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const selectStyles = {
@@ -30,7 +30,7 @@ const selectStyles = {
 };
 
 function PlanSelect({ availablePlans = plans }) {
-  const { contextPlan } = useContext<PlanContextProps>(PlanContext);
+  const { contextPlan } = use<PlanContextProps>(PlanContext);
   const navigate = useNavigate();
 
   const handleChangeMenuItem = (event: SelectChangeEvent<string>) => {

diff --git a/src/components/StatusMarker.tsx b/src/components/StatusMarker.tsx
@@ -2,7 +2,7 @@ import { PlanContext } from '@/context';
 import type { PlanContextProps, Status, SubjectProps } from '@/types';
 import { Box, Divider, Link } from '@mui/material';
 import { dividerClasses } from '@mui/material/Divider';
-import { useContext } from 'react';
+import { use } from 'react';
 
 function StatusMarker({
   levelSubjects,
@@ -13,7 +13,7 @@ function StatusMarker({
   renderDivider: boolean;
   status: Status;
 }) {
-  const { updateStatuses } = useContext<PlanContextProps>(PlanContext);
+  const { updateStatuses } = use<PlanContextProps>(PlanContext);
 
   const handleClickStatusMarker = () => {
     const newStatus = status;

diff --git a/src/components/StatusRadioGroup.tsx b/src/components/StatusRadioGroup.tsx
@@ -8,11 +8,10 @@ import {
   Radio,
   RadioGroup,
 } from '@mui/material';
-import { type ChangeEvent, useContext } from 'react';
+import { type ChangeEvent, use } from 'react';
 
 function StatusRadioGroup({ subject }: { subject: SubjectProps }) {
-  const { contextPlan, updateStatuses } =
-    useContext<PlanContextProps>(PlanContext);
+  const { contextPlan, updateStatuses } = use<PlanContextProps>(PlanContext);
   const contextSubject = contextPlan.subjects[subject.id];
   const contextStatus = contextSubject.status;
 

diff --git a/src/components/Subject.tsx b/src/components/Subject.tsx
@@ -4,10 +4,10 @@ import type { PlanContextProps, SubjectProps } from '@/types';
 import CircleIcon from '@mui/icons-material/Circle';
 import { Card, CardActions, CardContent, Typography } from '@mui/material';
 import Grid from '@mui/material/Grid2';
-import { useContext } from 'react';
+import { use } from 'react';
 
 function Subject({ subject }: { subject: SubjectProps }) {
-  const { contextPlan } = useContext<PlanContextProps>(PlanContext);
+  const { contextPlan } = use<PlanContextProps>(PlanContext);
   const { subjects } = contextPlan;
   const contextSubject = subjects[subject.id];
   const color = contextSubject.status.color;

diff --git a/src/components/SubjectStack.tsx b/src/components/SubjectStack.tsx
@@ -5,10 +5,10 @@ import type { PlanContextProps } from '@/types';
 import { findPlanById, replaceWhiteSpace } from '@/utils';
 import { Box, Stack, Typography } from '@mui/material';
 import Grid from '@mui/material/Grid2';
-import { useContext } from 'react';
+import { use } from 'react';
 
 function SubjectStack() {
-  const { contextPlan } = useContext<PlanContextProps>(PlanContext);
+  const { contextPlan } = use<PlanContextProps>(PlanContext);
   const plan = findPlanById(contextPlan.id);
   const subjectsByLevel = plan.subjects;
   const statusesMaxIndex = Object.values(statuses).length - 1;

diff --git a/src/context/PlanProvider.tsx b/src/context/PlanProvider.tsx
@@ -101,15 +101,15 @@ function PlanProvider({ children }: { children: ReactNode }) {
   }
 
   return (
-    <PlanContext.Provider
+    <PlanContext
       value={{
         contextPlan,
         updateMode,
         updateStatuses,
       }}
     >
       {children}
-    </PlanContext.Provider>
+    </PlanContext>
   );
 }
 

diff --git a/src/hooks/useDigraph.ts b/src/hooks/useDigraph.ts
@@ -1,10 +1,10 @@
 import { PlanContext } from '@/context';
 import type { PlanContextProps } from '@/types';
 import { Digraph, findPlanById } from '@/utils';
-import { useContext } from 'react';
+import { use } from 'react';
 
 function useDigraph() {
-  const { contextPlan } = useContext<PlanContextProps>(PlanContext);
+  const { contextPlan } = use<PlanContextProps>(PlanContext);
   const plan = findPlanById(contextPlan.id);
 
   function composeDigraph() {