Implementing calendar and related functionality

package.json

@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "@mui/material": "^5.5.2",
     "@reduxjs/toolkit": "^1.8.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
@@ -25,7 +28,7 @@
     "react-schedule-selector": "^3.0.0",
     "react-scripts": "5.0.0",
     "sass": "^1.49.9",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
     "typescript": "~4.1.5",
     "uuid": "^8.3.2"
   },
@@ -49,5 +52,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-copy-to-clipboard": "^5.0.2"
   }
 }

src/App.tsx

@@ -1,16 +1,20 @@
 import Landing from './pages/Landing';
-import Schedule from './pages/Schedule';
+import Meeting from './pages/Meeting';
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 function App() {
 
+
+
 
   return (
     <>  
       <Router>
         <Routes>
-        <Route path="/" element={<Landing />} />
-        <Route path="/create" element={<Schedule />} />
+          <Route path="/" element={<Landing />} />    
+          <Route path="/:id" element={<Meeting />}>
+
+          </Route>
         </Routes>
       </Router>
     </>

src/api/api.js

@@ -0,0 +1,107 @@
+import axios from "axios";
+import { store } from "../app/store";
+import { setCurMemberSlots, updateMemberSlots } from "../pages/meetingSlice";
+
+const axiosInstance = axios.create({
+  baseURL: "http://localhost:4000",
+});
+
+async function createMeeting(meetingName) {
+  try {
+    const response = await axiosInstance.post(`/api/calendars`, {name: meetingName});
+    return response.data;
+    // {
+    //   "id": integer,
+    //   "name": string,
+    //   "members": []
+    // }
+  } catch(err) {
+    console.log(err);
+  }
+}
+
+async function getMeeting(meetingId) {
+  try{
+    const response = await axiosInstance.get(`/api/calendars/${meetingId}`);
+    return response.data;
+    // {
+    //   "id": integer, (meetingId)
+    //   "name": string,
+    //   "members": list[Member]
+    // }
+  } catch(err){
+    console.log(err)
+  }
+}
+
+async function renameMeeting(meetingId, newName) {
+  try{
+    const response = await axiosInstance.patch(`/api/calendars/${meetingId}`, {name:newName});
+    return response.data;
+    // {
+    //   "id": integer, (meetingId)
+    //   "name": string,
+    //   "members": list[Member]
+    // }
+  } catch(err){
+    console.log(err)
+  }
+}
+
+async function addNewMember(meetingId, memberName) {
+  try {
+    const response = await axiosInstance.post(`/api/calendars/${meetingId}/members/`, {name: memberName});
+    return response.data;
+    // {
+    //   "id": integer, 
+    //   "name": string,
+    //   "timeSlots": []
+    // }
+  } catch(err) {
+    console.log(err);
+  }
+}
+
+async function setAvail(meetingId, memberId, timeSlots) {
+  try {
+    store.dispatch(setCurMemberSlots(timeSlots))
+    const response = await axiosInstance.put(`/api/calendars/${meetingId}/members/${memberId}`, { timeSlots });
+    store.dispatch(updateMemberSlots({id: memberId, name: response.data.name, timeSlots: timeSlots }))
+    return response.data;
+    // {
+    //   "id": integer
+    //   "name": string
+    //   "timeSlots": list[TimeSlot]
+    // }
+  } catch(err) {
+    console.log(err);
+  }
+}
+
+// don't use, member name unique
+async function renameMember(meetingId, memberId, newName) {
+  try{
+    const response = await axiosInstance.patch(`/api/calendars/${meetingId}/members/${memberId}`, {name:newName});
+    return response.data;
+    // {
+    //   "id": integer,
+    //   "name": string,
+    //   "timeSlots": list[TimeSlot]
+    // }
+  } catch(err){
+    console.log(err)
+  }
+}
+
+
+async function removeMember(meetingId, memberId) {
+  try{
+    await axiosInstance.delete(`/api/calendars/${meetingId}/members/${memberId}`);
+  } catch(err) {
+    console.log(err);
+  }
+
+}
+
+export { createMeeting, getMeeting, removeMember, renameMeeting, renameMember, addNewMember, setAvail };
+

src/api/dateFormateConverter.ts

@@ -0,0 +1,44 @@
+import { TimeSlotType } from "../components/TimeSlot"
+
+export function convertTStoDate(slots: TimeSlotType[]){
+    const dayMap : any = {"Sunday":0, "Monday":1, "Tuesday":2, "Wednesday":3, "Thursday":4, "Friday":5, "Saturday":6} as Object
+    const present = new Date();
+    const currYear = present.getFullYear();
+    let currDayOfMonth = present.getDate();
+    let currWeekday = present.getDay();
+    const currMonth = present.getMonth()
+    let converted = [] as Date[]
+    // need to extract hours from no of mins
+    slots.forEach(slot => {
+        let daysToAdd;
+        let slotDay = dayMap[slot.day] as number
+        daysToAdd = slotDay - currWeekday
+        // 1410 becomes 23.5
+        let hourFloat = slot.timeStart/60
+        let hour = Math.floor(hourFloat)
+        let minutes = 60 * (hourFloat % 1) // 30 or 0
+        converted.push(new Date(currYear, currMonth, currDayOfMonth + daysToAdd, hour, minutes))
+    });
+    return converted
+}
+
+export function convertDatetoTS(dates: Date[], meetingId:number, memberId:number ) {
+    const timeData = dates.map((date: Date)=>{
+        const formattedDate = new Intl.DateTimeFormat('en-GB', { weekday: 'long', hour: 'numeric', minute: 'numeric' }).format(date);
+        // "Saturday 23:30"
+        const [day, time] = formattedDate.split(" ");
+        const [hour, minute] = time.split(":");
+        const timeStart = parseInt(hour) * 60 + parseInt(minute);
+        const timeEnd = timeStart + 30;
+        const data = {
+          id : meetingId,
+          memberId,
+          day,
+          timeStart,
+          timeEnd
+        };
+        return data;
+      });
+    return timeData
+}
+

src/app/store.ts

@@ -1,10 +1,10 @@
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
-import meetingNameReducer from '../pages/meetingNameSlice';
+import meetingReducer from '../pages/meetingSlice';
 
 
 export const store = configureStore({
   reducer: {
-    meetingName: meetingNameReducer
+    meeting: meetingReducer
   },
 });
 

src/components/Add.tsx

@@ -0,0 +1,80 @@
+import { addMember, selectMembers, setCurMemberId, setCurMemberName, setCurMemberSlots } from "../pages/meetingSlice";
+import { useAppDispatch, useAppSelector } from "../app/hooks";
+import * as API from "../api/api";
+import { useState } from "react";
+import { TextField } from '@material-ui/core';
+import { TimeSlotType } from "./TimeSlot";
+
+const Add = () => {
+    const dispatch = useAppDispatch();
+    const [memberName, setMemberName] = useState("");
+    const meetingId = useAppSelector(state => state.meeting.id);
+    const members = useAppSelector(state => state.meeting.members);
+    const memberSlots = useAppSelector(state => state.meeting.curMemberSlots);
+    const selectedMembers = useAppSelector(state => state.meeting.selectedMembers);
+
+
+    const addMemberName = (event: any) => {
+        const element = event.currentTarget as HTMLInputElement;
+        setMemberName(element.value);
+    };
+
+    const handleSubmit = async (event: any) => {
+        event.preventDefault();
+        // treat "A" the same as "A   "
+        const trimmedName = memberName.trim()
+        if (trimmedName === "") {
+            alert("Name can't be blank!");
+            return;
+        }
+        if (selectedMembers.length !== 0) {
+            alert("Unselect all members to add new availability!")
+            return;
+        }
+        for (let i = 0; i < members.length; i++) {
+            if (members[i].name === trimmedName) {
+                alert("Member with this name already exists!");
+                return;
+            }
+        }
+
+        // new member
+
+        let data = await API.addNewMember(meetingId, trimmedName);  
+        console.log("create new member")   
+        dispatch(setCurMemberId(data.id));
+        dispatch(setCurMemberName(data.name));
+        dispatch(addMember({ id: data.id, name: data.name, timeSlots: data.timeSlots }));
+
+        // memberId is undefined in slots at this point
+        const memberSlotsWithId = memberSlots.map((slot: TimeSlotType) => {
+            return {...slot, memberId: data.id}
+        })
+
+        API.setAvail(meetingId, data.id, memberSlotsWithId)
+
+    };
+
+    return (
+        <div className = "row">    
+            <div className="col" style={{padding: "40px"}}>
+                <TextField 
+                    placeholder="New member name"
+                    value={memberName}
+                    onChange={addMemberName}
+                />
+            </div>
+            <div className="col">
+                <button 
+                    type="submit" 
+                    className="btn btn--add btn__text"
+                    onClick={handleSubmit}
+                    >
+                    Add
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default Add;

src/components/AddAvail.tsx

@@ -0,0 +1,29 @@
+import * as API from "../api/api";
+
+
+async function addAvail(meetingId: number, memberId: number, timeSlots: Array<Date>) {
+
+  if (meetingId && memberId && timeSlots.length !== 0) {
+    const timeData = timeSlots.map((date: Date)=>{
+      const formattedDate = new Intl.DateTimeFormat('en-GB', { weekday: 'long', hour: 'numeric', minute: 'numeric' }).format(date);
+      // "Saturday 23:30"
+      const [day, time] = formattedDate.split(" ");
+      const [hour, minute] = time.split(":");
+      const timeStart = parseInt(hour) * 60 + parseInt(minute);
+      const timeEnd = timeStart + 30;
+      const data = {
+        id : meetingId,
+        memberId,
+        day,
+        timeStart,
+        timeEnd
+      };
+      return data;
+    });
+    await API.setAvail(meetingId, memberId, timeData);
+    console.log("set member availability succeeded");
+  }
+
+}
+
+export { addAvail };

src/components/Available.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useAppSelector } from '../app/hooks';
+const Available = () => {
+    const members = useAppSelector(state => state.meeting.hoveredMembers)
+
+    return (
+        <div style = {{marginTop: "0%", marginLeft: "-170%", fontSize: "20px", fontFamily: "cursive"}}>
+            Available members: {members.join(", ")}
+        </div>
+    )
+}
+
+export default Available;