Merge pull request #49 from LucidKobold/loading

Loading
2022-04-09 17:47:56 -05:00
parent 281d1c7b53 004927adc7
commit ae9ce83d9c
10 changed files with 90 additions and 23 deletions
--- a/components/calender/DatePicker.tsx
+++ b/components/calender/DatePicker.tsx
@@ -180,7 +180,7 @@ const DatePicker = (): JSX.Element => {
                  py={4}
                >
                  <Heading as="h4" size="sm" fontWeight="semibold">
-                    Required fields indicated with{" "}
+                    {"Required fields indicated with"}
                    <FormValidateEmoji type="Required" />
                  </Heading>
                  <Field name="date" validate={validateDate}>
--- a/components/calender/modals/AddUpdateSticker.tsx
+++ b/components/calender/modals/AddUpdateSticker.tsx
@@ -13,7 +13,7 @@ import {
  SimpleGrid,
  Box
 } from "@chakra-ui/react";
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useRef } from "react";
 import { format, isSameDay } from "date-fns";
 import { Icon } from "@iconify/react";
 import { StickersContext } from "../../../contexts/StickerContext";
@@ -58,7 +58,7 @@ const AddUpdateSticker = ({

  const { addEditSticker } = useContext(StickersContext);

-  // ! Update these states to sat "add" and "edit" for easier reading.
+  // ! Update these states to say "add" and "edit" for easier reading.

  const [modalVariant] = useState<"currDate" | "notCurrDate">(
    isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
@@ -75,6 +75,9 @@ const AddUpdateSticker = ({
    handleClose();
  };

+  // The first sticker to have focus when the modal opens.
+  const initialRef = useRef();
+
  // * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.

  const variants = {
@@ -97,6 +100,7 @@ const AddUpdateSticker = ({
              currSticker={currSticker}
              selectedSticker={selectedSticker}
              updateSelectedSticker={updateSelectedSticker}
+              initialSticker={initialRef}
            />
          </VStack>
        ),
@@ -140,6 +144,7 @@ const AddUpdateSticker = ({
              currSticker={currSticker}
              selectedSticker={selectedSticker}
              updateSelectedSticker={updateSelectedSticker}
+              initialSticker={initialRef}
            />
          </VStack>
        ),
@@ -223,6 +228,7 @@ const AddUpdateSticker = ({
  return (
    <Modal
      isCentered
+      initialFocusRef={initialRef}
      isOpen={isOpen}
      onClose={() => handleClose()}
      motionPreset="slideInBottom"
--- a/components/calender/modals/StickerSelector.tsx
+++ b/components/calender/modals/StickerSelector.tsx
@@ -7,6 +7,7 @@ interface StickerSelectorProps {
  currSticker: StickerVal;
  selectedSticker: StickerVal;
  updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  initialSticker: React.MutableRefObject<undefined>;
 }

 /**
@@ -21,19 +22,21 @@ const StickerSelector = ({
  stickerSet,
  currSticker,
  selectedSticker,
-  updateSelectedSticker
+  updateSelectedSticker,
+  initialSticker
 }: StickerSelectorProps): JSX.Element => {
  const stickers = {
    Demo: (
      <HStack
        w="100%"
        h="auto"
-        justifyContent={"center"}
-        alignContent={"center"}
+        justifyContent="center"
+        alignContent="center"
        spacing={14}
      >
        <Button
          isDisabled={currSticker >= 1}
+          ref={currSticker <= 1 ? initialSticker : null}
          border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
          bg={selectedSticker === 1 && "gray.800"}
          onClick={() => updateSelectedSticker(1)}
@@ -43,6 +46,7 @@ const StickerSelector = ({
        </Button>
        <Button
          isDisabled={currSticker === 0}
+          ref={currSticker >= 1 ? initialSticker : null}
          border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
          bg={selectedSticker === 0 && "gray.800"}
          onClick={() => updateSelectedSticker(0)}
--- a/components/loading/LoadingOverlay.tsx
+++ b/components/loading/LoadingOverlay.tsx
@@ -0,0 +1,37 @@
+import {
+  Box,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay
+} from "@chakra-ui/react";
+import React from "react";
+import LoadingSpinner from "./LoadingSpinner";
+
+const LoadingOverlay = (): JSX.Element => {
+  return (
+    <Modal
+      isCentered
+      isOpen
+      onClose={() => null}
+      motionPreset="slideInBottom"
+      scrollBehavior="inside"
+      size="xs"
+    >
+      <ModalOverlay bg="loading.overlayBg" />
+      <ModalContent bg="transparent" boxShadow="none">
+        {/* <ModalHeader>
+        </ModalHeader> */}
+        <ModalBody border="0px">
+          <Box h="100%" w="100%" textAlign="center">
+            <LoadingSpinner />
+          </Box>
+        </ModalBody>
+        {/* <ModalFooter>
+        </ModalFooter> */}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default LoadingOverlay;
--- a/components/loading/LoadingSpinner.tsx
+++ b/components/loading/LoadingSpinner.tsx
@@ -0,0 +1,16 @@
+import { Spinner } from "@chakra-ui/react";
+import React from "react";
+
+const LoadingSpinner = (): JSX.Element => {
+  return (
+    <Spinner
+      thickness="4px"
+      speed="0.50s"
+      emptyColor="loading.spinnerEmptySpace"
+      color="loading.spinnerColor"
+      size="xl"
+    />
+  );
+};
+
+export default LoadingSpinner;
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "private": true,
  "name": "lucid-creations-media-potty-chart",
  "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "v0.0.9.4-alpha",
+  "version": "v0.0.9.5-alpha",
  "author": {
    "name": "Lucid Creations Media",
    "url": "https://lucidcreations.media",
@@ -39,7 +39,7 @@
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "<=4.3.0",
    "prettier": "^2.6.2",
-    "typescript": "^4.6.3"
+    "typescript": "<4.6.0"
  },
  "packageManager": "yarn@3.1.0"
 }
--- a/theme/AppTheme.ts
+++ b/theme/AppTheme.ts
@@ -30,6 +30,11 @@ const AppTheme = extendTheme({
      footerText: "black",
      content: "#2d3748",
      patreon: "#FF424D"
+    },
+    loading: {
+      overlayBg: "#171923cb",
+      spinnerColor: "#0088ff",
+      spinnerEmptySpace: "#2D374860"
    }
  },
  styles: {
--- a/theme/layout/Footer.tsx
+++ b/theme/layout/Footer.tsx
@@ -96,8 +96,7 @@ const Footer = (): JSX.Element => {
          </MotionBox>
          <Text color="brand.footerText" fontSize="xs">
            &copy;
-            {" 2021 - "}
-            {new Date().getFullYear()}{" "}
+            {` 2021 - ${new Date().getFullYear()} `}
            <Link
              href="https://lucidcreations.media"
              rel="noopener"
--- a/theme/layout/Header.tsx
+++ b/theme/layout/Header.tsx
@@ -15,7 +15,7 @@ import appLogo from "../../public/images/logo.svg";

 const Header = (): JSX.Element => {
  const appName = "LCM Potty Chart";
-  const appVersion = "v0.0.9.4-alpha";
+  const appVersion = "v0.0.9.5-alpha";

  // Add transparency while not at the top of the page.
  const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);
@@ -70,11 +70,11 @@ const Header = (): JSX.Element => {

  return (
    <Box
-      zIndex={1000000}
+      zIndex={1}
      w="100%"
      pos="fixed"
-      top="0"
-      alignItems={"center"}
+      top={0}
+      alignItems="center"
      boxShadow={
        open
          ? "none"
--- a/yarn.lock
+++ b/yarn.lock
@@ -3652,7 +3652,7 @@ __metadata:
    react: <=17.0.2
    react-dom: <=17.0.2
    sharp: ^0.30.3
-    typescript: ^4.6.3
+    typescript: <4.6.0
  languageName: unknown
  linkType: soft

@@ -5160,23 +5160,23 @@ __metadata:
  languageName: node
  linkType: hard

-"typescript@npm:^4.6.3":
-  version: 4.6.3
-  resolution: "typescript@npm:4.6.3"
+"typescript@npm:<4.6.0":
+  version: 4.5.5
+  resolution: "typescript@npm:4.5.5"
  bin:
    tsc: bin/tsc
    tsserver: bin/tsserver
-  checksum: 255bb26c8cb846ca689dd1c3a56587af4f69055907aa2c154796ea28ee0dea871535b1c78f85a6212c77f2657843a269c3a742d09d81495b97b914bf7920415b
+  checksum: 506f4c919dc8aeaafa92068c997f1d213b9df4d9756d0fae1a1e7ab66b585ab3498050e236113a1c9e57ee08c21ec6814ca7a7f61378c058d79af50a4b1f5a5e
  languageName: node
  linkType: hard

-"typescript@patch:typescript@^4.6.3#~builtin<compat/typescript>":
-  version: 4.6.3
-  resolution: "typescript@patch:typescript@npm%3A4.6.3#~builtin<compat/typescript>::version=4.6.3&hash=ddd1e8"
+"typescript@patch:typescript@<4.6.0#~builtin<compat/typescript>":
+  version: 4.5.5
+  resolution: "typescript@patch:typescript@npm%3A4.5.5#~builtin<compat/typescript>::version=4.5.5&hash=ddd1e8"
  bin:
    tsc: bin/tsc
    tsserver: bin/tsserver
-  checksum: fe6bdc1afb2f145ddb7b0a3a31f96352209f6a5704d97f038414ea22ff9d8dd42f32cfb6652e30458d7d958d2d4e85de2df11c574899c6f750a6b3c0e90a3a76
+  checksum: 9cdde4aae20b2904431f3f2ca8acaf3b0cc52faddf68aa88b288c9d0520221817da43783a756fce7ab9360033ada0371c3ff93dfc4bdb4b13f6e9bac64e1658d
  languageName: node
  linkType: hard