feat(app): use DevPlaza design

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { fetchUser, fetchUserActivityList } from '#/domain/profile/repository';
+import { fetchUser } from '#/domain/profile/repository';
 
 import ProjectOwner from './ProjectOwner';
 
@@ -25,7 +25,5 @@ export default async function CreatorProfile({ params }) {
     return <div>This user is not a creator.</div>;
   }
 
-  const { data: activityData } = await fetchUserActivityList(data?.base.user_id);
-
-  return <ProjectOwner data={data} activities={activityData?.list || []} />;
+  return <ProjectOwner data={data} />;
 }

src/domain/profile/repository.js

@@ -44,10 +44,6 @@ async function updateUser(data) {
   return httpClient.post('/user/info', data);
 }
 
-async function fetchUserActivityList(uid) {
-  return httpClient.get(`/user/info/${uid}/creator/activity`);
-}
-
 function resolvePaginationParams(params) {
   return { ...params, take: 20 };
 }
@@ -88,7 +84,7 @@ async function updateBlockContent(data) {
 }
 
 export {
-  fetchUser, updateUser, fetchUserActivityList,
+  fetchUser, updateUser,
   fetchFollowerList, fetchFollowedList, followUser, unfollowUser,
   updateBanner,
   fetchBlockContent, updateBlockContent,

src/domain/profile/views/team-profile/DevPlaza.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 { useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+
+import { isBlockDataValid } from '@/components/control/block-editor/helper';
+import useMounted from '@/hooks/useMounted';
+
+import type { JSONContent } from '@/components/control/block-editor/typing';
+
+import { useViewingSelf } from '../../../auth/hooks';
+import { fetchBlockContent, updateBlockContent } from '../../repository';
+import CustomContent from './CustomContent';
+
+function DevPlaza({ params }: { params?: { userId: number } }) {
+  const [blockContent, setBlockContent] = useState<JSONContent | null>(null);
+  const viewingSelf = useViewingSelf(params?.userId);
+
+  useMounted(() => {
+    fetchBlockContent(params?.userId).then(res => {
+      if (res.success) {
+        setBlockContent(res.data);
+      }
+    });
+  });
+
+  const handleBlockChange = useDebouncedCallback(updateBlockContent, 3000);
+
+  const rerenderKey = [
+    'CustomContent',
+    `${viewingSelf ? 'editable' : 'readonly'}`,
+    isBlockDataValid(blockContent),
+  ].join('-');
+
+  return (
+    <CustomContent
+      key={rerenderKey}
+      data={blockContent}
+      onChange={handleBlockChange}
+      editable={viewingSelf}
+    />
+  );
+}
+
+export default DevPlaza;

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

@@ -15,26 +15,20 @@
  */
 
 import { useState } from 'react';
-import { useDebouncedCallback } from 'use-debounce';
 
-import { isBlockDataValid } from '@/components/control/block-editor/helper';
 import useAppConfig from '@/hooks/useAppConfig';
-import useMounted from '@/hooks/useMounted';
 
-import { useViewingSelf } from '../../../auth/hooks';
 import PublishedBountyListView from '../../../bounty/views/published-bounty-list';
 import PublishedChallengeListView from '../../../challenge/views/published-challenge-list';
 import PublishedCourseListView from '../../../course/views/published-course-list';
 import PublishedQuizListView from '../../../quiz/views/published-quiz-list';
-import { fetchBlockContent, updateBlockContent } from '../../repository';
 import ActivityTabListWidget from '../../widgets/activity-tab-list';
 import SocialInfoWidget from '../../widgets/social-info';
 import TabBarWidget from '../../widgets/tab-bar';
-import CustomContent from './CustomContent';
-import LatestActivityList from './LatestActivityList';
+import DevPlaza from './DevPlaza';
 
-function resolveTabs(published) {
-  return [
+function resolveTabs(published, extraTabs = []) {
+  return [].concat(extraTabs, [
     {
       text: 'Open Course',
       node: (
@@ -75,56 +69,44 @@ function resolveTabs(published) {
       ),
       view: PublishedQuizListView,
     },
-  ];
+  ]);
 };
 
-function TeamProfileView({ data, activities }) {
-  const [tabActive, setTabActive] = useState(1);
-  const [blockContent, setBlockContent] = useState(null);
-  const viewingSelf = useViewingSelf(data?.base.user_id);
+function TeamProfileView({ data }) {
+  const [tabActive, setTabActive] = useState(0);
   const devPlazaEnabled = useAppConfig('devPlaza.enabled');
 
-  useMounted(() => {
-    devPlazaEnabled &&
-      fetchBlockContent(data?.base.user_id).then(res => {
-        if (res.success) {
-          setBlockContent(res.data);
-        }
-      });
-  });
-
-  const handleBlockChange = useDebouncedCallback(updateBlockContent, 3000);
-
   const tabContent = [
     <SocialInfoWidget key="social" data={data} />,
-    <LatestActivityList key="activity" activities={activities} />,
   ];
 
-  const rerenderKey = [
-    'CustomContent',
-    `${viewingSelf ? 'editable' : 'readonly'}`,
-    isBlockDataValid(blockContent),
-  ].join('-');
+  const extraTabs = [];
+
+  if (devPlazaEnabled) {
+    extraTabs.push({
+      text: 'DevPlaza',
+      node: (
+        <>
+          <span className="inline md:hidden">DevPlaza</span>
+          <span className="hidden md:inline">DevPlaza</span>
+        </>
+      ),
+      view: DevPlaza,
+      filterable: false,
+    });
+  }
 
   return (
     <div className="md:pl-[410px] md:pb-14 md:pr-14">
-      {devPlazaEnabled && (
-        <CustomContent
-          key={rerenderKey}
-          className="mb-6"
-          data={blockContent}
-          onChange={handleBlockChange}
-          editable={viewingSelf}
-        />
-      )}
       <TabBarWidget
-        tabs={['Info', 'Activities']}
-        tabClassName="h-14 md:h-9 md:w-[111px] md:first:hidden"
+        className="md:hidden"
+        tabs={['Info']}
+        tabClassName="h-14 md:h-9 md:w-[111px]"
         current={tabActive}
         onChange={setTabActive}
       />
-      {tabContent[tabActive]}
-      <ActivityTabListWidget userId={data?.base.user_id} tabs={resolveTabs(data?.num)} />
+      <div className="mb-9 md:hidden">{tabContent[tabActive]}</div>
+      <ActivityTabListWidget userId={data?.base.user_id} tabs={resolveTabs(data?.num, extraTabs)} />
     </div>
   );
 }

src/domain/profile/widgets/activity-tab-list/ActivityTabList.js

@@ -29,30 +29,33 @@ function ActivityTabList({ userId, tabs }) {
   const [activity, setActivity] = useState(0);
   const [sort, setSort] = useState();
 
-  const ActivityList = tabs[activity].view;
+  const activeTab = tabs[activity];
+  const ActivityList = activeTab.view;
   const params = { userId, sort: sort?.value };
 
   return (
     <>
-      <div className="flex flex-col justify-between pt-9 pb-6 md:flex-row">
+      <div className="flex flex-col justify-between pb-6 md:flex-row">
         <TabBar
           tabs={tabs.map(({ text, node }) => node ? { text, node } : text)}
           tabClassName="h-14 md:h-9 md:!px-6"
           current={activity}
           onChange={setActivity}
         />
-        <div className="flex gap-3 mt-6 md:mt-0">
-          <ReactSelect
-            id="learn-order-select"
-            isClearable
-            value={sort}
-            isSearchable={false}
-            className="w-full no-bg showDropdownIndicator bg-transparent md:w-[200px]"
-            onChange={setSort}
-            options={sortOptions}
-            placeholder={'Sort by'}
-          />
-        </div>
+        {activeTab.filterable !== false && (
+          <div className="flex gap-3 mt-6 md:mt-0">
+            <ReactSelect
+              id="learn-order-select"
+              isClearable
+              value={sort}
+              isSearchable={false}
+              className="w-full no-bg showDropdownIndicator bg-transparent md:w-[200px]"
+              onChange={setSort}
+              options={sortOptions}
+              placeholder={'Sort by'}
+            />
+          </div>
+        )}
       </div>
       {ActivityList && <ActivityList params={params} />}
     </>

src/shared/hooks/useIsMobile.js → src/shared/components/control/block-editor/typing.ts

@@ -14,20 +14,4 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    if (
-      window.navigator.userAgent.match(
-        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
-      )
-    ) {
-      setIsMobile(true);
-    } else {
-      setIsMobile(false);
-    }
-  }, []);
-  return isMobile;
-}
+export type { JSONContent } from 'novel';