From af5511395daae4ace4cbe25f0baefe813606a4d1 Mon Sep 17 00:00:00 2001
From: BlankParticle <blankparticle@gmail.com>
Date: Sun, 1 Sep 2024 14:51:07 +0530
Subject: [PATCH] fix: show settings based on permissions and spaceShortcode
 hook cleanup

---
 .../trpc/routers/spaceRouter/spaceRouter.ts   | 72 +++++++++++--------
 .../spaceRouter/spaceSettingsRouter.ts        |  2 +-
 .../[spaceShortcode]/settings/page.tsx        | 64 ++++++++---------
 .../_components/sidebar-content.tsx           | 34 +++++----
 .../convo/[convoId]/_components/reply-box.tsx |  2 +-
 .../convo/[convoId]/_components/top-bar.tsx   |  4 +-
 .../convo/_components/convo-list-base.tsx     |  2 +-
 .../convo/_components/convo-list-item.tsx     |  2 +-
 .../convo/_components/convo-list.tsx          |  2 +-
 .../convo/_components/create-convo-form.tsx   |  2 +-
 .../convo/_components/delete-convos-modal.tsx |  2 +-
 .../src/app/[orgShortcode]/convo/layout.tsx   |  2 +-
 apps/web/src/hooks/use-params.ts              |  4 +-
 13 files changed, 104 insertions(+), 90 deletions(-)

diff --git a/apps/platform/trpc/routers/spaceRouter/spaceRouter.ts b/apps/platform/trpc/routers/spaceRouter/spaceRouter.ts
index 647a9e77..9ba0fe2f 100644
--- a/apps/platform/trpc/routers/spaceRouter/spaceRouter.ts
+++ b/apps/platform/trpc/routers/spaceRouter/spaceRouter.ts
@@ -166,37 +166,53 @@ export const spaceRouter = router({
 
     const spaceIdsDedupe = Array.from(new Set([...memberSpaceIds]));
 
-    const orgMemberSpaces = await db.query.spaces.findMany({
-      where: and(
-        eq(spaces.orgId, org.id),
-        or(eq(spaces.type, 'open'), inArray(spaces.id, spaceIdsDedupe))
-      ),
-      columns: {
-        publicId: true,
-        shortcode: true,
-        name: true,
-        description: true,
-        type: true,
-        avatarTimestamp: true,
-        convoPrefix: true,
-        inheritParentPermissions: true,
-        color: true,
-        icon: true,
-        personalSpace: true
-      },
-      with: {
-        parentSpace: {
-          columns: {
-            publicId: true
-          }
+    const orgMemberSpaces = await db.query.spaces
+      .findMany({
+        where: and(
+          eq(spaces.orgId, org.id),
+          or(eq(spaces.type, 'open'), inArray(spaces.id, spaceIdsDedupe))
+        ),
+        columns: {
+          id: true,
+          publicId: true,
+          shortcode: true,
+          name: true,
+          description: true,
+          type: true,
+          avatarTimestamp: true,
+          convoPrefix: true,
+          inheritParentPermissions: true,
+          color: true,
+          icon: true,
+          personalSpace: true
         },
-        subSpaces: {
-          columns: {
-            publicId: true
+        with: {
+          parentSpace: {
+            columns: {
+              publicId: true
+            }
+          },
+          subSpaces: {
+            columns: {
+              publicId: true
+            }
           }
         }
-      }
-    });
+      })
+      .then((spaces) =>
+        spaces.map((space) => {
+          // if the space is private, or the space id is in the array, then they can see Settings
+          if (
+            space.type === 'private' ||
+            (space.type === 'open' && spaceIdsDedupe.includes(space.id))
+          ) {
+            return { ...space, canSeeSettings: true };
+          } else {
+            // otherwise, they can't see Settings
+            return { ...space, canSeeSettings: false };
+          }
+        })
+      );
 
     const orgMemberPersonalSpaceQuery = await db.query.orgMembers.findFirst({
       where: eq(orgMembers.id, org.memberId),
diff --git a/apps/platform/trpc/routers/spaceRouter/spaceSettingsRouter.ts b/apps/platform/trpc/routers/spaceRouter/spaceSettingsRouter.ts
index 53eb94cf..4023efe5 100644
--- a/apps/platform/trpc/routers/spaceRouter/spaceSettingsRouter.ts
+++ b/apps/platform/trpc/routers/spaceRouter/spaceSettingsRouter.ts
@@ -29,7 +29,7 @@ export const spaceSettingsRouter = router({
       if (!spaceMembershipResponse.role) {
         throw new TRPCError({
           code: 'FORBIDDEN',
-          message: 'You are not a member of this Space'
+          message: "You don't have access to settings for this space"
         });
       }
 
diff --git a/apps/web/src/app/[orgShortcode]/[spaceShortcode]/settings/page.tsx b/apps/web/src/app/[orgShortcode]/[spaceShortcode]/settings/page.tsx
index 918c38b2..66e1a4c4 100644
--- a/apps/web/src/app/[orgShortcode]/[spaceShortcode]/settings/page.tsx
+++ b/apps/web/src/app/[orgShortcode]/[spaceShortcode]/settings/page.tsx
@@ -76,7 +76,7 @@ import { z } from 'zod';
 
 export default function SettingsPage() {
   const orgShortcode = useOrgShortcode();
-  const spaceShortcode = useSpaceShortcode();
+  const spaceShortcode = useSpaceShortcode(true);
 
   const [showSaved, setShowSaved] = useState(false);
 
@@ -100,9 +100,15 @@ export default function SettingsPage() {
     <div className="flex w-full flex-col items-center overflow-y-auto">
       <div className="flex max-w-screen-md flex-col gap-8 p-4">
         {isLoading ? (
-          <div>Loading...</div>
+          <div className="flex items-center justify-center gap-2 text-center font-bold">
+            <SpinnerGap
+              className="size-4 animate-spin"
+              size={16}
+            />
+            <span>Loading...</span>
+          </div>
         ) : !spaceSettings?.settings ? (
-          <div>Space Not Found</div>
+          <div>{`You don't have access to settings for this space`}</div>
         ) : (
           <div className="flex w-full flex-col gap-8 p-0">
             <div className="border-base-5 flex w-full flex-row items-center justify-between gap-4 border-b pb-2">
@@ -121,16 +127,12 @@ export default function SettingsPage() {
 
                   <div className="flex flex-col gap-1">
                     <NameField
-                      orgShortcode={orgShortcode}
-                      spaceShortcode={spaceShortcode}
                       initialValue={spaceSettings?.settings?.name}
                       showSaved={setShowSaved}
                       isSpaceAdmin={isSpaceAdmin}
                     />
 
                     <DescriptionField
-                      orgShortcode={orgShortcode}
-                      spaceShortcode={spaceShortcode}
                       initialValue={spaceSettings?.settings?.description ?? ''}
                       showSaved={setShowSaved}
                       isSpaceAdmin={isSpaceAdmin}
@@ -164,22 +166,16 @@ export default function SettingsPage() {
               </div>
             </div>
             <ColorField
-              orgShortcode={orgShortcode}
-              spaceShortcode={spaceShortcode}
               initialValue={spaceSettings?.settings?.color}
               showSaved={setShowSaved}
               isSpaceAdmin={isSpaceAdmin}
             />
             <VisibilityField
-              orgShortcode={orgShortcode}
-              spaceShortcode={spaceShortcode}
               initialValue={spaceSettings?.settings?.type}
               showSaved={setShowSaved}
               isSpaceAdmin={isSpaceAdmin}
             />
             <Workflows
-              orgShortcode={orgShortcode}
-              spaceShortcode={spaceShortcode}
               showSaved={setShowSaved}
               isSpaceAdmin={isSpaceAdmin}
             />
@@ -196,18 +192,16 @@ export default function SettingsPage() {
 }
 
 function NameField({
-  orgShortcode,
-  spaceShortcode,
   initialValue,
   showSaved,
   isSpaceAdmin
 }: {
-  orgShortcode: string;
-  spaceShortcode: string;
   initialValue: string;
   isSpaceAdmin: boolean;
   showSaved: (value: boolean) => void;
 }) {
+  const orgShortcode = useOrgShortcode();
+  const spaceShortcode = useSpaceShortcode(true);
   const { mutateAsync: setSpaceName, isSuccess: setSpaceNameSuccess } =
     platform.spaces.settings.setSpaceName.useMutation();
   const [editName, setEditName] = useState(initialValue);
@@ -254,11 +248,14 @@ function NameField({
             label="Space Name"
             value={editName}
             onChange={(e) => setEditName(e.target.value)}
+            onBlur={() => setShowEditNameField(false)}
           />
         </div>
       ) : (
         <div className="flex flex-row items-center gap-2">
-          <span className="font-display text-lg">{initialValue}</span>
+          <span className="font-display text-lg">
+            {editName ?? initialValue}
+          </span>
           <Button
             variant={'ghost'}
             size={'icon-sm'}
@@ -275,18 +272,16 @@ function NameField({
 }
 
 function DescriptionField({
-  orgShortcode,
-  spaceShortcode,
   initialValue,
   showSaved,
   isSpaceAdmin
 }: {
-  orgShortcode: string;
-  spaceShortcode: string;
   initialValue: string;
   isSpaceAdmin: boolean;
   showSaved: (value: boolean) => void;
 }) {
+  const orgShortcode = useOrgShortcode();
+  const spaceShortcode = useSpaceShortcode(true);
   const {
     mutateAsync: setSpaceDescription,
     isSuccess: setSpaceDescriptionSuccess
@@ -336,6 +331,7 @@ function DescriptionField({
             label="Description"
             value={editDescription}
             onChange={(e) => setEditDescription(e.target.value)}
+            onBlur={() => setShowEditDescriptionField(false)}
           />
         </div>
       ) : (
@@ -343,7 +339,7 @@ function DescriptionField({
           {initialValue === '' ? (
             <span className="text-base-10 text-xs">Description</span>
           ) : (
-            <span className="">{initialValue}</span>
+            <span>{editDescription ?? initialValue}</span>
           )}
           <Button
             variant={'ghost'}
@@ -361,18 +357,17 @@ function DescriptionField({
 }
 
 function ColorField({
-  orgShortcode,
-  spaceShortcode,
   initialValue,
   showSaved,
   isSpaceAdmin
 }: {
-  orgShortcode: string;
-  spaceShortcode: string;
   initialValue: string;
   isSpaceAdmin: boolean;
   showSaved: (value: boolean) => void;
 }) {
+  const orgShortcode = useOrgShortcode();
+  const spaceShortcode = useSpaceShortcode(true);
+
   const { mutateAsync: setSpaceColor } =
     platform.spaces.settings.setSpaceColor.useMutation();
   const [activeColor, setActiveColor] = useState(initialValue);
@@ -436,18 +431,17 @@ function ColorField({
 }
 
 function VisibilityField({
-  orgShortcode,
-  spaceShortcode,
   initialValue,
   showSaved,
   isSpaceAdmin
 }: {
-  orgShortcode: string;
-  spaceShortcode: string;
   initialValue: string;
   isSpaceAdmin: boolean;
   showSaved: (value: boolean) => void;
 }) {
+  const orgShortcode = useOrgShortcode();
+  const spaceShortcode = useSpaceShortcode(true);
+
   const { data: canAddSpace } = platform.org.iCanHaz.space.useQuery(
     {
       orgShortcode: orgShortcode
@@ -554,16 +548,15 @@ function VisibilityField({
 }
 
 function Workflows({
-  orgShortcode,
-  spaceShortcode,
   showSaved,
   isSpaceAdmin
 }: {
-  orgShortcode: string;
-  spaceShortcode: string;
   isSpaceAdmin: boolean;
   showSaved: (value: boolean) => void;
 }) {
+  const orgShortcode = useOrgShortcode();
+  const spaceShortcode = useSpaceShortcode(true);
+
   const { data: spaceWorkflows, isLoading: workflowsLoading } =
     platform.spaces.workflows.getSpacesWorkflows.useQuery({
       orgShortcode: orgShortcode,
@@ -1586,6 +1579,7 @@ function DeleteWorkflowModal({
   );
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Tags({
   orgShortcode,
   spaceShortcode
diff --git a/apps/web/src/app/[orgShortcode]/_components/sidebar-content.tsx b/apps/web/src/app/[orgShortcode]/_components/sidebar-content.tsx
index 601b6880..d3426f3e 100644
--- a/apps/web/src/app/[orgShortcode]/_components/sidebar-content.tsx
+++ b/apps/web/src/app/[orgShortcode]/_components/sidebar-content.tsx
@@ -122,17 +122,21 @@ function SpaceItem({
           {spaceData.name ?? 'Unnamed Space'}
         </span>
       </Link>
-      <div className="w-0 overflow-hidden transition-all group-hover:w-8">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              size="icon-sm"
-              variant="ghost">
-              <DotsThree />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            {/* TODO: Add in with the notifications
+      {spaceData.canSeeSettings && (
+        <div className="w-0 overflow-hidden transition-all group-hover:w-8">
+          {/* <DropdownMenu>
+          <DropdownMenuTrigger asChild> */}
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            onClick={() =>
+              router.push(`/${orgShortCode}/${spaceData.shortcode}/settings`)
+            }>
+            <DotsThree />
+          </Button>
+          {/* </DropdownMenuTrigger>
+          <DropdownMenuContent> 
+           TODO: Add in with the notifications
             <DropdownMenuSub>
               <DropdownMenuSubTrigger>Notifications</DropdownMenuSubTrigger>
               <DropdownMenuPortal>
@@ -152,16 +156,16 @@ function SpaceItem({
               </DropdownMenuPortal>
             </DropdownMenuSub> 
             <DropdownMenuSeparator />
-            */}
-            <DropdownMenuItem
+             <DropdownMenuItem
               onSelect={() => {
                 router.push(`/${orgShortCode}/${spaceData.shortcode}/settings`);
               }}>
               Space Settings
             </DropdownMenuItem>
           </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+        </DropdownMenu> */}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/reply-box.tsx b/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/reply-box.tsx
index 09c36e45..e19ef0c7 100644
--- a/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/reply-box.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/reply-box.tsx
@@ -57,7 +57,7 @@ export function ReplyBox({
   const { draft, setDraft, resetDraft } = useDraft(convoId);
   const [editorText, setEditorText] = useState(draft.content);
   const orgShortcode = useOrgShortcode();
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
   const [replyTo] = useAtom(replyToMessageAtom);
   const [emailIdentity, setEmailIdentity] = useAtom(emailIdentityAtom);
   const addConvoToCache = useUpdateConvoMessageList$Cache();
diff --git a/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/top-bar.tsx b/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/top-bar.tsx
index f29d8ba1..120eb641 100644
--- a/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/top-bar.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/[convoId]/_components/top-bar.tsx
@@ -446,7 +446,7 @@ const DeleteButton = memo(function DeleteButton({
   const removeConvoFromList = useDeleteConvo$Cache();
   const { scopedNavigate } = useOrgScopedRouter();
   const currentConvo = useCurrentConvoId();
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
 
   const { mutate: deleteConvo, isPending: deletingConvo } =
     platform.convos.deleteConvo.useMutation({
@@ -522,7 +522,7 @@ function DeleteModal({
   const orgShortcode = useOrgShortcode();
   const { scopedNavigate } = useOrgScopedRouter();
   const currentConvo = useCurrentConvoId();
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
   const removeConvoFromList = useDeleteConvo$Cache();
 
   // const { mutate: hideConvo, isPending: hidingConvo } =
diff --git a/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-base.tsx b/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-base.tsx
index 233c1ef6..357d37ea 100644
--- a/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-base.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-base.tsx
@@ -32,7 +32,7 @@ export function ConvoListBase({
   linkBase
 }: ConvoListBaseProps) {
   const orgShortcode = useOrgShortcode();
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
   const [selections, setSelections] = useAtom(convoListSelection);
   const [lastSelected, setLastSelected] = useAtom(lastSelectedConvo);
 
diff --git a/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx b/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx
index 95c28b15..c52711b2 100644
--- a/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/_components/convo-list-item.tsx
@@ -41,7 +41,7 @@ export const ConvoItem = memo(function ConvoItem({
   onSelect: (shiftKey: boolean) => void;
 }) {
   const orgShortcode = useOrgShortcode();
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
   const selecting = useAtomValue(convoListSelecting);
   const isMobile = useIsMobile();
   const router = useRouter();
diff --git a/apps/web/src/app/[orgShortcode]/convo/_components/convo-list.tsx b/apps/web/src/app/[orgShortcode]/convo/_components/convo-list.tsx
index 9e48cedb..12554771 100644
--- a/apps/web/src/app/[orgShortcode]/convo/_components/convo-list.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/_components/convo-list.tsx
@@ -16,7 +16,7 @@ import { ms } from '@u22n/utils/ms';
 
 export function ConvoList(/*{hidden} : Props*/) {
   const orgShortcode = useOrgShortcode();
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
   const { scopedRedirect, scopedUrl } = useOrgScopedRouter();
 
   const {
diff --git a/apps/web/src/app/[orgShortcode]/convo/_components/create-convo-form.tsx b/apps/web/src/app/[orgShortcode]/convo/_components/create-convo-form.tsx
index eaf29596..75b0d634 100644
--- a/apps/web/src/app/[orgShortcode]/convo/_components/create-convo-form.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/_components/create-convo-form.tsx
@@ -131,7 +131,7 @@ export default function CreateConvoForm({
 }) {
   const orgShortcode = useOrgShortcode();
   const { scopedNavigate } = useOrgScopedRouter();
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
   const { draft, setDraft, resetDraft } = useComposingDraft();
   const isMobile = useIsMobile();
 
diff --git a/apps/web/src/app/[orgShortcode]/convo/_components/delete-convos-modal.tsx b/apps/web/src/app/[orgShortcode]/convo/_components/delete-convos-modal.tsx
index 38ed3a4d..c7f965a6 100644
--- a/apps/web/src/app/[orgShortcode]/convo/_components/delete-convos-modal.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/_components/delete-convos-modal.tsx
@@ -32,7 +32,7 @@ export function DeleteMultipleConvosModal({
   const currentConvo = useCurrentConvoId();
   const { scopedNavigate } = useOrgScopedRouter();
   const [selections, setSelections] = useAtom(convoListSelection);
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
 
   const { mutate: deleteConvo, isPending: deletingConvos } =
     platform.convos.deleteConvo.useMutation({
diff --git a/apps/web/src/app/[orgShortcode]/convo/layout.tsx b/apps/web/src/app/[orgShortcode]/convo/layout.tsx
index 1f180180..a839b3f2 100644
--- a/apps/web/src/app/[orgShortcode]/convo/layout.tsx
+++ b/apps/web/src/app/[orgShortcode]/convo/layout.tsx
@@ -72,7 +72,7 @@ function ChildrenWithOrgIssues({ children }: { children: ReactNode }) {
 
 function ConvoNavHeader() {
   const orgShortcode = useOrgShortcode();
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
   const { scopedUrl } = useOrgScopedRouter();
 
   // const { mutate: hideConvo } = platform.convos.hideConvo.useMutation({
diff --git a/apps/web/src/hooks/use-params.ts b/apps/web/src/hooks/use-params.ts
index 2a657532..e311667c 100644
--- a/apps/web/src/hooks/use-params.ts
+++ b/apps/web/src/hooks/use-params.ts
@@ -19,7 +19,7 @@ export function useCurrentConvoId() {
 // Sometimes we don't want to throw an error if the spaceShortcode is not present
 export function useSpaceShortcode(throwIfNotDefined?: true): string;
 export function useSpaceShortcode(throwIfNotDefined?: false): string | null;
-export function useSpaceShortcode(throwIfNotDefined = true) {
+export function useSpaceShortcode(throwIfNotDefined = false) {
   const params = useParams();
   if (throwIfNotDefined && typeof params.spaceShortcode !== 'string') {
     throw new Error(
@@ -45,7 +45,7 @@ export function useSpaceShortcode(throwIfNotDefined = true) {
  */
 export function useOrgScopedRouter() {
   const orgShortcode = useOrgShortcode();
-  const spaceShortcode = useSpaceShortcode(false);
+  const spaceShortcode = useSpaceShortcode();
   const router = useRouter();
 
   const scopedNavigate = useCallback(