From 180544d40233780e3e8fca9fb345c63fafa7aba9 Mon Sep 17 00:00:00 2001 From: SteveGremory Date: Fri, 25 Aug 2023 01:30:09 +0530 Subject: [PATCH] Fixed some fatal SSR and CSR related issues and coincidentally cleaned up some code. --- app/page.tsx | 251 ++++++++++++++++++++++--------------- app/tasks/page.tsx | 232 ---------------------------------- components/date/date.tsx | 51 ++++++++ components/modal/modal.tsx | 1 + components/notes/notes.tsx | 88 ++++++++----- components/task/task.tsx | 88 ++++++++----- 6 files changed, 309 insertions(+), 402 deletions(-) delete mode 100644 app/tasks/page.tsx create mode 100644 components/date/date.tsx diff --git a/app/page.tsx b/app/page.tsx index 7a8286b..c699b4e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,113 +1,160 @@ -import Image from 'next/image' +"use client"; +import React from "react"; +import dynamic from "next/dynamic"; +import Image from "next/image"; +import { poppins, raleway } from "./layout"; + +const Task = dynamic(() => import("@/components/task/task"), { ssr: false }); +const Note = dynamic(() => import("@/components/notes/notes"), { ssr: false }); +const Date = dynamic(() => import("@/components/date/date"), { ssr: false }); +const CustomModal = dynamic(() => import("@/components/modal/modal"), { + ssr: false, +}); + +import { useDisclosure } from "@nextui-org/react"; + +const tasks_arr = [ + { + name: "Code", + time: "10:00AM, 27th Feb, 2024", + key: 1, + }, + { + name: "Read", + time: "11:00AM, 27th Feb, 2024", + key: 2, + }, + { + name: "Eat", + time: "12:00PM, 27th Feb, 2024", + key: 3, + }, + { + name: "Sleep", + time: "1:00PM, 27th Feb, 2024", + key: 4, + }, + { + name: "Repeat", + time: "2:00PM, 27th Feb, 2024", + key: 5, + }, +]; + +const notes_arr = [ + { + name: "C++ Pt. 1", + time: "10:00AM, 27th Feb, 2024", + key: 1, + }, + { + name: "C++ Pt. 2", + time: "11:00AM, 27th Feb, 2024", + key: 2, + }, + { + name: "C++ Pt. 3", + time: "12:00PM, 27th Feb, 2024", + key: 3, + }, + { + name: "C++ Pt. 4", + time: "1:00PM, 27th Feb, 2024", + key: 4, + }, + { + name: "C++ Pt. 5", + time: "2:00PM, 27th Feb, 2024", + key: 5, + }, +]; export default function Home() { + const { isOpen, onOpen, onOpenChange } = useDisclosure(); + return ( -
-
-

- Get started by editing  - app/page.tsx -

-
- - By{' '} - Vercel Logo - +
+ Background + {/* Outer Flexbox for the division into 25:75 */} +
+ {/* Sidebar content goes here */} +
+
+
+

Good Evening,

+

Steve!

+ +
+ +
+ +
+
-
-
- Next.js Logo -
+ -
- ) + + + + ); } diff --git a/app/tasks/page.tsx b/app/tasks/page.tsx deleted file mode 100644 index bfc10c1..0000000 --- a/app/tasks/page.tsx +++ /dev/null @@ -1,232 +0,0 @@ -"use client"; -import React from "react"; -import { useState } from "react"; -import Image from "next/image"; -import { poppins, raleway } from "../layout"; -import { Task, TaskInterface } from "@/components/task/task"; -import { Note, NoteInterface } from "@/components/notes/notes"; -import CustomModal from "@/components/modal/modal"; -import { useDisclosure } from "@nextui-org/react"; -import { motion, AnimatePresence } from "framer-motion"; - -function getdateformatted() { - var days = [ - "Sundaay", - "Monday", - "Tuesday", - "Wednesday", - "Thrusday", - "Friday", - "Saturday", - ]; - var months = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December", - ]; - let date = new Date(); - - let day_name: string = days[date.getDay()]; - let todays_date: number = date.getDate(); - let month: string = months[date.getMonth()]; - - return `${day_name}, ${todays_date} ${month}`; -} - -const tasks_arr: TaskInterface[] = [ - { - name: "Code", - time: "10:00AM, 27th Feb, 2024", - key: 1, - }, - { - name: "Read", - time: "11:00AM, 27th Feb, 2024", - key: 2, - }, - { - name: "Eat", - time: "12:00PM, 27th Feb, 2024", - key: 3, - }, - { - name: "Sleep", - time: "1:00PM, 27th Feb, 2024", - key: 4, - }, - { - name: "Repeat", - time: "2:00PM, 27th Feb, 2024", - key: 5, - }, -]; - -const notes_arr = [ - { - name: "C++ Pt. 1", - time: "10:00AM, 27th Feb, 2024", - key: 1, - }, - { - name: "C++ Pt. 2", - time: "11:00AM, 27th Feb, 2024", - key: 2, - }, - { - name: "C++ Pt. 3", - time: "12:00PM, 27th Feb, 2024", - key: 3, - }, - { - name: "C++ Pt. 4", - time: "1:00PM, 27th Feb, 2024", - key: 4, - }, - { - name: "C++ Pt. 5", - time: "2:00PM, 27th Feb, 2024", - key: 5, - }, -]; - -export default function Home() { - const { isOpen, onOpen, onOpenChange } = useDisclosure(); - const [tasks, setTask] = useState(tasks_arr); - const [notes, setNote] = useState(notes_arr); - - return ( -
- Background - {/* Outer Flexbox for the division into 25:75 */} -
- {/* Sidebar content goes here */} -
-
-
-

Good Evening,

-

Steve!

- -

- {getdateformatted()} -

-
- -
- -
-
-
- -
-
-
-
-
-
-

Tasks

- - -
- - - - {tasks.map((task: TaskInterface, index) => ( - - - - ))} - - -
-
-
- -
-
-
-
-

Notes

- - -
- - - - {notes.map((note: NoteInterface, index) => ( - - - - ))} - - -
-
-
-
-
-
- - -
- ); -} diff --git a/components/date/date.tsx b/components/date/date.tsx new file mode 100644 index 0000000..1a56efe --- /dev/null +++ b/components/date/date.tsx @@ -0,0 +1,51 @@ +"use client"; + +import { raleway } from "@/app/layout"; +import React, { useState } from "react"; + +const Date = () => { + function getdateformatted() { + var days = [ + "Sundaay", + "Monday", + "Tuesday", + "Wednesday", + "Thrusday", + "Friday", + "Saturday", + ]; + var months = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ]; + let date: any = new window.Date(); + + let day_name: string = days[date.getDay()]; + let todays_date: number = date.getDate(); + let month: string = months[date.getMonth()]; + + return `${day_name}, ${todays_date} ${month}`; + } + const [date, setDate] = useState(getdateformatted()); + + // I didn't have useEffect before in this component, hence it was never triggering a re-render ! + React.useEffect(() => { + setDate(getdateformatted()); + }, []); + + return ( +

{date}

+ ); +}; + +export default Date; diff --git a/components/modal/modal.tsx b/components/modal/modal.tsx index 534af2f..2e28d1f 100644 --- a/components/modal/modal.tsx +++ b/components/modal/modal.tsx @@ -1,3 +1,4 @@ +"use client"; import { Modal, ModalContent, diff --git a/components/notes/notes.tsx b/components/notes/notes.tsx index d523fae..6a13bd3 100644 --- a/components/notes/notes.tsx +++ b/components/notes/notes.tsx @@ -1,5 +1,9 @@ +"use client"; +import { poppins } from "@/app/layout"; +import { AnimatePresence, motion } from "framer-motion"; import { NextPage } from "next"; import Image from "next/image"; +import { useState } from "react"; export interface NoteInterface { name: string; @@ -7,44 +11,60 @@ export interface NoteInterface { key: number; } interface Props { - note: NoteInterface; - index: number; - setter: any; + notes_array: NoteInterface[]; } -export const Note: NextPage = (props) => { +const Note: NextPage = (props) => { + const [notes, setNotes] = useState(props.notes_array); return ( <> - {/* Item starts */} -
-
-
-

- {props.note.name} -

-

{props.note.time}

-
- -
-
- {/* Item ends */} + + + {notes.map((note: NoteInterface, index: number) => ( + + {/* Item starts */} +
+
+
+

+ {note.name} +

+

{note.time}

+
+ + Remove a note + setNotes((prevNotes) => + prevNotes.filter((_, i) => i !== index) + ) + } + /> + +
+
+ {/* Item ends */} + + ))} + + ); }; + +export default Note; diff --git a/components/task/task.tsx b/components/task/task.tsx index 27d5a76..ea33865 100644 --- a/components/task/task.tsx +++ b/components/task/task.tsx @@ -1,6 +1,9 @@ +"use client"; import { NextPage } from "next"; import Image from "next/image"; import { motion, AnimatePresence } from "framer-motion"; +import { useState } from "react"; +import { poppins } from "@/app/layout"; export interface TaskInterface { name: string; @@ -9,44 +12,61 @@ export interface TaskInterface { } interface Props { - task: TaskInterface; - setter: any; - index: number; + tasks_array: TaskInterface[]; } -export const Task: NextPage = (props) => { +const Task: NextPage = (props) => { + const [tasks, setTasks] = useState(props.tasks_array); + return ( <> - {/* Item starts */} -
-
-
-

- {props.task.name} -

-

{props.task.time}

-
- - Remove a task { - props.setter((prevItems: any) => { - let arr = [...prevItems]; - if (props.index > -1) { - arr.splice(props.index, 1); - } - return arr; - }); - }} - /> - -
-
- {/* Item ends */} + + + {tasks.map((task: TaskInterface, index: number) => ( + + {/* Item starts */} +
+
+
+

+ {task.name} +

+

{task.time}

+
+ + Remove a task + setTasks((prevTasks) => + prevTasks.filter((_, i) => i !== index) + ) + } + /> + +
+
+ {/* Item ends */} + + ))} + + ); }; + +export default Task;