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

.env.public

@@ -55,6 +55,7 @@ NEXT_PUBLIC_NEXUS_BASE_PATH=
 NEXT_PUBLIC_NEXUS_NAME=Nexus
 NEXT_PUBLIC_NEXUS_LOGO_PATH=
 NEXT_PUBLIC_NEXUS_DEFAULT_IMAGE_PATH=
+NEXT_PUBLIC_MAPBOX_TOKEN=
 
 # config
 ENABLE_LOG=true

lib/model/decorators/rm-decorator.ts

@@ -7,6 +7,7 @@ import type { INCharacter } from '@types';
 /* private */
 const decorateCharacter = (character: INCharacter, uMeta: any): ICard => {
   const id = `list__char--${character?.name}`;
+  console.log({ character, uMeta });
   const decd: ICard = {
     id,
     className: '',

lib/state/context-rm.ts

@@ -5,7 +5,7 @@ import { createContext } from 'react';
 
 export const RMContext = createContext<IRMContext>({
   initd: false,
-  characters: [],
+  listings: [],
   setter: undefined,
   history: [],
 });

lib/types/contexts.d.ts

@@ -42,7 +42,7 @@ export interface IGlobalContext extends History {
 // to-do: characters type annotations
 export interface IRMContext extends History {
   initd?: boolean;
-  characters?: INCharacter[];
+  listings?: INCharacter[];
 }
 
 export interface IHypnosPublicContext extends History {

next.config.js

@@ -12,7 +12,18 @@ const nextConfig = {
     ],
   },
   async redirects() {
-    return [];
+    return [
+      {
+        source: '/services/hypnos',
+        destination: '/services/hypnos/list',
+        permanent: false,
+      },
+      {
+        source: '/services/rickmorty',
+        destination: '/services/rickmorty/list',
+        permanent: false,
+      },
+    ];
   },
 };
 

src/app/components/client/blocks/topnav-view.tsx

@@ -66,17 +66,20 @@ 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>
-      <VSignIn className="col-span-full col-start-0 md:col-span-3 md:col-start-9 lg:col-start-10 lg:col-span-2" user={_user} />
-      <DPGrid full bleed={EBleedVariant.ZERO} variant={EGridVariant.TWELVE_COLUMNS} className="col-span-full col-start-0 md:col-span-4 md:col-start-12 lg:col-span-4 lg:col-start-12">
+      <VSignIn className="col-span-full col-start-0 md:col-span-3 md:col-start-6 lg:col-start-8 lg:col-span-2" user={_user} />
+      <DPGrid full bleed={EBleedVariant.ZERO} variant={EGridVariant.TWELVE_COLUMNS} className="col-span-full col-start-0 md:col-span-6 md:col-start-12 lg:col-span-6 lg:col-start-12">
         <div className="flex w-full sm:justify-end">
           <AudioPlayer prompt="" theme={theme} />
+          <DPButton className="ml-a1" theme={theme} icon={ESystemIcon['card']} onClick={() => navigate(document.location.href.replace(/(map|calendar)/, 'list'))} />
+          <DPButton className="ml-a1" theme={theme} icon={ESystemIcon['map']} onClick={() => navigate(document.location.href.replace(/(list|calendar)/, 'map'))} />
+          <DPButton className="ml-a1" theme={theme} icon={ESystemIcon['calendar']} onClick={() => navigate(document.location.href.replace(/(list|map)/, 'calendar'))} />
           <DPButton className="ml-a1" theme={theme} icon={ESystemIcon['lightbulb']} onClick={handleThemeSwitch} />
         </div>
       </DPGrid>

src/app/components/client/elements/calendar-view.tsx

@@ -0,0 +1,97 @@
+// hypnos-list-view.tsx
+// @ts-nocheck
+'use client';
+import type { ICard } from '@dreampipcom/oneiros';
+import type { IDPayload } from '@types';
+
+import { useContext, useEffect, useRef, useMemo } from 'react';
+
+import { clsx } from 'clsx';
+import Image from 'next/image';
+import { AuthContext, GlobalContext } from '@state';
+import { navigate, addToFavorites } from '@gateway';
+import { CalendarView } from "@dreampipcom/oneiros";
+
+// to-do: character type annotations
+interface VCalendarProps {
+  listings: ICard[];
+  favListing: (conf?: any) => any;
+  fetchListings: (conf?: any) => any;
+  loadListings: (conf?: any) => any;
+  decListings: (conf?: any) => any;
+  unloadListings: (conf?: any) => any;
+  favoriteType?: string;
+  listingContext: any;
+}
+
+type VHPNPCalendarProps = VCalendarProps;
+
+export const VHPNPCalendar = ({ listings = () => {}, fetchListings = () => {}, favListing  = () => {}, loadListings = () => {}, decListings = () => {}, unloadListings = () => {}, 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 initd = useRef(false);
+
+  if (!listingContext) return;
+
+  const { listings: currentListings }: { listings?: ICard[] } = _listingContext;
+
+
+  const dispatchAddToFavorites = async (cid?: number) => {
+    const func = async (payload: IDPayload) => {
+      const res = await addToFavorites({ listings: [cid], type: favoriteType });
+      const op_2 = await fetchListings();
+      _loadListings({ listings: op_2 });
+    };
+    _favListing({ email, cid }, func);
+  };
+
+  useEffect(() => {
+    if (authd && listings && !_isListingsLoaded && !initd.current) {
+      _loadListings({
+        listings: listings as ICard[],
+      });
+      initd.current = true;
+    }
+  }, [listings, _isListingsLoaded, _loadListings, authd]);
+
+  useEffect(() => {
+    if (authd && _isListingsLoaded) {
+      _decListings({ action: {} });
+
+      return () => {
+        // to-do decorate clean up
+      };
+    }
+  }, [_isListingsLoaded, authd]);
+
+  useEffect(() => {
+    if (!_isListingsLoaded) return;
+    return () => {
+      _unloadListings();
+    };
+  }, []);
+
+  if (!authd || !listings) return;
+
+  if (!_isListingsLoaded && !listings) return <span>Loading...</span>;
+
+  if (authd) {
+    return (
+      <article>
+        <CalendarView cards={currentListings} theme={theme} />
+      </article>
+    );
+  }
+
+  return <button onClick={() => navigate('/api/auth/signin')}>Sign in</button>;
+};

src/app/components/client/elements/index.ts

@@ -4,6 +4,7 @@ export { VNavBar } from './navbar-view';
 export { VUserSettings } from './usersettings-view';
 export { VSignIn } from './signin-view';
 export { VSignUp } from './signup-view';
-export { VRMList } from './rm-list-view';
 export { DPLinkDec as InternalLink } from './link-decorator';
-export { VHPNPList } from './hypnos-list-view';
+export { VHPNPList as ListView } from './list-view';
+export { VHPNPCalendar as CalendarView } from './calendar-view';
+export { VHPNPMap as MapView } from './map-view';

src/app/components/client/elements/list-view.tsx

@@ -0,0 +1,97 @@
+// hypnos-list-view.tsx
+// @ts-nocheck
+'use client';
+import type { ICard } from '@dreampipcom/oneiros';
+import type { IDPayload } from '@types';
+
+import { useContext, useEffect, useRef, useMemo } from 'react';
+
+import { clsx } from 'clsx';
+import Image from 'next/image';
+import { AuthContext, GlobalContext } from '@state';
+import { navigate, addToFavorites } from '@gateway';
+import { CardGrid as DPCardGrid } from "@dreampipcom/oneiros";
+
+// to-do: character type annotations
+interface VCalendarProps {
+  listings: ICard[];
+  favListing: (conf?: any) => any;
+  fetchListings: (conf?: any) => any;
+  loadListings: (conf?: any) => any;
+  decListings: (conf?: any) => any;
+  unloadListings: (conf?: any) => any;
+  favoriteType?: string;
+  listingContext: any;
+}
+
+type VHPNPListingProps = VListingListProps;
+
+export const VHPNPList = ({ listings, fetchListings, favListing, loadListings, decListings, unloadListings, listingContext, favoriteType }: VHPNPListingProps) => {
+  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 initd = useRef(false);
+
+  if (!listingContext) return;
+
+  const { listings: currentListings }: { listings?: ICard[] } = _listingContext;
+
+
+  const dispatchAddToFavorites = async (cid?: number) => {
+    const func = async (payload: IDPayload) => {
+      const res = await addToFavorites({ listings: [cid], type: favoriteType });
+      const op_2 = await fetchListings();
+      _loadListings({ listings: op_2 });
+    };
+    _favListing({ email, cid }, func);
+  };
+
+  useEffect(() => {
+    if (authd && listings && !_isListingsLoaded && !initd.current) {
+      _loadListings({
+        listings: listings as ICard[],
+      });
+      initd.current = true;
+    }
+  }, [listings, _isListingsLoaded, _loadListings, authd]);
+
+  useEffect(() => {
+    if (authd && _isListingsLoaded) {
+      _decListings({ action: {} });
+
+      return () => {
+        // to-do decorate clean up
+      };
+    }
+  }, [_isListingsLoaded, authd]);
+
+  useEffect(() => {
+    if (!_isListingsLoaded) return;
+    return () => {
+      _unloadListings();
+    };
+  }, []);
+
+  if (!authd || !listings) return;
+
+  if (!_isListingsLoaded && !listings) return <span>Loading...</span>;
+
+  if (authd) {
+    return (
+      <article>
+        <DPCardGrid cards={currentListings} theme={theme} onLikeCard={dispatchAddToFavorites} />
+      </article>
+    );
+  }
+
+  return <button onClick={() => navigate('/api/auth/signin')}>Sign in</button>;
+};