src/components/buttons/Custom.tsx

@@ -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 {

src/components/buttons/Patreon.tsx

@@ -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";

src/components/buttons/Twitter.tsx

@@ -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";

src/components/calender/CalenderNav.tsx

@@ -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;

src/components/calender/Day.tsx

@@ -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;

src/components/calender/index.tsx

@@ -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";
 

src/components/calender/modals/AddUpdateSticker.tsx

@@ -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;

src/components/loading/LoadingOverlay.tsx

@@ -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 => {

src/components/loading/LoadingSpinner.tsx

@@ -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 (

src/components/tutorial/CalenderExample.tsx

@@ -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 {
@@ -148,7 +148,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
                 id.length
                   ? id
                   : format(toDateObj, "yyyyddLL") +
-                    `/${sticker === null ? 0 : sticker}`
+                  `/${sticker === null ? 0 : sticker}`
               }
             />
           );

src/features/tutorial/index.ts

@@ -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;

src/pages/_app.tsx

@@ -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 (

src/pages/_document.tsx

@@ -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";
 

src/pages/calendar/[...date].tsx

@@ -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();

src/pages/index.tsx

@@ -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);

src/theme/layout/Layout.tsx

@@ -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";