refactor: refactor logic of NFT list

Author: Asa0oo0o0o

src/domain/profile/repository.js

@@ -39,10 +39,11 @@ async function fetchUser(handle) {
     data.web3Bio = web3BioProfile;
   }
 
-  if (data?.base.user_id) {
-    const { data: reputation } = await fetchGainedReputationList(data?.base.user_id);
-    data.reputationList = reputation.list;
-  }
+  const { data: reputation } = await fetchGainedReputationList(data?.base.user_id);
+  data.extra = {
+    ...data.extra,
+    reputationList: reputation.list,
+  };
 
   return { ...others, data, success: true };
 }

src/domain/profile/views/individual-profile/IndividualProfile.js

@@ -76,7 +76,7 @@ function IndividualProfileView({ data }) {
 
   const tabContent = [
     <SocialInfoWidget key="social" data={data} />,
-    <GainedReputationListView key="reputation" userId={userId} data={data?.reputationList} />,
+    <GainedReputationListView key="reputation" data={data?.extra.reputationList} />,
     <SkillOverviewView key="skill" userId={userId} />,
   ];
 
@@ -89,7 +89,6 @@ function IndividualProfileView({ data }) {
         onChange={setTabActive}
       />
       {tabContent[tabActive]}
-      <div className="md:h-4" />
       <ActivityTabListWidget userId={userId} tabs={tabs} />
     </div>
   );

src/domain/profile/views/individual-profile/style.module.scss

@@ -16,9 +16,7 @@
 
 .Tab {
   @media (min-width: 768px) {
-    &:nth-child(1) {
-      display: none;
-    }
+    &:nth-child(1),
     &:nth-child(2) {
       display: none;
     }

src/domain/profile/widgets/social-info/SocialInfo.js

@@ -96,10 +96,10 @@ function SocialInfoWidget({ className, data }) {
           </div>
         </>
       )}
-      {data?.reputationList.length > 0 && (
+      {data?.extra?.reputationList?.length > 0 && (
         <>
           <p className="mt-6 uppercase text-xs opacity-60 font-bold">Reputation</p>
-          <GainedReputationListView key="reputation" data={data?.reputationList} />
+          <GainedReputationListView data={data?.extra?.reputationList} compact />
         </>
       )}
       <Web3BioProfile data={data} />

src/domain/reputation/views/gained-reputation-list/GainedReputationItem.tsx

@@ -19,24 +19,25 @@ import { formatTime } from '@/utils/date';
 
 function GainedReputationItem({
   data,
+  compact = false,
 }: {
   data: {
     img: string;
     title: string;
     updated_at: number;
   };
+  compact?: boolean;
 }) {
-  return (
-    <>
-      <Avatar src={data.img} alt={data.title} size={55} className="max-md:hidden" />
-      <div className="md:hidden w-full aspect-square text-center p-4 border border-gray-600 rounded">
-        <div className="flex justify-center">
-          <Avatar src={data.img} alt={data.title} size={100} />
-        </div>
-        <h3 className="text-sm truncate leading-5 flex-1 mt-2">{data.title}</h3>
-        <p className="text-xs opacity-40">{formatTime(data.updated_at * 1000, 'MMM D, YYYY')}</p>
+  return compact ? (
+    <Avatar src={data.img} alt={data.title} size={55} />
+  ) : (
+    <div className="w-full aspect-square md:w-[180px] text-center p-4 border border-gray-600 rounded">
+      <div className="flex justify-center">
+        <Avatar src={data.img} alt={data.title} size={100} />
       </div>
-    </>
+      <h3 className="text-sm truncate leading-5 flex-1 mt-2">{data.title}</h3>
+      <p className="text-xs opacity-40">{formatTime(data.updated_at * 1000, 'MMM D, YYYY')}</p>
+    </div>
   );
 }
 

src/domain/reputation/views/gained-reputation-list/GainedReputationList.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2024 OpenBuild
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import clsx from 'clsx';
+
+import { NoData } from '@/components/NoData';
+
+import GainedReputationItem from './GainedReputationItem';
+
+function GainedReputationListView({
+  data,
+  compact = false,
+}: {
+  data?: Array<{
+    img: string;
+    title: string;
+    updated_at: number;
+    id: string;
+  }>;
+  compact?: boolean;
+}) {
+  return data && data.length > 0 ? (
+    <div
+      className={clsx({
+        'grid grid-cols-5 gap-2 mt-4': compact,
+        'grid grid-cols-2 gap-5 md:flex md:gap-6 mt-6': !compact,
+      })}
+    >
+      {data.map(item => (
+        <GainedReputationItem key={`reputation-${item.id}`} data={item} compact={compact} />
+      ))}
+    </div>
+  ) : (
+    <NoData className="mt-6" />
+  );
+}
+
+export default GainedReputationListView;