refactor(app): list page layout and part of bounty requests

src/app/bounties/Container.js

@@ -15,25 +15,31 @@
  */
 
 import { NoData } from '@/components/NoData';
-import { PAGE_SIZE } from '@/constants/config';
-import { get } from '@/utils/request';
+
+import { fetchList } from '#/domain/bounty/repository';
 
 import { FilterToggle } from '../learn/[type]/FilterToggle';
 import { Search } from '../learn/[type]/Search';
 import { Sort } from '../learn/[type]/Sort';
 import { List } from './List';
 
-
 export async function Container({ type, searchParams }) {
-  const page = Number(searchParams?.page) || 1;
-  const order = searchParams?.order || 'default';
+  const page = searchParams?.page;
+  const order = searchParams?.order;
   const labels = searchParams?.labels || '';
   const query = searchParams?.query || '';
   const status = searchParams?.status || '';
   const skills = searchParams?.skills || '';
-  const URL = `ts/v1/build/general/bounties?ecosystem=${labels}&skip=${(page - 1) * PAGE_SIZE}&take=${PAGE_SIZE}&title=${query}&status=${status}&skills=${skills}&sort_by=${order}`;
-  const { data } = await get(URL, {isServer: true});
-  // console.log(data)
+
+  const { data } = await fetchList({
+    ecosystem: labels,
+    page,
+    title: query,
+    status,
+    skills,
+    sort: order,
+  });
+
   return (
     <div className="flex-1 pb-14">
       <div className="flex flex-col-reverse justify-between md:flex-row md:items-center">

src/app/bounties/List.js

@@ -16,7 +16,7 @@
 
 'use client';
 
-import { BountyListView } from '#/domain/bounty';
+import BountyListViewWidget from '#/domain/bounty/views/bounty-list';
 import { useOpenFilter } from '#/state/application/hooks';
 
 export function List({ data }) {
@@ -29,13 +29,8 @@ export function List({ data }) {
     '3xl:grid-cols-4': openFilter,
     '3xl:grid-cols-5': !openFilter,
   };
+
   return (
-    <div>
-      <BountyListView
-        className={otherClassNames}
-        data={data.list}
-        total={data.total}
-      />
-    </div>
+    <BountyListViewWidget className={otherClassNames} data={data.list} total={data.total} />
   );
 }

src/app/bounties/[id]/Activities.js

@@ -21,8 +21,7 @@ import useSWR from 'swr';
 import { NoData } from '@/components/NoData';
 import { fetcher } from '@/utils/request';
 
-import { ActivityListView } from '#/domain/bounty';
-
+import BountyActivityListViewWidget from '#/domain/bounty/views/bounty-activity-list';
 
 export function Activities({ id }) {
   const { data } = useSWR(`ts/v1/build/general/bounties/${id}/events/activities`, fetcher, {suspense: true});
@@ -35,7 +34,7 @@ export function Activities({ id }) {
           Publish a discussion
         </Button> */}
       </div>
-      <ActivityListView data={data?.list} />
+      <BountyActivityListViewWidget data={data?.list} />
       <div className="pb-14">{(!data || data?.list?.length === 0) && <NoData />}</div>
     </div>
   );

src/app/bounties/[id]/ApplyFinishedModal.js

@@ -30,7 +30,7 @@ import { biulderFinish } from '#/services/bounties';
 
 import { revalidatePathAction } from '../../actions';
 
-export function ApplyFinishedModal({open, close, bounty}) {
+export function ApplyFinishedModal({ open, close, bounty }) {
   const _contracts = contracts[BOUNTY_SUPPORTED_CHAIN()];
   const payToken = payTokens[BOUNTY_SUPPORTED_CHAIN()].usdt;
   const wrapBountyEnvCheck = useBountyEnvCheck();

src/app/bounties/[id]/actions.js

@@ -18,16 +18,12 @@
 
 import { revalidatePath } from 'next/cache';
 
-import { post } from '@/utils/request';
+import { applyOne } from '#/domain/bounty/repository';
 
 export async function applyAction(id, comment) {
   try {
-    const res = await post(`ts/v1/build/general/bounties/${id}/builders`, { comment }, { isServer: true });
-    if (res.code === 200) {
-      return revalidatePath('/');
-    } else {
-      return res;
-    }
+    const res = await applyOne(id, { comment });
+    return res.success ? revalidatePath('/') : res;
   } catch (e) {
     return { message: 'Failed to request' };
   }

src/app/bounties/[id]/page.js

@@ -18,7 +18,8 @@ import { Suspense } from 'react';
 
 import { PreviewAlert } from '@/components/PreviewAlert';
 import { fromNow } from '@/utils/date';
-import { get } from '@/utils/request';
+
+import { fetchOne } from '#/domain/bounty/repository';
 
 import { ChainNetworkTips } from '../Tips';
 import { Activities } from './Activities';
@@ -27,11 +28,7 @@ import { Employers } from './Employers';
 import { BountiesHeader } from './Header';
 
 export default async function Page({ params, searchParams }) {
-  const datas = await Promise.all([
-    get(`ts/v1/build/general/bounties/${params.id}`, {isServer: true}),
-    // get(`ts/v1/build/general/bounties/${params.id}/builders`, {isServer: true})
-  ]);
-  const [{ data }] = [...datas];
+  const { data } = await fetchOne(params.id);
 
   return (
     <>

src/app/bounties/page.js

@@ -14,34 +14,27 @@
  * limitations under the License.
  */
 
-import { Suspense } from 'react';
-
 import { Filter } from '@/components/Filter';
 
-import StartOnOpenBuild from '#/entry/components/StartOnOpenBuild';
+import ListLayout from '#/entry/layouts/list';
 
-import { Title } from '../learn/Title';
 import { Container } from './Container';
 import { BountyFilter } from './Filter';
 import { ListSkeleton } from './ListSkeleton';
 
 export default function Page({ params, searchParams }) {
   return (
-    <div>
-      <div className="px-6 md:px-6">
-        <Title title="Bounties" desc="Post and Discover Bounties with Payment Secured by OpenBuild Smart Contract." />
-        <div className="flex">
-          <Filter type={'bounty'}>
-            <BountyFilter />
-          </Filter>
-          <Suspense fallback={<ListSkeleton />}>
-            <Container type={params.type} searchParams={searchParams}  />
-          </Suspense>
-          {/* <Content type={'bounty'} /> */}
-        </div>
-      </div>
-      {/* {status !== } */}
-      <StartOnOpenBuild />
-    </div>
+    <ListLayout
+      title="Bounties"
+      description="Post and Discover Bounties with Payment Secured by OpenBuild Smart Contract."
+      filter={(
+        <Filter type="bounty">
+          <BountyFilter />
+        </Filter>
+      )}
+      skeleton={<ListSkeleton />}
+    >
+      <Container type={params.type} searchParams={searchParams} />
+    </ListLayout>
   );
 }

src/app/learn/[type]/page.js

@@ -14,17 +14,13 @@
  * limitations under the License.
  */
 
-import { Suspense } from 'react';
-
 import { Filter } from '@/components/Filter';
 
-import StartOnOpenBuild from '#/entry/components/StartOnOpenBuild';
+import ListLayout from '#/entry/layouts/list';
 
 import { ChallengesFilter } from '../ChallengesFilter';
-import { Title } from '../Title';
 import { Container } from './Container';
 import { ListSkeleton } from './ListSkeleton';
-// import { LearnNavBar } from './nav'
 
 const titles = {
   courses: {
@@ -45,20 +41,18 @@ export default async function Page({ params, searchParams }) {
   const titleData = titles?.[params?.type];
 
   return (
-    <div>
-      <div className="px-6">
-        {titleData && <Title title={titleData.title} desc={titleData.desc} />}
-        {/* <LearnNavBar /> */}
-        <div className="relative flex max-md:overflow-x-hidden">
-          <Filter type={params.type === 'courses' ? 'open_course' : params.type}>
-            {params.type === 'challenges' && <ChallengesFilter />}
-          </Filter>
-          <Suspense fallback={<ListSkeleton />}>
-            <Container type={params.type} searchParams={searchParams} />
-          </Suspense>
-        </div>
-      </div>
-      <StartOnOpenBuild />
-    </div>
+    <ListLayout
+      title={titleData?.title}
+      description={titleData?.desc}
+      bodyClassName="relative max-md:overflow-x-hidden"
+      filter={(
+        <Filter type={params.type === 'courses' ? 'open_course' : params.type}>
+          {params.type === 'challenges' && <ChallengesFilter />}
+        </Filter>
+      )}
+      skeleton={<ListSkeleton />}
+    >
+      <Container type={params.type} searchParams={searchParams} />
+    </ListLayout>
   );
 }

src/app/u/[handle]/creator/page.js

@@ -16,7 +16,7 @@
 
 import { fetchUser, fetchUserActivityList } from '#/domain/profile/repository';
 
-import ProjectOwner from '../ProjectOwner';
+import ProjectOwner from './ProjectOwner';
 
 export default async function CreatorProfile({ params }) {
   const { data } = await fetchUser(params.handle);

src/domain/bounty/repository.js

@@ -14,26 +14,54 @@
  * limitations under the License.
  */
 
-import { merge } from '@/utils';
+import { PAGE_SIZE } from '@/constants/config';
+import { isInteger, merge } from '@/utils';
 import httpClient from '@/utils/http';
 
-async function fetchPublishedBountyList(params = {}) {
-  const { userId, sort, ...others } = params;
+function resolveSkipped(page) {
+  let resolved = Number(page);
+
+  if (!isInteger(resolved) || resolved < 1) {
+    resolved = 1;
+  }
+
+  return (resolved - 1) * PAGE_SIZE;
+}
+
+async function fetchList(params = {}) {
+  const { page = 1, sort, ...others } = params;
 
   return httpClient.get('/build/general/bounties', {
-    params: merge({ take: 20 }, others, {
-      team_uid: userId,
+    params: merge({ take: PAGE_SIZE }, others, {
+      skip: resolveSkipped(page),
       sort_by: sort || 'default',
     }),
   });
 }
 
+async function fetchOne(id) {
+  return httpClient.get(`/build/general/bounties/${id}`);
+}
+
+async function applyOne(id, data) {
+  return httpClient.post(`/build/general/bounties/${id}/builders`, data);
+}
+
+async function fetchPublishedBountyList(params = {}) {
+  const { userId, ...others } = params;
+
+  return fetchList({ ...others, team_uid: userId  });
+}
+
 async function fetchAppliedBountyList(params = {}) {
   const { userId, sort, ...others } = params;
 
   return httpClient.get(`/build/dashboard/bounties/public/${userId}`, {
-    params: merge({ take: 20 }, others, { sort_by: sort || 'default' }),
+    params: merge({ take: PAGE_SIZE }, others, { sort_by: sort || 'default' }),
   });
 }
 
-export { fetchPublishedBountyList, fetchAppliedBountyList };
+export {
+  fetchList, fetchOne, applyOne,
+  fetchPublishedBountyList, fetchAppliedBountyList,
+};

src/domain/bounty/views/activity-list/ActivityList.js → src/domain/bounty/views/bounty-activity-list/BountyActivityList.js

@@ -22,11 +22,9 @@ import { fromNow } from '@/utils/date';
 
 import { useMediaUrl } from '#/state/application/hooks';
 
-function ActivityList({
-  data=[],
-}) {
+function BountyActivityListView({ data = [] }) {
   const mediaUrl = useMediaUrl();
-    
+
   return <div>
     {data?.map?.((i, k) => (
       <div
@@ -149,4 +147,4 @@ function ActivityList({
   </div>;
 }
 
-export default ActivityList;
+export default BountyActivityListView;

src/domain/bounty/index.js → src/domain/bounty/views/bounty-activity-list/index.js

@@ -14,5 +14,4 @@
  * limitations under the License.
  */
 
-export { default as BountyListView } from './views/bounty-list';
-export { default as ActivityListView } from './views/activity-list';
+export { default } from './BountyActivityList';

src/domain/bounty/views/bounty-list/BountyList.js

@@ -20,7 +20,7 @@ import { OPagination } from '@/components/Pagination';
 
 import BountyItem from './BountyItem';
 
-function BountyList({
+function BountyListView({
   className,
   data = [],
   total = 0,
@@ -42,4 +42,4 @@ function BountyList({
   );
 }
 
-export default BountyList;
+export default BountyListView;