From 5bf8a9bc02677bd7d5c23f7115d983b5cad3e435 Mon Sep 17 00:00:00 2001
From: cabaalexander <cabaalexander321@gmail.com>
Date: Sun, 9 Jun 2024 20:14:34 -0400
Subject: [PATCH] enable to update saves name on click

---
 backend/save.go                               | 16 +++++
 frontend/src/components/Save/NameInput.tsx    | 58 +++++++++++++++++++
 .../components/{Save.tsx => Save/index.tsx}   | 16 ++++-
 frontend/src/hooks/useSave.tsx                |  8 +++
 4 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Save/NameInput.tsx
 rename frontend/src/components/{Save.tsx => Save/index.tsx} (81%)

diff --git a/backend/save.go b/backend/save.go
index aac9e4b..ab92e37 100644
--- a/backend/save.go
+++ b/backend/save.go
@@ -84,6 +84,22 @@ func (s *Save) GetSaves(gameID uuid.UUID) []SaveSingle {
 	return gameSaves
 }
 
+func (s *Save) UpdateSave(saveID, gameID uuid.UUID, name string) error {
+	if name == "" {
+		return errors.New("name is empty")
+	}
+	var newList []SaveSingle
+	for _, save := range s.JsonData.Data[gameID] {
+		if save.ID == saveID {
+			save.Name = name
+		}
+		newList = append(newList, save)
+	}
+	s.JsonData.Data[gameID] = newList
+	s.UpdateJson()
+	return nil
+}
+
 func (s *Save) RemoveSave(saveID uuid.UUID, gameID uuid.UUID) error {
 	var newList []SaveSingle
 	for _, save := range s.JsonData.Data[gameID] {
diff --git a/frontend/src/components/Save/NameInput.tsx b/frontend/src/components/Save/NameInput.tsx
new file mode 100644
index 0000000..c9197f8
--- /dev/null
+++ b/frontend/src/components/Save/NameInput.tsx
@@ -0,0 +1,58 @@
+import { Input, Typography } from "@material-tailwind/react";
+import { useState } from "react";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { type GameSingle } from "@/hooks/useGame";
+
+type NameInputProps = {
+  name: string;
+  onSubmit: (data: FormInputs) => void;
+};
+
+type FormInputs = Pick<GameSingle, "Name">;
+
+const NameInput = (props: NameInputProps) => {
+  const [edit, setEdit] = useState<boolean>(false);
+  const { register, handleSubmit, setFocus } = useForm<FormInputs>();
+
+  const onSubmit: SubmitHandler<FormInputs> = (data) => {
+    setEdit(false);
+    props.onSubmit(data);
+  };
+
+  const handleEdit = () => {
+    setEdit(true);
+    setTimeout(() => {
+      setFocus("Name");
+    }, 300);
+  };
+
+  if (edit) {
+    return (
+      <form
+        className="col-span-5 !h-[40px] w-0 grow"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <Input
+          className="!p-0"
+          variant="standard"
+          label={props.name}
+          {...register("Name", {
+            onBlur: () => {
+              setEdit(false);
+            },
+          })}
+        />
+      </form>
+    );
+  }
+
+  return (
+    <div className="col-span-5 flex h-[40px] w-0 grow items-center ">
+      <Typography onClick={() => handleEdit()} className="h-6 w-full">
+        {props.name}
+      </Typography>
+    </div>
+  );
+};
+
+export default NameInput;
diff --git a/frontend/src/components/Save.tsx b/frontend/src/components/Save/index.tsx
similarity index 81%
rename from frontend/src/components/Save.tsx
rename to frontend/src/components/Save/index.tsx
index 3901e51..a32d209 100644
--- a/frontend/src/components/Save.tsx
+++ b/frontend/src/components/Save/index.tsx
@@ -1,7 +1,8 @@
 import { Button, Typography } from "@material-tailwind/react";
 import { FaDownload, FaFolderOpen, FaTrash, FaUpload } from "react-icons/fa6";
-import { type SaveSingle } from "@/hooks/useSave";
+import useSave, { type SaveSingle } from "@/hooks/useSave";
 import WithTooltip from "@/components/WithTooltip";
+import NameInput from "@/components/Save/NameInput";
 
 type SavePropsCallback = () => Promise<void> | void;
 
@@ -14,6 +15,8 @@ type SaveProps = {
 };
 
 const Save = (props: SaveProps) => {
+  const { updateSave } = useSave({ GameID: props.data.GameID });
+
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
     const intlDate = new Intl.DateTimeFormat("en-US").format(date);
@@ -37,7 +40,16 @@ const Save = (props: SaveProps) => {
         </Button>
       </WithTooltip>
 
-      <Typography className="col-span-5 w-0 grow">{props.data.Name}</Typography>
+      <NameInput
+        onSubmit={(data) => {
+          updateSave({
+            ID: props.data.ID,
+            GameID: props.data.GameID,
+            Name: data.Name,
+          });
+        }}
+        name={props.data.Name}
+      />
 
       <Typography className="col-span-3 px-2 text-center">
         {formatDate(props.data.CreatedAt)}
diff --git a/frontend/src/hooks/useSave.tsx b/frontend/src/hooks/useSave.tsx
index 102c5b8..9184783 100644
--- a/frontend/src/hooks/useSave.tsx
+++ b/frontend/src/hooks/useSave.tsx
@@ -9,6 +9,7 @@ import {
   OverwriteSave,
   RemoveQuickSave,
   RemoveSave,
+  UpdateSave,
 } from "@wailsjs/go/backend/Save";
 
 export type SaveSingle = {
@@ -76,6 +77,12 @@ const useSave = (props?: Pick<SaveSingle, "GameID">) => {
       OverwriteSave(s.ID, s.GameID),
   });
 
+  const { mutateAsync: updateSave } = useMutation({
+    mutationFn: (s: Pick<SaveSingle, "ID" | "GameID" | "Name">) =>
+      UpdateSave(s.ID, s.GameID, s.Name),
+    onSuccess: invalidateSavesQuery,
+  });
+
   return {
     querySaves,
     queryQuickSave,
@@ -86,6 +93,7 @@ const useSave = (props?: Pick<SaveSingle, "GameID">) => {
     loadSave,
     loadQuickSave,
     overwriteSave,
+    updateSave,
   };
 };