LockCalendar.txs

Changed save function so it lives on projects page as a modal.

src/App.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { HashRouter, Route, Routes } from "react-router-dom";
 import Projects from "./pages/Projects";
 import Editor from "./pages/Editor";
-import Save from "./pages/Save";
 import Home from "./pages/Home";
 import About from "./pages/About";
 import NotFound from "./pages/NotFound";
@@ -14,7 +13,6 @@ export default function App() {
         <Route path="/" element={<Home />} />
         <Route path="/projects" element={<Projects />} />
         <Route path="/edit/:id" element={<Editor />} />
-        <Route path="/edit/:id/save" element={<Save />} />
         <Route path="/about" element={<About />} />
         <Route path="/*" element={<NotFound />} />
       </Routes>

src/components/LockCalendar.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { Lock } from "lucide-react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { getLocalProjects, formatDate, saveProject } from "../utils/utils";
+import Calendar from "react-calendar";
+import { useParams } from "react-router-dom";
+
+export default function LockCalendar() {
+  const params = useParams();
+
+  const [date, setDate] = useState(new Date());
+  const [open, setOpen] = useState(false);
+  console.log(date);
+
+  const handleChange = (date) => {
+    setDate(date);
+  };
+
+  const handleClick = () => {
+    const localProjects = getLocalProjects();
+    const lockable = localProjects.find((project) => project.id === params.id);
+
+    const sessions = lockable.sessions;
+
+    const sessionNumber = sessions.length + 1;
+    if (lockable.hot === "") return;
+
+    sessions.push({
+      sessionId: sessionNumber,
+      cold: lockable.hot,
+      unlockDate: formatDate(date),
+    });
+    lockable.hot = "";
+    saveProject(lockable);
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger className="">
+        <Lock className="text-slate-300 mr-3" strokeWidth={1} />
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0" />
+        <Dialog.Content className="z-20 data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[600px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-slate-800 p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none">
+          <Dialog.Title className="m-0 text-[17px] text-slate-300 font-medium">
+            Ready to Lock Your Current Session?
+          </Dialog.Title>
+          <Dialog.Description className="mt-[10px] mb-5 text-[15px] text-white font-thin tracking-wider leading-normal">
+            Select a Lock date. Our recommendation is 3 months from now. You
+            will still be able to use the text for reference if need be, but you
+            will not be able to edit it until the lock date has passed.
+          </Dialog.Description>
+          <div className="flex flex-col items-center">
+            <Calendar
+              className="bg-slate-800 font-thin tracking-wider"
+              onChange={handleChange}
+              value={date}
+            />
+            <a href="#/projects">
+              <input
+                type="submit"
+                className="mt-4 text-slate-300 font-thin tracking-wider hover:text-cyan-300"
+                onClick={handleClick}
+              />
+            </a>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

src/components/Pomodoro.tsx

@@ -111,7 +111,7 @@ export default function Pomodoro() {
   };
 
   return (
-    <div className="mr-3 text-slate-300 font-thin tracking-wider">
+    <div className="mt-1.5 mr-3 text-slate-300 font-thin tracking-wider">
       {modal && (
         <div
           className="fixed w-full h-full inset-0 opacity-0"

src/pages/About.tsx

@@ -77,11 +77,14 @@ export default function About() {
           </h1>
           <p className="text-s md:text-lg text-slate-300 font-thin tracking-wider">
             Think-Write is designed to be a self-doubt killer. By locking up
-            writing "sessions", I hope to allow budding writers to be
-            unencumbered and press on despite all odds, so they may truly enjoy
-            the project they're working on, free from self-doubt. This, to me,
-            is the future of writing, and I invite you to join me on this
-            journey.
+            writing "sessions", I hope to help budding writers to carry out
+            their work unencumbered and press on despite all odds. That way they
+            may truly enjoy the project they're working on and be free from
+            self-doubt. This, to me, is the future of writing, and I invite you
+            to come with me on this journey.
+          </p>
+          <p className="text-s md:text-lg text-slate-300 font-thin tracking-wider">
+            Until next time,
           </p>
           <p className="text-s md:text-lg text-slate-300 font-thin tracking-wider">
             - Jordan

src/pages/Editor.tsx

@@ -2,15 +2,14 @@ import React from "react";
 import { useState, useEffect } from "react";
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
-import SaveButton from "../components/SaveButton";
 import { useParams } from "react-router-dom";
 import { createProject, formatDate, saveProject } from "../utils/utils";
 import SessionList from "../components/SessionList";
 import SessionDialog from "../components/SessionDialog";
 import Navbar from "../components/Navbar";
 import * as Progress from "@radix-ui/react-progress";
 import Pomodoro from "../components/Pomodoro";
-import { Lock } from "lucide-react";
+import LockCalendar from "../components/LockCalendar";
 
 const ProgressBar = ({ progress }) => {
   return (
@@ -29,10 +28,10 @@ const ProgressBar = ({ progress }) => {
 
 export default function Editor() {
   const params = useParams();
-  const id = params.id;
+  const projectId = params.id;
 
-  let { sessions, hot = "", title = "" } = createProject(id);
-  const sessionNumber = sessions.length + 1;
+  let { sessions, hot = "", title = "" } = createProject(projectId);
+  const sessionId = sessions.length + 1;
 
   const [text, setText] = useState(hot);
   const [data, setData] = useState({
@@ -44,7 +43,7 @@ export default function Editor() {
 
   useEffect(() => {
     saveProject({
-      id: id,
+      id: projectId,
       title: data.currentTitle,
       hot: text,
       modified: formatDate(new Date()),
@@ -93,10 +92,15 @@ export default function Editor() {
         <h1 className="self-center text-lg md:text-3xl text-cyan-300 tracking-wider my-3 font-thin">
           {data.currentTitle}
         </h1>
-        <SessionList id={id} sessions={sessions} hot={hot} title={title} />
+        <SessionList
+          id={projectId}
+          sessions={sessions}
+          hot={hot}
+          title={title}
+        />
         <div className="w-4/5 flex justify-start">
           <p className="text-slate-300 font-thin tracking-wider">
-            Session {sessionNumber}, {formatDate(new Date())}
+            Session {sessionId}, {formatDate(new Date())}
           </p>
         </div>
         <div className="w-4/5 h-px bg-gray-200 my-1 mx-2 opacity-50" />
@@ -112,7 +116,7 @@ export default function Editor() {
         <div className="w-4/5 h-px mb-4 bg-gray-200 my-1 mx-2 opacity-50" />
         <div className="w-4/5 flex justify-end contents-center">
           <Pomodoro />
-          <Lock className="text-slate-300 mr-3" strokeWidth={1} />
+          <LockCalendar />
           <SessionDialog
             title={title}
             onSubmit={(data) => {
@@ -124,7 +128,6 @@ export default function Editor() {
         {data.goalType !== "noGoal" && data.goalNumber !== 0 && (
           <ProgressBar progress={progress} />
         )}
-        <SaveButton id={id} />
       </div>
     </div>
   );

src/pages/NotFound.tsx

@@ -13,8 +13,8 @@ export default function NotFound() {
           className="w-28 md: w-72 mt-4 mb-4 md:mb-10"
         />
         <p className="text-cyan-300 text-lg md:text-2xl font-thin tracking-wider">
-          We're not sure what you're looking for, Chief, but this ain't it.
-          Show's over. Go on. Get out of here!
+          We're not sure what you're looking for, but this ain't it. Show's
+          over. Go on. Get out of here!
         </p>
       </section>
     </div>