Get rid of prop hell with dream tags and characters

bombies · Nov 4, 2023 · 609a142 · 609a142
1 parent a78b026
commit 609a142
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 78 deletions.
diff --git a/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/DreamsProvider.tsx b/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/DreamsProvider.tsx
@@ -1,11 +1,15 @@
 "use client"
 
 import {FC, PropsWithChildren} from "react";
-import useDreams, {DreamsState} from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/hooks/useDreams";
+import useDreams, {
+    DreamsState
+} from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/hooks/useDreams";
 import useDreamCharacters, {
     DreamCharactersState
 } from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/hooks/useDreamCharacters";
-import useDreamTags, {DreamTagsState} from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/hooks/useDreamTags";
+import useDreamTags, {
+    DreamTagsState
+} from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/hooks/useDreamTags";
 import {createDataContext, DataContextProps} from "@/utils/client/client-data-utils";
 
 interface DreamsContextProps extends DataContextProps {
@@ -15,6 +19,9 @@ interface DreamsContextProps extends DataContextProps {
 }
 
 const [DreamsContext, useHook] = createDataContext<DreamsContextProps>("useDreamsData must be used in a DreamsProvider!")
+const [UserDreamsContext, useUserDreamsHook] = createDataContext<DreamsState>("useUserDreams must be used in a UserDreamsProvider!")
+const [UserDreamTagsContext, useUserDreamTagsHook] = createDataContext<DreamTagsState>("useUserDreamTags must be used in a UserDreamTagsProvider!")
+const [UserDreamCharactersContext, useUserDreamCharactersHook] = createDataContext<DreamCharactersState>("useUserDreamCharacters must be used in a UserDreamCharactersProvider!")
 
 const DreamsProvider: FC<PropsWithChildren> = ({children}) => {
     const dreams = useDreams()
@@ -23,10 +30,19 @@ const DreamsProvider: FC<PropsWithChildren> = ({children}) => {
 
     return (
         <DreamsContext.Provider value={{dreams, characters, tags}}>
-            {children}
+            <UserDreamsContext.Provider value={dreams}>
+                <UserDreamTagsContext.Provider value={tags}>
+                    <UserDreamCharactersContext.Provider value={characters}>
+                        {children}
+                    </UserDreamCharactersContext.Provider>
+                </UserDreamTagsContext.Provider>
+            </UserDreamsContext.Provider>
         </DreamsContext.Provider>
     )
 }
 
 export default DreamsProvider
-export const useDreamsData = useHook
+export const useDreamsData = useHook
+export const useUserDreams = useUserDreamsHook
+export const useUserDreamTags = useUserDreamTagsHook
+export const useUserDreamCharacters = useUserDreamCharactersHook
diff --git a/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/DreamCard.tsx b/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/DreamCard.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import {FC, Fragment, useCallback, useState} from "react";
-import {Dream, DreamCharacter, DreamTag} from "@prisma/client";
+import {Dream} from "@prisma/client";
 import {CardBody, CardHeader} from "@nextui-org/card";
 import Card from "@/app/(site)/components/Card";
 import DreamModal from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/DreamModal";
@@ -13,16 +13,14 @@ import {deleteMutator, handleAxiosError} from "@/utils/client/client-utils";
 type Props = {
     dream: Dream,
     isDisabled?: boolean,
-    allCharacters: DreamCharacter[],
-    allTags: DreamTag[],
     optimisticRemove?: OptimisticWorker<Dream>,
 }
 
 const DeleteDream = (dreamId: string) => {
     return useSWRMutation(`/api/me/dreams/${dreamId}`, deleteMutator<Dream>())
 }
 
-const DreamCard: FC<Props> = ({isDisabled, dream, allTags, allCharacters, optimisticRemove}) => {
+const DreamCard: FC<Props> = ({isDisabled, dream, optimisticRemove}) => {
     const [modalOpen, setModalOpen] = useState(false)
     const {trigger: deleteDream} = DeleteDream(dream.id)
 
@@ -36,8 +34,6 @@ const DreamCard: FC<Props> = ({isDisabled, dream, allTags, allCharacters, optimi
         <Fragment>
             <DreamModal
                 dream={dream}
-                allCharacters={allCharacters}
-                allTags={allTags}
                 isOpen={modalOpen}
                 onClose={() => setModalOpen(false)}
                 onDelete={() => {

diff --git a/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/DreamModal.tsx b/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/DreamModal.tsx
@@ -2,7 +2,7 @@
 
 import {FC, Fragment, useState} from "react";
 import Modal from "@/app/(site)/components/Modal";
-import {Dream, DreamCharacter, DreamTag} from "@prisma/client";
+import {Dream} from "@prisma/client";
 import {Divider} from "@nextui-org/divider";
 import {Button} from "@nextui-org/react";
 import ConfirmationModal from "@/app/(site)/components/ConfirmationModal";
@@ -11,16 +11,14 @@ import DreamView from "@/app/(site)/(internal)/dashboard/(your-dreams)/component
 
 type Props = {
     dream: Dream,
-    allCharacters: DreamCharacter[],
-    allTags: DreamTag[],
     isOpen?: boolean,
     onClose?: () => void,
     onDelete?: () => void,
 }
 
 
 
-const DreamModal: FC<Props> = ({dream, allTags, allCharacters, isOpen, onClose, onDelete}) => {
+const DreamModal: FC<Props> = ({dream, isOpen, onClose, onDelete}) => {
     const [deleteModalOpen, setDeleteModalOpen] = useState(false)
 
     return (
@@ -41,8 +39,6 @@ const DreamModal: FC<Props> = ({dream, allTags, allCharacters, isOpen, onClose,
             >
                 <DreamView
                     dream={dream}
-                    allCharacters={allCharacters}
-                    allTags={allTags}
                     fetchDream={isOpen}
                 />
                 <Divider className="my-6"/>

diff --git a/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/view/DreamView.tsx b/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/view/DreamView.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import {FC, Fragment, useCallback, useEffect, useMemo, useState} from "react";
-import {Dream, DreamCharacter, DreamTag} from "@prisma/client";
+import {Dream} from "@prisma/client";
 import {PatchDreamDto} from "@/app/api/me/dreams/dreams.dto";
 import {calcEstimatedReadingTime, handleAxiosError,} from "@/utils/client/client-utils";
 import {Chip} from "@nextui-org/chip";
@@ -14,17 +14,20 @@ import DreamEditableChip from "@/app/(site)/(internal)/dashboard/(your-dreams)/c
 import {DropdownItem, Spacer} from "@nextui-org/react";
 import DreamEditableAddButton
     from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/view/DreamEditableAddButton";
-import {useDreamsData} from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/DreamsProvider";
+import {
+    useDreamsData, useUserDreamCharacters,
+    useUserDreamTags
+} from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/DreamsProvider";
 import {FetchFullDream, UpdateDream} from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/hooks/dream-api-utils";
 
 type Props = {
     dream: Dream,
-    allCharacters: DreamCharacter[],
-    allTags: DreamTag[]
     fetchDream?: boolean,
 }
 
-const DreamView: FC<Props> = ({dream, allTags, allCharacters, fetchDream}) => {
+const DreamView: FC<Props> = ({dream, fetchDream}) => {
+    const {data: allTags} = useUserDreamTags()
+    const {data: allCharacters} = useUserDreamCharacters()
     const {data: fullDream, error: fullDreamError, mutate: mutateFullDream} = FetchFullDream(dream, fetchDream ?? true)
     const {trigger: updateDream} = UpdateDream(dream.id)
     const {dreams: {optimisticData: {editOptimisticData}}} = useDreamsData()

diff --git a/...internal)/dashboard/(your-dreams)/components/dreams/containers/CurrentDreamsContainer.tsx b/...internal)/dashboard/(your-dreams)/components/dreams/containers/CurrentDreamsContainer.tsx
@@ -12,7 +12,7 @@ import {useTutorialsData} from "@/app/(site)/(internal)/dashboard/components/Tut
 const CurrentDreamsContainer: FC = () => {
     const [tutorialsState] = useTutorialsData()
     const [startOfToday, endOfToday] = useTodayTimeRange()
-    const {dreams, tags, characters} = useDreamsData()
+    const {dreams} = useDreamsData()
     const dreamCards = useMemo(() => dreams.data
         .filter(dream => {
             const creationDate = new Date(dream.createdAt.toString());
@@ -24,11 +24,9 @@ const CurrentDreamsContainer: FC = () => {
                 isDisabled={!tutorialsState?.yourDreams}
                 key={dream.id}
                 dream={dream}
-                allTags={tags.data}
-                allCharacters={characters.data}
                 optimisticRemove={dreams.optimisticData.removeOptimisticData}
             />
-        )), [characters.data, dreams.data, dreams.optimisticData.removeOptimisticData, endOfToday, startOfToday, tags.data, tutorialsState?.yourDreams])
+        )), [dreams.data, dreams.optimisticData.removeOptimisticData, endOfToday, startOfToday, tutorialsState?.yourDreams])
 
     return (
         <DreamContainer id="today_dreams" title={`Today
@@ -37,7 +35,7 @@ const CurrentDreamsContainer: FC = () => {
                 dateStyle: "medium"
             })
         }`}>
-            <LogDreamCard isDisabled={!tutorialsState?.yourDreams} />
+            <LogDreamCard isDisabled={!tutorialsState?.yourDreams}/>
             {dreams.loading ? (
                 <Fragment>
                     <DreamCardSkeleton/>

diff --git a/.../(site)/(internal)/dashboard/(your-dreams)/components/dreams/containers/PastDreamItem.tsx b/.../(site)/(internal)/dashboard/(your-dreams)/components/dreams/containers/PastDreamItem.tsx
@@ -10,20 +10,16 @@ import {DreamCharacter, DreamTag} from "@prisma/client";
 type Props = {
     isDisabled?: boolean,
     dream: DayDreams,
-    allCharacters: DreamCharacter[],
-    allTags: DreamTag[],
 }
 
-const PastDreamItem: FC<Props> = ({isDisabled, dream, allTags, allCharacters}) => {
+const PastDreamItem: FC<Props> = ({isDisabled, dream}) => {
     const cards = useMemo(() => dream.dreams.map(pastDream => (
         <DreamCard
             isDisabled={isDisabled}
             key={pastDream.id}
             dream={pastDream}
-            allCharacters={allCharacters}
-            allTags={allTags}
         />
-    )), [allCharacters, allTags, dream.dreams, isDisabled])
+    )), [dream.dreams, isDisabled])
 
     return (
         <Fragment>

diff --git a/...)/(internal)/dashboard/(your-dreams)/components/dreams/containers/PastDreamsContainer.tsx b/...)/(internal)/dashboard/(your-dreams)/components/dreams/containers/PastDreamsContainer.tsx
@@ -31,7 +31,7 @@ const NUMBER_OF_DAYS = 7
 const PastDreamsContainer: FC = () => {
     const [tutorialsState] = useTutorialsData()
     const router = useRouter()
-    const {dreams, tags, characters} = useDreamsData()
+    const {dreams} = useDreamsData()
     const latestDate = useEndOfDay({
         dayOffset: -1
     })
@@ -49,10 +49,8 @@ const PastDreamsContainer: FC = () => {
             isDisabled={!tutorialsState?.yourDreams}
             key={dream.timestamp}
             dream={dream}
-            allTags={tags.data}
-            allCharacters={characters.data}
         />
-    )), [characters.data, pastDreams, tags.data, tutorialsState?.yourDreams])
+    )), [pastDreams, tutorialsState?.yourDreams])
 
 
     return (

diff --git a/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendar.tsx b/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendar.tsx
@@ -33,7 +33,7 @@ const DreamCalendar: FC = () => {
     ];
 
 
-    const {dreams, tags, characters} = useDreamsData()
+    const {dreams} = useDreamsData()
     const dayDreams = useDayDreams({dreams: dreams.data})
     const earliestYear = useMemo(() => dayDreams.length ? new Date(dayDreams[0].timestamp).getFullYear() : undefined, [dayDreams])
 
@@ -232,8 +232,6 @@ const DreamCalendar: FC = () => {
                             <DreamCalendarDay
                                 key={day.dateString}
                                 day={day}
-                                allTags={tags.data}
-                                allCharacters={characters.data}
                                 optimisticRemove={dreams.optimisticData.removeOptimisticData}
                                 isToday={dayIsToday()}
                                 dreams={dreamsForDay}

diff --git a/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendarDay.tsx b/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendarDay.tsx
@@ -11,21 +11,19 @@ import Modal from "@/app/(site)/components/Modal";
 import DreamContainer
     from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/containers/DreamContainer";
 import DreamCard from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/DreamCard";
-import {Dream, DreamCharacter, DreamTag} from "@prisma/client";
+import {Dream} from "@prisma/client";
 import {OptimisticWorker} from "@/utils/client/client-data-utils";
 import LogDreamCard from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/LogDreamCard";
 import PlusIcon from "@/app/(site)/components/icons/PlusIcon";
 
 type Props = {
     dreams?: DayDreams
     day: CalendarMonthDay,
-    allCharacters: DreamCharacter[],
-    allTags: DreamTag[],
     optimisticRemove?: OptimisticWorker<Dream>,
     isToday: boolean,
 }
 
-const DreamCalendarDay: FC<Props> = ({dreams, day, allTags, allCharacters, optimisticRemove, isToday}) => {
+const DreamCalendarDay: FC<Props> = ({dreams, day, optimisticRemove, isToday}) => {
     const [modalOpen, setModalOpen] = useState(false)
     const dateStrSplit = day.dateString.split("-")
 
@@ -47,8 +45,6 @@ const DreamCalendarDay: FC<Props> = ({dreams, day, allTags, allCharacters, optim
                             <DreamCard
                                 key={dream.id}
                                 dream={dream}
-                                allCharacters={allCharacters}
-                                allTags={allTags}
                                 optimisticRemove={optimisticRemove}
                             />
                         ))}

diff --git a/src/app/(site)/(internal)/dashboard/tags/components/GenericTagCard.tsx b/src/app/(site)/(internal)/dashboard/tags/components/GenericTagCard.tsx
@@ -9,11 +9,9 @@ import GenericTagModal from "@/app/(site)/(internal)/dashboard/tags/components/G
 type Props = {
     data: DreamCharacter | DreamTag,
     stateType: "tags" | "characters",
-    allCharacters: DreamCharacter[],
-    allTags: DreamTag[],
 }
 
-const GenericTagCard: FC<Props> = ({data, stateType, allTags, allCharacters}) => {
+const GenericTagCard: FC<Props> = ({data, stateType}) => {
     const [modalOpen, setModalOpen] = useState(false)
 
     return (
@@ -23,8 +21,6 @@ const GenericTagCard: FC<Props> = ({data, stateType, allTags, allCharacters}) =>
                 onClose={() => setModalOpen(false)}
                 item={data}
                 itemType={stateType}
-                allCharacters={allCharacters}
-                allTags={allTags}
             />
             <Card
                 isPressable

diff --git a/src/app/(site)/(internal)/dashboard/tags/components/GenericTagContainer.tsx b/src/app/(site)/(internal)/dashboard/tags/components/GenericTagContainer.tsx
@@ -20,8 +20,6 @@ import usePagination from "@/app/(site)/hooks/usePagination";
 
 type Props = {
     state: DreamTagsState | DreamCharactersState,
-    allCharacters: DreamCharacter[],
-    allTags: DreamTag[],
     stateType: "tags" | "characters"
 }
 
@@ -32,7 +30,7 @@ export enum SortOrder {
 
 const MAX_ITEMS_PER_PAGE = 8;
 
-const GenericTagContainer: FC<Props> = ({state, stateType, allTags, allCharacters}) => {
+const GenericTagContainer: FC<Props> = ({state, stateType}) => {
     const [tagSearch, setTagSearch] = useState<string>()
     const [sortOrder, setSortOrder] = useState<SortOrder>()
     const {paginatedData, totalPages, setCurrentPage} = usePagination<DreamTag | DreamCharacter>(state.data, MAX_ITEMS_PER_PAGE)
@@ -80,11 +78,9 @@ const GenericTagContainer: FC<Props> = ({state, stateType, allTags, allCharacter
                 key={stateData.id}
                 data={stateData}
                 stateType={stateType}
-                allTags={allTags}
-                allCharacters={allCharacters}
             />
         ))
-    ), [allCharacters, allTags, stateType, visibleData])
+    ), [stateType, visibleData])
 
 
     return (

diff --git a/src/app/(site)/(internal)/dashboard/tags/components/GenericTagDreamContainer.tsx b/src/app/(site)/(internal)/dashboard/tags/components/GenericTagDreamContainer.tsx
@@ -3,7 +3,6 @@
 import {FC, Fragment, useMemo} from "react";
 import DreamCard from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/card/DreamCard";
 import {DreamWithRelations} from "@/app/api/me/dreams/dreams.dto";
-import {DreamCharacter, DreamTag} from "@prisma/client";
 import DreamContainer
     from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/containers/DreamContainer";
 import usePagination from "@/app/(site)/hooks/usePagination";
@@ -12,13 +11,11 @@ import Pagination from "@/app/(site)/components/Pagination";
 
 type Props = {
     dreams?: DreamWithRelations[] | null
-    allCharacters: DreamCharacter[],
-    allTags: DreamTag[],
 }
 
 const MAX_ITEMS_PER_PAGE = 5
 
-const GenericTagDreamContainer: FC<Props> = ({dreams, allTags, allCharacters}) => {
+const GenericTagDreamContainer: FC<Props> = ({dreams}) => {
     const {paginatedData, totalPages, setCurrentPage} = usePagination(dreams ?? [], MAX_ITEMS_PER_PAGE)
 
     const dreamCards = useMemo(() => {
@@ -29,11 +26,9 @@ const GenericTagDreamContainer: FC<Props> = ({dreams, allTags, allCharacters}) =
             <DreamCard
                 key={dream.id}
                 dream={dream}
-                allCharacters={allCharacters}
-                allTags={allTags}
             />
         ))
-    }, [allCharacters, allTags, paginatedData])
+    }, [paginatedData])
 
 
     return (