refactor(app): course and challenge detail pages

src/app/learn/[type]/[id]/CourseOrChallengeDetail.js

@@ -0,0 +1,57 @@
+/**
+ * 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.
+ */
+
+'use client';
+
+import { Share } from '@/components/Share';
+
+import { ChallengeDetailViewWidget } from '#/domain/challenge';
+import { CourseDetailViewWidget } from '#/domain/course';
+
+import { Back } from './Back';
+import { LearnRightCard } from './RightCard';
+
+const viewWidgetMap = {
+  courses: CourseDetailViewWidget,
+  challenges: ChallengeDetailViewWidget,
+};
+
+function CourseOrChallengeDetail({ params, data, permission, related }) {
+  const learnType = params.type;
+  const DetailViewWidget = viewWidgetMap[learnType];
+
+  if (!DetailViewWidget) {
+    return null;
+  }
+
+  const actionBar = (
+    <>
+      <Back params={params} />
+      <Share img={data?.base?.course_series_img} title={data?.base?.course_series_title} type={learnType} id={params.id} excerpt={data?.base?.course_series_summary}/>
+    </>
+  );
+
+  return (
+    <div className="mx-auto px-6 lg:flex max-w-[1400px] justify-center">
+      <div className="flex flex-1 border-gray-400 pt-6 lg:border-r lg:pr-14">
+        <DetailViewWidget params={params} data={data} actionBar={actionBar} />
+      </div>
+      <LearnRightCard data={data} type={learnType} permission={permission} related={related} />
+    </div>
+  );
+}
+
+export default CourseOrChallengeDetail;

src/app/learn/[type]/[id]/GrowPath.js

@@ -24,15 +24,15 @@ import { growPathEnrollAction } from './actions';
 import { Back } from './Back';
 
 function GrowPath({ params, data, permission }) {
-  const headerExtra = (
+  const actionBar = (
     <>
       <Back params={params} />
       <Share img={data?.img} title={data?.title} type={params.type} id={params.id} />
     </>
   );
 
   return (
-    <RoadmapDetailViewWidget id={params.id} data={data} permission={permission} headerExtra={headerExtra} executeEnroll={growPathEnrollAction} />
+    <RoadmapDetailViewWidget id={params.id} data={data} permission={permission} actionBar={actionBar} executeEnroll={growPathEnrollAction} />
   );
 }
 

src/app/learn/[type]/[id]/page.js

@@ -15,19 +15,10 @@
  */
 
 import { PreviewAlert } from '@/components/PreviewAlert';
-import { Share } from '@/components/Share';
 import { get } from '@/utils/request';
 
-import { Chapters } from '../../Chapters';
-import { Speaker } from '../../Speaker';
-import { Author } from './Author';
-import { Back } from './Back';
+import CourseOrChallengeDetail from './CourseOrChallengeDetail';
 import GrowPath from './GrowPath';
-import { LearnInfo } from './LearnInfo';
-import { LearnRightCard } from './RightCard';
-import { Summary, Title } from './Summary';
-import { Tabs } from './Tabs';
-import { ChallengesTags } from './Tags';
 
 export async function generateMetadata({ params }) {
   // fetch data
@@ -83,27 +74,7 @@ export default async function LearnDetailsPage({ params, searchParams }) {
   return learnType !== 'career_path' ? (
     <>
       <PreviewAlert searchParams={searchParams} />
-      <div className="mx-auto px-6 lg:flex max-w-[1400px] justify-center">
-        <div className="flex flex-1 border-gray-400 pt-6 lg:border-r lg:pr-14">
-          <div className="w-full">
-            <div className="flex justify-between">
-              <Back params={params} />
-              <Share img={data?.base?.course_series_img} title={data?.base?.course_series_title} type={learnType} id={learnId} excerpt={data?.base?.course_series_summary}/>
-            </div>
-            <Title data={data} />
-            {learnType === 'challenges' && <ChallengesTags data={data} />}
-            {data?.base?.course_series_summary && <Summary data={data} />}
-            {data && <Author data={data} />}
-            {data && <Tabs data={data} />}
-            {data && <LearnInfo data={data} />}
-            {data && data?.courses?.length > 0 && <Chapters type={learnType} data={data} id={data?.base?.course_series_id} />}
-            <div className="h-6" />
-            {data && data?.speaker?.length > 0 && <Speaker data={data?.speaker} />}
-            <div className="h-[72px]" />
-          </div>
-        </div>
-        <LearnRightCard data={data} type={learnType} permission={permission} related={related} />
-      </div>
+      <CourseOrChallengeDetail params={params} data={data} permission={permission} related={related} />
     </>
   ) : <GrowPath params={params} data={data} permission={permission} />;
 }

src/domain/challenge/index.js

@@ -15,3 +15,4 @@
  */
 
 export { default as ChallengeListViewWidget } from './views/challenge-list';
+export { default as ChallengeDetailViewWidget } from './views/challenge-detail';

src/app/learn/[type]/[id]/Tags.js → src/domain/challenge/views/challenge-detail/ChallengeDetail.js

@@ -14,21 +14,18 @@
  * limitations under the License.
  */
 
-'use client';
-import { typeStyle, useTags } from '../ChallengesCard';
-import { ChallengesStatus } from '../ChallengesStatus';
+import { CourseDetailViewWidget } from '../../../course';
+import TagListWidget from '../../widgets/tag-list';
 
-
-export function ChallengesTags({ data }) {
-  const tags = useTags(data);
+function ChallengeDetailView({ params, data, actionBar }) {
   return (
-    <div className="flex">
-      {data && <ChallengesStatus data={data} />}
-      {tags.map((t, i) => (
-        <span key={`learn-card-tag-${i}`} className={typeStyle}>
-          {t}
-        </span>
-      ))}
-    </div>
+    <CourseDetailViewWidget
+      params={params}
+      data={data}
+      actionBar={actionBar}
+      extraMeta={<TagListWidget data={data} />}
+    />
   );
 }
+
+export default ChallengeDetailView;

src/app/learn/[type]/[id]/LearnInfo.js → src/domain/challenge/views/challenge-detail/index.js

@@ -14,17 +14,4 @@
  * limitations under the License.
  */
 
-'use client';
-
-import { OViewer } from '@/components/MarkDown';
-
-export function LearnInfo({ data }) {
-  return (
-    <div
-      id="learn-info"
-      className="[&>div>a]:font-bold [&>div>a]:underline"
-    >
-      {data && <OViewer value={data?.base?.course_series_introduction} />}
-    </div>
-  );
-}
+export { default } from './ChallengeDetail';

src/domain/challenge/views/challenge-list/ChallengeItem.js

@@ -20,7 +20,6 @@ import Link from 'next/link';
 import LocationIcon from 'public/images/location.svg';
 import TicketPic from 'public/images/ticket.png';
 import TimeIcon from 'public/images/time.svg';
-import { useMemo } from 'react';
 import ContentEditable from 'react-contenteditable';
 
 import { USDTIcon } from '@/components/Icons';
@@ -29,33 +28,9 @@ import { HTMLDecode } from '@/utils';
 import { formatTime } from '@/utils/date';
 
 import { countries } from '#/lib/countries';
-import { useConfig } from '#/state/application/hooks';
 
 import { CardTitleWidget } from '../../../course';
-import ChallengeStatus from './ChallengeStatus';
-
-
-export const typeStyle = 'flex items-center mb-1 text-xs border border-gray-600 rounded-[6px] px-2 h-6 opacity-60 mr-1';
-
-export function useTags(data) {
-  const configs = useConfig();
-  const tags = useMemo(() => {
-    const _filters = configs && configs.find(f => f.config_id === 1);
-    if (data.base?.course_series_label_ids?.length > 0) {
-      const _tag = data.base.course_series_label_ids.map(i => {
-        const f = _filters?.config_value['challenges']?.map(cv => {
-          const findedTag = cv.labels.find(cvf => cvf.id === i);
-          return findedTag?.name;
-        });
-        return f;
-      });
-      return Array.from(new Set(_tag.flat().filter(d => d)));
-    } else {
-      return [];
-    }
-  }, [data.base.course_series_label_ids, configs]);
-  return tags;
-}
+import TagListWidget from '../../widgets/tag-list';
 
 export function TimeAndLocation({data, from, openTicket, permission, type}) {
   // console.log(data)
@@ -97,8 +72,6 @@ export function TimeAndLocation({data, from, openTicket, permission, type}) {
 }
 
 function ChallengeItem({ data }) {
-  const tags = useTags(data);
-
   return (
     <Link
       href={`/learn/challenges/${data.base?.course_series_id}`}
@@ -110,14 +83,7 @@ function ChallengeItem({ data }) {
         data={data}
         showStatus
       />
-      <div className="flex flex-wrap px-6 mt-4">
-        <ChallengeStatus data={data} />
-        {tags.map((t, i) => (
-          <span key={`learn-card-tag-${i}`} className={typeStyle}>
-            {t}
-          </span>
-        ))}
-      </div>
+      <TagListWidget className="flex-wrap px-6 mt-4" data={data} />
       <div className="border-b border-gray-400 px-6 pb-4 pt-2 flex-1">
         <h6 className="text-lg font-bold leading-6 line-clamp-2">
           <ContentEditable

src/domain/challenge/widgets/tag-list/TagList.js

@@ -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 clsx from 'clsx';
+import { useMemo } from 'react';
+
+import { useConfig } from '#/state/application/hooks';
+
+import ChallengeStatus from './ChallengeStatus';
+
+function useTags(data) {
+  const configs = useConfig();
+  const tags = useMemo(() => {
+    const _filters = configs && configs.find(f => f.config_id === 1);
+    if (data.base?.course_series_label_ids?.length > 0) {
+      const _tag = data.base.course_series_label_ids.map(i => {
+        const f = _filters?.config_value['challenges']?.map(cv => {
+          const findedTag = cv.labels.find(cvf => cvf.id === i);
+          return findedTag?.name;
+        });
+        return f;
+      });
+      return Array.from(new Set(_tag.flat().filter(d => d)));
+    } else {
+      return [];
+    }
+  }, [data.base.course_series_label_ids, configs]);
+  return tags;
+}
+
+function TagList({ className, data }) {
+  const tags = useTags(data);
+
+  return data && (
+    <div className={clsx('flex', className)}>
+      <ChallengeStatus data={data} />
+      {tags.map((t, i) => (
+        <span key={`learn-card-tag-${i}`} className="flex items-center mb-1 text-xs border border-gray-600 rounded-[6px] px-2 h-6 opacity-60 mr-1">
+          {t}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export default TagList;

src/domain/challenge/widgets/tag-list/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+export { default } from './TagList';

src/domain/course/index.js

@@ -18,3 +18,4 @@ export { default as BuilderListWidget } from './widgets/builder-list';
 export { default as CardTitleWidget } from './widgets/card-title';
 
 export { default as CourseListViewWidget } from './views/course-list';
+export { default as CourseDetailViewWidget } from './views/course-detail';