chore: Migrate widgets that are still using format_structure (ALPHA-4191)

packages/frontend/src/api/types/agenda.ts

@@ -1,11 +1,11 @@
 export type TAgendaItem = {
-    tags: string[];
     id: string;
-    name: string;
-    category: string;
-    date: string;
-    description: string;
-    location?: string;
+    name?: string;
+    category?: string;
+    date?: string;
+    description?: string;
     author?: string;
     source_name?: string;
+    tags?: string[];
+    location?: string;
 };

packages/frontend/src/api/types/index.ts

@@ -1,25 +1,26 @@
+export * from "./agenda";
+export * from "./blog";
+export * from "./chat";
 export * from "./custom";
 export * from "./dao";
+export * from "./discord";
 export * from "./event";
+export * from "./features";
+export * from "./forum";
 export * from "./gas";
+export * from "./lens";
 export * from "./market";
 export * from "./news";
+export * from "./notifications";
+export * from "./podcast";
+export * from "./portfolio";
 export * from "./primitives";
 export * from "./polls";
+export * from "./qna";
+export * from "./reddit";
 export * from "./tvl";
-export * from "./user";
-export * from "./views";
 export * from "./tweets";
-export * from "./chat";
 export * from "./tutorial";
-export * from "./podcast";
+export * from "./user";
+export * from "./views";
 export * from "./video";
-export * from "./notifications";
-export * from "./blog";
-export * from "./forum";
-export * from "./reddit";
-export * from "./portfolio";
-export * from "./lens";
-export * from "./features";
-export * from "./discord";
-export * from "./qna";

packages/frontend/src/api/utils/itemUtils.ts

@@ -1,5 +1,6 @@
 import { TItem } from "src/types";
 import { TRemoteCustomData, TRemoteCustomDatum } from "../services";
+import { Logger } from "./logging";
 
 /**
  * This type is used to define the root type of items which include news, daos, tweets etc
@@ -174,5 +175,11 @@ export const customDatumAsItem: (datum: TRemoteCustomDatum) => TItem = (d) => {
     }, {} as TItem);
 };
 
-export const customDataAsItems: (data: TRemoteCustomData) => TItem[] = (d) =>
-    d.map(customDatumAsItem);
+export const customDataAsItems: (data: TRemoteCustomData) => TItem[] = (d) => {
+    try {
+        return d.map(customDatumAsItem);
+    } catch (error) {
+        Logger.error("customDataAsItems: unexpected error", error);
+        return [];
+    }
+};

packages/frontend/src/components/daos/DaoItemList.tsx

@@ -1,5 +1,10 @@
 import { FormEvent, FC } from "react";
-import { HRElement, ListItem, NoItems, ScrollBar } from "@alphaday/ui-kit";
+import {
+    HRElement,
+    ListItem,
+    CenteredBlock,
+    ScrollBar,
+} from "@alphaday/ui-kit";
 import { TDaoItem } from "src/api/types";
 import { shouldFetchMoreItems } from "src/api/utils/itemUtils";
 import globalMessages from "src/globalMessages";
@@ -17,9 +22,9 @@ const DaoItemList: FC<IDaoItemList> = ({ items, handlePaginate }) => {
     if (items) {
         if (items.length === 0) {
             return (
-                <NoItems>
+                <CenteredBlock>
                     <p>{globalMessages.queries.noMatchFound("items")}</p>
-                </NoItems>
+                </CenteredBlock>
             );
         }
         return (

packages/frontend/src/components/discord/DiscordModule.tsx

@@ -1,5 +1,5 @@
 import { FC, FormEvent } from "react";
-import { ModuleLoader, NoItems, ScrollBar } from "@alphaday/ui-kit";
+import { ModuleLoader, CenteredBlock, ScrollBar } from "@alphaday/ui-kit";
 import { TDiscordItem } from "src/api/types";
 import { shouldFetchMoreItems } from "src/api/utils/itemUtils";
 import globalMessages from "src/globalMessages";
@@ -34,11 +34,11 @@ const DiscordModule: FC<IDiscord> = ({
                 return <DiscordFeedItem key={item.id} item={item} />;
             })}
             {!isLoadingItems && items.length === 0 && (
-                <NoItems>
+                <CenteredBlock>
                     <p>
                         {globalMessages.queries.noMatchFound("Discord Items")}
                     </p>
-                </NoItems>
+                </CenteredBlock>
             )}
         </ScrollBar>
     );

packages/frontend/src/components/dynamic-modules/ReportsModule.tsx

@@ -1,5 +1,10 @@
 import { FC, FormEvent } from "react";
-import { ModuleLoader, ScrollBar, ListItem, NoItems } from "@alphaday/ui-kit";
+import {
+    ModuleLoader,
+    ScrollBar,
+    ListItem,
+    CenteredBlock,
+} from "@alphaday/ui-kit";
 import { shouldFetchMoreItems } from "src/api/utils/itemUtils";
 import globalMessages from "src/globalMessages";
 import { IReports } from "./types";
@@ -20,9 +25,9 @@ const ReportsModule: FC<IReports> = ({
     }
     if (items.length === 0) {
         return (
-            <NoItems>
+            <CenteredBlock>
                 <p>{globalMessages.queries.noMatchFound("reports")}</p>
-            </NoItems>
+            </CenteredBlock>
         );
     }
     return (

packages/frontend/src/components/dynamic-modules/agenda/AgendaItem.tsx

@@ -97,7 +97,7 @@ const AgendaItem: FC<Item> = ({ item, catColor, setItemsHeight }) => {
                 openAccordion={openAccordion}
                 author={author}
                 descHeightRef={descHeightRef}
-                description={description}
+                description={description ?? ""}
                 variant="agenda"
                 fullHeight={paddedDescHeight}
                 remarkPlugins={PLUGINS}

packages/frontend/src/components/dynamic-modules/faq/FaqModule.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from "react";
-import { ModuleLoader, ScrollBar } from "@alphaday/ui-kit";
+import { CenteredBlock, ScrollBar } from "@alphaday/ui-kit";
 import { useDynamicWidgetHeight } from "src/components/dynamic-modules/hooks/useDynamicWidgetHeight";
 import CONFIG from "src/config/config";
+import globalMessages from "src/globalMessages";
 import { TItem } from "src/types";
 import FaqItem from "./FaqItem";
 
@@ -25,15 +26,17 @@ const FaqModule: FC<IAgenda> = ({
         });
 
     return (
-        <span
+        <div
             className="border-none block relative min-h-[110px]"
             style={{
                 // height of the table should not be greater than max-content
                 height: `${Math.min(initialItemsHeight, widgetHeight)}px`,
             }}
         >
             {!items || items?.length < 1 ? (
-                <ModuleLoader $height={`${widgetHeight}px`} />
+                <CenteredBlock>
+                    <p>{globalMessages.queries.noResults}</p>
+                </CenteredBlock>
             ) : (
                 <ScrollBar containerRef={setScrollRef}>
                     <div
@@ -52,7 +55,7 @@ const FaqModule: FC<IAgenda> = ({
                     </div>
                 </ScrollBar>
             )}
-        </span>
+        </div>
     );
 };
 

packages/frontend/src/components/feeds/LensFeedModule.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { ModuleLoader, NoItems, ScrollBar } from "@alphaday/ui-kit";
+import { ModuleLoader, CenteredBlock, ScrollBar } from "@alphaday/ui-kit";
 import { TLensPost } from "src/api/types";
 import globalMessages from "src/globalMessages";
 import LensFeedItem from "./LensFeedItem";
@@ -22,9 +22,9 @@ const LensFeedModule: FC<IPosts> = ({
 
     if (posts.length === 0) {
         return (
-            <NoItems>
+            <CenteredBlock>
                 <p>{globalMessages.queries.noMatchFound("lens posts")}</p>
-            </NoItems>
+            </CenteredBlock>
         );
     }
     return (

packages/frontend/src/components/news/NewsItemList.tsx

@@ -1,5 +1,10 @@
 import { FormEvent, FC } from "react";
-import { HRElement, ListItem, NoItems, ScrollBar } from "@alphaday/ui-kit";
+import {
+    HRElement,
+    ListItem,
+    CenteredBlock,
+    ScrollBar,
+} from "@alphaday/ui-kit";
 import { TNewsItem } from "src/api/types";
 import { shouldFetchMoreItems } from "src/api/utils/itemUtils";
 import globalMessages from "src/globalMessages";
@@ -26,9 +31,9 @@ const NewsItemList: FC<INewsItemList> = ({
     if (items) {
         if (items.length === 0) {
             return (
-                <NoItems>
+                <CenteredBlock>
                     <p>{globalMessages.queries.noMatchFound("news")}</p>
-                </NoItems>
+                </CenteredBlock>
             );
         }
         return (

packages/frontend/src/containers/calendar/CalendarContainer.tsx

@@ -19,6 +19,7 @@ import { useAppDispatch, useAppSelector } from "src/api/store/hooks";
 import { TEvent } from "src/api/types";
 import { getClosestEvent } from "src/api/utils/calendarUtils";
 import { filteringListToStr } from "src/api/utils/filterUtils";
+import { customDataAsItems } from "src/api/utils/itemUtils";
 import { Logger } from "src/api/utils/logging";
 import { buildViewPath } from "src/api/utils/viewUtils";
 import CalendarModule from "src/components/calendar/CalendarModule";
@@ -78,7 +79,15 @@ const CalendarContainer: FC<IModuleContainer<TCategoryData[][]>> = ({
 
     const viewPath = buildViewPath(selectedView?.data);
 
-    const widgetCats = moduleData.widget.format_structure.data?.[0];
+    const widgetCats = customDataAsItems(moduleData.widget.custom_data ?? []);
+
+    // TODO(v-almonacid): remove this block when format_structure is removed from db model
+    const legacyWidgetCats = moduleData.widget.format_structure?.data?.[0];
+    if (Array.isArray(legacyWidgetCats) && legacyWidgetCats.length > 0) {
+        Logger.warn(
+            `CalendarContainer: widget ${moduleData.widget.name} is using format_structure which has been deprecated`
+        );
+    }
 
     const allowedCategories: TEventCategory[] =
         widgetCats?.map((wCat) => {

packages/frontend/src/containers/countdown/CountdownContainer.tsx

@@ -1,6 +1,7 @@
-import { FC } from "react";
+import { FC, useMemo } from "react";
 import moment from "moment";
 import { TCounterData } from "src/api/types";
+import assert from "src/api/utils/assert";
 import { Logger } from "src/api/utils/logging";
 import CountdownModule from "src/components/countdown/CountdownModule";
 import { IModuleContainer } from "src/types";
@@ -10,9 +11,39 @@ const DEFAULT_TARGET_DATE = moment().unix();
 const CountdownContainer: FC<IModuleContainer<TCounterData[]>> = ({
     moduleData,
 }) => {
-    const [data] = moduleData.widget.format_structure.data || [];
+    // const [data] = moduleData.widget.format_structure.data || [];
     const isBeaconWidget = moduleData.widget.slug === "merge_countdown_widget";
 
+    const data = useMemo(() => {
+        try {
+            const [rawData] = moduleData.widget.custom_data ?? [];
+            assert(
+                rawData.announcement !== undefined,
+                "CountdownContainer: data must contain announcement"
+            );
+            assert(
+                rawData.date !== undefined,
+                "CountdownContainer: data must contain date"
+            );
+            // @ts-expect-error this is handled above
+            return rawData as TCounterData;
+        } catch (error) {
+            return undefined;
+        }
+    }, [moduleData.widget.custom_data]);
+
+    if (data === undefined) {
+        return null;
+    }
+
+    // TODO(v-almonacid): remove this block when format_structure is removed from db model
+    const { data: legacyData } = moduleData.widget.format_structure;
+    if (Array.isArray(legacyData) && legacyData.length > 0) {
+        Logger.warn(
+            `CountdownContainer: widget ${moduleData.widget.name} contains data in format_structure which has been deprecated`
+        );
+    }
+
     let targetDate: number;
     try {
         targetDate =

packages/frontend/src/containers/dynamic/AgendaContainer.tsx

@@ -1,8 +1,9 @@
 import { FC, useMemo } from "react";
 import { useWidgetHeight } from "src/api/hooks";
 import { TAgendaItem } from "src/api/types/agenda";
+import { customDataAsItems } from "src/api/utils/itemUtils";
+import { Logger } from "src/api/utils/logging";
 import AgendaModule from "src/components/dynamic-modules/agenda/AgendaModule";
-import { v4 as uuidV4 } from "uuid";
 import { IModuleContainer } from "src/types";
 
 const AgendaContainer: FC<IModuleContainer<TAgendaItem[]>> = ({
@@ -11,20 +12,25 @@ const AgendaContainer: FC<IModuleContainer<TAgendaItem[]>> = ({
     const widgetHeight = useWidgetHeight(moduleData);
 
     const items = useMemo(
-        () => moduleData.widget.format_structure.data || [],
-        [moduleData.widget.format_structure.data]
+        () => customDataAsItems(moduleData.widget.custom_data ?? []),
+        [moduleData.widget.custom_data]
     );
 
-    // Add unique id to each item if id is not present, generate a uuid
-    const uniqueItems = useMemo(
-        () => items.map((item) => ({ ...item, id: item.id || uuidV4() })),
-        [items]
+    // TODO(v-almonacid): remove this block when format_structure is removed from db model
+    const legacyItems = useMemo(
+        () => moduleData.widget.format_structure.data || [],
+        [moduleData.widget.format_structure.data]
     );
+    if (Array.isArray(legacyItems) && legacyItems.length > 0) {
+        Logger.warn(
+            `AgendaContainer: widget ${moduleData.widget.name} contains data in format_structure which has been deprecated`
+        );
+    }
 
     return (
         <AgendaModule
             widgetHeight={widgetHeight}
-            items={uniqueItems}
+            items={items as TAgendaItem[]}
             isLoadingItems={false}
             onAdjustWidgetHeight={() => {}}
         />

packages/frontend/src/containers/dynamic/FaqContainer.tsx

@@ -1,11 +1,26 @@
-import { FC } from "react";
+import { FC, useMemo } from "react";
 import { useWidgetHeight } from "src/api/hooks";
+import { customDataAsItems } from "src/api/utils/itemUtils";
+import { Logger } from "src/api/utils/logging";
 import FaqModule from "src/components/dynamic-modules/faq/FaqModule";
 import { IModuleContainer, TItem } from "src/types";
 
 const FaqContainer: FC<IModuleContainer<TItem[][]>> = ({ moduleData }) => {
     const widgetHeight = useWidgetHeight(moduleData);
-    const items = moduleData.widget.format_structure.data?.[0] || [];
+
+    const items = useMemo(
+        () => customDataAsItems(moduleData.widget.custom_data ?? []),
+        [moduleData.widget.custom_data]
+    );
+
+    // TODO(v-almonacid): remove this block when format_structure is removed from db model
+    const { data } = moduleData.widget.format_structure;
+    if (Array.isArray(data) && data.length > 0) {
+        Logger.warn(
+            `FaqContainer: widget ${moduleData.widget.name} contains data in format_structure which has been deprecated`
+        );
+    }
+
     return (
         <FaqModule
             widgetHeight={widgetHeight}