update playlist sidebar

celluloid-camp · Sep 26, 2023 · a6d5293 · a6d5293
1 parent 38fa57d
commit a6d5293
Show file tree

Hide file tree

Showing 22 changed files with 475 additions and 498 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -17,5 +17,7 @@ nodeLinker: node-modules
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
 
 yarnPath: .yarn/releases/yarn-3.4.1.cjs
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
   },
   "scripts": {
     "watch": "yarn workspaces foreach -p -i run watch",
-    "dev": "yarn watch & yarn workspaces foreach -p -i --exclude @celluloid/admin run dev ",
+    "dev": "yarn watch & yarn workspaces foreach -p -i run dev ",
     "clean": "for package in $(ls packages); do (cd packages/${package} && yarn clean); done",
     "build": "yarn workspaces foreach -pt run build",
     "i18n:sync": "yarn workspace translations sync",

diff --git a/packages/admin/package.json b/packages/admin/package.json
@@ -11,19 +11,17 @@
     "node": ">=16"
   },
   "scripts": {
-    "dev": "dotenv -e .env -- nodemon -e ts,json --exec node --loader ts-node/esm src/index.ts",
-    "dev-tsup": "tsup src/index.ts --watch --onSuccess 'node dist/index.js'",
-    "test": "echo $TEST",
+    "dev": "tsx watch --clear-screen=false src ",
     "build": "rm -rf dist && tsc",
     "start": "DATABASE_URL=$DATABASE_URL node --use-strict dist/index.js"
   },
   "dependencies": {
     "@adminjs/express": "6.0.0",
     "@adminjs/import-export": "^3.0.0",
-    "@adminjs/prisma": "4.0.0",
-    "@adminjs/themes": "^1.0.0",
+    "@adminjs/prisma": "5.0.1",
+    "@adminjs/themes": "^1.0.1",
     "@celluloid/database": "*",
-    "adminjs": "7.0.0",
+    "adminjs": "7.2.2",
     "connect-redis": "^7.0.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
@@ -39,11 +37,8 @@
     "copyfiles": "^2.4.1",
     "del-cli": "^5.0.0",
     "dotenv-cli": "^7.2.1",
-    "nodemon": "^2.0.22",
     "np": "^7.7.0",
-    "ts-node-dev": "^2.0.0",
-    "tsup": "^5.11.13",
-    "tsx": "^3.7.1",
+    "tsx": "^3.12.10",
     "typescript": "^5.0.4"
   },
   "files": [

diff --git a/packages/admin/src/index.ts b/packages/admin/src/index.ts
@@ -36,9 +36,9 @@ const start = async () => {
 
   app.use("/admin", express.static(path.join(__dirname, "../public")));
 
-  app.listen(3000, () => {
+  app.listen(4000, () => {
     console.log(
-      `AdminJS started on localhost:3000`
+      `AdminJS started on localhost:4000`
     );
   });
 };

diff --git a/packages/admin/src/server.ts b/packages/admin/src/server.ts
@@ -1,12 +1,13 @@
 import AdminJSExpress from "@adminjs/express";
 import importExportFeature from "@adminjs/import-export";
-import * as AdminJSPrisma from "@adminjs/prisma";
+import { Database, getModelByName, Resource } from '@adminjs/prisma';
 import { dark, light, noSidebar } from '@adminjs/themes'
-import { DMMFClass, prisma } from "@celluloid/database";
+import PrismaModule from '@celluloid/database/client-prisma/index.js';
 import AdminJS, { AdminJSOptions, DEFAULT_PATHS, ThemeConfig } from "adminjs";
 
 import { componentLoader, Components } from './components.js'
 
+const prisma = new PrismaModule.PrismaClient();
 
 export const overrides: ThemeConfig['overrides'] = {
   colors: {
@@ -46,12 +47,11 @@ const getAdminRouter = (options: Partial<AdminJSOptions> = {}) => {
 
 
   AdminJS.registerAdapter({
-    Resource: AdminJSPrisma.Resource,
-    Database: AdminJSPrisma.Database,
+    Resource: Resource,
+    Database: Database,
   });
 
 
-  const dmmf = (prisma as any)._baseDmmf as DMMFClass;
   const adminOptions = {
     branding: {
       companyName: 'Celluloid',
@@ -70,7 +70,7 @@ const getAdminRouter = (options: Partial<AdminJSOptions> = {}) => {
     componentLoader,
     resources: [
       {
-        resource: { model: dmmf.modelMap.User, client: prisma },
+        resource: { model: getModelByName('User', PrismaModule), client: prisma },
         options: {
           navigation: {
             name: 'Users',
@@ -88,14 +88,14 @@ const getAdminRouter = (options: Partial<AdminJSOptions> = {}) => {
         }
       },
       {
-        resource: { model: dmmf.modelMap.Project, client: prisma },
+        resource: { model: getModelByName('Project', PrismaModule), client: prisma },
         options: {
           navigation: {
             name: 'Projects',
             icon: 'Play',
           },
-          listProperties: ['title', 'description', 'public', 'shared', 'publishedAt', 'User'],
-          filterProperties: ['title', 'description', 'User'],
+          listProperties: ['title', 'description', 'public', 'shared', 'publishedAt', 'user'],
+          filterProperties: ['title', 'description', 'user'],
           editProperties: ['title', 'description', 'public', 'shared'],
           actions: {
             new: {
@@ -114,11 +114,37 @@ const getAdminRouter = (options: Partial<AdminJSOptions> = {}) => {
         },
       },
       {
-        resource: { model: dmmf.modelMap.Annotation, client: prisma },
+        resource: { model: getModelByName('Playlist', PrismaModule), client: prisma },
+        options: {
+          navigation: {
+            name: 'Playlists',
+            icon: 'Play',
+          },
+          listProperties: ['title', 'description', 'user'],
+          filterProperties: ['title', 'description', 'user'],
+          editProperties: ['title', 'description'],
+          actions: {
+            new: {
+              isAccessible: false,
+              isVisible: false,
+            },
+          },
+          properties: {
+            description: {
+              type: 'textarea',
+              props: {
+                rows: 10,
+              },
+            },
+          },
+        },
+      },
+      {
+        resource: { model: getModelByName('Annotation', PrismaModule), client: prisma },
         options: {
           navigation: "Projects",
-          listProperties: ['Project', 'text', 'createdAt', 'User'],
-          filterProperties: ['Project', 'User'],
+          listProperties: ['project', 'text', 'createdAt', 'user'],
+          filterProperties: ['project', 'user'],
           editProperties: ['text', "pause"],
           actions: {
             new: {
@@ -142,11 +168,11 @@ const getAdminRouter = (options: Partial<AdminJSOptions> = {}) => {
         ],
       },
       {
-        resource: { model: dmmf.modelMap.Comment, client: prisma },
+        resource: { model: getModelByName('Comment', PrismaModule), client: prisma },
         options: {
           navigation: "Projects",
-          listProperties: ['Annotation', 'text', 'createdAt', 'User'],
-          filterProperties: ['User', 'Annotation'],
+          listProperties: ['annotation', 'text', 'createdAt', 'user'],
+          filterProperties: ['user', 'annotation'],
           editProperties: ['text'],
           actions: {
             new: {

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -23,9 +23,9 @@
     "@mui/styles": "^5.12.0",
     "@reduxjs/toolkit": "^1.8.6",
     "@tanstack/react-query": "^4.35.3",
-    "@trpc/client": "^10.38.3",
-    "@trpc/react-query": "^10.38.3",
-    "@trpc/server": "^10.38.3",
+    "@trpc/client": "^10.38.4",
+    "@trpc/react-query": "^10.38.4",
+    "@trpc/server": "^10.38.4",
     "@types/linkify-urls": "^3.1.1",
     "autosuggest-highlight": "^3.1.1",
     "axios": "^1.3.4",

diff --git a/packages/client/src/components/AppBarMenu.tsx b/packages/client/src/components/AppBarMenu.tsx
@@ -31,7 +31,6 @@ type Props = React.PropsWithChildren & {
   onClickLogin(): EmptyAction;
   onClickSignup(): EmptyAction;
   onCloseSignin(): EmptyAction;
-  onClickLogout(): Promise<AnyAction>;
 };
 
 const mapStateToProps = (state: AppState) => {
@@ -53,14 +52,16 @@ export const AppBarMenuWrapper: React.FC<Props> = ({
   user,
   onClickLogin,
   onClickSignup,
-  onClickLogout,
   onCloseSignin,
   signinDialog,
   children,
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const meQuery = trpc.user.me.useQuery();
+
+  const logoutMutation = trpc.user.logout.useMutation();
+
   const dispatch = useDispatch();
 
   const handleCreate = () => {
@@ -75,6 +76,10 @@ export const AppBarMenuWrapper: React.FC<Props> = ({
     dispatch(openStudentSignup());
   };
 
+  const handleLogout = async () => {
+    await logoutMutation.mutateAsync();
+    navigate("/");
+  };
   return (
     <Box sx={{ height: "100vh" }}>
       <AppBar color="default" position="fixed">
@@ -116,15 +121,15 @@ export const AppBarMenuWrapper: React.FC<Props> = ({
             user={user}
             onClickLogin={onClickLogin}
             onClickSignup={onClickSignup}
-            onClickLogout={onClickLogout}
+            onClickLogout={handleLogout}
           />
           <LanguageMenu />
         </Toolbar>
       </AppBar>
       <SigninDialog onCancel={onCloseSignin} state={signinDialog} />
       <Offset />
       {children}
-      <Footer />
+      {/* <Footer /> */}
     </Box>
   );
 };

diff --git a/packages/client/src/components/Footer.tsx b/packages/client/src/components/Footer.tsx
@@ -19,75 +19,75 @@ import { LogoSign } from "./LogoSign";
 type FooterProps = BoxProps;
 
 export const Footer: React.FC<FooterProps> = (props) => (
-  <footer>
-    <Box sx={{ backgroundColor: "primary.main" }} {...props}>
-      <Container sx={{ padding: { xs: 5, lg: 10 } }} maxWidth="lg">
-        <Grid container spacing={4}>
-          <Grid item xs={12} sm={6}>
-            <Stack>
-              <Link href="/terms-and-conditions" color="white">
-                <Trans i18nKey={"footer.termsAndConditions"} />
-              </Link>
-              <Link href="/legal-notice" color="white">
-                <Trans i18nKey={"footer.legalNotice"} />
-              </Link>
-              <Stack direction={"row"} marginTop={2} spacing={1}>
-                <Box width={34}>
-                  <a
-                    href="https://github.com/celluloid-camp"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <GithubLogo />
-                  </a>
-                </Box>
-                <Box width={29}>
-                  <a
-                    href="https://canevas.hypotheses.org/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <OpenEditionLogo />
-                  </a>
-                </Box>
-                <Box width={34}>
-                  <a
-                    href="https://huma-num.fr/"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <HumaNumLogo />
-                  </a>
-                </Box>
-              </Stack>
-            </Stack>
-          </Grid>
-          <Grid item xs={12} sm={6}>
-            <Box
-              sx={{
-                flexDirection: "column",
-                alignItems: { lg: "flex-end", sm: "center" },
-                display: "flex",
-              }}
-            >
-              <Box sx={{ width: 100 }}>
-                <LogoSign />
+  <Box
+    sx={{
+      backgroundColor: "primary.main",
+    }}
+    component={"footer"}
+    {...props}
+  >
+    <Container sx={{ padding: { xs: 5, lg: 10 } }} maxWidth="lg">
+      <Grid container spacing={4}>
+        <Grid item xs={12} sm={6}>
+          <Stack>
+            <Link href="/terms-and-conditions" color="white">
+              <Trans i18nKey={"footer.termsAndConditions"} />
+            </Link>
+            <Link href="/legal-notice" color="white">
+              <Trans i18nKey={"footer.legalNotice"} />
+            </Link>
+            <Stack direction={"row"} marginTop={2} spacing={1}>
+              <Box width={34}>
+                <a
+                  href="https://github.com/celluloid-camp"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <GithubLogo />
+                </a>
+              </Box>
+              <Box width={29}>
+                <a
+                  href="https://canevas.hypotheses.org/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <OpenEditionLogo />
+                </a>
+              </Box>
+              <Box width={34}>
+                <a href="https://huma-num.fr/" target="_blank" rel="noreferrer">
+                  <HumaNumLogo />
+                </a>
               </Box>
-              <Typography
-                variant="subtitle1"
-                gutterBottom={true}
-                color="white"
-                textAlign={{ lg: "left", sm: "center" }}
-              >
-                <Trans
-                  i18nKey={"footer.copyright"}
-                  defaults="© 2018 Institut Catholique de Paris"
-                />
-              </Typography>
+            </Stack>
+          </Stack>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Box
+            sx={{
+              flexDirection: "column",
+              alignItems: { lg: "flex-end", sm: "center" },
+              display: "flex",
+            }}
+          >
+            <Box sx={{ width: 100 }}>
+              <LogoSign />
             </Box>
-          </Grid>
+            <Typography
+              variant="subtitle1"
+              gutterBottom={true}
+              color="white"
+              textAlign={{ lg: "left", sm: "center" }}
+            >
+              <Trans
+                i18nKey={"footer.copyright"}
+                defaults="© 2018 Institut Catholique de Paris"
+              />
+            </Typography>
+          </Box>
         </Grid>
-      </Container>
-    </Box>
-  </footer>
+      </Grid>
+    </Container>
+  </Box>
 );