Merge pull request #5 from arayavalencia96/feature/MEMO-5-several-cor…

…rections Feature/memo 5 several corrections
arayavalencia96 · Sep 12, 2023 · ab64905 · ab64905
2 parents 10019dd + b436153
commit ab64905
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 43 deletions.
diff --git a/src/components/CreateNote.tsx b/src/components/CreateNote.tsx
@@ -3,11 +3,11 @@ import { api } from "~/utils/api";
 import { NoteCard } from "./NoteCard";
 import { NoteEditor } from "./NoteEditor";
 import { useSelectedTopic } from "~/contexts/SelectedTopicContext";
-import { useState } from "react";
 import { type RouterOutputs } from "~/utils/api";
 type Note = RouterOutputs["note"]["getAll"][0];
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { useSelectedNote } from "~/contexts/SelectedNoteContext";
 
 const InitialValues: Note = {
   content: '',
@@ -21,7 +21,7 @@ const InitialValues: Note = {
 export const CreateNote: React.FC = () => {
   const { data: sessionData } = useSession();
   const { selectedTopic, setSelectedTopic } = useSelectedTopic();
-  const [selectedValues, setSelectedValues] = useState<Note>(InitialValues);
+  const { selectedNote, setSelectedNote, setIsEdit } = useSelectedNote();
 
   api.topic.getAll.useQuery(undefined, {
     enabled: sessionData?.user !== undefined,
@@ -78,7 +78,7 @@ export const CreateNote: React.FC = () => {
               note={note}
               onDelete={() => void deleteNote.mutate({ id: note.id })}
               onClickEdit={(note) => {
-                setSelectedValues(note);
+                setSelectedNote(note);
               }}
             />
           </div>
@@ -91,7 +91,7 @@ export const CreateNote: React.FC = () => {
             content,
             topicId: selectedTopic?.id ?? "",
           });
-          setSelectedValues(InitialValues);
+          setSelectedNote(InitialValues);
         }}
         onEdit={({ id, topicId, title, content }) => {
           void updateNote.mutate({
@@ -100,10 +100,10 @@ export const CreateNote: React.FC = () => {
             title,
             content,
           });
-          setSelectedValues(InitialValues);
+          setSelectedNote(InitialValues);
         }}
-        isEdit={selectedValues.id !== '' ?? true}
-        values={selectedValues}
+        isForEdit={selectedNote?.id !== '' ?? setIsEdit(true)}
+        values={selectedNote || InitialValues}
       />
     </div>
   );

diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx
@@ -13,7 +13,7 @@ export const NoteCard = ({
   onDelete: () => void;
   onClickEdit: (note: Note) => void;
 }) => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(true);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const handleEditClick = () => {
     onClickEdit(note);
   };
@@ -22,23 +22,27 @@ export const NoteCard = ({
     <div className="card mt-5 border border-gray-200 bg-base-100 shadow-xl">
       <div className="card-body m-0 p-3">
         <div
-          onClick={() => setIsExpanded(!isExpanded)}
           className={`collapse-arrow ${
             isExpanded ? "collapse-open" : ""
           } collapse`}
         >
-          <div className="collapse-title text-xl font-bold">{note.title}</div>
+          <div
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="cursor-pointer collapse-title text-xl font-bold"
+          >
+            {note.title}
+          </div>
           <div className="collapse-content">
             <article className="prose lg:prose-xl">
               <ReactMarkdown>{note.content}</ReactMarkdown>
             </article>
           </div>
           <div className="card-actions mx-2 flex justify-end">
-            <button className="btn-warnin btn btn-xs px-5" onClick={onDelete}>
+            <button className="btn-error btn btn-xs px-5 flexWrow" onClick={onDelete}>
               Eliminar
             </button>
             <button
-              className="btn-warnin btn btn-xs px-5"
+              className="btn-warning btn btn-xs px-5 flexWrow"
               onClick={handleEditClick}
             >
               Editar

diff --git a/src/components/NoteEditor.tsx b/src/components/NoteEditor.tsx
@@ -3,13 +3,23 @@ import CodeMirror from "@uiw/react-codemirror";
 import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
 import { languages } from "@codemirror/language-data";
 import { type RouterOutputs } from "~/utils/api";
+import { useSelectedNote } from "~/contexts/SelectedNoteContext";
 type Note = RouterOutputs["note"]["getAll"][0];
 
+const InitialValues: Note = {
+  content: '',
+  createdAt: new Date(),
+  id: '',
+  title: '',
+  topicId: '',
+  updatedAt: new Date(),  
+};
+
 export const NoteEditor = ({
   onSave,
   onEdit,
   values,
-  isEdit,
+  isForEdit,
 }: {
   onSave: (note: { title: string; content: string }) => void;
   onEdit: (note: {
@@ -19,10 +29,11 @@ export const NoteEditor = ({
     content: string;
   }) => void;
   values?: Note;
-  isEdit?: boolean;
+  isForEdit?: boolean;
 }) => {
   const [code, setCode] = useState<string>("");
   const [title, setTitle] = useState<string>("");
+  const { setSelectedNote, setIsEdit } = useSelectedNote();
 
   useEffect(() => {
     if (values) {
@@ -56,10 +67,23 @@ export const NoteEditor = ({
           className="border border-gray-300"
         />
       </div>
-      <div className="card-actions justify-end">
+      <div className="card-actions justify-end px-[2rem] pb-2">
+        {isForEdit ? (
+          <button
+          onClick={() => {
+            setCode("");
+            setTitle("");
+            setSelectedNote(InitialValues);
+            setIsEdit(false);
+          }}
+          className="btn btn-error widthMobile"
+        >
+          Cancelar
+        </button>
+        ) : null}
         <button
           onClick={() => {
-            if (!isEdit) {
+            if (!isForEdit) {
               onSave({
                 title,
                 content: code,
@@ -76,9 +100,9 @@ export const NoteEditor = ({
             setTitle("");
           }}
           disabled={title.trim().length === 0 || code.trim().length === 0}
-          className="btn btn-primary"
+          className="btn btn-primary widthMobile"
         >
-          {isEdit ? "Actualizar" : "Guardar"}
+          {isForEdit ? "Actualizar" : "Guardar"}
         </button>
       </div>
     </div>

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,7 +1,7 @@
 import { useSession } from "next-auth/react";
 import { useEffect, useMemo, useState } from "react";
 import { api } from "~/utils/api";
-import { FaPlus, FaRegEdit } from "react-icons/fa";
+import { FaPlus, FaRegEdit, FaRegTimesCircle } from "react-icons/fa";
 import { useSelectedTopic } from "~/contexts/SelectedTopicContext";
 import { TopicsList } from "./TopicsList";
 import { toast } from "react-toastify";
@@ -64,6 +64,12 @@ export const Sidebar: React.FC = () => {
     setInputValue("");
   };
 
+  const handleCancelClick = () => {
+    setInputValue("");
+    setSelectedTopic(null);
+    setAction("");
+  };
+
   useEffect(() => {
     if (isEditing) {
       setInputValue(selectedTopicTitle || "");
@@ -87,7 +93,7 @@ export const Sidebar: React.FC = () => {
             setInputValue(e.target.value);
           }}
           onKeyDown={(e) => {
-            if (e.key === "Enter") {
+            if (e.key === "Enter" && inputValue !== '') {
               if (isEditing) {
                 updateTopic.mutate({
                   id: selectedTopicId,
@@ -102,8 +108,19 @@ export const Sidebar: React.FC = () => {
             }
           }}
         />
+        { action === "edit" ? (
+          <button
+          className={`btn-sm ${inputValue === "" ? "" : "hover:text-error"}`}
+          title="Cancelar"
+          type="button"
+          onClick={handleCancelClick}
+        >
+          <FaRegTimesCircle />
+        </button>
+        ) : null }
         <button
-          className="btn-sm"
+          className={`btn-sm ${inputValue === "" ? "" : "hover:text-primary"}`}
+          disabled={inputValue === ""}
           title="Agregar"
           type="button"
           onClick={(_) => {

diff --git a/src/components/TopicsList.tsx b/src/components/TopicsList.tsx
@@ -50,7 +50,7 @@ export const TopicsList = () => {
     setSelectedTopic(topic);
     setSelectedTopicId(id);
     setAction(action);
-    action === 'delete' ? await deleteAllNotesWithTopicId(topic.id): null;
+    action === "delete" ? await deleteAllNotesWithTopicId(topic.id) : null;
   };
 
   async function deleteAllNotesWithTopicId(topicId: string) {
@@ -120,26 +120,28 @@ export const TopicsList = () => {
         >
           {topic.title}
         </a>
-        <button
-          className="btn-sm hover:text-blue-500"
-          title="Editar"
-          type="button"
-          onClick={() => {
-            void handleClick(topic.id, topic, "edit");
-          }}
-        >
-          <FaEdit />
-        </button>
-        <button
-          className="btn-sm hover:text-blue-500"
-          title="Eliminar"
-          type="button"
-          onClick={() => {
-            void handleClick(topic.id, topic, "delete");
-          }}
-        >
-          <FaTrash />
-        </button>
+        <div className="flex">
+          <button
+            className="btn-sm hover:text-warning"
+            title="Editar"
+            type="button"
+            onClick={() => {
+              void handleClick(topic.id, topic, "edit");
+            }}
+          >
+            <FaEdit />
+          </button>
+          <button
+            className="btn-sm hover:text-error"
+            title="Eliminar"
+            type="button"
+            onClick={() => {
+              void handleClick(topic.id, topic, "delete");
+            }}
+          >
+            <FaTrash />
+          </button>
+        </div>
       </li>
     );
   };

diff --git a/src/contexts/SelectedNoteContext.tsx b/src/contexts/SelectedNoteContext.tsx
@@ -0,0 +1,52 @@
+import { type Note } from "@prisma/client";
+import React, { createContext, useContext, useState } from "react";
+
+const InitialValues: Note = {
+    content: '',
+    createdAt: new Date(),
+    id: '',
+    title: '',
+    topicId: '',
+    updatedAt: new Date(),  
+  };
+
+interface SelectedNoteContextType {
+  selectedNote: Note | null;
+  setSelectedNote: (note: Note | null) => void;
+  isEdit: boolean | null;
+  setIsEdit: (set: boolean | null) => void;
+}
+
+const SelectedNoteContext = createContext<
+  SelectedNoteContextType | undefined
+>(undefined);
+
+export const SelectedNoteProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [selectedNote, setSelectedNote] = useState<Note | null>(InitialValues);
+  const [isEdit, setIsEdit] = useState<boolean | null>(false);
+
+  return (
+    <SelectedNoteContext.Provider
+      value={{
+        selectedNote,
+        setSelectedNote,
+        isEdit,
+        setIsEdit,
+      }}
+    >
+      {children}
+    </SelectedNoteContext.Provider>
+  );
+};
+
+export const useSelectedNote = () => {
+  const context = useContext(SelectedNoteContext);
+  if (context === undefined) {
+    throw new Error(
+      "useSelectedNote must be used within a SelectedNoteProvider"
+    );
+  }
+  return context;
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -8,6 +8,7 @@ import { SelectedTopicProvider } from "~/contexts/SelectedTopicContext";
 import { Loading } from "~/components/Loading";
 import { LoadingProvider } from "~/contexts/LoadingContext";
 import { ToastContainer } from "react-toastify";
+import { SelectedNoteProvider } from "~/contexts/SelectedNoteContext";
 
 export default function Home() {
   const { data: sessionData, status: sessionLoading } = useSession();
@@ -25,7 +26,9 @@ export default function Home() {
             <Loading />
           ) : sessionData?.user ? (
             <SelectedTopicProvider>
-              <Content />
+              <SelectedNoteProvider>
+                <Content />
+              </SelectedNoteProvider>
             </SelectedTopicProvider>
           ) : (
             <Principal />

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -15,4 +15,12 @@
     .min-h {
         min-height: 45vh;
     }
+
+    .widthMobile {
+        width: 100%;
+    }
+
+    .flexWrow {
+        flex-grow: 1;
+    }
 }