Merge pull request #63 from sqrl-planner/develop

Redesign dashboard and add Heap
sqrl-planner · Jun 20, 2022 · 59bef73 · 59bef73
2 parents 257230f + 71c69ff
commit 59bef73
Show file tree

Hide file tree

Showing 17 changed files with 470 additions and 182 deletions.
diff --git a/.env.local.example b/.env.local.example
@@ -1,2 +1,4 @@
 NEXT_PUBLIC_API_URI=http://localhost:8000/graphql
+NEXT_PUBLIC_HEAP_ID=0000000000
 GITHUB_API_KEY="SAMPLE_KEY"
+
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -142,7 +142,7 @@ const Header = ({ setSidebarOpen }: { setSidebarOpen: any }) => {
 
     onOpenSettings()
     router.replace({
-      query: {...routerQuery}
+      query: { ...routerQuery },
     })
   }, [onOpenSettings, router])
 
@@ -172,24 +172,24 @@ const Header = ({ setSidebarOpen }: { setSidebarOpen: any }) => {
     <HeaderComponent bg={useColorModeValue("gray.75", "gray.700")}>
       <AboutModal isOpen={isAboutOpen} onClose={onCloseAbout} />
       <ShareModal isOpen={isShareOpen} onClose={onCloseShare} />
-      <Flex alignItems="center">
-        {
-          <Heading
-            m={4}
-            ml={6}
-            as="h1"
-            fontSize={{ base: "3xl", md: "4xl" }}
-            position="relative"
-          >
-            <Link href="/">
-              <a>
-                <Box w={20} h={10}>
-                  <Image src={SqrlLogo} layout="fill" objectFit="contain" />
-                </Box>
-              </a>
-            </Link>
-          </Heading>
-        }
+      <Flex alignItems="center" pl="10rem">
+        {/* { */}
+        {/*   <Heading */}
+        {/*     m={4} */}
+        {/*     ml={6} */}
+        {/*     as="h1" */}
+        {/*     fontSize={{ base: "3xl", md: "4xl" }} */}
+        {/*     position="relative" */}
+        {/*   > */}
+        {/*     <Link href="/"> */}
+        {/*       <a> */}
+        {/*         <Box as={motion.div} layoutId="sqrl-logo" position="relative" key="sqrl-logo" w={20} h={10}> */}
+        {/*           <Image src={SqrlLogo} layout="fill" objectFit="contain" /> */}
+        {/*         </Box> */}
+        {/*       </a> */}
+        {/*     </Link> */}
+        {/*   </Heading> */}
+        {/* } */}
 
         <Editable
           display="flex"

diff --git a/components/sidebar/CourseView.tsx b/components/sidebar/CourseView.tsx
@@ -97,7 +97,8 @@ const CourseView = ({ setSearchQuery }: { setSearchQuery: Function }) => {
   const { onCopy, hasCopied } = useClipboard(shareUrl)
 
   useEffect(() => {
-    if (!course || !userMeetings || !identifier || !userMeetings[identifier]) return
+    if (!course || !userMeetings || !identifier || !userMeetings[identifier])
+      return
 
     const missing = meetingsMissing(course, userMeetings, identifier)
 

diff --git a/components/sidebar/SearchView/SearchViewHints.tsx b/components/sidebar/SearchView/SearchViewHints.tsx
@@ -19,7 +19,7 @@ const SearchViewHints = ({ setSearchQuery, debouncedZero }: Props) => {
   const { t } = useTranslation(["common", "sidebar"])
 
   return (
-                    <FormHelperText
+    <FormHelperText
       mt={3}
       display="flex"
       alignItems="center"

diff --git a/components/sidebar/Sidebar.tsx b/components/sidebar/Sidebar.tsx
@@ -89,7 +89,7 @@ const Sidebar = () => {
         onChange={(index) => {
           dispatch({ type: "SET_SIDEBAR", payload: index })
 
-          if(index === 1) return
+          if (index === 1) return
 
           const course = courses[sidebarCourse]
 

diff --git a/components/timetable/MeetingComponent.tsx b/components/timetable/MeetingComponent.tsx
@@ -1,6 +1,6 @@
 import { Flex, Tooltip } from "@chakra-ui/react"
 import React from "react"
-import styled from "styled-components"
+import styled, { CSSProperties } from "styled-components"
 import { usePreferences } from "../../src/PreferencesContext"
 import { capitalize } from "../../src/utils/misc"
 import { minuteOffsetToTime } from "../../src/utils/time"
@@ -12,6 +12,7 @@ interface MeetingProps {
   meeting: Meeting
   darkText?: boolean
   twentyFour: boolean
+  style?: CSSProperties
 }
 
 const deliveryAbbreviations: {
@@ -68,7 +69,7 @@ const MeetingInformation = styled.div<{ darkText: boolean }>`
   color: ${({ darkText }) => {
     return darkText ? `#111` : `#eee`
   }};
-  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+  /* transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); */
   display: flex;
   flex-direction: column;
   align-content: flex-start;
@@ -85,7 +86,7 @@ const MeetingTimes = styled.div`
   font-size: 0.9em;
   line-height: 1em;
   opacity: 0.8;
-  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+  /* transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); */
 `
 
 const MeetingDelivery = styled.div``
@@ -111,6 +112,7 @@ const MeetingComponent = ({
   meeting,
   darkText = true,
   twentyFour,
+  style,
 }: MeetingProps) => {
   const {
     state: {
@@ -132,7 +134,7 @@ const MeetingComponent = ({
   const { t } = useTranslation("common")
 
   return (
-    <MeetingInformation darkText={darkText}>
+    <MeetingInformation style={style} darkText={darkText}>
       <MeetingTitle>
         {department + "\u200b"}
         <div>{numeral + "\u200b"}</div>

diff --git a/components/timetable/StyledTimetable.tsx b/components/timetable/StyledTimetable.tsx
@@ -267,8 +267,8 @@ export const MeetingTime = styled.div<{
   }
 
   padding-right: 0.3em;
-  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1),
-    box-shadow 0s cubic-bezier(0.645, 0.045, 0.355, 1);
+  /* transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), */
+  /*   box-shadow 0s cubic-bezier(0.645, 0.045, 0.355, 1); */
   background-color: ${({ courseKey = 0, palette, dark }) =>
     courseKeyToColour(courseKey, dark, palettes[palette] as any)};
 

diff --git a/components/timetable/Timetable.tsx b/components/timetable/Timetable.tsx
@@ -71,6 +71,7 @@ type Props = {
    * The days of the week to include on the timetable.
    */
   days?: Day[]
+  abstract?: boolean
 }
 
 export const Timetable = ({
@@ -85,6 +86,7 @@ export const Timetable = ({
   dark = false,
   emphasizeOnHover = true,
   days = WEEK_DAYS,
+  abstract = false,
 }: Props) => {
   const {
     state: { hoverCourseKey },
@@ -122,7 +124,7 @@ export const Timetable = ({
     const timeLabel = minuteOffsetToTime(currentTime, twentyFour)
     const cells = [
       <StyledTimeLabelTd key={currentTime} className="time">
-        {timeLabel}
+        {!abstract && timeLabel}
       </StyledTimeLabelTd>,
     ]
 
@@ -211,13 +213,16 @@ export const Timetable = ({
                       : "",
                   cursor: meeting.identifier === sidebarCourse ? "default" : "",
                   opacity: shouldDim ? "0.3" : "",
+                  borderRadius: abstract ? "0.8rem" : "",
                 }}
               >
-                <MeetingComponent
-                  darkText={!dark}
-                  meeting={meeting}
-                  twentyFour={twentyFour}
-                />
+                {!abstract && (
+                  <MeetingComponent
+                    darkText={!dark}
+                    meeting={meeting}
+                    twentyFour={twentyFour}
+                  />
+                )}
               </MeetingTime>
             </MeetingTimeCell>
           )
@@ -274,7 +279,7 @@ export const Timetable = ({
                   }% + 0.1rem)`,
                   backgroundColor:
                     highlightConflicts &&
-                    // meeting.identifier !== sidebarCourse &&
+                    meeting.identifier !== sidebarCourse &&
                     (!(hoverCourseKey === meeting.courseKey) ||
                       !emphasizeOnHover) &&
                     !(
@@ -297,6 +302,7 @@ export const Timetable = ({
                       : "",
                   cursor: meeting.identifier === sidebarCourse ? "default" : "",
                   opacity: shouldDim ? "0.3" : "",
+                  borderRadius: abstract ? "0.8rem" : "",
                 }}
                 courseKey={meeting.courseKey}
                 palette={palette}
@@ -323,21 +329,33 @@ export const Timetable = ({
                   })
                 }}
               >
-                <MeetingComponent
-                  darkText={
-                    !(dark || highlightConflicts) ||
-                    (emphasizeOnHover &&
-                      hoverCourseKey === meeting.courseKey &&
-                      !dark) ||
-                    (meeting.identifier === hoverMeeting.courseIdentifier &&
-                      hoverMeeting.meeting.substring(0, 3) ===
-                        meeting.category.substring(0, 3).toUpperCase() &&
-                      !dark)
-                    //  || meeting.identifier === sidebarCourse
-                  }
-                  meeting={meeting}
-                  twentyFour={twentyFour}
-                />
+                {!abstract && (
+                  <MeetingComponent
+                    style={{
+                      color: !dark
+                        ? hoverCourseKey === meeting.courseKey &&
+                          emphasizeOnHover
+                          ? "black"
+                          : meeting.identifier === sidebarCourse
+                          ? "black"
+                          : "white"
+                        : "white",
+                    }}
+                    darkText={
+                      !(dark || highlightConflicts) ||
+                      (emphasizeOnHover &&
+                        hoverCourseKey === meeting.courseKey &&
+                        !dark) ||
+                      (meeting.identifier === hoverMeeting.courseIdentifier &&
+                        hoverMeeting.meeting.substring(0, 3) ===
+                          meeting.category.substring(0, 3).toUpperCase() &&
+                        !dark)
+                      //  || meeting.identifier === sidebarCourse
+                    }
+                    meeting={meeting}
+                    twentyFour={twentyFour}
+                  />
+                )}
               </MeetingTime>
             )
           })
@@ -376,12 +394,16 @@ export const Timetable = ({
       <StyledTimetable>
         <StyledThead dark={dark}>
           <StyledHead>
-            <StyledTh dark={dark}></StyledTh>
-            {days.map((day, index) => (
-              <StyledTh key={index} dark={dark}>
-                {t(day.toString().substr(0, 3).toLowerCase())}
-              </StyledTh>
-            ))}
+            {!abstract && (
+              <React.Fragment>
+                <StyledTh dark={dark}></StyledTh>
+                {days.map((day, index) => (
+                  <StyledTh key={index} dark={dark}>
+                    {t(day.toString().substr(0, 3).toLowerCase())}
+                  </StyledTh>
+                ))}
+              </React.Fragment>
+            )}
           </StyledHead>
         </StyledThead>
         <StyledTbody>{tableRows}</StyledTbody>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "color": "^4.0.1",
     "cross-fetch": "^3.1.5",
     "framer-motion": "^6.3.11",
+    "fuse.js": "^6.6.2",
     "graphql": "^15.5.1",
     "next": "^12.0.8",
     "next-i18next": "^11.0.0",