Done with Lists fixes for mainnet (#338)

* done with listing fixes for prod

* added type for listRegistrations

* commited suggestions

* Update src/entities/list/components/ListConfirmationModals.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix build error

---------

Co-authored-by: Carina.Akaia.io <cvo.akaia@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

src/entities/list/components/AccountCard.tsx

@@ -42,8 +42,7 @@ interface StatusModal {
   status?: RegistrationStatus | string;
 }
 
-// TODO: Rename to `ListAccountCard`!
-export const AccountCard = ({
+export const ListAccountCard = ({
   dataForList,
   accountsWithAccess,
 }: {

src/entities/list/components/ListAccounts.tsx

@@ -1,21 +1,20 @@
 /* eslint-disable prettier/prettier */
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { List } from "@/common/api/indexer";
+import { List, ListRegistration } from "@/common/api/indexer";
 import { Filter, Group, GroupType, SearchBar, SortSelect } from "@/common/ui/components";
 import { ACCOUNT_LIST_REGISTRATION_STATUS_OPTIONS } from "@/entities/_shared";
 
-import { AccountCard } from "./AccountCard";
 import { ListCardSkeleton } from "./ListCardSkeleton";
 import { NoListItem } from "./NoListItem";
 import { NoListItemType } from "../types";
+import { ListAccountCard } from "./AccountCard";
 
 interface ListAccountsType {
   loadingListData: boolean;
   listData: List | undefined;
-  filteredRegistrations: any[];
+  listRegistrations: ListRegistration[];
   isLoading: boolean;
-  setFilteredRegistrations: (value: any) => void;
   setStatus: (value: string) => void;
 }
 
@@ -24,15 +23,14 @@ export const ListAccounts = ({
   loadingListData,
   setStatus,
   isLoading,
-  filteredRegistrations,
-  setFilteredRegistrations,
+  listRegistrations,
 }: ListAccountsType) => {
   const [search, setSearch] = useState("");
   const [accountsWithAccess, setAccountsWithAccess] = useState<string[]>([]);
   const [statusFilter, setsStatusFilter] = useState<string>("all");
-  const [searchedAccounts, setSearchedAccounts] = useState<any[]>([]);
 
-  const SORT_LIST_PROJEECTS = [
+
+  const SORT_LIST_PROJECTS = [
     { label: "Most recent", value: "recent" },
     { label: "Least recent", value: "older" },
   ];
@@ -52,7 +50,7 @@ export const ListAccounts = ({
     },
   ];
 
-  const handleFilter = (registration: any) => {
+  const handleFilter = (registration: ListRegistration) => {
     const matchesSearch = search
       ? registration.registrant?.near_social_profile_data?.name
           ?.toLowerCase()
@@ -63,37 +61,23 @@ export const ListAccounts = ({
     return matchesSearch;
   };
 
-  useEffect(() => {
-    const filtered = filteredRegistrations.filter(handleFilter);
-    setSearchedAccounts(filtered ?? []);
-  }, [search]);
-
-  const handleSort = (sortType: string) => {
-    const projects = [...filteredRegistrations];
-
-    switch (sortType) {
-      case "recent":
-        projects.sort(
-          (a, b) =>
-            new Date(b.submitted_at).getTime() -
-            new Date(a.submitted_at).getTime(),
-        );
-
-        setFilteredRegistrations(projects);
-        break;
-      case "older":
-        projects.sort(
-          (a, b) =>
-            new Date(a.submitted_at).getTime() -
-            new Date(b.submitted_at).getTime(),
-        );
-
-        setFilteredRegistrations(projects);
-        break;
-      default:
-        break;
-    }
-  };
+
+  const searchedAccounts = useMemo(() => {
+    return listRegistrations.filter(handleFilter);
+  }, [search, handleFilter])
+
+  const handleSort = useCallback((sortType: string) => {
+    return [...listRegistrations].sort((a, b) => {
+      switch (sortType) {
+        case "recent":
+          return new Date(b.submitted_at).getTime() - new Date(a.submitted_at).getTime();
+        case "older":
+          return new Date(a.submitted_at).getTime() - new Date(b.submitted_at).getTime();
+        default:
+          return 0; // No sorting
+      }
+    });
+  }, [listRegistrations]);
 
   useEffect(() => {
     if (!loadingListData && listData) {
@@ -106,7 +90,7 @@ export const ListAccounts = ({
     }
   }, [listData]);
 
-  const data = search ? searchedAccounts : filteredRegistrations ?? [];
+  const data = search ? searchedAccounts : listRegistrations ?? [];
 
   return (
     <div className="md:pb-0 md:pt-12 flex w-full flex-col px-2 pt-10">
@@ -117,7 +101,7 @@ export const ListAccounts = ({
             <span
               style={{ color: "#DD3345", marginLeft: "8px", fontWeight: 600 }}
             >
-              {filteredRegistrations?.length}
+              {listRegistrations?.length}
             </span>
           </div>
         </div>
@@ -128,7 +112,7 @@ export const ListAccounts = ({
           />
           <Filter groups={tagsList} />
           <SortSelect
-            options={SORT_LIST_PROJEECTS}
+            options={SORT_LIST_PROJECTS}
             onValueChange={handleSort}
           />
         </div>
@@ -142,7 +126,7 @@ export const ListAccounts = ({
       ) : data?.length ? (
         <div className="md:grid-cols-2 lg:grid-cols-3 mt-8 grid w-full grid-cols-1 gap-8">
           {data?.map((item, index) => (
-            <AccountCard
+            <ListAccountCard
               accountsWithAccess={accountsWithAccess}
               dataForList={item}
               key={index}

src/entities/list/components/ListConfirmationModals.tsx

@@ -1,16 +1,17 @@
 /* eslint-disable @next/next/no-img-element */
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import Image from "next/image";
+import Link from "next/link";
 
 import { Button } from "@/common/ui/components";
 
 interface SuccessModalProps {
   isOpen: boolean;
   onClose: () => void;
   listName: string;
-  onViewList: () => void;
   isUpdate: boolean;
+  href: string;
   showBackToLists?: boolean;
 }
 
@@ -20,7 +21,7 @@ export const SuccessModalCreateList: React.FC<SuccessModalProps> = ({
   listName,
   isUpdate,
   showBackToLists,
-  onViewList,
+  href,
 }) => {
   if (!isOpen) return null;
 
@@ -46,17 +47,17 @@ export const SuccessModalCreateList: React.FC<SuccessModalProps> = ({
           </h2>
           <p className="mb-6 text-center text-gray-700">
             You’ve successfully {isUpdate ? "Updated" : "Deployed"} {listName}, you can always make
-            adjustments in the pot settings page.
+            adjustments in the list settings page.
           </p>
-          <button
-            onClick={() => {
-              onViewList();
-              onClose();
-            }}
-            className="w-full rounded-md bg-red-500 px-4 py-2 font-semibold text-white transition hover:bg-red-600"
-          >
-            {showBackToLists ? "Back to lists" : "View list"}
-          </button>
+          <Button asChild>
+            <Link
+              href={href}
+              onClick={onClose}
+              aria-label={showBackToLists ? "Navigate back to lists page" : "View the created list"}
+            >
+              {showBackToLists ? "Back to lists" : "View list"}
+            </Link>
+          </Button>
         </div>
       </div>
     </div>

src/entities/list/components/ListDetails.tsx

@@ -40,16 +40,12 @@ interface ListDetailsType {
   setAdmins: (value: string[]) => void;
   listDetails: List | any;
   savedUsers: SavedUsersType;
+  listId: number;
 }
 
-export const ListDetails = ({ admins, listDetails, savedUsers }: ListDetailsType) => {
+export const ListDetails = ({ admins, listId, listDetails, savedUsers }: ListDetailsType) => {
   const viewer = useWalletUserSession();
-
-  const {
-    push,
-    // TODO: Pass this values down from the page level!
-    query: { id },
-  } = useRouter();
+  const { push } = useRouter();
 
   const [isApplyToListModalOpen, setIsApplyToListModalOpen] = useState(false);
   const [isApplicationSuccessful, setIsApplicationSuccessful] = useState<boolean>(false);
@@ -219,7 +215,7 @@ export const ListDetails = ({ admins, listDetails, savedUsers }: ListDetailsType
             {viewer.isSignedIn && (
               <div className="relative flex items-start gap-4">
                 <div className="flex space-x-4">
-                  <DonateToListProjects listId={parseInt(id as string)} />
+                  <DonateToListProjects listId={listId} />
 
                   {!listDetails?.admin_only_registrations && (
                     <button

src/entities/list/components/ListFormDetails.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react";
+import React, { ChangeEvent, useEffect, useMemo, useState } from "react";
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Check } from "lucide-react";
@@ -15,7 +15,7 @@ import {
 } from "@/common/contracts/core/lists";
 import { nearSocialIpfsUpload } from "@/common/services/ipfs";
 import type { ByListId } from "@/common/types";
-import { Button, Input } from "@/common/ui/components";
+import { Button, Input, Spinner } from "@/common/ui/components";
 import { cn } from "@/common/ui/utils";
 import { useWalletUserSession } from "@/common/wallet";
 import { AccountGroup, AccountListItem, AccountProfilePicture } from "@/entities/_shared/account";
@@ -26,7 +26,6 @@ import {
   ListConfirmationModalProps,
   SuccessModalCreateList,
 } from "./ListConfirmationModals";
-import { useListDeploymentSuccessRedirect } from "../hooks/redirects";
 import { useListForm } from "../hooks/useListForm";
 import { createListSchema } from "../models/schema";
 
@@ -51,19 +50,20 @@ export type ListFormProps = Partial<ByListId> & {
 
 export const ListFormDetails: React.FC<ListFormProps> = ({ listId, isDuplicate = false }) => {
   const viewer = useWalletUserSession();
-  const { back, push } = useRouter();
-  const onEditPage = listId === undefined;
-
-  // TODO: Move to the corresponding page!
-  useListDeploymentSuccessRedirect();
+  const { back } = useRouter();
+  const onEditPage = listId !== undefined;
 
   const { isLoading: isRegistrationListLoading, data: registrations } =
     listsContractHooks.useRegistrations({
       enabled: listId !== undefined,
       listId: listId ?? 0,
     });
 
-  const { isLoading: isListLoading, data: list } = listsContractHooks.useList({
+  const {
+    isLoading: isListLoading,
+    error,
+    data: list,
+  } = listsContractHooks.useList({
     enabled: listId !== undefined,
     listId: listId ?? 0,
   });
@@ -131,7 +131,16 @@ export const ListFormDetails: React.FC<ListFormProps> = ({ listId, isDuplicate =
         console.error("Error fetching list details:", error);
       }
     }
-  }, [setValue, onEditPage, isDuplicate, setAdmins, viewer.isSignedIn, viewer.accountId, list]);
+  }, [
+    setValue,
+    onEditPage,
+    isDuplicate,
+    setAdmins,
+    viewer.isSignedIn,
+    viewer.accountId,
+    list,
+    error,
+  ]);
 
   const onSubmit: SubmitHandler<any> = async (data, event) => {
     // Due to conflicting submit buttons (admin and list), this is to make sure only list submit form is submitted.
@@ -265,12 +274,11 @@ export const ListFormDetails: React.FC<ListFormProps> = ({ listId, isDuplicate =
     [admins],
   );
 
-  // TODO: Use Next's Link component instead of these callbacks!
-  const handleViewList = useCallback(() => push(`/list/${listId}`), [listId, push]);
-  const handleViewLists = useCallback(() => push(`/lists`), [push]);
-
-  // TODO: Handle loading states for list registrations and list data
-  return (
+  return isListLoading || isRegistrationListLoading ? (
+    <div className="flex h-[80vh] items-center justify-center">
+      <Spinner className="h-20 w-20" />
+    </div>
+  ) : (
     <>
       <div className=" mx-auto my-8 max-w-[896px] p-6 font-sans md:w-[720px] md:rounded-[16px] md:border md:border-[#DBDBDB] md:p-10">
         <h2 className="mb-6 text-[18px] font-semibold">List Details</h2>
@@ -458,7 +466,7 @@ export const ListFormDetails: React.FC<ListFormProps> = ({ listId, isDuplicate =
           )}
 
           <div>
-            <h3 className="mb-2 mt-10 text-xl font-semibold">
+            <h3 className="mb-2 mt-10 text-lg font-semibold md:text-xl">
               Upload list cover image <span className="font-normal text-gray-500">(Optional)</span>
             </h3>
             <div
@@ -546,7 +554,7 @@ export const ListFormDetails: React.FC<ListFormProps> = ({ listId, isDuplicate =
         isUpdate={listCreateSuccess.type === "UPDATE_LIST"}
         listName={listCreateSuccess.data?.name}
         showBackToLists={!listId}
-        onViewList={listId ? handleViewList : handleViewLists}
+        href={listId ? `/list/${listId}` : `/lists`}
       />
     </>
   );

src/entities/list/components/ListsOverview.tsx

@@ -173,14 +173,11 @@ export const ListsOverview = ({
         )}
       </div>
       {loading ? (
-        Array.from({ length: 6 }, (_, index) => (
-          <div
-            key={index}
-            className="mt-8 grid w-full grid-cols-1 gap-8 pb-10 md:grid-cols-2 lg:grid-cols-3"
-          >
+        <div className="mt-8 grid w-full grid-cols-3 gap-8 pb-10 md:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }, (_, index) => (
             <ListCardSkeleton key={index} />
-          </div>
-        ))
+          ))}
+        </div>
       ) : (
         <>
           {filteredRegistrations.length > 0 ? (

src/entities/list/components/listActionsModal.tsx

@@ -17,7 +17,7 @@ type ListActionsModal = {};
 
 export const ListActionsModal = create((_: ListActionsModal) => {
   const self = useModal();
-  const { push, query } = useRouter();
+  const { push } = useRouter();
 
   const close = useCallback(() => {
     self.hide();
@@ -89,9 +89,7 @@ export const ListActionsModal = create((_: ListActionsModal) => {
       onClose={close}
       listName={data?.name as string}
       isUpdate={type === ListFormModalType.UPDATE_LIST}
-      onViewList={() =>
-        push(`/list/${data?.id ?? (Array.isArray(data) ? data[0]?.id : undefined)}`)
-      }
+      href={`/list/${data?.id ?? (Array.isArray(data) ? data[0]?.id : undefined)}`}
     />
   ) : (
     <Dialog open={self.visible}>