[add] Server Session Box component

kaiyuanshe · Nov 6, 2023 · 3fcdfdc · 3fcdfdc · github-actions · Nov 6, 2023
1 parent 28a3e36
commit 3fcdfdc
Show file tree

Hide file tree

Showing 37 changed files with 378 additions and 276 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Open-source Hackathon Platform with Git-based Cloud Development Environment
 ## Technology stack
 
 - Language: [TypeScript v5][2]
-- Component engine: [Nextjs v12][3]
+- Component engine: [Nextjs v14][3]
 - Component suite: [Bootstrap v5][4]
 - State management: [MobX v6][6]
 - PWA framework: [Workbox v6][5]
@@ -60,7 +60,7 @@ The easiest way to deploy your Next.js app is to use the [Vercel Platform][12] f
 
 Check out our [Next.js deployment documentation][17] for more details.
 
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fkaiyuanshe%2FOpenHackathon-Web.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fkaiyuanshe%2FOpenHackathon-Web?ref=badge_large)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fkaiyuanshe%2FOpenHackathon-Web.svg?type=large)][18]
 
 [1]: https://react.dev/
 [2]: https://www.typescriptlang.org/
@@ -76,3 +76,4 @@ Check out our [Next.js deployment documentation][17] for more details.
 [15]: https://nextjs.org/learn
 [16]: https://github.com/vercel/next.js/
 [17]: https://nextjs.org/docs/deployment
+[18]: https://app.fossa.com/projects/git%2Bgithub.com%2Fkaiyuanshe%2FOpenHackathon-Web?ref=badge_large
diff --git a/components/Activity/ActivityCard.tsx b/components/Activity/ActivityCard.tsx
@@ -5,7 +5,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
-import Link from 'next/link';
 import { Card, Col, Row } from 'react-bootstrap';
 
 import { Activity } from '../../models/Activity';
@@ -42,10 +41,12 @@ export function ActivityCard({
     <Card className={classNames('border-success', className)}>
       <Card.Body>
         <Card.Title
+          as="a"
           className="text-primary text-truncate text-wrap"
           title={displayName}
+          href={`/activity/${name}`}
         >
-          <Link href={`/activity/${name}`}>{displayName}</Link>
+          {displayName}
         </Card.Title>
         <Row as="small" className="g-4" xs={1}>
           <Col

diff --git a/components/Activity/ActivityManageFrame.tsx b/components/Activity/ActivityManageFrame.tsx
@@ -17,16 +17,17 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
-import { Fragment, PropsWithChildren, PureComponent } from 'react';
+import { Fragment, PureComponent } from 'react';
 import { Container, Nav } from 'react-bootstrap';
 
 import { menus } from '../../configuration/menu';
 import activityStore from '../../models/Activity';
 import { i18n } from '../../models/Base/Translation';
 import { findDeep } from '../../utils/data';
 import { MainBreadcrumb } from '../layout/MainBreadcrumb';
-import PageHead from '../layout/PageHead';
+import { PageHead } from '../layout/PageHead';
 import { PlatformAdminFrameProps } from '../PlatformAdmin/PlatformAdminFrame';
+import { ServerSessionBox } from '../User/ServerSessionBox';
 
 const { t } = i18n;
 
@@ -46,9 +47,9 @@ library.add(
   faUserSecret,
 );
 
-export type ActivityManageFrameProps = PropsWithChildren<
-  PlatformAdminFrameProps & { name: string }
->;
+export interface ActivityManageFrameProps extends PlatformAdminFrameProps {
+  name: string;
+}
 
 @observer
 export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps> {
@@ -125,10 +126,11 @@ export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps>
 
   render() {
     const { authorized, currentRoute } = this,
-      { children, name, title } = this.props;
+      { children, name, title, ...props } = this.props;
 
     return (
-      <div
+      <ServerSessionBox
+        {...props}
         className="d-flex justify-content-center align-items-center"
         style={{ height: 'calc(100vh - 3.5rem)' }}
       >
@@ -146,7 +148,7 @@ export class ActivityManageFrame extends PureComponent<ActivityManageFrameProps>
         ) : (
           <div className="display-3">{t('no_permission')}</div>
         )}
-      </div>
+      </ServerSessionBox>
     );
   }
 }
diff --git a/components/Activity/QuestionnairePreview.tsx b/components/Activity/QuestionnairePreview.tsx
@@ -1,5 +1,4 @@
 import { observer } from 'mobx-react';
-import Link from 'next/link';
 import { PureComponent } from 'react';
 import { Container, Form, Row } from 'react-bootstrap';
 
@@ -49,10 +48,14 @@ export class QuestionnaireForm extends PureComponent<QuestionnaireFormProps> {
         <legend className="text-center">{t('questionnaire')}</legend>
         <small className="text-muted mt-2">
           {t('please_complete_all_mandatory_fields_before_you_proceed')}
-
-          <Link href="https://ophapiv2-demo.authing.cn/u" passHref>
-            <a className="text-primary ms-2">{t('personal_profile')}</a>
-          </Link>
+          <a
+            className="text-primary ms-2"
+            target="_blank"
+            href="https://ophapiv2-demo.authing.cn/u"
+            rel="noreferrer"
+          >
+            {t('personal_profile')}
+          </a>
         </small>
         <ol className="my-3 px-3">{fields.map(this.renderField)}</ol>
       </Container>

diff --git a/components/PlatformAdmin/PlatformAdminFrame.tsx b/components/PlatformAdmin/PlatformAdminFrame.tsx
@@ -14,19 +14,21 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Loading } from 'idea-react';
-import { makeObservable, observable, reaction } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Fragment, PureComponent } from 'react';
 import { Container, Nav } from 'react-bootstrap';
 
 import { adminMenus } from '../../configuration/menu';
 import { i18n } from '../../models/Base/Translation';
 import platformAdminStore from '../../models/User/PlatformAdmin';
-import sessionStore from '../../models/User/Session';
 import { findDeep } from '../../utils/data';
 import { MainBreadcrumb } from '../layout/MainBreadcrumb';
-import PageHead from '../layout/PageHead';
-import { SessionBox } from '../User/SessionBox';
+import { PageHead } from '../layout/PageHead';
+import {
+  ServerSessionBox,
+  ServerSessionBoxProps,
+} from '../User/ServerSessionBox';
 
 const { t } = i18n;
 
@@ -44,7 +46,7 @@ library.add(
   faDesktop,
 );
 
-export interface PlatformAdminFrameProps {
+export interface PlatformAdminFrameProps extends ServerSessionBoxProps {
   title: string;
   path?: string;
 }
@@ -59,21 +61,12 @@ export class PlatformAdminFrame extends PureComponent<PlatformAdminFrameProps> {
   @observable
   loading = false;
 
-  sessionDisposer = reaction(
-    () => sessionStore.user,
-    user => user && this.componentDidMount(),
-  );
-
   async componentDidMount() {
     this.loading = true;
     await platformAdminStore.checkAuthorization();
     this.loading = false;
   }
 
-  componentWillUnmount() {
-    this.sessionDisposer();
-  }
-
   get currentRoute() {
     const { path = '' } = this.props;
 
@@ -123,16 +116,17 @@ export class PlatformAdminFrame extends PureComponent<PlatformAdminFrameProps> {
 
   render() {
     const { currentRoute, loading } = this,
-      { children, title } = this.props,
+      { children, title, ...props } = this.props,
       { isPlatformAdmin } = platformAdminStore;
 
     return (
-      <SessionBox
-        auto
+      <ServerSessionBox
+        {...props}
         className="d-flex justify-content-center align-items-center"
         style={{ height: 'calc(100vh - 3.5rem)' }}
       >
         <PageHead title={`${title} - ${t('platform_management')}`} />
+
         {loading ? (
           <Loading />
         ) : isPlatformAdmin ? (
@@ -147,7 +141,7 @@ export class PlatformAdminFrame extends PureComponent<PlatformAdminFrameProps> {
         ) : (
           <div className="display-3">{t('no_permission')}</div>
         )}
-      </SessionBox>
+      </ServerSessionBox>
     );
   }
 }
diff --git a/components/Team/TeamManageFrame.tsx b/components/Team/TeamManageFrame.tsx
@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Loading } from 'idea-react';
 import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import Link from 'next/link';
+import { JWTProps, RouteProps } from 'next-ssr-middleware';
 import { Fragment, PureComponent } from 'react';
 import { Col, Nav } from 'react-bootstrap';
 
@@ -22,14 +22,16 @@ import sessionStore from '../../models/User/Session';
 import { findDeep } from '../../utils/data';
 import { ActivityManageFrameProps } from '../Activity/ActivityManageFrame';
 import { MainBreadcrumb } from '../layout/MainBreadcrumb';
-import PageHead from '../layout/PageHead';
-import { SessionBox } from '../User/SessionBox';
+import { PageHead } from '../layout/PageHead';
+import { ServerSessionBox } from '../User/ServerSessionBox';
 
 const { t } = i18n;
 
 library.add(faTrophy, faUser, faUserSecret, faCloud);
 
-export type TeamManageBaseRouterProps = Record<'path' | 'name' | 'tid', string>;
+export type TeamManageBaseParams = Record<'name' | 'tid', string>;
+
+export type TeamManageBaseProps = RouteProps<TeamManageBaseParams> & JWTProps;
 
 export interface TeamManageFrameProps extends ActivityManageFrameProps {
   tid: string;
@@ -87,19 +89,16 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
                 (teamMemberRole === 'admin' ||
                   (teamMemberRole &&
                     roles?.includes(teamMemberRole as Staff['type']))) && (
-                  <Link
+                  <Nav.Link
                     key={title}
                     href={`/activity/${name}/team/${tid}/manage/${href}`}
-                    passHref
                   >
-                    <Nav.Link>
-                      <FontAwesomeIcon
-                        icon={icon}
-                        className="text-primary ms-3 me-3"
-                      />
-                      <span className="d-md-none d-lg-inline">{title}</span>
-                    </Nav.Link>
-                  </Link>
+                    <FontAwesomeIcon
+                      icon={icon}
+                      className="text-primary ms-3 me-3"
+                    />
+                    <span className="d-md-none d-lg-inline">{title}</span>
+                  </Nav.Link>
                 ),
             )}
           </Fragment>
@@ -131,13 +130,11 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
 
   render() {
     const { authorized, currentRoute, isLoading } = this,
-      { children, name, title, tid } = this.props;
+      { children, name, title, tid, ...props } = this.props;
 
-    return isLoading ? (
-      <Loading />
-    ) : (
-      <SessionBox
-        auto
+    return (
+      <ServerSessionBox
+        {...props}
         className={
           authorized
             ? 'row row-cols-xs-1 row-cols-md-2'
@@ -146,7 +143,9 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
       >
         <PageHead title={`${title} - ${tid} - ${name} ${t('team_manage')}`} />
 
-        {authorized ? (
+        {isLoading ? (
+          <Loading />
+        ) : authorized ? (
           <>
             <Col md="auto">{this.renderNav()}</Col>
 
@@ -158,7 +157,7 @@ export class TeamManageFrame extends PureComponent<TeamManageFrameProps> {
         ) : (
           <div className="display-3">{t('no_permission')}</div>
         )}
-      </SessionBox>
+      </ServerSessionBox>
     );
   }
 }
diff --git a/components/Team/WorkEdit.tsx → components/Team/WorkEditor.tsx b/components/Team/WorkEdit.tsx → components/Team/WorkEditor.tsx
@@ -12,15 +12,11 @@ import { i18n } from '../../models/Base/Translation';
 
 const { t } = i18n;
 
-export interface WorkEditProps {
-  name: string;
-  tid: string;
-  wid?: string;
-}
+export type WorkEditorProps = Record<'name' | 'tid', string> & { wid?: string };
 
 @observer
-export class WorkEdit extends PureComponent<WorkEditProps> {
-  constructor(props: WorkEditProps) {
+export class WorkEditor extends PureComponent<WorkEditorProps> {
+  constructor(props: WorkEditorProps) {
     super(props);
     makeObservable(this);
   }

diff --git a/components/User/ServerSessionBox.tsx b/components/User/ServerSessionBox.tsx
@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic';
+import { JWTProps } from 'next-ssr-middleware';
+import { FC, HTMLAttributes } from 'react';
+
+const AuthingGuard = dynamic(() => import('./AuthingGuard'), { ssr: false });
+
+export type ServerSessionBoxProps = HTMLAttributes<HTMLDivElement> & JWTProps;
+
+export const ServerSessionBox: FC<ServerSessionBoxProps> = ({
+  jwtPayload,
+  children,
+  ...props
+}) => <div {...props}>{jwtPayload ? children : <AuthingGuard />}</div>;
diff --git a/components/layout/PageHead.tsx b/components/layout/PageHead.tsx
@@ -1,15 +1,15 @@
 import Head from 'next/head';
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
-export interface PageHeadProps {
+export type PageHeadProps = PropsWithChildren<{
   title?: string;
   description?: string;
-}
+}>;
 
 const Name = process.env.NEXT_PUBLIC_SITE_NAME,
   Summary = process.env.NEXT_PUBLIC_SITE_SUMMARY;
 
-const PageHead: FC<PageHeadProps> = ({
+export const PageHead: FC<PageHeadProps> = ({
   title,
   description = Summary,
   children,
@@ -26,5 +26,3 @@ const PageHead: FC<PageHeadProps> = ({
     {children}
   </Head>
 );
-
-export default PageHead;
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "mobx-restful": "^0.6.12",
     "mobx-restful-table": "^1.2.2",
     "next": "^14.0.1",
-    "next-ssr-middleware": "^0.6.0",
+    "next-ssr-middleware": "^0.6.1",
     "open-react-map": "^0.7.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
@@ -70,6 +70,7 @@
   },
   "scripts": {
     "prepare": "husky install",
+    "install": "get-git-folder https://github.com/kaiyuanshe/service-configuration main OpenHackathon-Web  ||  true",
     "dev": "next dev",
     "build": "rm -rf .next  &&  next build",
     "export": "npm run build  &&  next export",