Refactor Product Files - Step 2: Add Files route

source/SIL.AppBuilder.Portal.Frontend/src/ui/routes/files/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Switch } from 'react-router-dom';
+
+import { Route } from '~/lib/routing';
+
+import { NotFound } from '@ui/routes/errors';
+
+import FilesShowRoute, { pathName as filesShowPath } from './show';
+
+export default function FilesRoute() {
+  return (
+    <div className='ui container'>
+      <Switch>
+        <Route path={filesShowPath} component={FilesShowRoute} />
+
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+}

source/SIL.AppBuilder.Portal.Frontend/src/ui/routes/files/show/display.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useTranslations } from '@lib/i18n';
+
+import { useRouter } from '~/lib/hooks';
+
+export interface Params {
+  id: string;
+}
+
+export default function FilesShowDisplay() {
+  const { t } = useTranslations();
+  const { match } = useRouter();
+  const {
+    params: { id },
+  } = match;
+
+  return (
+    <div className='flex flex-column h-100 align-items-center justify-content-center'>{id}</div>
+  );
+}

source/SIL.AppBuilder.Portal.Frontend/src/ui/routes/files/show/index.tsx

@@ -0,0 +1,13 @@
+import { compose } from 'recompose';
+import { withCurrentUserContext } from '@data/containers/with-current-user';
+import { withTranslations } from '@lib/i18n';
+
+import Display from './display';
+
+export const pathName = '/files/:id';
+
+export default compose(
+  withTranslations,
+  withCurrentUserContext
+  // todo - extract this to a more general thing?
+)(Display);

source/SIL.AppBuilder.Portal.Frontend/src/ui/routes/paths.ts

@@ -12,3 +12,4 @@ export const tasksPath = '/tasks';
 export const requestOrgAccessSuccessPath = '/request-access-for-organization/success';
 export const requestOrgAccessPath = '/request-access-for-organization';
 export const downloadsPath = '/downloads';
+export const filesPath = '/files';

source/SIL.AppBuilder.Portal.Frontend/src/ui/routes/root.tsx

@@ -20,6 +20,7 @@ import UsersRoute from '@ui/routes/users';
 import OpenSourceRoute from '@ui/routes/open-source';
 import ErrorRootRoute from '@ui/routes/errors';
 import DownloadsRootRoute from '@ui/routes/downloads';
+import FilesRoute from '@ui/routes/files';
 
 import AuthenticatedLayout from '~/ui/components/layout';
 
@@ -47,6 +48,7 @@ export default function RootPage() {
               paths.organizationsPath,
               paths.directoryPath,
               paths.projectsPath,
+              paths.filesPath,
               paths.usersPath,
               '/form',
               '/flow',
@@ -87,6 +89,7 @@ function AuthenticatedRoutes() {
 
             <Route path={paths.directoryPath} component={DirectoryRoute} />
             <Route path={paths.projectsPath} component={ProjectsRoute} />
+            <Route path={paths.filesPath} component={FilesRoute} />
 
             <Route path={paths.usersPath} component={UsersRoute} />