Fm/refactoring

package.json

@@ -31,9 +31,11 @@
     "interval-tree-type": "^1.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "rrule": "^2.6.8",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.2.1",
+    "typescript": "^4.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",

src/App.styles.tsx

@@ -6,7 +6,14 @@ export const AppGlobalStyles = createGlobalStyle`
   }
 
   :root {
+    /* colors */
     --colors-primary: #000;
+    --primary-purple: #3D2D6B;
+    --primary-purple-transparent: rgba(73,58,117,0.33);
+    --primary-blue: #2825A6;
+    --primary-blue-transparent: rgba(40,37,166,0.33);
+
+    --navbar-height: 70px;
   }
 
   html,

src/App.tsx

@@ -12,7 +12,7 @@ const App = () => {
       <AppGlobalStyles />
       <Switch>
         <Route exact path="/" component={Home} />
-        <Route exact path="/fing2021" component={CalendarPage} />
+        <Route exact path="/:schoolShortName" component={CalendarPage} />
       </Switch>
     </>
   )

src/Home.tsx

@@ -1,19 +1,14 @@
 import * as React from "react"
 import styled from "styled-components"
 
-import LOGO from "./assets/logo.svg"
+import { Logo } from "./components/Logo"
 
 class Home extends React.Component {
   render() {
     return (
       <Main>
         <h2>
-          <img
-            src={LOGO}
-            alt="ClassTimes Logo"
-            title="ClassTimes"
-            height={112}
-          />
+          <Logo height={112} />
         </h2>
         <h3>Follow your school classes</h3>
       </Main>

src/components/Button.tsx

@@ -0,0 +1,16 @@
+import styled from "styled-components"
+
+export const Button = styled.a`
+  border-radius: 5px;
+  color: var(--primary-blue);
+  cursor: pointer;
+  margin: 5px;
+  padding: 12px;
+  text-decoration: none;
+  transition: all 0.2s linear;
+
+  &:hover {
+    box-shadow: inset 0 0 0 2px var(--primary-blue),
+      0 1px 4px 0 var(--primary-blue-transparent);
+  }
+`

src/components/Calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import styled, { createGlobalStyle } from "styled-components"
 import dayjs, { Dayjs } from "dayjs"
 import localeData from "dayjs/plugin/localeData"
@@ -7,7 +7,7 @@ import localizedFormat from "dayjs/plugin/localizedFormat"
 import weekday from "dayjs/plugin/weekday"
 import timezone from "dayjs/plugin/timezone"
 import utc from "dayjs/plugin/utc"
-import { useQuery, gql } from "@apollo/client"
+import { useQuery } from "@apollo/client"
 import IntervalTree from "interval-tree-type"
 import {
   RRule,
@@ -25,6 +25,15 @@ import {
 } from "../../types"
 import { WeekView } from "./WeekView"
 
+// Hooks
+import { useSchoolCalendar } from "../../pages/CalendarPage/SchoolCalendarContext"
+
+// Queries
+import LIST_CALENDAR_EVENTS_QUERY from "./graphql/listCalendarEventsQuery.graphql"
+
+// Helpers
+import { mapEdges } from "../../helpers/mapEdges"
+
 dayjs.extend(duration)
 dayjs.extend(localeData)
 dayjs.extend(localizedFormat)
@@ -33,37 +42,9 @@ dayjs.extend(utc)
 dayjs.extend(timezone)
 
 //dayjs.locale('en')
-
-const ALL_EVENTS = gql`
-  query getAllEvents {
-    listCalendarEvents(filters: null, first: 2) {
-      edges {
-        node {
-          _id
-          title
-          isAllDay
-          durationHours
-          startDateUtc
-          endDateUtc
-          rrule
-          exceptionsDatesUtc
-          subject {
-            name
-          }
-        }
-        cursor
-      }
-      pageInfo {
-        endCursor
-        hasNextPage
-      }
-    }
-  }
-`
-
 interface ICalendar {
   startAtHour?: number
-  title?: React.ReactNode
+  showHoursCount?: number
   eventTreeCallback: (range: [Dayjs, Dayjs]) => TEventTree
 }
 
@@ -90,14 +71,11 @@ const generateWeekdays = (selectedDate: Dayjs) => {
 const generateNow = () => {
   const now = dayjs()
   // dayjs.localeData/().weekdays()
-
-  // const week = dayjs.duration({ weeks: 1 }).days()
-  // const day =
-  return { now } //JSON.stringify(week)
+  return { now }
 }
 
 export const Calendar: React.FC<ICalendar> = (props) => {
-  const { eventTreeCallback, title, startAtHour } = props
+  const { eventTreeCallback, startAtHour } = props
   const [timezone, setTimezone] = React.useState(() => dayjs.tz.guess())
   const { now } = generateNow()
   const [selectedDate, setSelectedDate] = React.useState(now)
@@ -117,7 +95,6 @@ export const Calendar: React.FC<ICalendar> = (props) => {
   return (
     <CalendarWrapper>
       <GlobalStyles />
-      {title && <CalendarTitle className="title">{title}</CalendarTitle>}
       <CalendarSubtitle className="subtitle">
         {selectedDate.format("MMMM YYYY")}
       </CalendarSubtitle>
@@ -228,15 +205,6 @@ export const eventTreeGenerator: TEventGeneratorTyped = (
               value: clonedEventEnd.toISOString(),
             },
           })
-          console.log("clonedEvent", {
-            ruleDate,
-            clonedEvent,
-            // sd: clonedEvent.startDateUtc
-          })
-          // clonedEvent.endDateUtc = clonedEvent.startDateUtc.add(
-          //   clonedEvent.durationHours,
-          //   "hours"
-          // )
           tree.insert(
             clonedEvent._startDateUtc,
             clonedEvent._endDateUtc,
@@ -245,33 +213,7 @@ export const eventTreeGenerator: TEventGeneratorTyped = (
           // clonedEvent.startDateUtc = clonedEvent.startDateUtc
           // clonedEvent.endDateUtc = clonedEvent.endDateUtc.format()
         }
-
-        console.log({ rule, ruleQuery })
-
-        //  .fromString(
-        //   "DTSTART;TZID=America/Denver:20181101T190000;\n"
-        //   + "RRULE:FREQ=WEEKLY;BYDAY=MO,WE,TH;INTERVAL=1;COUNT=3"
-        // )
-        // const rule = RRule.fromString(
-        //   "DTSTART;TZID=America/Denver:20181101T190000;\n"
-        //   + "RRULE:FREQ=WEEKLY;BYDAY=MO,WE,TH;INTERVAL=1;COUNT=3"
-        // )
-        // // Create a rule:
-        // const rule = new RRule({
-        //   freq: RRule.WEEKLY,
-        //   interval: 5,
-        //   byweekday: [RRule.MO, RRule.FR],
-        //   dtstart: new Date(Date.UTC(2012, 1, 1, 10, 30)),
-        //   until: new Date(Date.UTC(2012, 12, 31))
-        // })
       }
-      // start.valueOf()
-      // console.log("Adding event to tree", {
-      //   start,
-      //   end,
-      //   startValueOf: start.valueOf(),
-      //   endValueOf: end.valueOf()
-      // })
     }
 
     return {
@@ -284,21 +226,15 @@ export const eventTreeGenerator: TEventGeneratorTyped = (
 }
 
 export const CalendarWithData = () => {
-  // TODO: Handle unauthorized?
-  const { loading, error, data } = useQuery<GetAllEvents>(ALL_EVENTS)
-
-  const calendarEventEdges = data?.listCalendarEvents?.edges
-
-  const title = calendarEventEdges?.[0]?.node?.subject?.name // Placeholder!
-  const events = calendarEventEdges?.map((edge) => edge.node)
+  const { calendarEvents } = useSchoolCalendar()
 
   const eventTreeCallback = React.useCallback(
     (range: [Dayjs, Dayjs]) => {
-      const result = eventTreeGenerator(events, range)
+      const result = eventTreeGenerator(calendarEvents, range)
       console.log("save eventTree", result)
       return result
     },
-    [data, events]
+    [calendarEvents]
   )
 
   // if (eventTree) {
@@ -315,7 +251,7 @@ export const CalendarWithData = () => {
       <Calendar
         startAtHour={5.8}
         showHoursCount={10}
-        {...{ title, eventTreeCallback }}
+        {...{ eventTreeCallback }}
       />
       {/* <Pre>
         loading: {loading ? "loading..." : "loaded"} <br />
@@ -327,14 +263,13 @@ export const CalendarWithData = () => {
 }
 
 const CalendarWrapper = styled.div`
-  border: 1px solid black;
+  height: 100%;
 `
 
 const Pre = styled.pre`
   text-align: left;
 `
 
-const CalendarTitle = styled.h2``
 const CalendarSubtitle = styled.div``
 const CalendarTimezone = styled.div``
 

src/components/Calendar/WeekView.tsx

@@ -258,7 +258,6 @@ const WeekViewBody: React.FC<IWeekViewBody> = (props) => {
                       const colCount = group.length
                       return Array.from(col).map((ev, eventIndex) => {
                         const { data: event, startDate } = ev
-
                         let topPosition =
                           startDate.hour() + startDate.minute() / 60
                         topPosition *= 100
@@ -267,6 +266,7 @@ const WeekViewBody: React.FC<IWeekViewBody> = (props) => {
 
                         const duration = (event.durationHours * 100) / 24
                         const isRecurrent = !!event.rrule
+                        const toggled = event.toggled
                         // console.log("[WeekViewEventItem]", {
                         //   event,
                         //   startDate,
@@ -278,6 +278,7 @@ const WeekViewBody: React.FC<IWeekViewBody> = (props) => {
                         return (
                           <WeekViewEventWrapper
                             {...{
+                              toggled,
                               isRecurrent,
                               colIndex,
                               colCount,
@@ -570,10 +571,11 @@ interface IWeekViewEventWrapper {
   colIndex: number
   colCount: number
   isRecurrent: boolean
+  toggled: boolean
 }
 
 const WeekViewEventWrapper = styled.div<IWeekViewEventWrapper>`
-  display: flex;
+  display: ${(props) => (props.toggled ? "flex" : "none")};
   line-height: 1;
   position: absolute;
   top: ${(p) => (p.topPosition ? `${p.topPosition}%` : 0)};

src/components/Calendar/graphql/listCalendarEventsQuery.graphql

@@ -0,0 +1,34 @@
+query listCalendarEventsQuery(
+  $filters: ListCalendarEventsInput
+  $first: Float
+  $after: String
+  $before: String
+) {
+  listCalendarEvents(
+    filters: $filters
+    first: $first
+    after: $after
+    before: $before
+  ) {
+    edges {
+      node {
+        _id
+        title
+        isAllDay
+        durationHours
+        startDateUtc
+        endDateUtc
+        rrule
+        exceptionsDatesUtc
+        subject {
+          name
+        }
+      }
+      cursor
+    }
+    pageInfo {
+      endCursor
+      hasNextPage
+    }
+  }
+}

src/components/Calendar/graphql/listSubjectsQuery.graphql

@@ -0,0 +1,25 @@
+query listSubjectsQuery(
+  $filters: ListSubjectInput
+  $first: Float
+  $after: String
+  $before: String
+) {
+  listSubjects(
+    filters: $filters
+    first: $first
+    after: $after
+    before: $before
+  ) {
+    edges {
+      node {
+        _id
+        name
+      }
+      cursor
+    }
+    pageInfo {
+      endCursor
+      hasNextPage
+    }
+  }
+}