Tutorial #62
@@ -1,6 +1,5 @@
|
||||
import React /*, { useEffect, useRef, useState }*/ from "react";
|
||||
import React from "react";
|
||||
import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
interface CustomButtonProps {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React /*, { useEffect, useRef, useState }*/ from "react";
|
||||
import React from "react";
|
||||
import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React /*, { useEffect, useRef, useState }*/ from "react";
|
||||
import React from "react";
|
||||
import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from "react";
|
||||
import { useAppSelector } from "../../app/hooks";
|
||||
import { useRouter } from "next/router";
|
||||
import { HStack, IconButton } from "@chakra-ui/react";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { format, isSameMonth, addMonths, subMonths } from "date-fns";
|
||||
import findValidDateRange from "../../../lib/findValidDateRange";
|
||||
import DatePicker from "./DatePicker";
|
||||
import { useAppSelector } from "../../app/hooks";
|
||||
|
||||
interface CalenderNavProps {
|
||||
isLoading: boolean;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "../../app/store";
|
||||
import { Box, Skeleton, Text, VStack } from "@chakra-ui/react";
|
||||
import {
|
||||
add,
|
||||
@@ -10,11 +13,8 @@ import {
|
||||
isToday as isTodayFun
|
||||
} from "date-fns";
|
||||
import router from "next/router";
|
||||
import React, { useState } from "react";
|
||||
import AddUpdateSticker from "./modals/AddUpdateSticker";
|
||||
import DemoStickers from "./stickers/DemoStickers";
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "../../app/store";
|
||||
|
||||
interface DayProps {
|
||||
isLoading: boolean;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
|
||||
import { isSameDay, format } from "date-fns";
|
||||
import { useAppDispatch, useAppSelector } from "../../app/hooks";
|
||||
import { updateCurrDate, updateMonth } from "../../features/calender";
|
||||
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
|
||||
import { isSameDay, format } from "date-fns";
|
||||
import CalenderNav from "./CalenderNav";
|
||||
import Day from "./Day";
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import { useAppDispatch } from "../../../app/hooks";
|
||||
import { addEditSticker } from "../../../features/calender/stickers";
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
@@ -13,13 +16,10 @@ import {
|
||||
SimpleGrid,
|
||||
Box
|
||||
} from "@chakra-ui/react";
|
||||
import React, { useState, useRef } from "react";
|
||||
import { format, isSameDay } from "date-fns";
|
||||
import { Icon } from "@iconify/react";
|
||||
import StickerSelector from "./StickerSelector";
|
||||
import DemoStickers from "../stickers/DemoStickers";
|
||||
import { useAppDispatch } from "../../../app/hooks";
|
||||
import { addEditSticker } from "../../../features/calender/stickers";
|
||||
|
||||
interface AddStickerProps {
|
||||
isOpen: boolean;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Modal,
|
||||
@@ -5,7 +6,6 @@ import {
|
||||
ModalContent,
|
||||
ModalOverlay
|
||||
} from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import LoadingSpinner from "./LoadingSpinner";
|
||||
|
||||
const LoadingOverlay = (): JSX.Element => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Spinner } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
import { Spinner } from "@chakra-ui/react";
|
||||
|
||||
const LoadingSpinner = (): JSX.Element => {
|
||||
return (
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
|
||||
import { format, isSameDay, isToday } from "date-fns";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useAppDispatch, useAppSelector } from "../../app/hooks";
|
||||
import { updateMonth } from "../../features/calender";
|
||||
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
|
||||
import { format, isSameDay, isToday } from "date-fns";
|
||||
import Day from "../calender/Day";
|
||||
|
||||
interface CalenderExampleProps {
|
||||
|
||||
@@ -36,11 +36,13 @@ const clearStorage = (): void => {
|
||||
interface TutorialSlice {
|
||||
completedTutorial: boolean | null;
|
||||
storageState: StorageState | null;
|
||||
rememberCompleted: boolean;
|
||||
}
|
||||
|
||||
const initialState: TutorialSlice = {
|
||||
completedTutorial: null,
|
||||
storageState: null
|
||||
storageState: null,
|
||||
rememberCompleted: false
|
||||
};
|
||||
|
||||
const tutorialSlice = createSlice({
|
||||
@@ -96,6 +98,12 @@ const tutorialSlice = createSlice({
|
||||
if (temp === null && local === null) {
|
||||
state.completedTutorial = false;
|
||||
}
|
||||
},
|
||||
// Toggle remember completed
|
||||
toggleRememberCompleted(state: TutorialSlice) {
|
||||
const { rememberCompleted } = state;
|
||||
|
||||
state.rememberCompleted = !rememberCompleted;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -104,6 +112,7 @@ export const {
|
||||
setTempTutorialComplete,
|
||||
setTutorialCompleted,
|
||||
clearTutorialCompleted,
|
||||
getAndSetTutorial
|
||||
getAndSetTutorial,
|
||||
toggleRememberCompleted
|
||||
} = tutorialSlice.actions;
|
||||
export default tutorialSlice.reducer;
|
||||
|
||||
@@ -2,10 +2,10 @@ import type { AppProps } from "next/app";
|
||||
import React from "react";
|
||||
import { ChakraProvider } from "@chakra-ui/react";
|
||||
import AppTheme from "../theme/AppTheme";
|
||||
import Layout from "../theme/layout/Layout";
|
||||
import Head from "next/head";
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "../app/store";
|
||||
import Layout from "../theme/layout/Layout";
|
||||
import Head from "next/head";
|
||||
|
||||
function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element {
|
||||
return (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import NextDocument, { Html, Head, Main, NextScript } from "next/document";
|
||||
import React from "react";
|
||||
import { ColorModeScript } from "@chakra-ui/react";
|
||||
import AppTheme from "../theme/AppTheme";
|
||||
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "../../app/store";
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
@@ -13,8 +15,6 @@ import {
|
||||
// import findValidDateRange from "../../lib/findValidDateRange";
|
||||
import ErrorPage from "next/error";
|
||||
import Calender from "../../components/calender";
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "../../app/store";
|
||||
|
||||
const DateRoute: React.FC<unknown> = () => {
|
||||
const router = useRouter();
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
import React, { Fragment, useEffect, useRef } from "react";
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import { format } from "date-fns";
|
||||
import Calender from "../components/calender";
|
||||
import Tutorial from "../components/tutorial";
|
||||
import LoadingOverlay from "../components/loading/LoadingOverlay";
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "../app/store";
|
||||
import { useAppDispatch, useAppSelector } from "../app/hooks";
|
||||
@@ -13,6 +8,11 @@ import {
|
||||
setTempTutorialComplete,
|
||||
setTutorialCompleted
|
||||
} from "../features/tutorial";
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import { format } from "date-fns";
|
||||
import Calender from "../components/calender";
|
||||
import Tutorial from "../components/tutorial";
|
||||
import LoadingOverlay from "../components/loading/LoadingOverlay";
|
||||
|
||||
const IndexPage = (): JSX.Element => {
|
||||
const isLoading = useAppSelector((state) => state.calender.isLoading);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React, { FC, ReactNode } from "react";
|
||||
|
||||
import type { AppProps } from "next/app";
|
||||
import Header from "../layout/Header";
|
||||
import { Box } from "@chakra-ui/layout";
|
||||
|
||||
Reference in New Issue
Block a user