feat(app/profile): apply the new NFT list design

Merge commits below into one:

* feat: change NFC list style of profile
* refactor: refactor logic of NFT list

Author: Asa0oo0o0o

src/domain/profile/repository.js

@@ -17,6 +17,8 @@
 import { unwrapBlockData, wrapBlockData } from '@/components/control/block-editor/helper';
 import httpClient from '@/utils/http';
 
+import { fetchGainedReputationList } from '../reputation/repository';
+
 async function fetchWeb3BioProfile(address) {
   return httpClient.get(`https://api.web3.bio/profile/${address}`, {
     headers: { 'X-API-KEY': process.env.NEXT_PUBLIC_WEB3BIO },
@@ -37,6 +39,12 @@ async function fetchUser(handle) {
     data.web3Bio = web3BioProfile;
   }
 
+  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

@@ -25,6 +25,7 @@ import SkillOverviewView from '../../../skill/views/skill-overview';
 import ActivityTabListWidget from '../../widgets/activity-tab-list';
 import SocialInfoWidget from '../../widgets/social-info';
 import TabBarWidget from '../../widgets/tab-bar';
+import style from './style.module.scss';
 
 const tabs = [
   {
@@ -70,20 +71,20 @@ const tabs = [
 ];
 
 function IndividualProfileView({ data }) {
-  const [tabActive, setTabActive] = useState(1);
+  const [tabActive, setTabActive] = useState(2);
   const userId = data?.base.user_id;
 
   const tabContent = [
     <SocialInfoWidget key="social" data={data} />,
-    <GainedReputationListView key="reputation" userId={userId} />,
+    <GainedReputationListView key="reputation" data={data?.extra.reputationList} />,
     <SkillOverviewView key="skill" userId={userId} />,
   ];
 
   return (
     <div className="md:pl-[410px] md:pb-14 md:pr-14">
       <TabBarWidget
         tabs={['Info', 'Reputation', 'Skill insight']}
-        tabClassName="h-14 md:h-9 md:w-[119px] md:first:hidden"
+        tabClassName={`h-14 md:h-9 md:w-[119px] ${style.Tab}`}
         current={tabActive}
         onChange={setTabActive}
       />

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

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+.Tab {
+  @media (min-width: 768px) {
+    &:nth-child(1),
+    &:nth-child(2) {
+      display: none;
+    }
+  }
+}

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

@@ -18,6 +18,7 @@ import { useMemo } from 'react';
 
 import { SvgIcon } from '@/components/Image';
 
+import GainedReputationListView from '../../../reputation/views/gained-reputation-list';
 import SocialLink from './SocialLink';
 import Web3BioProfile from './Web3BioProfile';
 
@@ -95,6 +96,12 @@ function SocialInfoWidget({ className, data }) {
           </div>
         </>
       )}
+      {data?.extra?.reputationList?.length > 0 && (
+        <>
+          <p className="mt-6 uppercase text-xs opacity-60 font-bold">Reputation</p>
+          <GainedReputationListView data={data?.extra?.reputationList} compact />
+        </>
+      )}
       <Web3BioProfile data={data} />
       {data.base?.user_show_email && data?.social?.user_email !== '' && (
         <>

…-reputation-list/GainedReputationItem.js …reputation-list/GainedReputationItem.tsxsrc/domain/reputation/views/gained-reputation-list/GainedReputationItem.js renamed to src/domain/reputation/views/gained-reputation-list/GainedReputationItem.tsx src/domain/reputation/views/gained-reputation-list/GainedReputationItem.js renamed to src/domain/reputation/views/gained-reputation-list/GainedReputationItem.tsx

@@ -17,8 +17,20 @@
 import Avatar from '@/components/Avatar';
 import { formatTime } from '@/utils/date';
 
-function GainedReputationItem({ data }) {
-  return (
+function GainedReputationItem({
+  data,
+  compact = false,
+}: {
+  data: {
+    img: string;
+    title: string;
+    updated_at: number;
+  };
+  compact?: boolean;
+}) {
+  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} />

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;