ar(feat) [DPCP-38] [DPCP-39] [DPCP-46]: Abstract Views

dreampipcom · Aug 5, 2024 · 12ac054 · 12ac054
1 parent 18318b1
commit 12ac054
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 65 deletions.
diff --git a/src/app/components/client/blocks/topnav-view.tsx b/src/app/components/client/blocks/topnav-view.tsx
@@ -66,10 +66,10 @@ export const VTopNav = ({ user }: VTopNavProps) => {
         <DPTypo variant={TypographyVariant.SMALL}>
         	Welcome, {coercedName}
         </DPTypo>
-        <InternalLink href="/services/rickmorty">
+        <InternalLink className="block" href="/services/rickmorty">
           Rick Morty
         </InternalLink>
-        <InternalLink href="/services/hypnos">
+        <InternalLink className="block" href="/services/hypnos">
           hypnos
         </InternalLink>
       </div>

diff --git a/src/app/components/client/elements/calendar-view.tsx b/src/app/components/client/elements/calendar-view.tsx
@@ -7,77 +7,87 @@ import { useContext, useEffect, useRef, useMemo } from 'react';
 
 import { clsx } from 'clsx';
 import Image from 'next/image';
-import { HypnosPublicContext, AuthContext, GlobalContext } from '@state';
-import { ALoadPublicListings, AUnloadPublicListings, ADecoratePublicListings, AAddToFavoritePublicListings } from '@actions';
-import { navigate, addToFavorites, loadHypnosPublicListings } from '@gateway';
-import { CardGrid as DPCardGrid } from "@dreampipcom/oneiros";
+import { AuthContext, GlobalContext } from '@state';
+import { navigate, addToFavorites } from '@gateway';
+import { CalendarView } from "@dreampipcom/oneiros";
 
 // to-do: character type annotations
-interface VListingListProps {
+interface VCalendarProps {
   listings: ICard[];
+  addToFavorites?: () => void;
+  fetchListings?: () => void;
+  loadListings?: () => void;
+  decListings?: () => void;
+  unloadListings?: () => void;
+  favoriteType?: string;
+  listingContext?: any;
 }
 
-type VHPNPCalendarProps = VListingListProps;
+type VHPNPCalendarProps = VCalendarProps;
 
-export const VHPNPCalendar = ({ listings }: VHPNPCalendarProps) => {
-  const hypnosPublicContext = useContext(HypnosPublicContext);
+export const VHPNPCalendar = ({ listings, fetchListings, favListing, loadListings, decListings, unloadListings, isListingsLoaded, listingContext, favoriteType }: VHPNPCalendarProps) => {
+  const [_isListingsLoaded, _loadListings] = loadListings({});
+  const [, _decListings] = decListings({});
+  const [, _unloadListings] = unloadListings({});
+  const [, _favListing] = favListing({});
+
+  const _listingContext = useContext(listingContext);
 
   const { authd, email, user } = useContext(AuthContext);
 
   const globalContext = useContext(GlobalContext);
   const { theme } = globalContext;
 
-  const [isListingsLoaded, loadListings] = ALoadPublicListings({});
-  const [, decListings] = ADecoratePublicListings({});
-  const [, unloadListings] = AUnloadPublicListings({});
-  const [, favListing] = AAddToFavoritePublicListings({});
   const initd = useRef(false);
 
-  const { listings: currentListings }: { listings?: ICard[] } = hypnosPublicContext;
+  if (!listingContext) return;
+
+  const { listings: currentListings }: { listings?: ICard[] } = _listingContext;
+
 
   const dispatchAddToFavorites = async (cid?: number) => {
     const func = async (payload: IDPayload) => {
-      await addToFavorites({ listings: [cid] });
-      const op_2 = await loadHypnosPublicListings();
-      loadListings({ listings: op_2 });
+      const res = await addToFavorites({ listings: [cid], type: favoriteType });
+      const op_2 = await fetchListings();
+      _loadListings({ listings: op_2 });
     };
-    favListing({ email, cid }, func);
+    _favListing({ email, cid }, func);
   };
 
   useEffect(() => {
-    if (authd && listings && !isListingsLoaded && !initd.current) {
-      loadListings({
+    if (authd && listings && !_isListingsLoaded && !initd.current) {
+      _loadListings({
         listings: listings as ICard[],
       });
       initd.current = true;
     }
-  }, [listings, isListingsLoaded, loadListings, authd]);
+  }, [listings, _isListingsLoaded, _loadListings, authd]);
 
   useEffect(() => {
-    if (authd && isListingsLoaded) {
-      decListings({ action: {} });
+    if (authd && _isListingsLoaded) {
+      _decListings({ action: {} });
 
       return () => {
         // to-do decorate clean up
       };
     }
-  }, [isListingsLoaded, authd]);
+  }, [_isListingsLoaded, authd]);
 
   useEffect(() => {
-    if (!isListingsLoaded) return;
+    if (!_isListingsLoaded) return;
     return () => {
-      unloadListings();
+      _unloadListings();
     };
   }, []);
 
   if (!authd || !listings) return;
 
-  if (!isListingsLoaded && !listings) return <span>Loading...</span>;
+  if (!_isListingsLoaded && !listings) return <span>Loading...</span>;
 
   if (authd) {
     return (
       <article>
-        <DPCardGrid cards={currentListings} theme={theme} onLikeCard={dispatchAddToFavorites} />
+        <CalendarView cards={currentListings} theme={theme} />
       </article>
     );
   }

diff --git a/src/app/components/client/elements/list-view.tsx b/src/app/components/client/elements/list-view.tsx
@@ -48,7 +48,6 @@ export const VHPNPList = ({ listings, fetchListings, favListing, loadListings, d
   const dispatchAddToFavorites = async (cid?: number) => {
     const func = async (payload: IDPayload) => {
       const res = await addToFavorites({ listings: [cid], type: favoriteType });
-      console.log({ res })
       const op_2 = await fetchListings();
       _loadListings({ listings: op_2 });
     };

diff --git a/src/app/components/client/elements/map-view.tsx b/src/app/components/client/elements/map-view.tsx
@@ -7,77 +7,87 @@ import { useContext, useEffect, useRef, useMemo } from 'react';
 
 import { clsx } from 'clsx';
 import Image from 'next/image';
-import { HypnosPublicContext, AuthContext, GlobalContext } from '@state';
-import { ALoadPublicListings, AUnloadPublicListings, ADecoratePublicListings, AAddToFavoritePublicListings } from '@actions';
-import { navigate, addToFavorites, loadHypnosPublicListings } from '@gateway';
-import { CardGrid as DPCardGrid } from "@dreampipcom/oneiros";
+import { AuthContext, GlobalContext } from '@state';
+import { navigate, addToFavorites } from '@gateway';
+import { MapView } from "@dreampipcom/oneiros";
 
 // to-do: character type annotations
-interface VListingListProps {
+interface VMapProps {
   listings: ICard[];
+  addToFavorites?: () => void;
+  fetchListings?: () => void;
+  loadListings?: () => void;
+  decListings?: () => void;
+  unloadListings?: () => void;
+  favoriteType?: string;
+  listingContext?: any;
 }
 
-type VHPNPMapProps = VListingListProps;
+type VHPNPMapProps = VMapProps;
 
-export const VHPNPMap = ({ listings }: VHPNPMapProps) => {
-  const hypnosPublicContext = useContext(HypnosPublicContext);
+export const VHPNPMap = ({ listings, fetchListings, favListing, loadListings, decListings, unloadListings, isListingsLoaded, listingContext, favoriteType }: VHPNPMapProps) => {
+  const [_isListingsLoaded, _loadListings] = loadListings({});
+  const [, _decListings] = decListings({});
+  const [, _unloadListings] = unloadListings({});
+  const [, _favListing] = favListing({});
+
+  const _listingContext = useContext(listingContext);
 
   const { authd, email, user } = useContext(AuthContext);
 
   const globalContext = useContext(GlobalContext);
   const { theme } = globalContext;
 
-  const [isListingsLoaded, loadListings] = ALoadPublicListings({});
-  const [, decListings] = ADecoratePublicListings({});
-  const [, unloadListings] = AUnloadPublicListings({});
-  const [, favListing] = AAddToFavoritePublicListings({});
   const initd = useRef(false);
 
-  const { listings: currentListings }: { listings?: ICard[] } = hypnosPublicContext;
+  if (!listingContext) return;
+
+  const { listings: currentListings }: { listings?: ICard[] } = _listingContext;
+
 
   const dispatchAddToFavorites = async (cid?: number) => {
     const func = async (payload: IDPayload) => {
-      await addToFavorites({ listings: [cid] });
-      const op_2 = await loadHypnosPublicListings();
-      loadListings({ listings: op_2 });
+      const res = await addToFavorites({ listings: [cid], type: favoriteType });
+      const op_2 = await fetchListings();
+      _loadListings({ listings: op_2 });
     };
-    favListing({ email, cid }, func);
+    _favListing({ email, cid }, func);
   };
 
   useEffect(() => {
-    if (authd && listings && !isListingsLoaded && !initd.current) {
-      loadListings({
+    if (authd && listings && !_isListingsLoaded && !initd.current) {
+      _loadListings({
         listings: listings as ICard[],
       });
       initd.current = true;
     }
-  }, [listings, isListingsLoaded, loadListings, authd]);
+  }, [listings, _isListingsLoaded, _loadListings, authd]);
 
   useEffect(() => {
-    if (authd && isListingsLoaded) {
-      decListings({ action: {} });
+    if (authd && _isListingsLoaded) {
+      _decListings({ action: {} });
 
       return () => {
         // to-do decorate clean up
       };
     }
-  }, [isListingsLoaded, authd]);
+  }, [_isListingsLoaded, authd]);
 
   useEffect(() => {
-    if (!isListingsLoaded) return;
+    if (!_isListingsLoaded) return;
     return () => {
-      unloadListings();
+      _unloadListings();
     };
   }, []);
 
   if (!authd || !listings) return;
 
-  if (!isListingsLoaded && !listings) return <span>Loading...</span>;
+  if (!_isListingsLoaded && !listings) return <span>Loading...</span>;
 
   if (authd) {
     return (
       <article>
-        <DPCardGrid cards={currentListings} theme={theme} onLikeCard={dispatchAddToFavorites} />
+        <MapView events={currentListings} theme={theme} mapBoxToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN} />
       </article>
     );
   }

diff --git a/src/app/components/server/blocks/hypnos-public-list.tsx b/src/app/components/server/blocks/hypnos-public-list.tsx
@@ -1,17 +1,23 @@
 // hypnos-public-list.tsx
 'use server';
 import type { ICard } from '@dreampipcom/oneiros';
-import { ListView } from '@elements/client';
+import { ListView, CalendarView, MapView } from '@elements/client';
 import { loadHypnosPublicListings } from '@gateway';
 import { HypnosPublicProvider, HypnosPublicContext } from '@state';
 import { ALoadPublicListings, AUnloadPublicListings, ADecoratePublicListings, AAddToFavoritePublicListings } from '@actions';
 
-export const CHPNPList = async () => {
+export interface IServiceViewProps {
+  mode?: "calendar" | "list" | "map";
+}
+
+export const CHPNPList = async ({ mode = "list" }) => {
   const listings: ICard[] = await loadHypnosPublicListings();
 
   return (
     <HypnosPublicProvider>
-      <ListView listings={listings} fetchListings={loadHypnosPublicListings} loadListings={ALoadPublicListings} decListings={ADecoratePublicListings} unloadListings={AUnloadPublicListings} listingContext={HypnosPublicContext} favListing={AAddToFavoritePublicListings} />
+      {mode === "list" ? <ListView listings={listings} fetchListings={loadHypnosPublicListings} loadListings={ALoadPublicListings} decListings={ADecoratePublicListings} unloadListings={AUnloadPublicListings} listingContext={HypnosPublicContext} favListing={AAddToFavoritePublicListings} /> : undefined }
+      {mode === "map" ? <MapView listings={listings} fetchListings={loadHypnosPublicListings} loadListings={ALoadPublicListings} decListings={ADecoratePublicListings} unloadListings={AUnloadPublicListings} listingContext={HypnosPublicContext} favListing={AAddToFavoritePublicListings} /> : undefined }
+      {mode === "calendar" ? <CalendarView listings={listings} fetchListings={loadHypnosPublicListings} loadListings={ALoadPublicListings} decListings={ADecoratePublicListings} unloadListings={AUnloadPublicListings} listingContext={HypnosPublicContext} favListing={AAddToFavoritePublicListings} /> : undefined }
     </HypnosPublicProvider>
   );
 };
diff --git a/src/app/components/server/blocks/rm-list.tsx b/src/app/components/server/blocks/rm-list.tsx
@@ -1,17 +1,23 @@
 // list-controller.tsx
 'use server';
 import type { ICard } from '@dreampipcom/oneiros';
-import { ListView } from '@elements/client';
+import { ListView, CalendarView, MapView } from '@elements/client';
 import { loadChars, getChars } from '@gateway';
 import { RickMortyProvider, RMContext } from '@state';
 import { ALoadChars, AUnloadChars, ADecorateChars, AAddToFavoriteChars} from '@actions';
 
-export const CRMList = async () => {
+export interface IServiceViewProps {
+  mode?: "calendar" | "list" | "map";
+}
+
+export const CRMList = async ({ mode = "list" }: IServiceViewProps) => {
   const characters: ICard[] = await loadChars();
 
   return (
     <RickMortyProvider>
-      <ListView listings={characters} favoriteType="string" fetchListings={getChars} loadListings={ALoadChars} decListings={ADecorateChars} unloadListings={AUnloadChars} listingContext={RMContext} favListing={AAddToFavoriteChars} />
+      {mode === "list" ? <ListView listings={characters} favoriteType="string" fetchListings={getChars} loadListings={ALoadChars} decListings={ADecorateChars} unloadListings={AUnloadChars} listingContext={RMContext} favListing={AAddToFavoriteChars} /> : undefined }
+      {mode === "map" ? <MapView listings={characters} favoriteType="string" fetchListings={getChars} loadListings={ALoadChars} decListings={ADecorateChars} unloadListings={AUnloadChars} listingContext={RMContext} favListing={AAddToFavoriteChars} /> : undefined }
+      {mode === "calendar" ? <CalendarView listings={characters} favoriteType="string" fetchListings={getChars} loadListings={ALoadChars} decListings={ADecorateChars} unloadListings={AUnloadChars} listingContext={RMContext} favListing={AAddToFavoriteChars} /> : undefined }
     </RickMortyProvider>
   );
 };
diff --git a/src/app/services/hypnos/page.tsx → src/app/services/hypnos/[[...mode]].tsx b/src/app/services/hypnos/page.tsx → src/app/services/hypnos/[[...mode]].tsx
@@ -1,10 +1,12 @@
 // page.tsx
 import { DPPublicListings } from '@blocks/server';
-export default function Home() {
+
+export default function Home({ mode = 'list' }) {
+
   return (
     <main>
       <section>
-        <DPPublicListings />
+        <DPPublicListings mode={mode} />
       </section>
     </main>
   );

diff --git a/src/app/services/rickmorty/page.tsx → src/app/services/rickmorty/[[...mode]].tsx b/src/app/services/rickmorty/page.tsx → src/app/services/rickmorty/[[...mode]].tsx
@@ -1,5 +1,6 @@
 // page.tsx
 import { DPRMList } from '@blocks/server';
+
 export default function Home() {
   return (
     <main>