Merge pull request #123 from sqrl-planner/feature/facelift

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

components/ShareLink.tsx

@@ -46,7 +46,7 @@ const ShareLink = () => {
   const { data: shortLink, isLoading, isError } = useShortLink(fullUrl)
 
   useEffect(() => {
-    if(shortLink?.shortUrl) setUrlToShare(shortLink.shortUrl)
+    if (shortLink?.shortUrl) setUrlToShare(shortLink.shortUrl)
   }, [shortLink])
 
   const { onCopy, hasCopied } = useClipboard(urlToShare)

components/TimetableCreationButton.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+
+import { Box, Button, useDisclosure } from "@chakra-ui/react"
+import { useTranslation } from "next-i18next"
+import TimetableCreationModal from "./TimetableCreationModal"
+
+type Props = {
+  // newLoading: boolean
+  // setNewLoading: React.Dispatch<React.SetStateAction<boolean>>
+  timetables: { [id: string]: { key: string; name: string } }
+}
+
+const TimetableCreationButton = ({
+  // newLoading,
+  // setNewLoading,
+  timetables,
+}: Props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const { t } = useTranslation("index")
+
+  return (
+    <>
+      <TimetableCreationModal
+        {...{
+          isOpen,
+          onClose,
+          timetables,
+        }}
+      />
+      <Button
+        border="2px dashed"
+        rounded="xl"
+        color="blue.700"
+        borderColor="blue.500"
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        padding={12}
+        // disabled={newLoading}
+        onClick={onOpen}
+        minH="2xs"
+      >
+        <Box
+          display="flex"
+          flexDirection="column"
+          position="relative"
+          bottom="1"
+        >
+          <Box fontSize="7xl">+</Box>
+          <Box>{t("create-timetable")}</Box>
+        </Box>
+      </Button>
+    </>
+  )
+}
+
+export default TimetableCreationButton

components/TimetableCreationModal.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react"
+import {
+  Text,
+  Flex,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  VStack,
+  FormControl,
+  FormHelperText,
+  Select,
+  Input,
+} from "@chakra-ui/react"
+import { useTranslation } from "next-i18next"
+import { useMutation } from "@apollo/client"
+import { useRouter } from "next/router"
+import { CREATE_TIMETABLE } from "../operations/mutations/createTimetable"
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  timetables: { [id: string]: { key: string; name: string } }
+}
+
+const TimetableCreationModal = ({ isOpen, onClose, timetables }: Props) => {
+  const { t } = useTranslation("index")
+  const [newLoading, setNewLoading] = useState(false)
+  const [name, setName] = useState("")
+
+  const [createTimetable] = useMutation(CREATE_TIMETABLE)
+  const router = useRouter()
+
+  const createNewTimetable = () => {
+    setNewLoading(true)
+
+    createTimetable({
+      onCompleted: (data) => {
+        const {
+          key,
+          timetable: { id, name },
+        } = data.createTimetable
+        localStorage.setItem(
+          "timetables",
+          JSON.stringify({
+            ...timetables,
+            [id]: { key, name },
+          })
+        )
+
+        router.push(`/timetable/${id}`)
+      },
+      variables: {
+        name: name || undefined,
+      },
+    })
+  }
+
+  return (
+    <Modal
+      closeOnEsc={!newLoading}
+      closeOnOverlayClick={!newLoading}
+      size="xl"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            createNewTimetable()
+          }}
+        >
+          <ModalHeader>Create a new timetable</ModalHeader>
+          {!newLoading && <ModalCloseButton />}
+          <ModalBody>
+            <VStack width="100%" fontWeight={500} spacing={8}>
+              <FormControl>
+                <Flex
+                  width="100%"
+                  alignItems="center"
+                  justifyContent="space-between"
+                >
+                  <Text as="span" display="flex" alignItems="center">
+                    {t("select-term")}
+                  </Text>
+                  <Select shadow="sm" fontWeight={500} width="auto">
+                    <option value="create">
+                      2022 {t("fall")}–2023 {t("winter")}
+                    </option>
+                  </Select>
+                </Flex>
+                <FormHelperText fontWeight={400}>
+                  {t("soon-support-summer-2023")}
+                </FormHelperText>
+              </FormControl>
+
+              <FormControl>
+                <Flex
+                  width="100%"
+                  alignItems="center"
+                  justifyContent="space-between"
+                >
+                  <Text as="span" display="flex" alignItems="center">
+                    {t("name")}
+                  </Text>
+                  <Input
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    autoFocus
+                    width="auto"
+                  />
+                </Flex>
+                <FormHelperText fontWeight={400}>
+                  {t("auto-generated-name")}
+                </FormHelperText>
+              </FormControl>
+            </VStack>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button mr={3} variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" isLoading={newLoading} colorScheme="blue" bg="blue.700">
+              Create timetable
+            </Button>
+          </ModalFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default TimetableCreationModal

operations/mutations/createTimetable.tsx

@@ -1,8 +1,8 @@
 import { gql } from "@apollo/client"
 
 export const CREATE_TIMETABLE = gql`
-  mutation {
-    createTimetable {
+  mutation ($name: String) {
+    createTimetable(name: $name) {
       timetable {
         id
         name