Incomplete calendar component

Jadugars · Mar 8, 2021 · c37b981 · c37b981
1 parent 1e31c02
commit c37b981
Show file tree

Hide file tree

Showing 5 changed files with 230 additions and 82 deletions.
diff --git a/components/calendar.js b/components/calendar.js
@@ -1,6 +1,8 @@
 import * as dayjs from "dayjs";
+import { useEffect, useState } from "react";
 const isToday = require("dayjs/plugin/isToday");
 const isTomorrow = require("dayjs/plugin/isTomorrow");
+import mapSort from "mapsort";
 
 dayjs.extend(isToday);
 dayjs.extend(isTomorrow);
@@ -18,14 +20,30 @@ function TasksDay(props) {
     dayDescription = props.day.format("D MMM");
   }
 
+  const eventsWithTime = props.events.filter((event) => event.startTime);
+  const eventsWithoutTime = props.events.filter((event) => !event.startTime);
+  const sortedEvents = mapSort(
+    eventsWithTime,
+    (el) => el.startTime,
+    (aTime, bTime) => {
+      if (aTime.isBefore(bTime)) {
+        return -1;
+      } else if (bTime.isBefore(aTime)) {
+        return 1;
+      }
+      return 0;
+    }
+  );
+  const finalEventsList = sortedEvents.concat(eventsWithoutTime);
+
   return (
     <div>
       <div className="flex items-baseline">
         <h2 className="text-xl">{dayTitle}</h2>
         <p className="pl-1 text-xs text-gray-500">{dayDescription}</p>
       </div>
       <ul className="max-w-lg pt-2">
-        {props.events.map((event, i) => {
+        {finalEventsList.map((event, i) => {
           return (
             <li
               className="flex justify-between items-center py-2"
@@ -37,6 +55,12 @@ function TasksDay(props) {
                   className="appearance-none rounded-full bg-green-50 h-4 w-4 text-gray-600 ring-2 ring-green-500 checked:bg-green-500 checked:border-transparent "
                 />
                 <span className="ml-2 text-gray-700">{event.title}</span>
+                {event.startTime && (
+                  <span className="ml-2 text-sm text-gray-500">
+                    {event.startTime.format("H:mm a")} to{" "}
+                    {event.endTime.format("H:mm a")}
+                  </span>
+                )}
               </label>
               <div className="flex items-baseline">
                 {event.tags.map((tag, i) => {
@@ -56,67 +80,7 @@ function TasksDay(props) {
   );
 }
 
-function Calendar() {
-  let eventDays = [
-    {
-      day: dayjs(),
-      events: [
-        {
-          title: "Marketing",
-          description: "",
-          people: "Lina Neal",
-          tags: ["Laboratory", "Exam", "RA236"],
-        },
-        {
-          title: "Advertising photography",
-          description: "",
-          people: "Johnny Alwarez",
-          tags: ["Project", "KM107"],
-        },
-        {
-          title: "Mass Media",
-          description: "",
-          people: "Mina Schmidt",
-          tags: ["Lecture", "KM107"],
-        },
-      ],
-    },
-    {
-      day: dayjs().add(1, "day"),
-      events: [
-        {
-          title: "Advertising photography",
-          description: "",
-          people: "Tillie Clarke",
-          tags: ["Project", "KM107"],
-        },
-        {
-          title: "Mass Media",
-          description: "",
-          people: "Mina Schmidt",
-          tags: ["Lecture", "KM107"],
-        },
-      ],
-    },
-    {
-      day: dayjs().add(2, "day"),
-      events: [
-        {
-          title: "Marketing",
-          description: "",
-          people: "Loretta Park",
-          tags: ["Laboratory", "MA101"],
-        },
-        {
-          title: "Graphic Design",
-          description: "",
-          people: "Grace Santiago",
-          tags: ["Seminar", "KM107"],
-        },
-      ],
-    },
-  ];
-
+function Calendar({ eventDays }) {
   return (
     <div className="p-6 space-y-8">
       {eventDays.map((eventDay, i) => {

diff --git a/components/userInput.js b/components/userInput.js
@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimes, faPlusCircle } from "@fortawesome/free-solid-svg-icons";
 import DatePicker from "react-datepicker";
-import axios from "axios";
+import ReactShortcut from "react-shortcut";
 
 import "react-datepicker/dist/react-datepicker.css";
 
@@ -12,26 +12,78 @@ function UserInput() {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    axios({
-      method: "post",
-      url: "http://localhost:5000/send",
-      headers: { "content-type": "application/json" },
-      data: {
-        text: text,
-      },
-    })
-      .then((result) => {
-        console.log(result.data);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
+  const shortcutKeys = [
+    "shift+a",
+    "shift+b",
+    "shift+c",
+    "shift+d",
+    "shift+e",
+    "shift+f",
+    "shift+g",
+    "shift+h",
+    "shift+i",
+    "shift+j",
+    "shift+k",
+    "shift+l",
+    "shift+m",
+    "shift+n",
+    "shift+o",
+    "shift+p",
+    "shift+q",
+    "shift+r",
+    "shift+s",
+    "shift+t",
+    "shift+u",
+    "shift+v",
+    "shift+w",
+    "shift+x",
+    "shift+y",
+    "shift+z",
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+    "g",
+    "h",
+    "i",
+    "j",
+    "k",
+    "l",
+    "m",
+    "n",
+    "o",
+    "p",
+    "q",
+    "r",
+    "s",
+    "t",
+    "u",
+    "v",
+    "w",
+    "x",
+    "y",
+    "z",
+  ];
+  const inputEl = useRef(null);
+  const handleShortcutOpen = () => {
+    setDialogIsOpen(true);
+    inputEl.current.focus();
+  };
+  const handleShortcutClose = () => {
+    setDialogIsOpen(false);
+  };
+  const handleCloseOnEsc = (e) => {
+    if (e.keyCode === 27) {
+      handleShortcutClose();
+    }
   };
 
   return (
     <div className="mx-auto mt-4">
+      <ReactShortcut keys={shortcutKeys} onKeysPressed={handleShortcutOpen} />
+      <ReactShortcut keys={["esc"]} onKeysPressed={handleShortcutClose} />
       <div
         onClick={(e) => setDialogIsOpen(true)}
         className="mx-auto max-w-lg text-gray-400 mt-1 px-4 py-3 flex justify-between w-full shadow-md sm:text-sm border-gray-300 rounded-md"
@@ -58,6 +110,8 @@ function UserInput() {
                     value={text}
                     onChange={(e) => setText(e.target.value)}
                     required
+                    ref={inputEl}
+                    onKeyDown={handleCloseOnEsc}
                   />
                 </div>
                 <button onClick={(e) => setDialogIsOpen(false)}>
@@ -69,7 +123,7 @@ function UserInput() {
                 <p>in</p>
                 <div className="ml-2">
                   <label
-                    htmlFor="country"
+                    htmlFor="timetable"
                     className="sr-only block text-sm font-medium text-gray-700"
                   >
                     Select Timetable:

diff --git a/package.json b/package.json
@@ -17,10 +17,12 @@
     "dayjs": "^1.10.3",
     "firebase": "^8.0.2",
     "formik": "^2.2.5",
+    "mapsort": "^1.0.4",
     "next": "10.0.2",
     "react": "17.0.1",
     "react-datepicker": "^3.4.1",
     "react-dom": "17.0.1",
+    "react-shortcut": "^2.0.9",
     "tailwindcss": "^2.0.1-compat",
     "yup": "^0.30.0"
   },

diff --git a/pages/calendar.js b/pages/calendar.js
@@ -1,12 +1,123 @@
 import Layout from "../components/layout";
 import Calendar from "../components/calendar";
 import UserInput from "../components/userInput";
+import * as dayjs from "dayjs";
+import { useEffect, useState } from "react";
 
 function calendarPage() {
+  let eventData = [
+    {
+      day: dayjs(),
+      events: [
+        {
+          title: "Marketing",
+          description: "",
+          startTime: dayjs().hour(11).minute(0),
+          endTime: dayjs().hour(12).minute(0),
+          people: "Lina Neal",
+          tags: ["Laboratory", "Exam", "RA236"],
+        },
+        {
+          title: "Advertising photography",
+          description: "",
+          startTime: dayjs().hour(14).minute(30),
+          endTime: dayjs().hour(16).minute(0),
+          people: "Johnny Alwarez",
+          tags: ["Project", "KM107"],
+        },
+        {
+          title: "Mass Media",
+          description: "",
+          startTime: dayjs().hour(16).minute(0),
+          endTime: dayjs().hour(17).minute(20),
+          people: "Mina Schmidt",
+          tags: ["Lecture", "KM107"],
+        },
+      ],
+    },
+    {
+      day: dayjs().add(1, "day"),
+      events: [
+        {
+          title: "Advertising photography",
+          description: "",
+          startTime: dayjs().hour(11).minute(0),
+          endTime: dayjs().hour(12).minute(0),
+          people: "Tillie Clarke",
+          tags: ["Project", "KM107"],
+        },
+        {
+          title: "Mass Media",
+          description: "",
+          startTime: dayjs().hour(12).minute(0),
+          endTime: dayjs().hour(14).minute(0),
+          people: "Mina Schmidt",
+          tags: ["Lecture", "KM107"],
+        },
+      ],
+    },
+    {
+      day: dayjs().add(2, "day"),
+      events: [
+        {
+          title: "Marketing",
+          description: "",
+          people: "Loretta Park",
+          tags: ["Laboratory", "MA101"],
+        },
+        {
+          title: "Graphic Design",
+          description: "",
+          startTime: dayjs().hour(12).minute(0),
+          endTime: dayjs().hour(14).minute(0),
+          people: "Grace Santiago",
+          tags: ["Seminar", "KM107"],
+        },
+      ],
+    },
+  ];
+
+  const [eventDays, setEventDays] = useState(eventData);
+
+  const addTodo = (
+    date,
+    title,
+    description,
+    startTime,
+    endTime,
+    people,
+    tags
+  ) => {
+    let dateIndex = eventDays.findIndex((el) => el.day.isSame(date));
+
+    if (dateIndex != -1) {
+      //date exists as a eventDay in the array
+      let newEventDayData = eventDays.at(dateIndex).events;
+      newEventDayData.push({
+        title,
+        description,
+        startTime,
+        endTime,
+        people,
+        tags,
+      });
+    }
+  };
+
+  addTodo(
+    dayjs(),
+    "Hello",
+    "There",
+    dayjs().hour(8).minute(0),
+    dayjs().hour(9).minute(0),
+    "Krona",
+    ["General", "Kenobi"]
+  );
+
   return (
     <Layout>
       <UserInput />
-      <Calendar />
+      <Calendar eventDays={eventDays} />
     </Layout>
   );
 }