From dccc508be416fba6cc7321a5b25efd9264cbb077 Mon Sep 17 00:00:00 2001 From: TechQuery Date: Tue, 7 Nov 2023 04:23:58 +0800 Subject: [PATCH] [add] Server Session Box component --- README.md | 5 +- components/Activity/ActivityCard.tsx | 5 +- components/Activity/ActivityManageFrame.tsx | 18 +++--- components/Activity/QuestionnairePreview.tsx | 13 +++-- .../PlatformAdmin/PlatformAdminFrame.tsx | 30 ++++------ components/Team/TeamManageFrame.tsx | 43 +++++++------- .../Team/{WorkEdit.tsx => WorkEditor.tsx} | 10 +--- components/User/ServerSessionBox.tsx | 13 +++++ components/layout/PageHead.tsx | 10 ++-- package.json | 3 +- pages/activity/[name]/index.tsx | 14 ++--- .../activity/[name]/manage/administrator.tsx | 14 +++-- pages/activity/[name]/manage/award.tsx | 24 +++++--- pages/activity/[name]/manage/edit.tsx | 29 ++++------ pages/activity/[name]/manage/evaluation.tsx | 22 +++++--- pages/activity/[name]/manage/git.tsx | 13 ++++- pages/activity/[name]/manage/log.tsx | 24 +++++--- pages/activity/[name]/manage/message.tsx | 13 ++++- pages/activity/[name]/manage/organization.tsx | 13 ++++- .../[name]/manage/participant/index.tsx | 19 +++++-- .../[name]/manage/participant/statistic.tsx | 20 ++++--- .../activity/[name]/manage/questionnaire.tsx | 13 ++++- pages/activity/[name]/manage/team.tsx | 20 ++++--- pages/activity/[name]/register.tsx | 56 +++++++++++-------- pages/activity/[name]/team/[tid]/index.tsx | 2 +- .../activity/[name]/team/[tid]/manage/git.tsx | 31 ++++++---- .../[name]/team/[tid]/manage/participant.tsx | 21 +++---- .../[name]/team/[tid]/manage/role.tsx | 21 +++---- .../[name]/team/[tid]/work/[wid]/edit.tsx | 39 ++++++++----- .../[name]/team/[tid]/work/create.tsx | 31 +++++----- pages/activity/create.tsx | 23 ++++---- pages/activity/index.tsx | 2 +- pages/admin/index.tsx | 8 ++- pages/admin/platform-admin.tsx | 21 ++++--- pages/index.tsx | 2 +- pages/user/[id].tsx | 2 +- pnpm-lock.yaml | 8 +-- 37 files changed, 378 insertions(+), 277 deletions(-) rename components/Team/{WorkEdit.tsx => WorkEditor.tsx} (96%) create mode 100644 components/User/ServerSessionBox.tsx diff --git a/README.md b/README.md index b01d7adf..6b9fb20b 100644 --- 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 index 16f298e9..47c56e6a 100644 --- 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({ - {displayName} + {displayName} ; +export interface ActivityManageFrameProps extends PlatformAdminFrameProps { + name: string; +} @observer export class ActivityManageFrame extends PureComponent { @@ -125,10 +126,11 @@ export class ActivityManageFrame extends PureComponent render() { const { authorized, currentRoute } = this, - { children, name, title } = this.props; + { children, name, title, ...props } = this.props; return ( -
@@ -146,7 +148,7 @@ export class ActivityManageFrame extends PureComponent ) : (
{t('no_permission')}
)} -
+ ); } } diff --git a/components/Activity/QuestionnairePreview.tsx b/components/Activity/QuestionnairePreview.tsx index 03744208..e97432cb 100644 --- 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 { {t('questionnaire')} {t('please_complete_all_mandatory_fields_before_you_proceed')} - - - {t('personal_profile')} - + + {t('personal_profile')} +
    {fields.map(this.renderField)}
diff --git a/components/PlatformAdmin/PlatformAdminFrame.tsx b/components/PlatformAdmin/PlatformAdminFrame.tsx index 2dbf6d65..4fd0c665 100644 --- a/components/PlatformAdmin/PlatformAdminFrame.tsx +++ b/components/PlatformAdmin/PlatformAdminFrame.tsx @@ -14,7 +14,7 @@ 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'; @@ -22,11 +22,13 @@ 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 { @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 { render() { const { currentRoute, loading } = this, - { children, title } = this.props, + { children, title, ...props } = this.props, { isPlatformAdmin } = platformAdminStore; return ( - + {loading ? ( ) : isPlatformAdmin ? ( @@ -147,7 +141,7 @@ export class PlatformAdminFrame extends PureComponent { ) : (
{t('no_permission')}
)} - + ); } } diff --git a/components/Team/TeamManageFrame.tsx b/components/Team/TeamManageFrame.tsx index b9d5a2d4..18a80525 100644 --- 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 & JWTProps; export interface TeamManageFrameProps extends ActivityManageFrameProps { tid: string; @@ -87,19 +89,16 @@ export class TeamManageFrame extends PureComponent { (teamMemberRole === 'admin' || (teamMemberRole && roles?.includes(teamMemberRole as Staff['type']))) && ( - - - - {title} - - + + {title} + ), )} @@ -131,13 +130,11 @@ export class TeamManageFrame extends PureComponent { render() { const { authorized, currentRoute, isLoading } = this, - { children, name, title, tid } = this.props; + { children, name, title, tid, ...props } = this.props; - return isLoading ? ( - - ) : ( - { > - {authorized ? ( + {isLoading ? ( + + ) : authorized ? ( <> {this.renderNav()} @@ -158,7 +157,7 @@ export class TeamManageFrame extends PureComponent { ) : (
{t('no_permission')}
)} - + ); } } diff --git a/components/Team/WorkEdit.tsx b/components/Team/WorkEditor.tsx similarity index 96% rename from components/Team/WorkEdit.tsx rename to components/Team/WorkEditor.tsx index ab6c4594..c4788ff0 100644 --- a/components/Team/WorkEdit.tsx +++ b/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 { - constructor(props: WorkEditProps) { +export class WorkEditor extends PureComponent { + constructor(props: WorkEditorProps) { super(props); makeObservable(this); } diff --git a/components/User/ServerSessionBox.tsx b/components/User/ServerSessionBox.tsx new file mode 100644 index 00000000..6813c3d0 --- /dev/null +++ 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 & JWTProps; + +export const ServerSessionBox: FC = ({ + jwtPayload, + children, + ...props +}) =>
{jwtPayload ? children : }
; diff --git a/components/layout/PageHead.tsx b/components/layout/PageHead.tsx index dd0955ac..f25f8edb 100644 --- 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 = ({ +export const PageHead: FC = ({ title, description = Summary, children, @@ -26,5 +26,3 @@ const PageHead: FC = ({ {children} ); - -export default PageHead; diff --git a/package.json b/package.json index c156afa8..24572653 100644 --- 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", diff --git a/pages/activity/[name]/index.tsx b/pages/activity/[name]/index.tsx index bf28b9d7..55a775b9 100644 --- a/pages/activity/[name]/index.tsx +++ b/pages/activity/[name]/index.tsx @@ -27,7 +27,7 @@ import { import { getActivityStatusText } from '../../../components/Activity/ActivityEntry'; import { CommentBox } from '../../../components/CommentBox'; -import PageHead from '../../../components/layout/PageHead'; +import { PageHead } from '../../../components/layout/PageHead'; import { MessageList } from '../../../components/Message/MessageList'; import { OrganizationListLayout } from '../../../components/Organization/OrganizationList'; import { TeamCard } from '../../../components/Team/TeamCard'; @@ -354,13 +354,11 @@ export default class ActivityPage extends PureComponent { <>

{t('competition_location')}

- {!isServer() && ( -
- - {t('no_address_navigation')} - -
- )} +
+ + {t('no_address_navigation')} + +
)} diff --git a/pages/activity/[name]/manage/administrator.tsx b/pages/activity/[name]/manage/administrator.tsx index 1466da46..c0cbe034 100644 --- a/pages/activity/[name]/manage/administrator.tsx +++ b/pages/activity/[name]/manage/administrator.tsx @@ -3,8 +3,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import { ScrollList } from 'mobx-restful-table'; -import { InferGetServerSidePropsType } from 'next'; -import { compose, RouteProps, router } from 'next-ssr-middleware'; +import { + compose, + JWTProps, + jwtVerifier, + RouteProps, + router, +} from 'next-ssr-middleware'; import { FormEvent, PureComponent } from 'react'; import { Badge, Button, Col, Form, ListGroup, Row } from 'react-bootstrap'; @@ -14,12 +19,12 @@ import { HackathonAdminList } from '../../../../components/User/HackathonAdminLi import activityStore from '../../../../models/Activity'; import { i18n } from '../../../../models/Base/Translation'; -type AdministratorPageProps = RouteProps<{ name: string }>; +type AdministratorPageProps = RouteProps<{ name: string }> & JWTProps; export const getServerSideProps = compose< { name: string }, AdministratorPageProps ->(router); +>(router, jwtVerifier()); const { t } = i18n; @@ -86,6 +91,7 @@ export default class AdministratorPage extends PureComponent ->(router); +type AwardPageProps = RouteProps<{ name: string }> & JWTProps; + +export const getServerSideProps = compose<{ name: string }, AwardPageProps>( + router, + jwtVerifier(), +); const { t } = i18n; @observer -export default class AwardPage extends PureComponent< - InferGetServerSidePropsType -> { +export default class AwardPage extends PureComponent { store = activityStore.awardOf(this.props.route.params!.name); handleSubmit = async (event: FormEvent) => { @@ -144,6 +149,7 @@ export default class AwardPage extends PureComponent< return ( import('../../../../components/User/AuthingGuard'), - { ssr: false }, - ), - { t } = i18n; +const { t } = i18n; type ActivityEditPageProps = RouteProps<{ name: string }> & JWTProps; @@ -28,17 +23,15 @@ export const getServerSideProps = compose< const ActivityEditPage: FC = ({ jwtPayload, route: { resolvedUrl, params }, -}) => - jwtPayload ? ( - - - - ) : ( - - ); +}) => ( + + + +); export default ActivityEditPage; diff --git a/pages/activity/[name]/manage/evaluation.tsx b/pages/activity/[name]/manage/evaluation.tsx index 2e38f5fe..0ac55031 100644 --- a/pages/activity/[name]/manage/evaluation.tsx +++ b/pages/activity/[name]/manage/evaluation.tsx @@ -1,7 +1,12 @@ import { observer } from 'mobx-react'; import { NewData } from 'mobx-restful'; -import { InferGetServerSidePropsType } from 'next'; -import { compose, RouteProps, router } from 'next-ssr-middleware'; +import { + compose, + JWTProps, + jwtVerifier, + RouteProps, + router, +} from 'next-ssr-middleware'; import { FormEvent, PureComponent } from 'react'; import { Button, Col, Form, InputGroup, Row } from 'react-bootstrap'; import { formToJSON } from 'web-utility'; @@ -14,15 +19,15 @@ import { i18n } from '../../../../models/Base/Translation'; const { t } = i18n; +type EvaluationPageProps = RouteProps<{ name: string }> & JWTProps; + export const getServerSideProps = compose< { name: string }, - RouteProps<{ name: string }> ->(router); + EvaluationPageProps +>(router, jwtVerifier()); @observer -class EvaluationPage extends PureComponent< - InferGetServerSidePropsType -> { +export default class EvaluationPage extends PureComponent { store = activityStore.teamOf(this.props.route.params!.name); awardStore = activityStore.awardOf(this.props.route.params!.name); @@ -115,6 +120,7 @@ class EvaluationPage extends PureComponent< return ( ; +type ActivityManageGitPageProps = RouteProps<{ name: string }> & JWTProps; export const getServerSideProps = compose< { name: string }, ActivityManageGitPageProps ->(router); +>(router, jwtVerifier()); @observer export default class ActivityManageGitPage extends PureComponent { @@ -55,6 +61,7 @@ export default class ActivityManageGitPage extends PureComponent ->(router); +type LogPageProps = RouteProps<{ name: string }> & JWTProps; + +export const getServerSideProps = compose<{ name: string }, LogPageProps>( + router, + jwtVerifier(), +); const { t } = i18n; @observer -export default class LogPage extends PureComponent< - InferGetServerSidePropsType -> { +export default class LogPage extends PureComponent { store = activityStore.logOf(this.props.route.params!.name); render() { @@ -27,6 +32,7 @@ export default class LogPage extends PureComponent< return ( ; +type MessageListPageProps = RouteProps<{ name: string }> & JWTProps; export const getServerSideProps = compose< { name: string }, MessageListPageProps ->(router); +>(router, jwtVerifier()); @observer export default class MessageListPage extends PureComponent { @@ -61,6 +67,7 @@ export default class MessageListPage extends PureComponent return ( ; +type OrganizationPageProps = RouteProps<{ name: string }> & JWTProps; export const getServerSideProps = compose< { name: string }, OrganizationPageProps ->(router); +>(router, jwtVerifier()); const { t } = i18n; @@ -84,6 +90,7 @@ export default class OrganizationPage extends PureComponent; +type ParticipantPageProps = RouteProps<{ name: string }> & JWTProps; export const getServerSideProps = compose< { name: string }, ParticipantPageProps ->(router); +>(router, jwtVerifier()); const { t } = i18n; @@ -35,11 +41,12 @@ export default class ParticipantPage extends PureComponent render() { const { resolvedUrl, params } = this.props.route, { extensions } = this; - const activity = params!.name; + const { name } = params!; return ( @@ -50,7 +57,7 @@ export default class ParticipantPage extends PureComponent (this.extensions = extensions)} /> (this.extensions = undefined)}> diff --git a/pages/activity/[name]/manage/participant/statistic.tsx b/pages/activity/[name]/manage/participant/statistic.tsx index 0c2105aa..fdbc1fbd 100644 --- a/pages/activity/[name]/manage/participant/statistic.tsx +++ b/pages/activity/[name]/manage/participant/statistic.tsx @@ -1,8 +1,13 @@ import { Loading } from 'idea-react'; import { observer } from 'mobx-react'; -import { InferGetServerSidePropsType } from 'next'; import dynamic from 'next/dynamic'; -import { compose, RouteProps, router } from 'next-ssr-middleware'; +import { + compose, + JWTProps, + jwtVerifier, + RouteProps, + router, +} from 'next-ssr-middleware'; import { PureComponent } from 'react'; import { Button } from 'react-bootstrap'; @@ -17,15 +22,15 @@ const EnrollmentStatisticCharts = dynamic( { ssr: false }, ); +type EnrollmentStatisticPageProps = RouteProps<{ name: string }> & JWTProps; + export const getServerSideProps = compose< { name: string }, - RouteProps<{ name: string }> ->(router); + EnrollmentStatisticPageProps +>(router, jwtVerifier()); @observer -export default class EnrollmentStatisticPage extends PureComponent< - InferGetServerSidePropsType -> { +export default class EnrollmentStatisticPage extends PureComponent { store = activityStore.enrollmentOf(this.props.route.params!.name); render() { @@ -34,6 +39,7 @@ export default class EnrollmentStatisticPage extends PureComponent< return ( ; +type ActivityQuestionnairePageProps = RouteProps<{ name: string }> & JWTProps; export const getServerSideProps = compose< { name: string }, ActivityQuestionnairePageProps ->(router); +>(router, jwtVerifier()); @observer export default class ActivityQuestionnairePage extends PureComponent { @@ -118,6 +124,7 @@ export default class ActivityQuestionnairePage extends PureComponent & JWTProps; + export const getServerSideProps = compose< { name: string }, - RouteProps<{ name: string }> ->(router); + TeamManagePageProps +>(router, jwtVerifier()); const { t } = i18n; @observer -export default class TeamManagePage extends PureComponent< - InferGetServerSidePropsType -> { +export default class TeamManagePage extends PureComponent { store = activityStore.teamOf(this.props.route.params!.name); onSearch = (event: FormEvent) => { @@ -46,6 +51,7 @@ export default class TeamManagePage extends PureComponent< return ( (cache(), errorLogger, translator(i18n), async ({ params: { name } = {} }) => { - const activityStore = new ActivityModel(); - const { status } = await activityStore.getOne(name!), - questionnaire = await activityStore.getQuestionnaire(name!); +interface RegisterPageProps extends JWTProps { + activity: string; + questionnaire: Question[]; +} - return { - notFound: status !== 'online', - props: { activity: name!, questionnaire }, - }; -}); +export const getServerSideProps = compose<{ name: string }, RegisterPageProps>( + jwtVerifier(), + cache(), + errorLogger, + translator(i18n), + async ({ params: { name } = {} }) => { + const activityStore = new ActivityModel(); + const { status } = await activityStore.getOne(name!), + questionnaire = await activityStore.getQuestionnaire(name!); + + return { + notFound: status !== 'online', + props: { activity: name!, questionnaire }, + }; + }, +); @observer -export default class RegisterPage extends PureComponent< - InferGetServerSidePropsType -> { +export default class RegisterPage extends PureComponent { handleSubmit = async (event: FormEvent) => { event.preventDefault(); event.stopPropagation(); @@ -63,7 +75,7 @@ export default class RegisterPage extends PureComponent< { uploading } = activityStore; return ( - +
@@ -80,7 +92,7 @@ export default class RegisterPage extends PureComponent<
- + ); } } diff --git a/pages/activity/[name]/team/[tid]/index.tsx b/pages/activity/[name]/team/[tid]/index.tsx index d8fd1db0..9540b853 100644 --- a/pages/activity/[name]/team/[tid]/index.tsx +++ b/pages/activity/[name]/team/[tid]/index.tsx @@ -10,7 +10,7 @@ import { formToJSON } from 'web-utility'; import { CommentBox } from '../../../../../components/CommentBox'; import { MainBreadcrumb } from '../../../../../components/layout/MainBreadcrumb'; -import PageHead from '../../../../../components/layout/PageHead'; +import { PageHead } from '../../../../../components/layout/PageHead'; import { JoinTeamModal } from '../../../../../components/Team/JoinTeamModal'; import { TeamMemberListLayout } from '../../../../../components/Team/TeamMemberList'; import { TeamWorkList } from '../../../../../components/Team/TeamWorkList'; diff --git a/pages/activity/[name]/team/[tid]/manage/git.tsx b/pages/activity/[name]/team/[tid]/manage/git.tsx index 7fdad84c..b9c81687 100644 --- a/pages/activity/[name]/team/[tid]/manage/git.tsx +++ b/pages/activity/[name]/team/[tid]/manage/git.tsx @@ -1,7 +1,14 @@ import { makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import { ScrollList } from 'mobx-restful-table'; -import { compose, RouteProps, router, translator } from 'next-ssr-middleware'; +import { + compose, + JWTProps, + jwtVerifier, + RouteProps, + router, + translator, +} from 'next-ssr-middleware'; import { FormEvent, PureComponent } from 'react'; import { Button, @@ -18,24 +25,26 @@ import { TeamGitListLayout, TeamGitListLayoutProps, } from '../../../../../../components/Git/TeamGitList'; -import { TeamManageFrame } from '../../../../../../components/Team/TeamManageFrame'; +import { + TeamManageBaseParams, + TeamManageBaseProps, + TeamManageFrame, +} from '../../../../../../components/Team/TeamManageFrame'; import activityStore from '../../../../../../models/Activity'; import { TeamWorkType } from '../../../../../../models/Activity/Team'; import { i18n } from '../../../../../../models/Base/Translation'; import sessionStore from '../../../../../../models/User/Session'; -type GitPageProps = RouteProps>; - export const getServerSideProps = compose< - Record<'name' | 'tid', string>, - GitPageProps ->(router, translator(i18n)); + TeamManageBaseParams, + TeamManageBaseProps +>(router, jwtVerifier(), translator(i18n)); const { t } = i18n; @observer -export default class GitPage extends PureComponent { - constructor(props: GitPageProps) { +export default class GitPage extends PureComponent { + constructor(props: TeamManageBaseProps) { super(props); makeObservable(this); } @@ -169,9 +178,9 @@ export default class GitPage extends PureComponent { return ( diff --git a/pages/activity/[name]/team/[tid]/manage/participant.tsx b/pages/activity/[name]/team/[tid]/manage/participant.tsx index 2be9fe38..1529ab1a 100644 --- a/pages/activity/[name]/team/[tid]/manage/participant.tsx +++ b/pages/activity/[name]/team/[tid]/manage/participant.tsx @@ -1,11 +1,11 @@ import { observer } from 'mobx-react'; import { ScrollList } from 'mobx-restful-table'; -import { InferGetServerSidePropsType } from 'next'; -import { compose, RouteProps, router, translator } from 'next-ssr-middleware'; +import { compose, jwtVerifier, router, translator } from 'next-ssr-middleware'; import { PureComponent } from 'react'; import { - TeamManageBaseRouterProps, + TeamManageBaseParams, + TeamManageBaseProps, TeamManageFrame, } from '../../../../../../components/Team/TeamManageFrame'; import { TeamParticipantTableLayout } from '../../../../../../components/Team/TeamParticipantTable'; @@ -13,16 +13,14 @@ import activityStore from '../../../../../../models/Activity'; import { i18n } from '../../../../../../models/Base/Translation'; export const getServerSideProps = compose< - TeamManageBaseRouterProps, - RouteProps ->(router, translator(i18n)); + TeamManageBaseParams, + TeamManageBaseProps +>(router, jwtVerifier(), translator(i18n)); const { t } = i18n; @observer -export default class TeamParticipantPage extends PureComponent< - InferGetServerSidePropsType -> { +export default class TeamParticipantPage extends PureComponent { store = activityStore .teamOf(this.props.route.params!.name) .memberOf(this.props.route.params!.tid); @@ -30,12 +28,11 @@ export default class TeamParticipantPage extends PureComponent< render() { const { store } = this; const { resolvedUrl, params } = this.props.route; - const { name, tid } = params!; return ( diff --git a/pages/activity/[name]/team/[tid]/manage/role.tsx b/pages/activity/[name]/team/[tid]/manage/role.tsx index 121614b2..9d0028db 100644 --- a/pages/activity/[name]/team/[tid]/manage/role.tsx +++ b/pages/activity/[name]/team/[tid]/manage/role.tsx @@ -1,12 +1,12 @@ import { observer } from 'mobx-react'; import { ScrollList } from 'mobx-restful-table'; -import { InferGetServerSidePropsType } from 'next'; -import { compose, RouteProps, router, translator } from 'next-ssr-middleware'; +import { compose, jwtVerifier, router, translator } from 'next-ssr-middleware'; import { PureComponent } from 'react'; import { TeamAdministratorTableLayout } from '../../../../../../components/Team/TeamAdministratorTable'; import { - TeamManageBaseRouterProps, + TeamManageBaseParams, + TeamManageBaseProps, TeamManageFrame, } from '../../../../../../components/Team/TeamManageFrame'; import activityStore from '../../../../../../models/Activity'; @@ -14,16 +14,14 @@ import { MembershipStatus } from '../../../../../../models/Activity/Team'; import { i18n } from '../../../../../../models/Base/Translation'; export const getServerSideProps = compose< - TeamManageBaseRouterProps, - RouteProps ->(router, translator(i18n)); + TeamManageBaseParams, + TeamManageBaseProps +>(router, jwtVerifier(), translator(i18n)); const { t } = i18n; @observer -export default class TeamAdministratorPage extends PureComponent< - InferGetServerSidePropsType -> { +export default class TeamAdministratorPage extends PureComponent { store = activityStore .teamOf(this.props.route.params!.name) .memberOf(this.props.route.params!.tid); @@ -31,12 +29,11 @@ export default class TeamAdministratorPage extends PureComponent< render() { const { props, store } = this; const { resolvedUrl, params } = this.props.route; - const { name, tid } = params!; return ( diff --git a/pages/activity/[name]/team/[tid]/work/[wid]/edit.tsx b/pages/activity/[name]/team/[tid]/work/[wid]/edit.tsx index abcc84a2..8b3c6255 100644 --- a/pages/activity/[name]/team/[tid]/work/[wid]/edit.tsx +++ b/pages/activity/[name]/team/[tid]/work/[wid]/edit.tsx @@ -1,25 +1,36 @@ -import type { InferGetServerSidePropsType } from 'next'; -import { compose, RouteProps, router, translator } from 'next-ssr-middleware'; +import { + compose, + JWTProps, + jwtVerifier, + RouteProps, + router, + translator, +} from 'next-ssr-middleware'; -import PageHead from '../../../../../../../components/layout/PageHead'; -import { WorkEdit } from '../../../../../../../components/Team/WorkEdit'; +import { PageHead } from '../../../../../../../components/layout/PageHead'; +import { + WorkEditor, + WorkEditorProps, +} from '../../../../../../../components/Team/WorkEditor'; +import { ServerSessionBox } from '../../../../../../../components/User/ServerSessionBox'; import { i18n } from '../../../../../../../models/Base/Translation'; const { t } = i18n; -export const getServerSideProps = compose< - Record<'name' | 'tid' | 'wid', string>, - RouteProps> ->(router, translator(i18n)); +export type TeamWorkEditProps = RouteProps & JWTProps; -export default function WorkCreatePage({ - route: { params }, -}: InferGetServerSidePropsType) { +export const getServerSideProps = compose( + router, + jwtVerifier(), + translator(i18n), +); + +export default function WorkCreatePage(props: TeamWorkEditProps) { return ( - <> + - - + + ); } diff --git a/pages/activity/[name]/team/[tid]/work/create.tsx b/pages/activity/[name]/team/[tid]/work/create.tsx index 2781dd35..e97d674f 100644 --- a/pages/activity/[name]/team/[tid]/work/create.tsx +++ b/pages/activity/[name]/team/[tid]/work/create.tsx @@ -1,25 +1,28 @@ -import type { InferGetServerSidePropsType } from 'next'; -import { compose, RouteProps, router, translator } from 'next-ssr-middleware'; +import { compose, jwtVerifier, router, translator } from 'next-ssr-middleware'; -import PageHead from '../../../../../../components/layout/PageHead'; -import { WorkEdit } from '../../../../../../components/Team/WorkEdit'; +import { PageHead } from '../../../../../../components/layout/PageHead'; +import { + WorkEditor, + WorkEditorProps, +} from '../../../../../../components/Team/WorkEditor'; +import { ServerSessionBox } from '../../../../../../components/User/ServerSessionBox'; import { i18n } from '../../../../../../models/Base/Translation'; +import { TeamWorkEditProps } from './[wid]/edit'; -export const getServerSideProps = compose< - Record<'name' | 'tid', string>, - RouteProps> ->(router, translator(i18n)); +export const getServerSideProps = compose( + router, + jwtVerifier(), + translator(i18n), +); const { t } = i18n; -export default function WorkCreatePage({ - route: { params }, -}: InferGetServerSidePropsType) { +export default function WorkCreatePage(props: TeamWorkEditProps) { return ( - <> + - - + + ); } diff --git a/pages/activity/create.tsx b/pages/activity/create.tsx index 3a67060d..75fad584 100644 --- a/pages/activity/create.tsx +++ b/pages/activity/create.tsx @@ -1,23 +1,24 @@ import { observer } from 'mobx-react'; -import { Container } from 'react-bootstrap'; +import { compose, JWTProps, jwtVerifier } from 'next-ssr-middleware'; +import { FC } from 'react'; import { ActivityEditor } from '../../components/Activity/ActivityEditor'; -import PageHead from '../../components/layout/PageHead'; -import { SessionBox } from '../../components/User/SessionBox'; +import { PageHead } from '../../components/layout/PageHead'; +import { ServerSessionBox } from '../../components/User/ServerSessionBox'; import { i18n } from '../../models/Base/Translation'; const { t } = i18n; -const createActivity = observer(() => ( - +export const getServerSideProps = compose<{}, JWTProps>(jwtVerifier()); + +const ActivityCreatePage: FC = observer(props => ( + - -

{t('create_activity')}

+

{t('create_activity')}

- - - + + )); -export default createActivity; +export default ActivityCreatePage; diff --git a/pages/activity/index.tsx b/pages/activity/index.tsx index 9e43fc6d..fa64c560 100644 --- a/pages/activity/index.tsx +++ b/pages/activity/index.tsx @@ -4,7 +4,7 @@ import { cache, compose, errorLogger, translator } from 'next-ssr-middleware'; import { Container } from 'react-bootstrap'; import ActivityList from '../../components/Activity/ActivityList'; -import PageHead from '../../components/layout/PageHead'; +import { PageHead } from '../../components/layout/PageHead'; import { ActivityModel } from '../../models/Activity'; import { i18n } from '../../models/Base/Translation'; diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx index 3cf847cc..276dc620 100644 --- a/pages/admin/index.tsx +++ b/pages/admin/index.tsx @@ -1,4 +1,6 @@ import { observer } from 'mobx-react'; +import { compose, JWTProps, jwtVerifier } from 'next-ssr-middleware'; +import { FC } from 'react'; import ActivityList from '../../components/Activity/ActivityList'; import { PlatformAdminFrame } from '../../components/PlatformAdmin/PlatformAdminFrame'; @@ -7,8 +9,10 @@ import sessionStore from '../../models/User/Session'; const { t } = i18n; -const AdminPage = observer(() => ( - +export const getServerSideProps = compose<{}, JWTProps>(jwtVerifier()); + +const AdminPage: FC = observer(props => ( + )); diff --git a/pages/admin/platform-admin.tsx b/pages/admin/platform-admin.tsx index 13985889..5c0cccba 100644 --- a/pages/admin/platform-admin.tsx +++ b/pages/admin/platform-admin.tsx @@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import { ScrollList } from 'mobx-restful-table'; +import { compose, JWTProps, jwtVerifier } from 'next-ssr-middleware'; import { FormEvent, PureComponent } from 'react'; import { Button, Form } from 'react-bootstrap'; @@ -14,17 +15,11 @@ import { PlatformAdminModel } from '../../models/User/PlatformAdmin'; const { t } = i18n; -export default function PlatformAdminPage() { - return ( - - - - ); -} +export const getServerSideProps = compose<{}, JWTProps>(jwtVerifier()); @observer -class PlatformAdmin extends PureComponent { - constructor(props: {}) { +export default class PlatformAdminPage extends PureComponent { + constructor(props: JWTProps) { super(props); makeObservable(this); } @@ -55,7 +50,11 @@ class PlatformAdmin extends PureComponent { const loading = store.uploading > 0; return ( - <> +