#286 refactor: NamingModal and RequestFolderNamingModal

Author: giemic8

.gitignore

@@ -44,6 +44,7 @@ typings/
 
 # Optional npm cache directory
 .npm
+package-lock.json
 
 # Optional eslint cache
 .eslintcache

src/renderer/components/shared/modal/NamingModal.tsx

@@ -0,0 +1,51 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+interface NamingModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  modalTitle: string;
+  onSubmit: () => Promise<void>;
+  onReset: () => void;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  valid: boolean;
+}
+
+export const NamingModal = (props: NamingModalProps) => {
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{props.modalTitle}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={props.onSubmit} onReset={props.onReset}>
+          <div className="p-4">
+            <input
+              type="text"
+              value={props.value}
+              onChange={(e) => props.onChange(e.target.value)}
+              className="w-full bg-transparent outline-none"
+              placeholder={props.placeholder}
+            />
+          </div>
+          <DialogFooter className="bottom-0">
+            <Button disabled={!props.valid} variant={props.valid ? 'default' : 'defaultDisable'}>
+              <span className="leading-4 font-bold">Save</span>
+            </Button>
+            <Button type="reset" variant="destructive">
+              <span className="leading-4 font-bold">Cancel</span>
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/renderer/components/sidebar/SidebarHeaderBar.tsx

@@ -3,7 +3,7 @@ import { SidebarHeader } from '@/components/ui/sidebar';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { AddIcon } from '@/components/icons';
-import { NamingModal } from '@/components/sidebar/SidebarRequestList/Nav/Dropdown/modals/NamingModal';
+import { RequestFolderNamingModal } from '@/components/sidebar/SidebarRequestList/Nav/Dropdown/modals/RequestFolderNamingModal';
 import { useCollectionStore } from '@/state/collectionStore';
 
 export const SidebarHeaderBar = () => {
@@ -43,7 +43,7 @@ export const SidebarHeaderBar = () => {
         </div>
       </SidebarHeader>
       {modalState.isOpen && (
-        <NamingModal
+        <RequestFolderNamingModal
           isOpen={modalState.isOpen}
           trufosObject={collection}
           createType={modalState.type}

src/renderer/components/sidebar/SidebarRequestList/Nav/Dropdown/FolderDropdown.tsx

@@ -10,7 +10,7 @@ import { MoreHorizontal } from 'lucide-react';
 import { handleMouseEvent } from '@/util/callback-util';
 import { Folder } from 'shim/objects/folder';
 import { useCollectionActions } from '@/state/collectionStore';
-import { NamingModal } from '@/components/sidebar/SidebarRequestList/Nav/Dropdown/modals/NamingModal';
+import { RequestFolderNamingModal } from '@/components/sidebar/SidebarRequestList/Nav/Dropdown/modals/RequestFolderNamingModal';
 
 export interface FolderDropdownProps {
   folder: Folder;
@@ -54,7 +54,7 @@ export const FolderDropdown = ({ folder }: FolderDropdownProps) => {
         </DropdownMenuContent>
       </DropdownMenu>
       {renameModalIsOpen && (
-        <NamingModal
+        <RequestFolderNamingModal
           isOpen={renameModalIsOpen}
           trufosObject={folder}
           createType={isCreateModal}

src/renderer/components/sidebar/SidebarRequestList/Nav/Dropdown/RequestDropdown.tsx

@@ -10,7 +10,7 @@ import { handleMouseEvent } from '@/util/callback-util';
 import { useCollectionActions, useCollectionStore } from '@/state/collectionStore';
 import { useState } from 'react';
 import { TrufosRequest } from 'shim/objects/request';
-import { NamingModal } from '@/components/sidebar/SidebarRequestList/Nav/Dropdown/modals/NamingModal';
+import { RequestFolderNamingModal } from '@/components/sidebar/SidebarRequestList/Nav/Dropdown/modals/RequestFolderNamingModal';
 
 export interface RequestDropdownProps {
   request: TrufosRequest;
@@ -43,7 +43,7 @@ export const RequestDropdown = ({ request }: RequestDropdownProps) => {
         </DropdownMenuContent>
       </DropdownMenu>
       {renameModalIsOpen && (
-        <NamingModal
+        <RequestFolderNamingModal
           isOpen={renameModalIsOpen}
           trufosObject={request}
           createType={null}

src/renderer/components/sidebar/SidebarRequestList/Nav/Dropdown/modals/NamingModal.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import { TrufosRequest } from 'shim/objects/request';
+import { Folder } from 'shim/objects/folder';
+import { selectFolder, useCollectionActions, useCollectionStore } from '@/state/collectionStore';
+import { Collection } from 'shim/objects/collection';
+import { NamingModal } from '@/components/shared/modal/NamingModal';
+
+interface RequestFolderNamingModalProps {
+  createType?: 'folder' | 'request';
+  trufosObject: Folder | TrufosRequest | Omit<Collection, 'variables' | 'environments'>;
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const RequestFolderNamingModal = ({
+  createType,
+  trufosObject,
+  isOpen,
+  setOpen,
+}: RequestFolderNamingModalProps) => {
+  const [isValid, setValid] = useState(false);
+  const [title, setTitle] = useState(createType ? '' : trufosObject.title);
+  const { renameFolder, renameRequest, addNewRequest, addNewFolder } = useCollectionActions();
+  const siblingTitles: string[] = [];
+  if (createType !== null && trufosObject.type !== 'request') {
+    siblingTitles.push(...trufosObject.children.map((parent) => parent.title));
+  } else if (trufosObject.type !== 'collection') {
+    const parent = useCollectionStore((state) => selectFolder(state, trufosObject.parentId));
+    if (parent) {
+      siblingTitles.push(...parent.children.map((child) => child.title));
+    } else {
+      const collection = useCollectionStore((state) => state.collection);
+      if (collection.id === trufosObject.parentId) {
+        siblingTitles.push(...collection.children.map((child) => child.title));
+      }
+    }
+  }
+
+  const save = async () => {
+    if (createType) {
+      if (createType === 'folder') {
+        addNewFolder(title, trufosObject.id);
+      } else {
+        addNewRequest(title, trufosObject.id);
+      }
+    } else {
+      if (trufosObject.type === 'folder') {
+        renameFolder(trufosObject.id, title);
+      } else {
+        renameRequest(trufosObject.id, title);
+      }
+    }
+    setOpen(false);
+  };
+
+  const header = createType
+    ? `Create a new ${createType.charAt(0).toUpperCase() + createType.slice(1)}`
+    : `Rename the ${trufosObject.type.charAt(0).toUpperCase() + trufosObject.type.slice(1)}`;
+
+  useEffect(() => {
+    setValid(
+      title.trim().length > 0 &&
+        title !== (createType ? '' : trufosObject.title) &&
+        siblingTitles.indexOf(title) === -1
+    );
+  }, [title]);
+
+  return (
+    <NamingModal
+      open={isOpen}
+      onOpenChange={(open) => !open && setOpen(false)}
+      modalTitle={header}
+      onSubmit={() => save()}
+      onReset={() => setOpen(false)}
+      value={title}
+      onChange={(value) => setTitle(value)}
+      placeholder={`Enter the ${createType ?? trufosObject.type} name`}
+      valid={isValid}
+    />
+  );
+};