My Domain list: Improvements

Staketab · May 20, 2024 · 8a52790 · 8a52790
1 parent 85a435f
commit 8a52790
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 17 deletions.
diff --git a/ui/components/molecules/nameCard/index.module.css b/ui/components/molecules/nameCard/index.module.css
@@ -1,5 +1,5 @@
 .wrapper {
-  width: 244px;
+  min-width: 244px;
   /* height: 324px; */
   display: flex;
   flex-direction: column;
@@ -13,7 +13,7 @@
 }
 
 .imgWrapper {
-  width: 220px;
+  width: 100%;
   height: 200px;
   display: flex;
   align-items: center;

diff --git a/ui/components/molecules/truncateText/index.module.css b/ui/components/molecules/truncateText/index.module.css
@@ -2,4 +2,5 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  line-height: 133%;
 }
diff --git a/ui/components/organisms/accountConent/components/activity/index.tsx b/ui/components/organisms/accountConent/components/activity/index.tsx
@@ -29,7 +29,6 @@ const ActivityContent = (): JSX.Element => {
           sortBy: SORT_BY.TIMESTAMP,
           orderBy: ORDER_BY.DESC,
         });
-console.log(response);
 
         setActivities({...response, 
           content: response?.content?.map((item) => {

diff --git a/ui/components/organisms/accountConent/components/names/allContent.tsx b/ui/components/organisms/accountConent/components/names/allContent.tsx
@@ -7,19 +7,26 @@ const AllContent = ({
   accountDomains,
   typeView,
   loading,
+  page,
+  size,
+  onSize,
+  onPage,
 }: {
   accountDomains: DataTable;
   typeView: TypeView;
   loading: boolean;
+  onSize: (size: number) => void;
+  onPage: (size: number) => void;
+  size: number;
+  page: number;
 }): JSX.Element => {
-
   return (
     <Table
       data={accountDomains}
       config={ScoringConfig}
       isLoading={loading}
-      currentPage={0}
-      pageLimit={50}
+      currentPage={page}
+      pageLimit={size}
       totalElements={accountDomains?.totalElements}
       pagesCount={accountDomains?.totalPages}
       typeView={typeView}
@@ -31,11 +38,11 @@ const AllContent = ({
       ]}
       sortBy={SORT_BY.RESERVATION_TIMESTAMP}
       orderBy={ORDER_BY.DESC}
-      onChangePage={(data) => {
-        console.log(data);
+      onChangePage={(page) => {
+        onPage(page);
       }}
-      onChangeLimit={(data) => {
-        console.log(data);
+      onChangeLimit={(size) => {
+        onSize(size);
       }}
       onChangeSort={(data) => {
         console.log(data);

diff --git a/ui/components/organisms/accountConent/components/names/index.tsx b/ui/components/organisms/accountConent/components/names/index.tsx
@@ -10,8 +10,13 @@ import { getAccountDomains } from "@/app/actions/actions";
 import { useParams } from "next/navigation";
 import { useStoreContext } from "@/store";
 import { addMinaText } from "@/helpers/name.helper";
+const initPage = 0;
+const initSize = 50;
 
 const NamesContent = (): JSX.Element => {
+  const [size, setSize] = useState<number>(initSize);
+  const [page, setPage] = useState<number>(initPage);
+
   const [accountDomains, setAccountDomains] = useState<DataTable>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const params = useParams();
@@ -49,10 +54,12 @@ const NamesContent = (): JSX.Element => {
       (async () => {
         try {
           setLoading(true);
+          console.log(page);
+
           const response = await getAccountDomains({
             accountAddress: (params?.id as string) || accountId,
-            page: 0,
-            size: 50,
+            page: page,
+            size: size,
             sortBy: SORT_BY.RESERVATION_TIMESTAMP,
             orderBy: ORDER_BY.DESC,
           });
@@ -65,7 +72,16 @@ const NamesContent = (): JSX.Element => {
       })();
       return;
     }
-  }, [params?.id, accountId]);
+  }, [params?.id, accountId, size, page]);
+
+  const onSize = (size) => {
+    setPage(initPage);
+    setSize(size);
+  };
+
+  const onPage = (page) => {
+    setPage(page);
+  };
 
   return (
     <div className={style.wrapper}>
@@ -79,6 +95,10 @@ const NamesContent = (): JSX.Element => {
                 accountDomains={accountDomains}
                 typeView={typeView}
                 loading={loading}
+                onSize={onSize}
+                onPage={onPage}
+                page={page}
+                size={size}
               />
             ),
             title: "All",
@@ -89,6 +109,10 @@ const NamesContent = (): JSX.Element => {
               <AllContent
                 typeView={typeView}
                 loading={loading}
+                onSize={onSize}
+                onPage={onPage}
+                page={page}
+                size={size}
                 accountDomains={{
                   ...accountDomains,
                   content: accountDomains?.content?.filter(
@@ -107,6 +131,10 @@ const NamesContent = (): JSX.Element => {
               <AllContent
                 typeView={typeView}
                 loading={loading}
+                onSize={onSize}
+                onPage={onPage}
+                page={page}
+                size={size}
                 accountDomains={{
                   ...accountDomains,
                   content: accountDomains?.content?.filter(

diff --git a/ui/components/organisms/table/index.module.css b/ui/components/organisms/table/index.module.css
@@ -75,4 +75,12 @@
   flex-wrap: wrap;
   gap: 18px;
   padding: 0 24px 6px 24px;
+  display: grid;
+  grid-gap: 18px;
+  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
+}
+
+
+.nameCards > div {
+  width: 100%;
 }
diff --git a/ui/components/organisms/table/table.tsx b/ui/components/organisms/table/table.tsx
@@ -71,7 +71,7 @@ const Table = ({
             handleSort={handleSort}
           />
         ) : (
-          <NameCards data={data?.content} />
+          <NameCards data={data?.content} isLoading={isLoading}/>
         )}
       </div>
       {showErrorMessage && <TableErrorMessage />}

diff --git a/ui/components/organisms/table/types.ts b/ui/components/organisms/table/types.ts
@@ -11,7 +11,7 @@ export interface TableProps {
   pagesCount?: number;
   sortBy?: SORT_BY;
   orderBy?: ORDER_BY;
-  onChangePage?: (value: string) => void;
+  onChangePage?: (value: number) => void;
   limitOptions?: LimitOptions;
   onChangeLimit?: (value: number) => void;
   onChangeSort?: (value: SORT_BY) => void;

diff --git a/ui/components/organisms/table/view/nameCards.tsx b/ui/components/organisms/table/view/nameCards.tsx
@@ -1,6 +1,7 @@
 import { DOMAIN_STATUS } from "@/comman/types";
 import { NameCard } from "../../../molecules/nameCard";
 import style from "../index.module.css";
+import { Loader, LoaderVariant } from "@/components/atoms/loader";
 
 type NameCardsProps = {
   data: {
@@ -10,10 +11,11 @@ type NameCardsProps = {
     domainStatus: DOMAIN_STATUS;
     endTimestamp: number;
   }[];
+  isLoading: boolean;
 };
 
-const NameCards = ({ data }: NameCardsProps): JSX.Element => {
-  if (!data) return null;
+const NameCards = ({ data, isLoading }: NameCardsProps): JSX.Element => {
+  if (!data || isLoading) return null;
 
   return (
     <div className={style.nameCards}>