refactor(app/profile): hide skill insight tab while no data

Author: ourai

src/domain/profile/repository.js

@@ -18,6 +18,7 @@ import { unwrapBlockData, wrapBlockData } from '@/components/control/block-edito
 import httpClient from '@/utils/http';
 
 import { fetchGainedReputationList } from '../reputation/repository';
+import { fetchUserSkills } from '../skill/repository';
 
 async function fetchWeb3BioProfile(address) {
   return httpClient.get(`https://api.web3.bio/profile/${address}`, {
@@ -39,10 +40,15 @@ async function fetchUser(handle) {
     data.web3Bio = web3BioProfile;
   }
 
-  const { data: reputation } = await fetchGainedReputationList(data?.base.user_id);
+  const userId = data.base.user_id;
+
+  const { data: reputation } = await fetchGainedReputationList(userId);
+  const { data: skill } = await fetchUserSkills(userId);
+
   data.extra = {
     ...data.extra,
     reputationList: reputation.list,
+    skill,
   };
 
   return { ...others, data, success: true };

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

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import clsx from 'clsx';
 import { useState } from 'react';
 
 import AppliedBountyListView from '../../../bounty/views/applied-bounty-list';
@@ -70,25 +71,45 @@ const tabs = [
   },
 ];
 
-function IndividualProfileView({ data }) {
-  const [tabActive, setTabActive] = useState(2);
-  const userId = data?.base.user_id;
+function resolveBasicTabGroup(data) {
+  const { reputationList, skill } = data?.extra || {};
 
+  const tabLabels = ['Info', 'Reputation'];
   const tabContent = [
     <SocialInfoWidget key="social" data={data} />,
-    <GainedReputationListView key="reputation" data={data?.extra.reputationList} />,
-    <SkillOverviewView key="skill" userId={userId} />,
+    <GainedReputationListView key="reputation" data={reputationList} />,
   ];
 
+  if (skill) {
+    tabLabels.push('Skill insight');
+    tabContent.push(<SkillOverviewView key="skill" data={skill} />);
+  }
+
+  return {
+    tabLabels,
+    tabContent,
+    hideInDesktop: !skill,
+  };
+}
+
+function IndividualProfileView({ data }) {
+  const [tabActive, setTabActive] = useState(data?.extra.skill ? 2 : 1);
+
+  const userId = data?.base.user_id;
+  const { tabLabels, tabContent, hideInDesktop } = resolveBasicTabGroup(data);
+
   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] ${style.Tab}`}
+        className={clsx({ 'md:hidden': hideInDesktop })}
+        tabs={tabLabels}
+        tabClassName={clsx('h-14 md:h-9 md:w-[119px]', style.Tab)}
         current={tabActive}
         onChange={setTabActive}
       />
-      {tabContent[tabActive]}
+      <div className={clsx('mb-9', { 'md:hidden': hideInDesktop })}>
+        {tabContent[tabActive]}
+      </div>
       <ActivityTabListWidget userId={userId} tabs={tabs} />
     </div>
   );

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

@@ -97,10 +97,10 @@ function SocialInfoWidget({ className, data }) {
         </>
       )}
       {data?.extra?.reputationList?.length > 0 && (
-        <>
-          <p className="mt-6 uppercase text-xs opacity-60 font-bold">Reputation</p>
+        <div className="mt-6 max-md:hidden">
+          <p className="uppercase text-xs opacity-60 font-bold">Reputation</p>
           <GainedReputationListView data={data?.extra?.reputationList} compact />
-        </>
+        </div>
       )}
       <Web3BioProfile data={data} />
       {data.base?.user_show_email && data?.social?.user_email !== '' && (

src/domain/skill/typing.ts

@@ -0,0 +1,26 @@
+
+/**
+ * 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 type { DataValue, ListValue } from '@/types';
+
+type SkillResponseData = {
+  skill_datas?: ListValue;
+  aspecta_show?: boolean;
+  skill_user?: Record<string, DataValue>;
+}
+
+export type { SkillResponseData };

…ll/views/skill-overview/SkillOverview.js …l/views/skill-overview/SkillOverview.tsxsrc/domain/skill/views/skill-overview/SkillOverview.js renamed to src/domain/skill/views/skill-overview/SkillOverview.tsx src/domain/skill/views/skill-overview/SkillOverview.js renamed to src/domain/skill/views/skill-overview/SkillOverview.tsx

@@ -19,37 +19,44 @@ import { useState } from 'react';
 import { NoData } from '@/components/NoData';
 import useMounted from '@/hooks/useMounted';
 
+import type { SkillResponseData } from '../../typing';
+import type { SkillOverviewViewWidgetProps } from './typing';
+
 import { fetchUserSkills } from '../../repository';
 import SkillInsight from '../../widgets/skill-insight';
 import SkillLevel from '../../widgets/skill-level';
 
-function SkillOverviewView({ userId }) {
-  const [data, setData] = useState({});
+function SkillOverviewView({ userId, data = {} }: SkillOverviewViewWidgetProps) {
+  const [internalData, setInternalData] = useState<SkillResponseData>(data);
 
   useMounted(() => {
+    if (!userId) {
+      return;
+    }
+
     fetchUserSkills(userId)
       .then(res => {
-        setData(res?.data);
+        setInternalData(res?.data);
       });
   });
 
   return (
     <div>
       <div className="mt-6">
-        {data?.skill_datas && data?.skill_datas.length > 0 ? (
+        {internalData?.skill_datas && internalData?.skill_datas.length > 0 ? (
           <>
             <div className="flex items-center justify-between mb-4">
               <h3 className="text-sm font-semibold">Skills</h3>
             </div>
-            <SkillLevel data={data} />
+            <SkillLevel data={internalData} />
           </>
         ) : (
           <NoData />
         )}
       </div>
-      {data?.aspecta_show && (
+      {internalData?.aspecta_show && (
         <SkillInsight
-          data={data?.skill_user.user_extra_skills}
+          data={internalData?.skill_user?.user_extra_skills}
           headerClassName="mt-9"
           titleClassName="text-sm font-semibold"
         />

src/domain/skill/views/skill-overview/typing.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 type { SkillResponseData } from '../../typing';
+import type { EntityId } from '@/types';
+
+type SkillOverviewViewWidgetProps = {
+  userId?: EntityId;
+  data?: SkillResponseData;
+}
+
+export type { SkillOverviewViewWidgetProps };

src/domain/skill/widgets/skill-insight/SkillInsight.js

@@ -59,7 +59,7 @@ function CustomizedContent(props) {
 }
 
 function SkillInsight({
-  className,
+  className = undefined,
   headerClassName,
   titleClassName,
   data,