feat(issue118): 个人主页展示按创作者、普通用户分割

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

@@ -0,0 +1,37 @@
+/**
+ * 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 { get } from '@/utils/request';
+
+import ProjectOwner from '../ProjectOwner';
+
+export default async function CreatorProfile({ params }) {
+  const config = { isServer: true };
+  const { data } = await get(`ts/v1/user/info/handle/${params.handle}`, config);
+  if (data?.social.user_wallet && data?.base.user_show_wallet) {
+    data.web3Bio = await get(`https://api.web3.bio/profile/${data?.social.user_wallet}`, {
+      ...config,
+      headers: {
+        'X-API-KEY': process.env.NEXT_PUBLIC_WEB3BIO,
+      },
+    });
+  }
+  if (!data?.base?.user_project_owner) {
+    return <div>This user is not a creator.</div>;
+  }
+  const { data: activityData } = await get(`ts/v1/user/info/${data?.base.user_id}/creator/activity`, config);
+  return <ProjectOwner data={data} activities={activityData?.list || []} />;
+}

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

@@ -16,10 +16,9 @@
 
 import { get } from '@/utils/request';
 
-import ProjectOwner from './ProjectOwner';
 import ProjectPersonal from './ProjectPersonal';
 
-export default async function UserProfile({params}) {
+export default async function UserProfile({ params }) {
   const config = { isServer: true };
   const { data } = await get(`ts/v1/user/info/handle/${params.handle}`, config);
 
@@ -31,12 +30,5 @@ export default async function UserProfile({params}) {
       },
     });
   }
-
-  if (!data?.base?.user_project_owner) {
-    return <ProjectPersonal data={data} />;
-  }
-
-  const { data: activityData } = await get(`ts/v1/user/info/${data?.base.user_id}/creator/activity`, config);
-
-  return <ProjectOwner data={data} activities={activityData?.list || []} />;
+  return <ProjectPersonal data={data} />;
 }

src/domain/profile/views/team-profile/TeamProfile.js

@@ -33,48 +33,73 @@ import TabBarWidget from '../../widgets/tab-bar';
 import CustomContent from './CustomContent';
 import LatestActivityList from './LatestActivityList';
 
-const tabs = [
-  {
-    text: 'Open Course',
-    node: (
-      <>
-        <span className="inline md:hidden">Courses</span>
-        <span className="hidden md:inline">Open Course</span>
-      </>
-    ),
-    view: PublishedCourseListView,
-  },
-  {
-    text: 'Challenges',
-    node: (
-      <>
-        <span className="inline md:hidden">Challenge</span>
-        <span className="hidden md:inline">Challenges</span>
-      </>
-    ),
-    view: PublishedChallengeListView,
-  },
-  {
-    text: 'Bounty',
-    node: (
-      <>
-        <span className="inline md:hidden">Bounty</span>
-        <span className="hidden md:inline">Bounty</span>
-      </>
-    ),
-    view: PublishedBountyListView,
-  },
-  {
-    text: 'Quiz',
-    node: (
-      <>
-        <span className="inline md:hidden">Quiz</span>
-        <span className="hidden md:inline">Quiz</span>
-      </>
-    ),
-    view: PublishedQuizListView,
-  },
-];
+const resolveTabs = published => {
+  const tabs = [
+    {
+      text: 'Open Course',
+      node: (
+        <>
+          <span className="inline md:hidden">Courses</span>
+          <span className="hidden md:inline">Open Course</span>
+        </>
+      ),
+      view: PublishedCourseListView,
+    },
+    {
+      text: 'Challenges',
+      node: (
+        <>
+          <span className="inline md:hidden">Challenge</span>
+          <span className="hidden md:inline">Challenges</span>
+        </>
+      ),
+      view: PublishedChallengeListView,
+    },
+    {
+      text: 'Bounty',
+      node: (
+        <>
+          <span className="inline md:hidden">Bounty</span>
+          <span className="hidden md:inline">Bounty</span>
+        </>
+      ),
+      view: PublishedBountyListView,
+    },
+    {
+      text: 'Quiz',
+      node: (
+        <>
+          <span className="inline md:hidden">Quiz</span>
+          <span className="hidden md:inline">Quiz</span>
+        </>
+      ),
+      view: PublishedQuizListView,
+    },
+  ];
+
+  const publishedTypes_b = {
+    'Open Course': 'open_course_num',
+    Bounty: 'bounty_num',
+    Challenges: 'challenge_num',
+    Quiz: 'quiz_num',
+  };
+  return tabs.map(tab => {
+    const tab_text = tab.node.props.children[1].props.children;
+    const count = published && publishedTypes_b[tab_text] ? published[publishedTypes_b[tab_text]] : 0;
+    return {
+      ...tab,
+      // 同时更新 node 中展示的内容
+      node: (
+        <>
+          {tab.node.props.children[0]}
+          <span className="hidden md:inline">
+            {tab_text} ({count})
+          </span>
+        </>
+      ),
+    };
+  });
+};
 
 function TeamProfileView({ data, activities }) {
   const [tabActive, setTabActive] = useState(1);
@@ -83,11 +108,12 @@ function TeamProfileView({ data, activities }) {
   const devPlazaEnabled = useAppConfig('devPlaza.enabled');
 
   useMounted(() => {
-    devPlazaEnabled && fetchBlockContent(data?.base.user_id).then(res => {
-      if (res.success) {
-        setBlockContent(res.data);
-      }
-    });
+    devPlazaEnabled &&
+      fetchBlockContent(data?.base.user_id).then(res => {
+        if (res.success) {
+          setBlockContent(res.data);
+        }
+      });
   });
 
   const handleBlockChange = useDebouncedCallback(updateBlockContent, 3000);
@@ -121,7 +147,7 @@ function TeamProfileView({ data, activities }) {
         onChange={setTabActive}
       />
       {tabContent[tabActive]}
-      <ActivityTabListWidget userId={data?.base.user_id} tabs={tabs} />
+      <ActivityTabListWidget userId={data?.base.user_id} tabs={resolveTabs(data?.num)} />
     </div>
   );
 }

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

@@ -18,12 +18,11 @@ import { useMemo } from 'react';
 
 import { SvgIcon } from '@/components/Image';
 
-import PublishedCountList from './PublishedCountList';
 import SocialLink from './SocialLink';
 import Web3BioProfile from './Web3BioProfile';
 
 function socialsInfo(type, link) {
-  switch(type) {
+  switch (type) {
   case 'user_github':
     return {
       name: 'GitHub',
@@ -51,15 +50,21 @@ function socialsInfo(type, link) {
 }
 
 function SocialInfoWidget({ className, data }) {
-  const socials = useMemo(() => Object.keys(data.social).map(i => socialsInfo(i, data.social[i])).filter(s => {
-    if (!s) {
-      return false;
-    }
+  const socials = useMemo(
+    () =>
+      Object.keys(data.social)
+        .map(i => socialsInfo(i, data.social[i]))
+        .filter(s => {
+          if (!s) {
+            return false;
+          }
 
-    const enabled = s.enableKey ? data.base[s.enableKey] : true;
+          const enabled = s.enableKey ? data.base[s.enableKey] : true;
 
-    return enabled && !!s.link;
-  }), [data]);
+          return enabled && !!s.link;
+        }),
+    [data],
+  );
 
   return (
     <div className={className}>
@@ -68,15 +73,14 @@ function SocialInfoWidget({ className, data }) {
           <p className="mt-6 uppercase text-xs opacity-60 font-bold">Social Profiles</p>
           <div className="border border-gray-600 rounded overflow-hidden mt-2">
             {socials.map(i => (
-              <SocialLink key={`user-social-${i.name}`} url={i.link} icon={i.icon} extra={i.extra}>{i.name}</SocialLink>
+              <SocialLink key={`user-social-${i.name}`} url={i.link} icon={i.icon} extra={i.extra}>
+                {i.name}
+              </SocialLink>
             ))}
           </div>
         </>
       )}
       <Web3BioProfile data={data} />
-      {data.base?.user_project_owner && (
-        <PublishedCountList published={data?.num} />
-      )}
       {data.base?.user_show_email && data?.social?.user_email !== '' && (
         <>
           <hr className="border-t border-gray-600 mt-6 mb-4" />