[add] Product Card & Comment Box components

[add] Evaluation form modal
[fix] missing Main Navigator links

Author: TechQuery

components/Activity/CommentBox.tsx

@@ -1,13 +1,25 @@
-import { FC } from 'react';
-import { Card } from 'react-bootstrap';
+import Giscus from '@giscus/react';
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+
+import { I18nContext } from '../../models/Translation';
+
+export const CommentBox = observer(() => {
+  const { currentLanguage } = useContext(I18nContext);
 
-export const CommentBox: FC = () => {
   return (
-    <Card className="mt-4">
-      <Card.Body>
-        <h3 className="h5">Comments</h3>
-        <p className="text-muted">Comment functionality coming soon...</p>
-      </Card.Body>
-    </Card>
+    <Giscus
+      repo="Open-Source-Bazaar/Open-Source-Bazaar.github.io"
+      repoId="R_kgDOGzCrLg"
+      category="Comments"
+      categoryId="DIC_kwDOGzCrLs4C0g_6"
+      mapping="pathname"
+      strict="0"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="bottom"
+      theme="preferred_color_scheme"
+      lang={currentLanguage.startsWith('zh-') ? currentLanguage : currentLanguage.split('-')[0]}
+    />
   );
-};
+});

components/Activity/ProductCard.tsx

@@ -0,0 +1,44 @@
+import { observer } from 'mobx-react';
+import { FilePreview } from 'mobx-restful-table';
+import { FC } from 'react';
+import { CardProps, Card, Button } from 'react-bootstrap';
+import { formatDate } from 'web-utility';
+
+import { Product } from '../../models/Hackathon';
+
+export type ProductCardProps = Product & Omit<CardProps, 'id' | 'title'>;
+
+export const ProductCard: FC<ProductCardProps> = observer(
+  ({ className = '', id, createdAt, name, sourceLink, link = sourceLink, summary, ...props }) => (
+    <Card className={`border-success ${className}`} {...props}>
+      <Card.Body className="d-flex flex-column">
+        <Card.Title
+          as="a"
+          className="text-primary"
+          title={name as string}
+          target="_blank"
+          href={link as string}
+        >
+          {(name || link) as string}
+        </Card.Title>
+        <p className="border-bottom p-2 text-muted text-truncate">{summary as string}</p>
+        <div className="border-bottom py-2 my-2 flex-fill">
+          <FilePreview className="w-100" path={link as string} />
+
+          {sourceLink && (
+            <Button variant="success" size="sm" href={sourceLink as string}>
+              🔗 Git
+            </Button>
+          )}
+        </div>
+        <time
+          className="d-block p-2 text-truncate"
+          dateTime={new Date(createdAt as number).toJSON()}
+        >
+          📅
+          {formatDate(createdAt as number)}
+        </time>
+      </Card.Body>
+    </Card>
+  ),
+);

components/Navigator/MainNavigator.tsx

@@ -1,3 +1,4 @@
+import { textJoin } from 'mobx-i18n';
 import { observer } from 'mobx-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
@@ -39,11 +40,24 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
     subs: [
       { href: '/project', title: t('open_source_projects') },
       { href: '/issue', title: 'GitHub issues' },
+      { href: '/license-filter', title: t('license_filter') },
+    ],
+  },
+  {
+    title: t('hackathon'),
+    subs: [
       {
         href: 'https://github.com/Open-Source-Bazaar/Git-Hackathon-scaffold',
-        title: t('hackathon'),
+        title: textJoin('GitHub', t('hackathon')),
+      },
+      {
+        href: '/search/activity?keywords=Hackathon',
+        title: textJoin('Lark', t('hackathon')),
+      },
+      {
+        href: 'https://test.hackathon.fcc-cd.dev/open-source',
+        title: textJoin(t('hackathon'), t('open_source_projects')),
       },
-      { href: '/license-filter', title: t('license_filter') },
     ],
   },
   {

models/Hackathon.ts

@@ -6,6 +6,7 @@ import {
   normalizeText,
   TableCellRelation,
   TableCellText,
+  TableCellUser,
   TableCellValue,
   TableRecord,
 } from 'mobx-lark';
@@ -24,7 +25,7 @@ export class AgendaModel extends BiDataTable<Agenda>() {
     return {
       ...meta,
       ...fields,
-      summary: normalizeText(summary as TableCellText),
+      summary: (summary as TableCellText[])!.map(normalizeText),
     };
   }
 }
@@ -149,10 +150,16 @@ export class MemberModel extends BiDataTable<Member>() {
 
   queryOptions: BiDataQueryOptions = { text_field_as_array: false };
 
-  extractFields({ fields: { githubAccount, ...fields }, ...meta }: TableRecord<Member>) {
+  extractFields({
+    fields: { summary, person, skills, githubAccount, ...fields },
+    ...meta
+  }: TableRecord<Member>) {
     return {
       ...meta,
       ...fields,
+      person: (person as TableCellUser[])?.[0],
+      summary: (summary as TableCellText[])!.map(normalizeText),
+      skills: skills?.toString().split(/\s*,\s*/) || [],
       githubAccount: normalizeText(githubAccount as TableCellText),
     };
   }

package.json

@@ -14,6 +14,7 @@
     "test": "lint-staged  &&  tsc --noEmit"
   },
   "dependencies": {
+    "@giscus/react": "^3.1.0",
     "@koa/router": "^15.1.1",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",

pages/hackathon/[id].tsx

@@ -1,5 +1,6 @@
 import { BiTableSchema, TableCellLocation, TableCellUser } from 'mobx-lark';
 import { observer } from 'mobx-react';
+import Link from 'next/link';
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
 import { Badge, Card, Col, Container, Row } from 'react-bootstrap';
@@ -199,11 +200,18 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
           <h2 className={styles.sectionTitle}>💡 {t('projects')}</h2>
 
           <Row as="ul" className="list-unstyled mt-4 g-3" md={2} lg={3} xl={4}>
-            {projects.map(({ name, score, summary, createdBy, members }) => (
+            {projects.map(({ id, name, score, summary, createdBy, members }) => (
               <Col as="li" key={name as string}>
                 <Card className={styles.projectCard} body>
                   <div className="d-flex justify-content-between align-items-start mb-3">
-                    <h6 className="text-white flex-grow-1">{name as string}</h6>
+                    <h6 className="text-white flex-grow-1">
+                      <Link
+                        className="stretched-link"
+                        href={`${ActivityModel.getLink(activity)}/team/${id}`}
+                      >
+                        {name as string}
+                      </Link>
+                    </h6>
                     <div className={styles.scoreCircle}>{score as number}</div>
                   </div>
                   <p className="text-white-50 small mb-3">{summary as string}</p>