Merge pull request #639 from amelioro/interface-redesign-followups

Interface redesign followups

.eslintrc.json

@@ -67,6 +67,8 @@
     "functional/functional-parameters": [
       "error",
       {
+        // want to allow currying with arbitrary arguments e.g. for zustand middleware
+        "allowRestParameter": true,
         "enforceParameterCount": false
       }
     ],

src/pages/[username].page.tsx

@@ -1,5 +1,5 @@
 import { AutoStories, Settings } from "@mui/icons-material";
-import { Box, Button, IconButton } from "@mui/material";
+import { Box, Button, Dialog, IconButton } from "@mui/material";
 import { type Topic } from "@prisma/client";
 import {
   type MRT_ColumnDef,
@@ -9,14 +9,15 @@ import {
 } from "material-react-table";
 import { NextPage } from "next";
 import Head from "next/head";
-import NextLink from "next/link";
 import { useRouter } from "next/router";
+import { useState } from "react";
 
 import { NotFoundError, QueryError } from "@/web/common/components/Error/Error";
 import { Link } from "@/web/common/components/Link";
 import { Loading } from "@/web/common/components/Loading/Loading";
 import { useSessionUser } from "@/web/common/hooks";
 import { trpc } from "@/web/common/trpc";
+import { CreateTopicForm, EditTopicForm } from "@/web/topic/components/TopicForm/TopicForm";
 
 type RowData = Topic;
 
@@ -35,6 +36,9 @@ const User: NextPage = () => {
     { enabled: !!username },
   );
 
+  const [editingTopicId, setEditingTopicId] = useState<number | null>(null);
+  const [creatingTopic, setCreatingTopic] = useState(false);
+
   // TODO: use suspense to better handle loading & error
   if (!router.isReady || !username || findUser.isLoading || sessionUserIsLoading)
     return <Loading />;
@@ -113,14 +117,22 @@ const User: NextPage = () => {
         layoutMode="grid"
         enableRowActions={hasEditAccess}
         renderRowActions={({ row }) => (
-          <IconButton
-            onClick={(e) => {
-              e.stopPropagation(); // prevent row click
-              void router.push(`/${foundUser.username}/${row.original.title}/settings`);
-            }}
-          >
-            <Settings />
-          </IconButton>
+          <>
+            <IconButton
+              title="Settings"
+              aria-label="Settings"
+              onClick={() => setEditingTopicId(row.original.id)}
+            >
+              <Settings fontSize="inherit" />
+            </IconButton>
+            <Dialog
+              open={editingTopicId === row.original.id}
+              onClose={() => setEditingTopicId(null)}
+              aria-label="Topic Settings"
+            >
+              <EditTopicForm topic={row.original} creatorName={foundUser.username} />
+            </Dialog>
+          </>
         )}
         positionActionsColumn="last"
         renderToolbarInternalActions={({ table }) => {
@@ -130,14 +142,22 @@ const User: NextPage = () => {
               <MRT_ShowHideColumnsButton table={table} />
 
               {hasEditAccess && (
-                <Button
-                  variant="contained"
-                  LinkComponent={NextLink}
-                  href="/new"
-                  startIcon={<AutoStories />}
-                >
-                  New
-                </Button>
+                <>
+                  <Button
+                    variant="contained"
+                    onClick={() => setCreatingTopic(true)}
+                    startIcon={<AutoStories />}
+                  >
+                    New
+                  </Button>
+                  <Dialog
+                    open={creatingTopic}
+                    onClose={() => setCreatingTopic(false)}
+                    aria-label="New Topic"
+                  >
+                    <CreateTopicForm creatorName={foundUser.username} />
+                  </Dialog>
+                </>
               )}
             </>
           );

src/pages/new.page.tsx

@@ -23,7 +23,7 @@ const NewTopic: NextPage = () => {
         <meta name="description" content="Create a topic to mutually understand with Ameliorate." />
       </Head>
 
-      <CreateTopicForm user={sessionUser} />
+      <CreateTopicForm creatorName={sessionUser.username} />
     </>
   );
 };

src/web/comment/store/apiSyncerMiddleware.ts

@@ -151,9 +151,9 @@ const apiSyncerImpl: ApiSyncerImpl = (create) => (set, get, api) => {
   // relies on `setState`, but we might as well override `set` too in case we ever want to use that.
   // Tried extracting the code into a reusable function, but that seemed hard to read, so we're just
   // duplicating it here.
-  const apiSyncerSet: typeof set = (args) => {
+  const apiSyncerSet: typeof set = (...args) => {
     const storeBefore = get();
-    set(args);
+    set(...args);
     const storeAfter = get();
 
     if (isPlaygroundTopic(storeAfter.topic)) return;
@@ -164,9 +164,9 @@ const apiSyncerImpl: ApiSyncerImpl = (create) => (set, get, api) => {
 
   const origSetState = api.setState;
   // eslint-disable-next-line functional/immutable-data, no-param-reassign -- mutation required https://github.com/pmndrs/zustand/issues/881#issuecomment-1076957006
-  api.setState = (args) => {
+  api.setState = (...args) => {
     const storeBefore = api.getState();
-    origSetState(args);
+    origSetState(...args);
     const storeAfter = api.getState();
 
     if (isPlaygroundTopic(storeAfter.topic)) return;

src/web/comment/store/commentStore.ts

@@ -1,3 +1,4 @@
+import { Topic as ApiTopic } from "@prisma/client";
 import shortUUID from "short-uuid";
 import { devtools, persist } from "zustand/middleware";
 import { createWithEqualityFn } from "zustand/traditional";
@@ -8,7 +9,7 @@ import { withDefaults } from "@/common/object";
 import { apiSyncer } from "@/web/comment/store/apiSyncerMiddleware";
 import { emitter } from "@/web/common/event";
 import { storageWithDates } from "@/web/common/store/utils";
-import { StoreTopic, UserTopic } from "@/web/topic/store/store";
+import { StoreTopic } from "@/web/topic/store/store";
 import { setSelected } from "@/web/view/currentViewStore/store";
 import { toggleShowResolvedComments } from "@/web/view/miscTopicConfigStore";
 
@@ -172,20 +173,24 @@ export const resolveComment = (commentId: string, resolved: boolean) => {
   );
 };
 
-export const loadCommentsFromApi = (topic: UserTopic, comments: StoreComment[]) => {
+export const loadCommentsFromApi = (topic: ApiTopic, comments: StoreComment[]) => {
   const builtPersistedName = `${persistedNameBase}-user`;
   useCommentStore.persist.setOptions({ name: builtPersistedName });
 
   useCommentStore.apiSyncer.pause();
 
   useCommentStore.setState(
     {
-      // specify each field because we don't need to store extra data like createdAt etc.
+      // specify each field because we don't need to store extra data like topic's relations if they're passed in
       topic: {
         id: topic.id,
-        creatorName: topic.creatorName,
         title: topic.title,
+        creatorName: topic.creatorName,
         description: topic.description,
+        visibility: topic.visibility,
+        allowAnyoneToEdit: topic.allowAnyoneToEdit,
+        createdAt: topic.createdAt,
+        updatedAt: topic.updatedAt,
       },
       // specify each field because we don't need to store extra data like topicId etc.
       comments: comments.map((comment) => ({