├── .babelrc
├── .eslintrc.json
├── .gitignore
├── .gitpod.yml
├── Dockerfile
├── README.md
├── components
    ├── AddItemButton.js
    ├── AllTable.js
    ├── AuthRedirect.js
    ├── DateTimePicker.js
    ├── DoneTable.js
    ├── FolderTable.js
    ├── FoldersPanel.js
    ├── LoginForm.js
    ├── LogoutButton.js
    ├── MenuBar.js
    ├── RemoveFolderButton.js
    ├── SearchTable.js
    ├── SettingModal.js
    ├── TodayTable.js
    └── TodoListTable.js
├── config
    ├── init.sql
    └── mysql.js
├── docker-compose.yml
├── icons
    ├── logout_black_24dp.svg
    └── settings_black_24dp.svg
├── my.conf
├── next.config.js
├── package.json
├── pages
    ├── _app.js
    ├── all.js
    ├── api
    │   ├── authStatus.js
    │   ├── folders
    │   │   ├── [id].js
    │   │   └── index.js
    │   ├── hello.js
    │   ├── init.js
    │   ├── items
    │   │   ├── [id].js
    │   │   └── index.js
    │   ├── login.js
    │   ├── logout.js
    │   ├── mysql_test.js
    │   └── user
    │   │   └── [id].js
    ├── done.js
    ├── folder
    │   └── [folderID].js
    ├── home.js
    ├── index.js
    ├── login.js
    └── search
    │   └── [keywords].js
├── public
    ├── favicon.ico
    └── vercel.svg
├── readme-img
    ├── home.png
    └── login.png
├── styles
    ├── Home.module.css
    ├── globals.css
    └── theme.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["next/babel"]
3 |   }


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
 1 | # This configuration file was automatically generated by Gitpod.
 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
 3 | # and commit this file to your remote git repository to share the goodness with others.
 4 | 
 5 | tasks:
 6 |   - init: yarn install && yarn run build
 7 |     command: yarn run start
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:14.18
 2 | 
 3 | RUN mkdir -p /home/app/ && chown -R node:node /home/app
 4 | WORKDIR /home/app
 5 | 
 6 | # for product ver
 7 | COPY --chown=node:node . .
 8 | 
 9 | USER node
10 | 
11 | # for product ver
12 | RUN yarn install --frozen-lockfile
13 | 
14 | EXPOSE 3000
15 | CMD [ "yarn" , "dev"]


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![CodeFactor](https://www.codefactor.io/repository/github/redfrogsss/selfremind/badge)](https://www.codefactor.io/repository/github/redfrogsss/selfremind)
 2 | # SelfRemind
 3 | a selfhosted To-do List Manager built with [Next.js](https://nextjs.org/), [Chakra-UI](https://chakra-ui.com/) and [MySQL](https://www.mysql.com/).
 4 | 
 5 | ## Screenshots
 6 | ![Alt text](./readme-img/login.png "Login Page")
 7 | ![Alt text](./readme-img/home.png "Home Page")
 8 | 
 9 | ## Getting Started with `docker-compose`
10 | 
11 | To start with, you must install [Docker](https://www.docker.com/products/docker-desktop) and [docker-compose](https://docs.docker.com/compose/) on your computer.
12 | 
13 | First, create a `docker-compose.yml` file with the following content:
14 | 
15 | ```yml
16 | version: "3"
17 | services:
18 |   web:
19 |     build: .
20 |     ports:
21 |       - "3000:3000"
22 |     restart: unless-stopped
23 |   db:
24 |     image: mysql/mysql-server:8.0
25 |     restart: unless-stopped
26 |     command: --default-authentication-plugin=mysql_native_password
27 |     environment:
28 |       MYSQL_ROOT_PASSWORD: example
29 |       MYSQL_DATABASE: selfremind
30 |       MYSQL_USER: selfremind
31 |       MYSQL_PASSWORD: selfremind123
32 |     volumes:
33 |       - dbdata:/var/lib/mysql
34 |       - ./my.conf:/etc/mysql/my.cnf
35 | volumes:
36 |   dbdata:
37 | ```
38 | 
39 | Then, run the command to start the server:
40 | ```bash
41 | docker-compose up -d
42 | ```
43 | 
44 | Wait a minutes and open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
45 | 
46 | By default, the username is `admin` and the password is `admin`.
47 | 
48 | ## Learn More
49 | 
50 | This is a side project built by [Jacky Fan](https://github.com/redfrogsss) - a university student in HK. 
51 | 
52 | The following tech is used in this project.
53 | - [Next.js](https://nextjs.org/) - the frontend and backend framework of this project.
54 | - [Chakra-UI](https://chakra-ui.com/) - the UI solutions of this project.
55 | - [MySQL](https://www.mysql.com/) - the database of this project.
56 | 
57 | You can check out [my dirty code in Github](https://github.com/redfrogsss/selfremind) - your feedback are welcome!
58 | 


--------------------------------------------------------------------------------
/components/AddItemButton.js:
--------------------------------------------------------------------------------
  1 | import { AddIcon } from "@chakra-ui/icons";
  2 | import { Button, Stack } from "@chakra-ui/react";
  3 | import {
  4 |     Modal,
  5 |     ModalOverlay,
  6 |     ModalContent,
  7 |     ModalHeader,
  8 |     ModalFooter,
  9 |     ModalBody,
 10 |     ModalCloseButton,
 11 | } from '@chakra-ui/react'
 12 | import { useDisclosure } from '@chakra-ui/react'
 13 | import {
 14 |     FormControl,
 15 |     FormLabel,
 16 | } from '@chakra-ui/react'
 17 | import { Input } from '@chakra-ui/react'
 18 | import { Textarea } from '@chakra-ui/react'
 19 | import DateTimePicker from "./DateTimePicker";
 20 | import { Select } from '@chakra-ui/react'
 21 | import { useToast } from '@chakra-ui/react'
 22 | import { useEffect, useState } from "react";
 23 | import axios from "axios";
 24 | import { useCookies } from 'react-cookie';
 25 | import moment from 'moment'
 26 | import { useRouter } from 'next/router'
 27 | 
 28 | export default function AddItemButton() {
 29 |     const router = useRouter()
 30 | 
 31 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
 32 |     const { isOpen, onOpen, onClose } = useDisclosure()
 33 |     const [datetime, setDatetime] = useState(new Date());
 34 |     const toast = useToast();
 35 |     const [folderData, setFolderData] = useState([]);
 36 | 
 37 |     // fetch folder data
 38 |     useEffect(() => {
 39 |         axios.get("/api/folders?userID=" + cookies.userID)
 40 |             .then((res) => {
 41 |                 setFolderData(res.data.result);
 42 |             })
 43 |             .catch((err) => {
 44 |                 console.log(err);
 45 |             });
 46 |     }, []);
 47 | 
 48 |     const SuccessToast = () =>
 49 |         toast({
 50 |             description: 'Item created successfully.',
 51 |             status: 'success',
 52 |             duration: 9000,
 53 |             isClosable: true,
 54 |         });
 55 | 
 56 |     const FailToast = () =>
 57 |         toast({
 58 |             description: 'Item created failed.',
 59 |             status: 'error',
 60 |             duration: 9000,
 61 |             isClosable: true,
 62 |         });
 63 | 
 64 |     const submitHandler = (e) => {
 65 |         e.preventDefault();
 66 | 
 67 |         var data = {
 68 |             userID: cookies.userID,
 69 |             name: e.target.name.value,
 70 |             description: e.target.description.value,
 71 |             datetime: datetime,
 72 |             reminder: e.target.reminder.value,
 73 |             repeat: e.target.repeat.value,
 74 |             folder: e.target.folder.value
 75 |         }
 76 | 
 77 |         console.log(data);
 78 |         axios.post("/api/items", data).then((res) => {
 79 |             onClose();
 80 |             SuccessToast();
 81 |             router.push("/folder/" + data.folder);
 82 |         }).catch((err) => {
 83 |             FailToast();
 84 |             console.error(err);
 85 |         });
 86 |     }
 87 | 
 88 |     const datetimeHandler = (value) => {
 89 |         setDatetime(moment(value));
 90 |     }
 91 | 
 92 |     const printFolderOptions = () => {
 93 |         return folderData.map((value) => {
 94 |             return <option value={value.id}>{value.name}</option>
 95 |         });
 96 |     }
 97 | 
 98 |     return (
 99 |         <>
100 |             <Button
101 |                 colorScheme="gray"
102 |                 leftIcon={<AddIcon />}
103 |                 onClick={onOpen}
104 |             >
105 |                 Add Item
106 |             </Button>
107 | 
108 |             <Modal isOpen={isOpen} onClose={onClose} size='xl'>
109 |                 <form onSubmit={submitHandler}>
110 |                     <ModalOverlay />
111 |                     <ModalContent>
112 |                         <ModalHeader>Add Item</ModalHeader>
113 |                         <ModalCloseButton />
114 | 
115 |                         <ModalBody>
116 |                             <Stack spacing={3}>
117 |                                 <FormControl isRequired>
118 |                                     <FormLabel htmlFor='name'>Name</FormLabel>
119 |                                     <Input id='name' type='text' placeholder="Shopping" />
120 |                                 </FormControl>
121 |                                 <FormControl>
122 |                                     <FormLabel htmlFor='description'>Description</FormLabel>
123 |                                     <Textarea id='description' placeholder='Description' />
124 |                                 </FormControl>
125 |                                 <FormControl isRequired>
126 |                                     <FormLabel htmlFor='datetime'>Date & Time</FormLabel>
127 |                                     <DateTimePicker changeHandler={datetimeHandler} />
128 |                                 </FormControl>
129 |                                 <FormControl>
130 |                                     <FormLabel htmlFor='reminder'>Reminder</FormLabel>
131 |                                     <Select id='reminder'>
132 |                                         <option value='0' defaultChecked>No Reminder</option>
133 |                                         <option value='5'>5 minutes before</option>
134 |                                         <option value='10'>10 minutes before</option>
135 |                                         <option value='15'>15 minutes before</option>
136 |                                         <option value='30'>30 minutes before</option>
137 |                                         <option value='60'>1 hour before</option>
138 |                                     </Select>
139 |                                 </FormControl>
140 |                                 <FormControl>
141 |                                     <FormLabel htmlFor='repeat'>Repeat</FormLabel>
142 |                                     <Select id='repeat'>
143 |                                         <option value='none' defaultChecked>None</option>
144 |                                         <option value='daily'>Daily</option>
145 |                                         <option value='weekly'>Weekly</option>
146 |                                         <option value='monthly'>Monthly</option>
147 |                                     </Select>
148 |                                 </FormControl>
149 |                                 <FormControl isRequired>
150 |                                     <FormLabel htmlFor='folder'>Folder</FormLabel>
151 |                                     <Select id='folder'>
152 |                                         {printFolderOptions()}
153 |                                     </Select>
154 |                                 </FormControl>
155 |                             </Stack>
156 |                         </ModalBody>
157 | 
158 |                         <ModalFooter>
159 |                             <Button colorScheme='teal' mr={3} type="submit">Add Item</Button>
160 |                             <Button colorScheme='teal' variant='ghost' onClick={onClose}>
161 |                                 Cancel
162 |                             </Button>
163 |                         </ModalFooter>
164 |                     </ModalContent>
165 |                 </form>
166 |             </Modal>
167 |         </>
168 |     );
169 | }


--------------------------------------------------------------------------------
/components/AllTable.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import TodoListTable from "./TodoListTable";
 3 | import axios from 'axios';
 4 | import { useCookies } from 'react-cookie';
 5 | import moment from "moment";
 6 | 
 7 | export default function AllTable () {
 8 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
 9 | 
10 |     const [data, setData] = useState(undefined);
11 |     
12 |     useEffect(()=>{
13 |         const url = "/api/items?userID=" + cookies.userID;
14 |         axios.get(url).then((res)=>{
15 |             setData(res.data.result);
16 |         }).catch((err)=>{
17 |             console.error(err);
18 |         });
19 |     }, []);
20 | 
21 |     return (
22 |         <>
23 |             <TodoListTable data={data} disableOverdue={true}/>
24 |         </>
25 |     );
26 | }


--------------------------------------------------------------------------------
/components/AuthRedirect.js:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router'
 2 | import { useEffect } from 'react';
 3 | import { useCookies } from 'react-cookie';
 4 | const axios = require('axios');
 5 | 
 6 | export default function AuthRedirect() {
 7 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
 8 |     const router = useRouter();
 9 | 
10 |     useEffect(() => {
11 |         if (!cookies.userID) {
12 |             router.push("/login");
13 |         } else {
14 |             axios.post("/api/authStatus", { userID: cookies.userID }).then((res) => {
15 |                 if (!res.data.authStatus) {
16 |                     router.push("/login");
17 |                 }
18 |             });
19 |         }
20 |     }, []);
21 | 
22 |     return (<></>);
23 | }


--------------------------------------------------------------------------------
/components/DateTimePicker.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, forwardRef, useEffect } from "react";
 2 | import DatePicker from "react-datepicker";
 3 | import "react-datepicker/dist/react-datepicker.css";
 4 | import { Input } from '@chakra-ui/react'
 5 | import moment from 'moment'
 6 | 
 7 | export default function DateTimePicker(props) {
 8 |     const [startDate, setStartDate] = useState(new Date());
 9 |     const ChakraUIInput = forwardRef(({ value, onClick }, ref) => (
10 |         <Input value={value} onClick={onClick} ref={ref} />
11 |     ));
12 | 
13 |     useEffect(()=>{
14 |         props.changeHandler(moment(startDate));
15 |     }, [startDate]);
16 | 
17 |     return (
18 |         <DatePicker
19 |             selected={startDate}
20 |             onChange={(date) => setStartDate(date)}
21 |             customInput={<ChakraUIInput />}
22 |             showTimeSelect
23 |             timeFormat="p"
24 |             timeIntervals={15}
25 |             dateFormat="Pp"
26 |             filterDate={(date) => {
27 |                 return moment().toDate().getDate() <= date.getDate();
28 |             }}
29 |             filterTime={(date) => {
30 |                 return moment().milliseconds() > moment(date).milliseconds();
31 |             }}
32 |         />
33 |     );
34 | 
35 | }


--------------------------------------------------------------------------------
/components/DoneTable.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import TodoListTable from "./TodoListTable";
 3 | import axios from 'axios';
 4 | import { useCookies } from 'react-cookie';
 5 | import moment from "moment";
 6 | 
 7 | export default function DoneTable () {
 8 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
 9 | 
10 |     const [data, setData] = useState(undefined);
11 | 
12 |     const filteredData = (data) => {
13 |         return data.filter(((value)=>{  // return true or false
14 |             return value.finished;
15 |         }));
16 |     }
17 |     
18 |     useEffect(()=>{
19 |         const url = "/api/items?userID=" + cookies.userID;
20 |         axios.get(url).then((res)=>{
21 |             setData(filteredData(res.data.result));
22 |         }).catch((err)=>{
23 |             console.error(err);
24 |         });
25 |     }, []);
26 | 
27 |     return (
28 |         <>
29 |             <TodoListTable data={data} disableOverdue={true}/>
30 |         </>
31 |     );
32 | }


--------------------------------------------------------------------------------
/components/FolderTable.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import TodoListTable from "./TodoListTable";
 3 | import axios from 'axios';
 4 | import { useCookies } from 'react-cookie';
 5 | 
 6 | export default function FolderTable (props) {
 7 | 
 8 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
 9 |     const [data, setData] = useState(undefined);
10 | 
11 |     const folderID = props.folderID;
12 | 
13 |     useEffect(()=>{
14 |         setData(undefined);
15 |         const url = "/api/items?userID=" + cookies.userID;
16 |         axios.get(url).then((res)=>{
17 |             setData(filteredData(res.data.result));
18 |             console.log(res.data.result);
19 |         }).catch((err)=>{
20 |             console.error(err);
21 |         });
22 |     }, [folderID]);
23 | 
24 |     const filteredData = (data) => {
25 |         return data.filter(((value)=>{  // return true or false
26 |             return value.folder.toString() === folderID.toString();
27 |         }));
28 |     }
29 |     
30 | 
31 |     return (
32 |         <>
33 |             <TodoListTable data={data} />
34 |         </>
35 |     );
36 | }


--------------------------------------------------------------------------------
/components/FoldersPanel.js:
--------------------------------------------------------------------------------
  1 | import { Button, Divider, Stack, Text } from "@chakra-ui/react";
  2 | import { AddIcon } from '@chakra-ui/icons'
  3 | import { useDisclosure } from '@chakra-ui/react'
  4 | import {
  5 |     Modal,
  6 |     ModalOverlay,
  7 |     ModalContent,
  8 |     ModalHeader,
  9 |     ModalFooter,
 10 |     ModalBody,
 11 |     ModalCloseButton,
 12 | } from '@chakra-ui/react'
 13 | import {
 14 |     FormControl,
 15 |     FormLabel,
 16 |     FormErrorMessage,
 17 |     FormHelperText,
 18 | } from '@chakra-ui/react'
 19 | import { Input } from '@chakra-ui/react'
 20 | import { useToast } from '@chakra-ui/react'
 21 | import { useRouter } from 'next/router'
 22 | import { useEffect, useState } from "react";
 23 | import axios from 'axios'
 24 | import { useCookies } from 'react-cookie';
 25 | 
 26 | const ActiveButton = (props) => {
 27 |     return (
 28 |         <Button colorScheme="teal" onClick={props.onClick}>{props.children}</Button>
 29 |     );
 30 | }
 31 | 
 32 | const InactiveButton = (props) => {
 33 |     return (
 34 |         <Button variant="outline" onClick={props.onClick}><Text color="gray.500">{props.children}</Text></Button>
 35 |     );
 36 | }
 37 | 
 38 | const AddFolderButton = (props) => {
 39 | 
 40 |     const { isOpen, onOpen, onClose } = useDisclosure()
 41 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
 42 |     const router = useRouter();
 43 | 
 44 |     const toast = useToast();
 45 | 
 46 |     const SuccessToast = () =>
 47 |         toast({
 48 |             description: 'Folder created successfully.',
 49 |             status: 'success',
 50 |             duration: 9000,
 51 |             isClosable: true,
 52 |         });
 53 | 
 54 |     const submitHandler = (e) => {
 55 |         e.preventDefault();
 56 | 
 57 |         var data = {
 58 |             userID: cookies.userID,
 59 |             name: e.target.name.value,
 60 |         }
 61 | 
 62 |         axios.post("/api/folders", data)
 63 |             .then((res) => {
 64 |                 console.log(res.data);
 65 |                 if(router.asPath === "/home") {
 66 |                     router.push("/all");
 67 |                 } else {
 68 |                     router.push("/home");
 69 |                 }
 70 |             })
 71 |             .catch((err) => {
 72 |                 console.log(err);
 73 |             });
 74 | 
 75 |         onClose();
 76 |         SuccessToast();
 77 |     }
 78 | 
 79 |     return (
 80 |         <>
 81 |             <Button
 82 |                 colorScheme='teal'
 83 |                 variant='ghost'
 84 |                 leftIcon={<AddIcon color="gray.500" />}
 85 |                 onClick={onOpen}
 86 |             >
 87 |                 <Text color="gray.500">Add Folder</Text>
 88 |             </Button>
 89 |             <Modal isOpen={isOpen} onClose={onClose}>
 90 |                 <form onSubmit={(e) => { submitHandler(e); }}>
 91 |                     <ModalOverlay />
 92 |                     <ModalContent>
 93 |                         <ModalHeader>Add Folder</ModalHeader>
 94 |                         <ModalCloseButton />
 95 |                         <ModalBody>
 96 |                             <FormControl>
 97 |                                 <FormLabel htmlFor='text'>Name</FormLabel>
 98 |                                 <Input id='name' type='text' />
 99 |                             </FormControl>
100 |                         </ModalBody>
101 | 
102 |                         <ModalFooter>
103 |                             <Button colorScheme='teal' mr={3} type="submit" >Add Folder</Button>
104 |                             <Button colorScheme='teal' variant='ghost' onClick={onClose}>
105 |                                 Cancel
106 |                             </Button>
107 |                         </ModalFooter>
108 |                     </ModalContent>
109 |                 </form>
110 |             </Modal>
111 |         </>
112 |     );
113 | }
114 | 
115 | const PanelButtons = (props) => {
116 |     const router = useRouter();
117 | 
118 |     const expectedURL = props.expectedURL ? props.expectedURL : undefined;
119 |     const onClick = props.onClick ? props.onClick : undefined;
120 | 
121 |     if (expectedURL === undefined) {
122 |         return <InactiveButton onClick={onClick}>{props.children}</InactiveButton>
123 |     } else {
124 |         if (router.asPath === expectedURL) {
125 |             return <ActiveButton onClick={onClick}>{props.children}</ActiveButton>
126 |         } else {
127 |             return <InactiveButton onClick={onClick}>{props.children}</InactiveButton>
128 |         }
129 |     }
130 | }
131 | 
132 | 
133 | export default function FoldersPanel() {
134 | 
135 |     const router = useRouter();
136 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
137 |     const [data, setData] = useState([]);
138 | 
139 |     useEffect(() => {
140 |         // get all folders 
141 |         axios.get("/api/folders?userID=" + cookies.userID)
142 |             .then((res) => {
143 |                 setData(res.data.result);
144 |             });
145 |     }, [])
146 | 
147 |     const printFolderButtons = (data) => {
148 |         return data.map((value) => {
149 |             return (
150 |                 // <InactiveButton onClick={() => { router.push("/folder/" + value.id) }}>{value.name}</InactiveButton>
151 |                 <PanelButtons
152 |                     expectedURL={"/folder/" + value.id}
153 |                     onClick={() => { router.push("/folder/" + value.id) }}
154 |                 >{value.name}</PanelButtons>
155 |             )
156 |         });
157 |     }
158 | 
159 | 
160 |     return (
161 |         <Stack w="100%" p={10}>
162 |             <PanelButtons expectedURL="/home" onClick={() => { router.push("/home") }}>Today</PanelButtons>
163 |             <PanelButtons expectedURL="/done" onClick={() => { router.push("/done") }}>Done</PanelButtons>
164 |             <PanelButtons expectedURL="/all" onClick={() => { router.push("/all") }}>All Todos</PanelButtons>
165 |             <Divider w="100%" h={1} py={1} />
166 |             {printFolderButtons(data)}
167 |             <AddFolderButton />
168 |         </Stack>
169 |     );
170 | } 


--------------------------------------------------------------------------------
/components/LoginForm.js:
--------------------------------------------------------------------------------
 1 | import { Button, FormControl, FormLabel, Input, Stack } from "@chakra-ui/react";
 2 | import { useRouter } from 'next/router'
 3 | import { useToast } from '@chakra-ui/react'
 4 | import { useCookies } from 'react-cookie';
 5 | import { useEffect } from "react";
 6 | 
 7 | const axios = require('axios');
 8 | 
 9 | export default function LoginForm() {
10 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
11 |     const toast = useToast();
12 |     const router = useRouter();
13 | 
14 |     const FailToast = () =>
15 |         toast({
16 |             description: "Username / Password Invalid.",
17 |             status: 'error',
18 |             duration: 9000,
19 |             isClosable: true,
20 |         })
21 | 
22 |     const submitHandler = (e) => {
23 |         e.preventDefault();
24 | 
25 |         const attempt = {
26 |             username: e.target.username.value,
27 |             pwd: e.target.password.value
28 |         }
29 | 
30 |         axios.post("/api/login", attempt).then((res) => {
31 |             if (res.data.authStatus === true) {
32 |                 // console.log("userID", res.data.userID);  // test session
33 |                 setCookie("userID", res.data.userID);
34 |                 // console.log("cookie", cookies.userID);   // test cookies
35 |                 const href = "/home";
36 |                 router.push(href);
37 |             } else {
38 |                 FailToast();
39 |             }
40 |         }).catch((err) => {
41 |             FailToast();
42 |         });
43 |     }
44 | 
45 |     useEffect(() => {
46 |         if (!cookies.userID) { console.log("no cookies"); } else {
47 |             axios.post("/api/authStatus", { userID: cookies.userID }).then((res) => {
48 |                 if (res.data.authStatus) {
49 |                     const href = "/home";
50 |                     router.push(href);
51 |                 }
52 |             });
53 |         }
54 |     }, []);
55 | 
56 |     return (
57 |         <form onSubmit={submitHandler}>
58 |             <Stack>
59 |                 <FormControl>
60 |                     <FormLabel htmlFor='username'>Username</FormLabel>
61 |                     <Input id='username' type='username' required />
62 |                 </FormControl>
63 |                 <FormControl>
64 |                     <FormLabel htmlFor='password'>Password</FormLabel>
65 |                     <Input id='password' type='password' required />
66 |                 </FormControl>
67 |                 <Button type="submit" mt={4} colorScheme="teal" onSubmit={submitHandler}>
68 |                     Login
69 |                 </Button>
70 |             </Stack>
71 |         </form>
72 |     );
73 | }


--------------------------------------------------------------------------------
/components/LogoutButton.js:
--------------------------------------------------------------------------------
 1 | import { Icon } from '@chakra-ui/icons';
 2 | import { IconButton } from '@chakra-ui/react'
 3 | import axios from 'axios';
 4 | import { useRouter } from 'next/router';
 5 | import { useCookies } from 'react-cookie';
 6 | import { useToast } from '@chakra-ui/react'
 7 | 
 8 | export default function LogoutButton(props) {
 9 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
10 |     const router = useRouter();
11 |     const toast = useToast();
12 | 
13 |     const LogoutIcon = (props) => (
14 |         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none" /><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z" /></svg>
15 |     )
16 | 
17 |     const SuccessToast = () =>
18 |         toast({
19 |             description: 'Logged out successfully.',
20 |             status: 'success',
21 |             duration: 9000,
22 |             isClosable: true,
23 |         });
24 | 
25 |     const FailToast = () =>
26 |         toast({
27 |             description: 'Logout failed.',
28 |             status: 'error',
29 |             duration: 9000,
30 |             isClosable: true,
31 |         });
32 | 
33 |     const onClickHandler = () => {
34 |         axios.post("/api/logout", { userID: cookies.userID }).then(() => {
35 |             removeCookie("userID");
36 |             SuccessToast();
37 |             router.push("/");
38 |         }).catch((err) => {
39 |             FailToast();
40 |         });
41 |     }
42 | 
43 |     return (
44 |         <>
45 |             <IconButton
46 |                 variant="unstyled"
47 |                 colorScheme='teal'
48 |                 aria-label='Logout'
49 |                 icon={<Icon as={LogoutIcon} />}
50 |                 onClick={onClickHandler}
51 |             />
52 |         </>
53 |     );
54 | }


--------------------------------------------------------------------------------
/components/MenuBar.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { SearchIcon } from '@chakra-ui/icons';
 3 | import { Center, Divider, Grid, GridItem, Text, Input, InputGroup, InputLeftElement, HStack, IconButton } from '@chakra-ui/react'
 4 | import Link from 'next/link';
 5 | import SettingModal from './SettingModal';
 6 | import LogoutButton from './LogoutButton';
 7 | import { useEffect, useState } from 'react';
 8 | import axios from 'axios';
 9 | import { useCookies } from 'react-cookie';
10 | import { useToast } from '@chakra-ui/react'
11 | import {
12 |     FormControl,
13 |     FormLabel,
14 |     FormErrorMessage,
15 |     FormHelperText,
16 | } from '@chakra-ui/react'
17 | import { useRouter } from 'next/router'
18 | 
19 | const SearchBar = () => {
20 |     const router = useRouter();
21 | 
22 |     return (
23 |         <FormControl>
24 |             <form onSubmit={(e) => { e.preventDefault(); router.push("/search/" + e.target.keywords.value);}}>
25 |                 <InputGroup>
26 |                     <InputLeftElement
27 |                         pointerEvents='none'
28 |                         children={<SearchIcon color="gray.300" />}
29 |                     />
30 |                     <Input id="keywords" type="text" placeholder="Search" onSubmit={() => { console.log("Entered!"); }} />
31 |                 </InputGroup>
32 |             </form>
33 |         </FormControl>
34 |     );
35 | }
36 | 
37 | export default function MenuBar() {
38 | 
39 |     const [username, setUsername] = useState("");
40 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
41 |     const toast = useToast();
42 | 
43 |     const FailToast = () =>
44 |         toast({
45 |             description: 'Cannot fetch username',
46 |             status: 'error',
47 |             duration: 9000,
48 |             isClosable: true,
49 |         });
50 | 
51 |     useEffect(() => {
52 |         const url = "/api/user/" + cookies.userID;
53 |         axios.get(url).then((res) => {
54 |             setUsername(res.data.result[0].username);
55 |         }).catch((err) => {
56 |             console.error(err);
57 |             FailToast();
58 |         });
59 |     }, []);
60 | 
61 |     return (
62 |         <Grid templateColumns='repeat(5, 1fr)'>
63 |             <GridItem>
64 |                 <Center h="100%" p={4}>
65 |                     <Link href={"/"}>
66 |                         <a>
67 |                             <Text fontSize='xl' as='b'>SelfRemind</Text>
68 |                         </a>
69 |                     </Link>
70 |                 </Center>
71 |             </GridItem>
72 |             <GridItem colSpan="3">
73 |                 <Center p={4}>
74 |                     <SearchBar />
75 |                 </Center>
76 |             </GridItem>
77 |             <GridItem>
78 |                 <Center p={4}>
79 |                     <HStack>
80 |                         <SettingModal />
81 |                         <LogoutButton />
82 |                         <Text px={4}>
83 |                             {username}
84 |                         </Text>
85 |                     </HStack>
86 |                 </Center>
87 |             </GridItem>
88 |             <GridItem colSpan="5">
89 |                 <Divider width="100%"></Divider>
90 |             </GridItem>
91 |         </Grid>
92 |     );
93 | }


--------------------------------------------------------------------------------
/components/RemoveFolderButton.js:
--------------------------------------------------------------------------------
 1 | import { IconButton } from '@chakra-ui/react'
 2 | import { DeleteIcon } from '@chakra-ui/icons'
 3 | import {
 4 |     AlertDialog,
 5 |     AlertDialogBody,
 6 |     AlertDialogFooter,
 7 |     AlertDialogHeader,
 8 |     AlertDialogContent,
 9 |     AlertDialogOverlay,
10 | } from '@chakra-ui/react'
11 | import React from "react";
12 | import { Button } from '@chakra-ui/react'
13 | import { useToast } from '@chakra-ui/react'
14 | import axios from 'axios';
15 | import { useCookies } from 'react-cookie';
16 | import { useRouter } from 'next/router'
17 | 
18 | export default function RemoveFolderButton(props) {
19 | 
20 |     const [isOpen, setIsOpen] = React.useState(false)
21 |     const onClose = () => setIsOpen(false)
22 |     const cancelRef = React.useRef()
23 |     const toast = useToast();
24 |     const folderID = props.folderID ? props.folderID : undefined; 
25 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
26 |     const router = useRouter();
27 | 
28 |     const SuccessToast = () =>
29 |         toast({
30 |             description: 'Folder removed successfully.',
31 |             status: 'success',
32 |             duration: 9000,
33 |             isClosable: true,
34 |         });
35 | 
36 |     const FailToast = () =>
37 |         toast({
38 |             description: 'Folder removed failed.',
39 |             status: 'error',
40 |             duration: 9000,
41 |             isClosable: true,
42 |         });
43 | 
44 |     const deleteHandler = () => {
45 | 
46 |         axios.delete("/api/folders/" + folderID + "?userID=" + cookies.userID)
47 |             .then((res) => {
48 |                 console.log(res.data);
49 |                 onClose();
50 |                 SuccessToast();
51 |                 router.push("/home");
52 |             })
53 |             .catch((err) => {
54 |                 console.error(err);
55 |                 FailToast();
56 |             }); 
57 | 
58 |     }
59 | 
60 |     return (
61 |         <>
62 |             <IconButton aria-label='Delete Folder' icon={<DeleteIcon />} ml={3} onClick={() => setIsOpen(true)} />
63 |             <AlertDialog
64 |                 isOpen={isOpen}
65 |                 leastDestructiveRef={cancelRef}
66 |                 onClose={onClose}
67 |             >
68 |                 <AlertDialogOverlay>
69 |                     <AlertDialogContent>
70 |                         <AlertDialogHeader fontSize='lg' fontWeight='bold'>
71 |                             Delete Folder
72 |                         </AlertDialogHeader>
73 | 
74 |                         <AlertDialogBody>
75 |                             Are you sure? You can't undo this action afterwards.
76 |                         </AlertDialogBody>
77 | 
78 |                         <AlertDialogFooter>
79 |                             <Button colorScheme='red' onClick={() => { deleteHandler() }}>
80 |                                 Delete
81 |                             </Button>
82 |                             <Button ref={cancelRef} onClick={onClose} ml={3}>
83 |                                 Cancel
84 |                             </Button>
85 |                         </AlertDialogFooter>
86 |                     </AlertDialogContent>
87 |                 </AlertDialogOverlay>
88 |             </AlertDialog>
89 |         </>
90 |     );
91 | }


--------------------------------------------------------------------------------
/components/SearchTable.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import TodoListTable from "./TodoListTable";
 3 | import axios from 'axios';
 4 | import { useCookies } from 'react-cookie';
 5 | import moment from "moment";
 6 | 
 7 | export default function SearchTable(props) {
 8 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
 9 | 
10 |     const [data, setData] = useState(undefined);
11 | 
12 |     const keywords = props.keywords ? props.keywords : undefined;
13 | 
14 |     const filteredData = (data) => {
15 |         return data.filter(((value) => {  // return true or false
16 |             return value.name.toString().toLowerCase().search(keywords.toString().toLowerCase()) !== -1 || value.description.toString().toLowerCase().search(keywords.toString().toLowerCase()) !== -1;
17 |         }));
18 |     }
19 | 
20 |     useEffect(() => {
21 |         const url = "/api/items?userID=" + cookies.userID;
22 |         axios.get(url).then((res) => {
23 |             setData(filteredData(res.data.result));
24 |             console.log(filteredData(res.data.result));
25 |         }).catch((err) => {
26 |             console.error(err);
27 |         });
28 |     }, []);
29 | 
30 |     return (
31 |         <>
32 |             <TodoListTable data={data} />
33 |         </>
34 |     );
35 | }


--------------------------------------------------------------------------------
/components/SettingModal.js:
--------------------------------------------------------------------------------
  1 | import { Icon } from '@chakra-ui/icons';
  2 | import { IconButton, useDisclosure } from '@chakra-ui/react'
  3 | import {
  4 |     Modal,
  5 |     ModalOverlay,
  6 |     ModalContent,
  7 |     ModalHeader,
  8 |     ModalFooter,
  9 |     ModalBody,
 10 |     ModalCloseButton,
 11 | } from '@chakra-ui/react'
 12 | import {
 13 |     FormControl,
 14 |     FormLabel,
 15 |     FormErrorMessage,
 16 |     FormHelperText,
 17 | } from '@chakra-ui/react'
 18 | import { Button, Input, Divider } from '@chakra-ui/react'
 19 | import { useToast } from '@chakra-ui/react'
 20 | import axios from 'axios';
 21 | import { useCookies } from 'react-cookie';
 22 | import { useRouter } from 'next/router';
 23 | 
 24 | const SettingsIcon = (props) => (
 25 |     <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24" /><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z" /></svg>
 26 | )
 27 | 
 28 | export default function SettingModal(props) {
 29 | 
 30 |     const { isOpen, onOpen, onClose } = useDisclosure();
 31 |     const toast = useToast();
 32 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
 33 |     const router = useRouter();
 34 | 
 35 |     const FailToast = (msg = "Something wrong.") =>
 36 |         toast({
 37 |             description: msg,
 38 |             status: 'error',
 39 |             duration: 9000,
 40 |             isClosable: true,
 41 |         });
 42 | 
 43 |     const SuccessToast = () =>
 44 |         toast({
 45 |             description: 'Updated successfully.',
 46 |             status: 'success',
 47 |             duration: 9000,
 48 |             isClosable: true,
 49 |         });
 50 | 
 51 |     const changePassword = async (data) => {
 52 |         await axios.get("/api/user/" + cookies.userID).then((res) => {    //get username
 53 |             const username = res.data.result[0].username;
 54 |             axios.post("/api/login", { username: username, pwd: data.pwd_old })  //valid old password
 55 |                 .then((res) => {
 56 |                     if (res.data.authStatus === true) {
 57 |                         axios.put("/api/user/" + cookies.userID, data)  //update new password
 58 |                             .then((res) => {
 59 |                                 axios.post("/api/logout", { userID: cookies.userID }).then(() => {
 60 |                                     removeCookie("userID");
 61 |                                     SuccessToast();
 62 |                                     router.push("/");
 63 |                                 }).catch((err) => {
 64 |                                     console.log(err);
 65 |                                     FailToast("Cannot logout");
 66 |                                 });
 67 |                             })
 68 |                             .catch((err) => {
 69 |                                 console.log(err);
 70 |                                 FailToast();
 71 |                             });
 72 |                     }
 73 |                 })
 74 |                 .catch((err) => {
 75 |                     console.error(err);
 76 |                     FailToast("Old password invalid.");
 77 |                 });
 78 |         }).catch((err) => {
 79 |             console.log(err);
 80 |             FailToast("Could not fetch username");
 81 |         });
 82 |     }
 83 |     
 84 |     const changeUsername = async (data) => {
 85 |         await axios.put("/api/user/" + cookies.userID, {username: data.username})
 86 |         .then((res)=> {
 87 |             SuccessToast();
 88 |             // onClose();
 89 |         })
 90 |         .catch((err)=>{
 91 |             console.log(err);
 92 |             FailToast("Could not change username.");
 93 |         });
 94 |     }
 95 | 
 96 |     const submitHandler = async (e) => {
 97 |         e.preventDefault();
 98 | 
 99 |         var data = {
100 |             username: undefined,
101 |             pwd_old: undefined,
102 |             pwd: undefined,
103 |         }
104 |         if (e.target.oldpassword.value.length > 0 && (e.target.newpassword.value.length > 0 && (e.target.newpassword.value === e.target.repeatnewpassword.value))) {
105 |             data.pwd_old = e.target.oldpassword.value;
106 |             data.pwd = e.target.newpassword.value;
107 |             console.log("pwd set!");
108 |             await changePassword(data);
109 |         }
110 |         if (e.target.newusername.value.length > 0) {
111 |             data.username = e.target.newusername.value;
112 |             console.log("username set!");
113 |             await changeUsername(data);
114 |         }
115 | 
116 |         if(!(e.target.oldpassword.value.length > 0 && (e.target.newpassword.value.length > 0 || e.target.repeatnewpassword.value.length > 0 ))){
117 |             FailToast("Old password is empty!");
118 |         }
119 |         if(!(e.target.newpassword.value.length > 0 && (e.target.newpassword.value === e.target.repeatnewpassword.value))){
120 |             FailToast("New password not matched!");
121 |         }
122 |     }
123 | 
124 |     return (
125 |         <>
126 |             <IconButton
127 |                 variant="unstyled"
128 |                 colorScheme='teal'
129 |                 aria-label='Send email'
130 |                 icon={<Icon as={SettingsIcon} />}
131 |                 onClick={onOpen}
132 |             />
133 | 
134 |             <Modal isOpen={isOpen} onClose={onClose} size="lg">
135 |                 <ModalOverlay />
136 |                 <ModalContent>
137 |                     <form onSubmit={submitHandler}>
138 |                         <ModalHeader>Settings</ModalHeader>
139 |                         <ModalCloseButton />
140 |                         <ModalBody>
141 |                             <b>Update Username</b>
142 |                             <FormControl>
143 |                                 <FormLabel htmlFor='newusername'>New Username</FormLabel>
144 |                                 <Input id='newusername' type='text' />
145 |                             </FormControl>
146 |                             <Divider h={3} />
147 |                             <b>Update Password</b>
148 |                             <FormControl>
149 |                                 <FormLabel htmlFor='oldpassword'>Old Password</FormLabel>
150 |                                 <Input id='oldpassword' type='password' />
151 |                             </FormControl>
152 |                             <FormControl>
153 |                                 <FormLabel htmlFor='newpassword'>New Password</FormLabel>
154 |                                 <Input id='newpassword' type='password' />
155 |                             </FormControl>
156 |                             <FormControl>
157 |                                 <FormLabel htmlFor='repeatnewpassword'>Repeat New Password</FormLabel>
158 |                                 <Input id='repeatnewpassword' type='password' />
159 |                             </FormControl>
160 |                         </ModalBody>
161 | 
162 |                         <ModalFooter>
163 |                             <Button variant='ghost' mr={3} onClick={onClose}>Cancel</Button>
164 |                             <Button colorScheme='blue' type="submit">
165 |                                 Update
166 |                             </Button>
167 |                         </ModalFooter>
168 |                     </form>
169 |                 </ModalContent>
170 |             </Modal>
171 |         </>
172 |     );
173 | }
174 | 


--------------------------------------------------------------------------------
/components/TodayTable.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import TodoListTable from "./TodoListTable";
 3 | import axios from 'axios';
 4 | import { useCookies } from 'react-cookie';
 5 | import moment from "moment";
 6 | 
 7 | export default function TodayTable () {
 8 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
 9 | 
10 |     const [data, setData] = useState(undefined);
11 | 
12 |     const filteredData = (data) => {
13 |         return data.filter(((value)=>{  // return true or false
14 |             return moment().isSame(moment(value.datetime), "date") & !value.finished;
15 |         }));
16 |     }
17 |     
18 |     useEffect(()=>{
19 |         const url = "/api/items?userID=" + cookies.userID;
20 |         axios.get(url).then((res)=>{
21 |             setData(filteredData(res.data.result));
22 |         }).catch((err)=>{
23 |             console.error(err);
24 |         });
25 |     }, []);
26 | 
27 |     return (
28 |         <>
29 |             <TodoListTable data={data} />
30 |         </>
31 |     );
32 | }


--------------------------------------------------------------------------------
/components/TodoListTable.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |     Table,
  3 |     Thead,
  4 |     Tbody,
  5 |     Tfoot,
  6 |     Tr,
  7 |     Th,
  8 |     Td,
  9 |     TableCaption,
 10 |     Box,
 11 |     HStack,
 12 |     Text,
 13 | } from '@chakra-ui/react'
 14 | import { Checkbox } from '@chakra-ui/react'
 15 | import { Badge } from '@chakra-ui/react'
 16 | import axios from 'axios'
 17 | import moment from 'moment'
 18 | import { useEffect, useState } from 'react'
 19 | 
 20 | const DateBadge = (props) => {
 21 |     return (
 22 |         <Badge variant="outline" mr={2}>{props.children}</Badge>
 23 |     );
 24 | }
 25 | 
 26 | const OverDueDateBadge = (props) => {
 27 |     return (
 28 |         <Badge variant="outline" mr={2} colorScheme="red">{props.children}</Badge>
 29 |     );
 30 | }
 31 | 
 32 | const OverDueBadge = (props) => {
 33 |     return (
 34 |         <Badge variant="solid" mr={2} colorScheme="red">OverDue</Badge>
 35 |     );
 36 | }
 37 | 
 38 | const RepeatBadge = (props) => {
 39 |     return (
 40 |         <Badge variant="solid" mr={2}>{props.children}</Badge>
 41 |     );
 42 | }
 43 | 
 44 | export default function TodoListTable(props) {
 45 | 
 46 |     const disableOverdue = props.disableOverdue ? props.disableOverdue : false;
 47 | 
 48 |     const printItems = (data = []) => {
 49 | 
 50 |         return data.map((value) => {
 51 |             // console.log(value);
 52 | 
 53 |             const [checked, setChecked] = useState(value.finished); // show checked state
 54 | 
 55 |             const checkHandler = (id, value) => {
 56 |                 axios.put("/api/items/" + id, { finished: value })
 57 |                     .then((res) => {
 58 |                         setChecked(!checked);
 59 |                     });
 60 |             }
 61 | 
 62 |             const getDateBadge = (date) => {
 63 |                 var targetDate = moment(date).format('DD MMM');
 64 |                 var today = moment().format('DD MMM');
 65 |                 // console.log("targetDate is in the past?", moment().diff(date, 'days') > 0);    // targetdate is in the past?
 66 |                 if (moment().diff(date, 'minutes') > 0 && !disableOverdue) {   // targetdate is in the past?
 67 |                     return <OverDueDateBadge>{targetDate}</OverDueDateBadge>
 68 |                 } else if (targetDate.toString() === today.toString()) {
 69 |                     return <DateBadge>TODAY</DateBadge>;
 70 |                 } else {
 71 |                     return <DateBadge>{targetDate}</DateBadge>;
 72 |                 }
 73 |             }
 74 | 
 75 |             const getRepeatBadge = (repeats = "none") => {
 76 |                 if (repeats === "none") {
 77 |                     return <></>
 78 |                 } else {
 79 |                     return <RepeatBadge>{repeats}</RepeatBadge>
 80 |                 }
 81 |             }
 82 | 
 83 |             const getOverDueBadge = (date) => {
 84 |                 if(!disableOverdue) {
 85 |                     if (moment().diff(date, 'minutes') > 0){
 86 |                         return <OverDueBadge />
 87 |                     }
 88 |                 }
 89 |             }
 90 | 
 91 |             return (
 92 |                 <Tr>
 93 |                     <Td>
 94 |                         <Checkbox
 95 |                             onChange={(e) => { checkHandler(value.id, e.target.checked); }}
 96 |                             isChecked={checked}
 97 |                         >
 98 |                             <Text onClick={(e) => { e.preventDefault() }}>{value.name}</Text>
 99 |                         </Checkbox>
100 | 
101 |                     </Td>
102 |                     <Td isNumeric>
103 |                         {getOverDueBadge(value.datetime)}
104 |                         {getRepeatBadge(value.repeats)}
105 |                         {getDateBadge(value.datetime)}
106 |                         {moment(value.datetime).format('h:mm A')}
107 |                     </Td>
108 |                 </Tr>
109 |             );
110 |         })
111 |     }
112 | 
113 |     return (
114 |         <Box borderRadius="lg" borderWidth="1px">
115 |             <Table variant='simple'>
116 |                 <Thead>
117 |                     <Tr>
118 |                         <Th>NAME</Th>
119 |                         <Th isNumeric>DATE</Th>
120 |                     </Tr>
121 |                 </Thead>
122 |                 <Tbody>
123 |                     {/* <Tr>
124 |                         <Td><Checkbox>Item 1</Checkbox></Td>
125 |                         <Td isNumeric>
126 |                             <OverDueBadge />
127 |                             <OverDueDateBadge>23 Dec</OverDueDateBadge>
128 |                             06:00AM
129 |                         </Td>
130 |                     </Tr>
131 |                     <Tr>
132 |                         <Td><Checkbox>Item 2</Checkbox></Td>
133 |                         <Td isNumeric>
134 |                             <RepeatBadge>Weekly</RepeatBadge>
135 |                             <DateBadge>Today</DateBadge>
136 |                             07:00AM
137 |                         </Td>
138 |                     </Tr>
139 |                     <Tr>
140 |                         <Td><Checkbox>Item 3</Checkbox></Td>
141 |                         <Td isNumeric>
142 |                             <RepeatBadge>Monthly</RepeatBadge>
143 |                             <DateBadge>Today</DateBadge>
144 |                             09:30AM
145 |                         </Td>
146 |                     </Tr>
147 |                     <Tr>
148 |                         <Td><Checkbox>Item 4</Checkbox></Td>
149 |                         <Td isNumeric>
150 |                             <DateBadge>Today</DateBadge>
151 |                             11:30AM
152 |                         </Td>
153 |                     </Tr> */}
154 |                     {printItems(props.data)}
155 |                 </Tbody>
156 |             </Table>
157 |         </Box>
158 | 
159 |     );
160 | }


--------------------------------------------------------------------------------
/config/init.sql:
--------------------------------------------------------------------------------
 1 | DROP TABLE IF EXISTS auth;
 2 | 
 3 | DROP TABLE IF EXISTS items;
 4 | 
 5 | DROP TABLE IF EXISTS folders;
 6 | 
 7 | CREATE TABLE auth (
 8 |     id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
 9 |     username VARCHAR(20),
10 |     pwd VARCHAR(255)
11 | );
12 | 
13 | INSERT INTO
14 |     auth (username, pwd)
15 | VALUES
16 |     ('admin', 'admin');
17 | 
18 | CREATE TABLE folders (
19 |     id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
20 |     userID INT NOT NULL,
21 |     name VARCHAR(255)
22 | );
23 | 
24 | INSERT INTO
25 |     folders (userID, name)
26 | VALUES
27 |     (1, 'To-do');
28 | 
29 | CREATE TABLE items (
30 |     id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
31 |     userID INT NOT NULL,
32 |     name VARCHAR(255) NOT NULL,
33 |     description VARCHAR(500),
34 |     datetime TIMESTAMP NOT NULL,
35 |     reminder INT,
36 |     repeats VARCHAR(16),
37 |     folder INT NOT NULL,
38 |     finished BOOLEAN NOT NULL DEFAULT 0 
39 | );
40 | 
41 | INSERT INTO
42 |     items (userID, name, description, datetime, reminder, repeats, folder)
43 | VALUES
44 |     (1, 'First Item', 'Remind me to do shopping', now(), 0, 'none', 1);
45 | 
46 | SHOW TABLES;


--------------------------------------------------------------------------------
/config/mysql.js:
--------------------------------------------------------------------------------
1 | const config = {
2 |     host: "db",
3 |     user: "selfremind",
4 |     password: "selfremind123",
5 |     database: "selfremind",
6 |     multipleStatements: true
7 | }
8 | 
9 | export default config;


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: "3"
 2 | services:
 3 |   web:
 4 |     build: .
 5 |     ports:
 6 |       - "3000:3000"
 7 |     restart: unless-stopped
 8 |     # for dev
 9 |     #volumes:
10 |     #  - ./:/home/app
11 |   db:
12 |     image: mysql/mysql-server:8.0
13 |     restart: unless-stopped
14 |     command: --default-authentication-plugin=mysql_native_password
15 |     environment:
16 |       MYSQL_ROOT_PASSWORD: example
17 |       MYSQL_DATABASE: selfremind
18 |       MYSQL_USER: selfremind
19 |       MYSQL_PASSWORD: selfremind123
20 |     volumes:
21 |       - dbdata:/var/lib/mysql
22 |       - ./my.conf:/etc/mysql/my.cnf
23 | volumes:
24 |   dbdata:
25 | 


--------------------------------------------------------------------------------
/icons/logout_black_24dp.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>


--------------------------------------------------------------------------------
/icons/settings_black_24dp.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>


--------------------------------------------------------------------------------
/my.conf:
--------------------------------------------------------------------------------
1 | [mysqld] 
2 | max_connections=8192


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 | }
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "selfremind",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint",
 9 |     "up": "docker-compose up -d",
10 |     "down": "docker-compose down"
11 |   },
12 |   "dependencies": {
13 |     "@chakra-ui/icons": "^1.1.1",
14 |     "@chakra-ui/react": "^1.7.3",
15 |     "@emotion/react": "^11",
16 |     "@emotion/styled": "^11",
17 |     "@mui/icons-material": "^5.2.5",
18 |     "@mui/material": "^5.2.5",
19 |     "axios": "^0.25.0",
20 |     "framer-motion": "^5",
21 |     "iron-session": "^6.0.5",
22 |     "moment": "^2.29.4",
23 |     "mysql": "^2.18.1",
24 |     "next": "12.1.0",
25 |     "react": "17.0.2",
26 |     "react-cookie": "^4.1.1",
27 |     "react-datepicker": "^4.6.0",
28 |     "react-dom": "17.0.2"
29 |   },
30 |   "devDependencies": {
31 |     "eslint": "8.5.0",
32 |     "eslint-config-next": "12.0.7"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import { ChakraProvider } from '@chakra-ui/react'
 2 | import { CookiesProvider } from "react-cookie"
 3 | import '../styles/globals.css'
 4 | import Head from 'next/head'
 5 | 
 6 | function MyApp({ Component, pageProps }) {
 7 |   return (
 8 |     <ChakraProvider>
 9 |       <CookiesProvider>
10 |         <Head><title>SelfRemind</title></Head>
11 |         <Component {...pageProps} />
12 |       </CookiesProvider>
13 |     </ChakraProvider>
14 |   )
15 | }
16 | 
17 | export default MyApp
18 | 


--------------------------------------------------------------------------------
/pages/all.js:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router'
 2 | import { Flex, Grid, GridItem, Spacer, Stack, Text } from '@chakra-ui/react'
 3 | import MenuBar from "../components/MenuBar";
 4 | import FoldersPanel from "../components/FoldersPanel";
 5 | import AddItemButton from "../components/AddItemButton";
 6 | import TodoListTable from "../components/TodoListTable";
 7 | import RemoveFolderButton from "../components/RemoveFolderButton";
 8 | import AuthRedirect from '../components/AuthRedirect';
 9 | import { useEffect, useState } from 'react';
10 | import { useCookies } from 'react-cookie';
11 | import FolderTable from '../components/FolderTable';
12 | import AllTable from '../components/AllTable';
13 | 
14 | const All = () => {
15 |     const router = useRouter();
16 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
17 | 
18 |     return (
19 |         <>
20 |             <AuthRedirect />
21 |             <Grid templateColumns='repeat(5, 1fr)'>
22 |                 <GridItem colSpan={5}>
23 |                     <MenuBar />
24 |                 </GridItem>
25 |                 <GridItem>
26 |                     <FoldersPanel />
27 |                 </GridItem>
28 |                 <GridItem colSpan={4}>
29 |                     <Stack spacing={5} p={10}>
30 |                         <Flex>
31 |                             <Text>
32 |                                 <Text as="b" fontSize="xl">
33 |                                     All To-dos
34 |                                 </Text>
35 |                             </Text>
36 |                             <Spacer />
37 |                             <AddItemButton />
38 |                         </Flex>
39 |                         <AllTable />
40 |                     </Stack>
41 |                 </GridItem>
42 |             </Grid>
43 |         </>
44 |     );
45 | }
46 | 
47 | export default All;
48 | 


--------------------------------------------------------------------------------
/pages/api/authStatus.js:
--------------------------------------------------------------------------------
 1 | import { withIronSessionApiRoute } from "iron-session/next";
 2 | 
 3 | export default withIronSessionApiRoute(
 4 |     function handler(req, res) {
 5 |         // input userID, check whether session.userID contain input, output boolean
 6 | 
 7 |         const successHandler = (result = false) => {
 8 |             res.status(200).json({ authStatus: result });
 9 |         }
10 | 
11 |         // Error Handler 
12 |         const errorHandler = (err = undefined) => {
13 |             res.status(401).json({ err: err });     // goes to clients side .catch(err) methods 
14 |         }
15 | 
16 |         if (!req.method === 'POST') { errorHandler("POST method only") }     // force methods to POST only 
17 |         if (!req.body.userID) { errorHandler("No value passed"); }  // must pass value to this api route
18 | 
19 |         successHandler(req.session.userID.toString() === req.body.userID.toString());
20 |     }
21 |     ,
22 |     {
23 |         cookieName: "myapp_cookiename",
24 |         password: "mdTR2e7stMmnYm67NHeWEPdbQJppzzZ7",
25 |         // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
26 |         cookieOptions: {
27 |             secure: process.env.NODE_ENV === "production",
28 |         },
29 |     },
30 | );
31 | 


--------------------------------------------------------------------------------
/pages/api/folders/[id].js:
--------------------------------------------------------------------------------
  1 | import config from '../../../config/mysql';
  2 | var mysql = require('mysql');
  3 | import { withIronSessionApiRoute } from "iron-session/next";
  4 | 
  5 | 
  6 | export default withIronSessionApiRoute(
  7 |     function handler(req, res) {
  8 |         const { id } = req.query;
  9 | 
 10 |         // Error Handler 
 11 |         const errorHandler = (err = undefined) => {
 12 |             res.status(401).json({ err: err, body: req.body, query: req.query });     // goes to clients side .catch(err) methods 
 13 |         }
 14 | 
 15 |         const getFolder = (id) => { // get info with folder id
 16 |             var statements = "SELECT * FROM folders WHERE id=?;";
 17 |             var insert = [id];
 18 |             statements = mysql.format(statements, insert);
 19 | 
 20 |             var con = mysql.createConnection(config);
 21 | 
 22 |             con.connect(function (err) {
 23 |                 if (err) {
 24 |                     res.status(200).json({ err: err });
 25 |                 };
 26 |                 con.query(statements, function (err, result) {
 27 |                     if (err) { res.status(200).json({ err: err }); };
 28 |                     res.status(200).json({ result: result, req: req.query })
 29 |                 });
 30 |             });
 31 |         }
 32 | 
 33 |         const modifyFolder = (value) => {  // modify items with id
 34 |             const folder = {
 35 |                 id: value.id,
 36 |                 name: value.name,
 37 |             }
 38 | 
 39 |             var statements = "";
 40 |             if (folder.name !== undefined) {
 41 |                 statements += "UPDATE folders SET name=? WHERE id=?;";
 42 |                 var insert = [folder.name, folder.id];
 43 |                 statements = mysql.format(statements, insert);
 44 |             }
 45 |             
 46 |             var con = mysql.createConnection(config);
 47 | 
 48 |             con.connect(function (err) {
 49 |                 if (err) {
 50 |                     res.status(200).json({ err: err, statements: statements });
 51 |                 };
 52 |                 con.query(statements, function (err, result) {
 53 |                     if (err) { res.status(200).json({ err: err, req: req.body, statements: statements }); };
 54 |                     res.status(200).json({ result: result, req: req.body, statements: statements })
 55 |                 });
 56 |             });
 57 |         }
 58 | 
 59 |         const deleteFolder = (id) => {  // delete items with id
 60 |             var statements = "DELETE FROM folders WHERE id=?;";
 61 |             var insert = [id];
 62 |             statements = mysql.format(statements, insert);
 63 | 
 64 |             statements += "DELETE FROM items WHERE folder=?;"
 65 |             var insert = [id];
 66 |             statements = mysql.format(statements, insert);
 67 | 
 68 |             var con = mysql.createConnection(config);
 69 | 
 70 |             con.connect(function (err) {
 71 |                 if (err) {
 72 |                     res.status(401).json({ err: err });
 73 |                 };
 74 |                 con.query(statements, function (err, result) {
 75 |                     if (err) { res.status(401).json({ err: err, statements: statements }); };
 76 |                     res.status(200).json({ result: result, req: req.query })
 77 |                 });
 78 |             });
 79 | 
 80 |         }
 81 | 
 82 |         if (req.method === 'POST') {
 83 |             errorHandler("POST is not allowed.");
 84 |         } else if (req.method === 'GET') {
 85 |             getFolder(id);
 86 |         } else if (req.method === 'PUT') {
 87 |             modifyFolder(id);
 88 |         } else if (req.method === 'DELETE') {
 89 |             deleteFolder(id);
 90 |         }
 91 |     },
 92 |     {
 93 |         cookieName: "myapp_cookiename",
 94 |         password: "mdTR2e7stMmnYm67NHeWEPdbQJppzzZ7",
 95 |         // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
 96 |         cookieOptions: {
 97 |             secure: process.env.NODE_ENV === "production",
 98 |         },
 99 |     },
100 | );
101 | 


--------------------------------------------------------------------------------
/pages/api/folders/index.js:
--------------------------------------------------------------------------------
 1 | import config from '../../../config/mysql';
 2 | var mysql = require('mysql');
 3 | import { withIronSessionApiRoute } from "iron-session/next";
 4 | import moment from 'moment'
 5 | 
 6 | export default withIronSessionApiRoute(
 7 |     function handler(req, res) {
 8 | 
 9 |         // Error Handler 
10 |         const errorHandler = (err = undefined) => {
11 |             res.status(401).json({ err: err, body: req.body, query: req.query });     // goes to clients side .catch(err) methods 
12 |         }
13 | 
14 |         const createFolder = (value) => {  // Create a new item
15 |             // Folder Object Structure
16 |             const folder = {
17 |                 userID: parseInt(value.userID),
18 |                 name: value.name.toString(),
19 |             }
20 | 
21 |             var statements = "INSERT INTO folders (userID, name) VALUES (?,?);";
22 |             var insert = [folder.userID, folder.name];
23 |             statements = mysql.format(statements, insert);
24 | 
25 |             var con = mysql.createConnection(config);
26 | 
27 |             con.connect(function (err) {
28 |                 if (err) {
29 |                     res.status(200).json({ err: err });
30 |                 };
31 |                 con.query(statements, function (err, result) {
32 |                     if (err) { res.status(200).json({ err: err }); };
33 |                     res.status(200).json({ result: result, req: req.query })
34 |                 });
35 |             });
36 |         }
37 | 
38 |         const getAllFolders = (userID = undefined) => {
39 |             if(userID === undefined) {
40 |                 errorHandler("No userID passed");
41 |             } else {
42 |                 var statements = "SELECT * FROM folders WHERE userID=? ORDER BY id ASC;";
43 |                 var insert = [userID];
44 |                 statements = mysql.format(statements, insert);
45 |     
46 |                 var con = mysql.createConnection(config);
47 |     
48 |                 con.connect(function (err) {
49 |                     if (err) {
50 |                         res.status(200).json({ err: err });
51 |                     };
52 |                     con.query(statements, function (err, result) {
53 |                         if (err) { res.status(200).json({ err: err }); };
54 |                         res.status(200).json({ result: result, req: req.query })
55 |                     });
56 |                 });
57 |             }
58 |         }
59 | 
60 |         if (req.method === 'POST') {
61 |             if (!req.body.userID) { errorHandler("Not logged in.") } else {
62 |                 if (req.body.userID.toString() !== req.session.userID.toString()) { errorHandler("User not match") } else {
63 |                     createFolder(req.body);
64 |                 }
65 |             }
66 |         } else if (req.method === 'GET') {
67 |             if (!req.query.userID) { errorHandler("Not logged in.") } else {
68 |                 if (req.query.userID.toString() !== req.session.userID.toString()) { errorHandler("User not match") } else {
69 |                     getAllFolders(req.query.userID);
70 |                 }
71 |             }
72 |         } else if (req.method === 'PUT') {
73 |             errorHandler("PUT is not allowed.");
74 |         } else if (req.method === 'DELETE') {
75 |             errorHandler("DELETE is not allowed.");
76 |         }
77 | 
78 |     },
79 |     {
80 |         cookieName: "myapp_cookiename",
81 |         password: "mdTR2e7stMmnYm67NHeWEPdbQJppzzZ7",
82 |         // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
83 |         cookieOptions: {
84 |             secure: process.env.NODE_ENV === "production",
85 |         },
86 |     },
87 | );
88 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/api/init.js:
--------------------------------------------------------------------------------
 1 | import config from '../../config/mysql';
 2 | var mysql = require('mysql');
 3 | var fs = require('fs');
 4 | var readline = require('readline');
 5 | 
 6 | const sqlToString = async (path = "") => {  //convert sql file into string
 7 |     return new Promise((resolve) => {
 8 | 
 9 |         var statements = "";
10 | 
11 |         var rl = readline.createInterface({
12 |             input: fs.createReadStream(path),
13 |             terminal: false
14 |         });
15 | 
16 |         rl.on('line', function (chunk) {
17 |             statements += chunk.toString('ascii');
18 |         });
19 | 
20 |         rl.on('close', function () {
21 |             resolve(statements);
22 |         });
23 |     });
24 | }
25 | 
26 | export default function handler(req, res) {
27 |     var con = mysql.createConnection(config);
28 | 
29 |     con.connect(function (err) {
30 |         if (err) {
31 |             res.status(401).json({ err: err });
32 |         };
33 |         con.query("SHOW TABLES;", function (err, result) {
34 |             if (err) { res.status(401).json({ err: err }); };
35 |             if (result.length === 0) {
36 |                 sqlToString("./config/init.sql").then((statements) => {
37 |                         if (err) {
38 |                             res.status(401).json({ err: err });
39 |                         };
40 |                         con.query(statements, function (err, result) {
41 |                             if (err) { res.status(401).json({ err: err }); };
42 |                             res.status(200).json({ result: result })
43 |                         });
44 |                 });
45 |             } else {
46 |                 res.status(200).json({ result: result })
47 |             }
48 |         });
49 |     });
50 | 
51 | 
52 | 
53 | }


--------------------------------------------------------------------------------
/pages/api/items/[id].js:
--------------------------------------------------------------------------------
  1 | import config from '../../../config/mysql';
  2 | var mysql = require('mysql');
  3 | 
  4 | export default function handler(req, res) {
  5 |     const { id } = req.query;
  6 |     
  7 |     const createItem = () => {  // Create a new item
  8 |         // Items Object Structure
  9 |         const items = {
 10 |             name: "Test1",
 11 |             description: "This is a testing item.",
 12 |             datetime: new Date(),
 13 |             reminder: 0,
 14 |             repeats: "",
 15 |             folder: "1",    //pending changes after implemented folder
 16 |             finished: false,
 17 |         }
 18 |     
 19 |         var statements = "INSERT INTO items (name, description, datetime, reminder, repeats, folder, finished) VALUES (?,?,?,?,?,?,?);";
 20 |         var insert = [items.name, items.description, items.datetime, items.reminder, items.repeats, items.folder, items.finished];
 21 |         statements = mysql.format(statements, insert);
 22 |     
 23 |         var con = mysql.createConnection(config);
 24 |     
 25 |         con.connect(function (err) {
 26 |             if (err) {
 27 |                 res.status(200).json({ err: err });
 28 |             };
 29 |             con.query(statements, function (err, result) {
 30 |                 if (err) { res.status(200).json({ err: err }); };
 31 |                 res.status(200).json({ result: result, req: req.query })
 32 |             });
 33 |         });
 34 |     }
 35 | 
 36 |     const getItem = (id) => { // get info with item id
 37 |         var statements = "SELECT * FROM items WHERE id=?;";
 38 |         var insert = [id];
 39 |         statements = mysql.format(statements, insert);
 40 |     
 41 |         var con = mysql.createConnection(config);
 42 |     
 43 |         con.connect(function (err) {
 44 |             if (err) {
 45 |                 res.status(200).json({ err: err });
 46 |             };
 47 |             con.query(statements, function (err, result) {
 48 |                 if (err) { res.status(200).json({ err: err }); };
 49 |                 res.status(200).json({ result: result, req: req.query })
 50 |             });
 51 |         });
 52 |     }
 53 | 
 54 |     const modifyItem = (id) => {  // modify items with id
 55 |         const items = {
 56 |             name: req.body.name,
 57 |             description: req.body.description,
 58 |             datetime: req.body.datetime,
 59 |             reminder: req.body.reminder,
 60 |             repeats: req.body.repeats,
 61 |             folder: req.body.folder,
 62 |             finished: req.body.finished,
 63 |         }
 64 |     
 65 |         var statements = "";
 66 |         if (items.name !== undefined) {
 67 |             statements += "UPDATE items SET name=? WHERE id=?;";
 68 |             var insert = [items.name, id];
 69 |             statements = mysql.format(statements, insert);
 70 |         }
 71 |         if (items.description !== undefined) {
 72 |             statements += "UPDATE items SET description=? WHERE id=?;";
 73 |             var insert = [items.description, id];
 74 |             statements = mysql.format(statements, insert);
 75 |         }
 76 |         if (items.datetime !== undefined) {
 77 |             statements += "UPDATE items SET datetime=? WHERE id=?;";
 78 |             var insert = [items.datetime, id];
 79 |             statements = mysql.format(statements, insert);
 80 |         }
 81 |         if (items.reminder !== undefined) {
 82 |             statements += "UPDATE items SET reminder=? WHERE id=?;";
 83 |             var insert = [items.reminder, id];
 84 |             statements = mysql.format(statements, insert);
 85 |         }
 86 |         if (items.repeats !== undefined) {
 87 |             statements += "UPDATE items SET repeats=? WHERE id=?;";
 88 |             var insert = [items.repeats, id];
 89 |             statements = mysql.format(statements, insert);
 90 |         }
 91 |         if (items.folder !== undefined) {
 92 |             statements += "UPDATE items SET folder=? WHERE id=?;";
 93 |             var insert = [items.folder, id];
 94 |             statements = mysql.format(statements, insert);
 95 |         }
 96 |         if (items.finished !== undefined) {
 97 |             statements += "UPDATE items SET finished=? WHERE id=?;";
 98 |             var insert = [items.finished, id];
 99 |             statements = mysql.format(statements, insert);
100 |         }
101 |     
102 |         var con = mysql.createConnection(config);
103 |     
104 |         con.connect(function (err) {
105 |             if (err) {
106 |                 res.status(200).json({ err: err, statements: statements });
107 |             };
108 |             con.query(statements, function (err, result) {
109 |                 if (err) { res.status(200).json({ err: err , req: req.body, statements: statements}); };
110 |                 res.status(200).json({ result: result, req: req.body , statements: statements})
111 |             });
112 |         });
113 |     }
114 | 
115 |     const deleteItem = (id) => {  // delete items with id
116 |         var statements = "DELETE FROM items WHERE id=?;";
117 |         var insert = [id];
118 |         statements = mysql.format(statements, insert);
119 |     
120 |         var con = mysql.createConnection(config);
121 |     
122 |         con.connect(function (err) {
123 |             if (err) {
124 |                 res.status(200).json({ err: err });
125 |             };
126 |             con.query(statements, function (err, result) {
127 |                 if (err) { res.status(200).json({ err: err }); };
128 |                 res.status(200).json({ result: result, req: req.query })
129 |             });
130 |         });
131 | 
132 |     }
133 | 
134 |     if (req.method === 'POST') {    
135 |         // createItem();
136 |     } else if (req.method === 'GET') {  
137 |         getItem(id);
138 |     } else if (req.method === 'PUT') {  
139 |         modifyItem(id);
140 |     } else if (req.method === 'DELETE') {   
141 |         deleteItem(id);
142 |     }
143 | }


--------------------------------------------------------------------------------
/pages/api/items/index.js:
--------------------------------------------------------------------------------
 1 | import config from '../../../config/mysql';
 2 | var mysql = require('mysql');
 3 | import { withIronSessionApiRoute } from "iron-session/next";
 4 | import moment from 'moment'
 5 | 
 6 | export default withIronSessionApiRoute(
 7 |     function handler(req, res) {
 8 | 
 9 |         // Error Handler 
10 |         const errorHandler = (err = undefined) => {
11 |             res.status(401).json({ err: err, body: req.body, query: req.query });     // goes to clients side .catch(err) methods 
12 |         }
13 | 
14 |         const createItem = (value) => {  // Create a new item
15 |             // Items Object Structure
16 |             const items = {
17 |                 userID: parseInt(value.userID),
18 |                 name: value.name.toString(),
19 |                 description: value.description.toString(),
20 |                 datetime: moment(value.datetime).utc().format('YYYY-MM-DD HH:mm:ss'),
21 |                 reminder: parseInt(value.reminder),
22 |                 repeats: value.repeat.toString(),
23 |                 folder: parseInt(value.folder),
24 |                 finished: false,
25 |             }
26 | 
27 |             var statements = "INSERT INTO items (userID, name, description, datetime, reminder, repeats, folder, finished) VALUES (?,?,?,?,?,?,?,?);";
28 |             var insert = [items.userID, items.name, items.description, items.datetime, items.reminder, items.repeats, items.folder, items.finished];
29 |             statements = mysql.format(statements, insert);
30 | 
31 |             var con = mysql.createConnection(config);
32 | 
33 |             con.connect(function (err) {
34 |                 if (err) {
35 |                     res.status(200).json({ err: err });
36 |                 };
37 |                 con.query(statements, function (err, result) {
38 |                     if (err) { res.status(200).json({ err: err }); };
39 |                     res.status(200).json({ result: result, req: req.query })
40 |                 });
41 |             });
42 |         }
43 | 
44 |         const getAllItems = (id) => {
45 |             var statements = "SELECT * FROM items WHERE userID=? ORDER BY datetime ASC;";
46 |             var insert = [id];
47 |             statements = mysql.format(statements, insert);
48 | 
49 |             var con = mysql.createConnection(config);
50 | 
51 |             con.connect(function (err) {
52 |                 if (err) {
53 |                     res.status(200).json({ err: err });
54 |                 };
55 |                 con.query(statements, function (err, result) {
56 |                     if (err) { res.status(200).json({ err: err }); };
57 |                     res.status(200).json({ result: result, req: req.query })
58 |                 });
59 |             });
60 |         }
61 | 
62 |         if (req.method === 'POST') {
63 |             if (!req.body.userID) { errorHandler("Not logged in.") } else {
64 |                 if (req.body.userID.toString() !== req.session.userID.toString()) { errorHandler("User not match") } else {
65 |                     createItem(req.body);
66 |                 }
67 |             }
68 |         } else if (req.method === 'GET') {
69 |             if (!req.query.userID) { errorHandler("Not logged in.") } else {
70 |                 if (req.query.userID.toString() !== req.session.userID.toString()) { errorHandler("User not match") } else {
71 |                     getAllItems(req.query.userID);
72 |                 }
73 |             }
74 |         } else if (req.method === 'PUT') {
75 |             errorHandler("PUT is not allowed.");
76 |         } else if (req.method === 'DELETE') {
77 |             errorHandler("DELETE is not allowed.");
78 |         }
79 | 
80 |     },
81 |     {
82 |         cookieName: "myapp_cookiename",
83 |         password: "mdTR2e7stMmnYm67NHeWEPdbQJppzzZ7",
84 |         // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
85 |         cookieOptions: {
86 |             secure: process.env.NODE_ENV === "production",
87 |         },
88 |     },
89 | );
90 | 


--------------------------------------------------------------------------------
/pages/api/login.js:
--------------------------------------------------------------------------------
 1 | import config from '../../config/mysql';
 2 | var mysql = require('mysql');
 3 | import { withIronSessionApiRoute } from "iron-session/next";
 4 | 
 5 | export default withIronSessionApiRoute(
 6 |     function handler(req, res) {
 7 | 
 8 |         // Error Handler 
 9 |         const errorHandler = (err = null) => {
10 |             res.status(401).json({ err: err });     // goes to clients side .catch(err) methods 
11 |         }
12 | 
13 |         // Login Success Handler
14 |         const loginSuccess = async (userID) => {
15 |             // session part
16 |             req.session.userID = userID;
17 |             await req.session.save();
18 | 
19 |             res.status(200).json({ authStatus: true, userID: req.session.userID });     // goes to clients side .then(res) methods 
20 |         }
21 | 
22 |         if (req.method === 'POST') {    // force methods to POST only for secure
23 |             // Process a POST request
24 | 
25 |             // Get data from POST request
26 |             const username = req.body.username;
27 |             const pwd = req.body.pwd;
28 | 
29 |             if (!username | !pwd) {   // check whether username or pwd is empty
30 |                 errorHandler({ err: "Empty username / password. " });
31 |             } else {
32 |                 //create SQL statements
33 |                 var statements = "SELECT id AS userID FROM auth WHERE username=? AND pwd=?;";
34 |                 var insert = [username, pwd];
35 |                 statements = mysql.format(statements, insert);
36 | 
37 |                 //create MYSQL connection
38 |                 var con = mysql.createConnection(config);
39 | 
40 |                 //connect to MYSQL and query statements
41 |                 con.connect(function (err) {
42 |                     if (err) { errorHandler(err); };    //return error if exists
43 |                     con.query(statements, function (err, result) {
44 |                         if (err) { errorHandler(err); };    //return error if exists
45 |                         if (!result) { errorHandler("result undefined") };   //return error if no result
46 |                         const authResult = (result.length > 0);    // determine login result
47 |                         if (authResult === true) {
48 |                             loginSuccess(result[0].userID);
49 |                         } else {
50 |                             errorHandler({ err: "Invalid username / password." });
51 |                         }
52 |                     });
53 |                 });
54 |             }
55 | 
56 |         } else {
57 |             // Handle any other HTTP method
58 |             errorHandler({ err: "Invalid method." });
59 |         }
60 | 
61 |     },
62 |     {
63 |         cookieName: "myapp_cookiename",
64 |         password: "mdTR2e7stMmnYm67NHeWEPdbQJppzzZ7",
65 |         // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
66 |         cookieOptions: {
67 |             secure: process.env.NODE_ENV === "production",
68 |         },
69 |     },
70 | );


--------------------------------------------------------------------------------
/pages/api/logout.js:
--------------------------------------------------------------------------------
 1 | import { withIronSessionApiRoute } from "iron-session/next";
 2 | 
 3 | export default withIronSessionApiRoute(
 4 |     function handler(req, res, session) {
 5 |         // Error Handler 
 6 |         const errorHandler = (err = null) => {
 7 |             res.status(401).json({ err: err });     // goes to clients side .catch(err) methods 
 8 |         }
 9 | 
10 |         // Success Handler
11 |         const successHandler = async () => {
12 |             res.status(200).json({ ok: true });     // goes to clients side .then(res) methods 
13 |         }
14 | 
15 |         if (!req.method === 'POST') { errorHandler("POST method only") } else {  // POST only
16 |             if (!req.body.userID) { errorHandler("No value passed") } else {
17 |                 req.session.destroy();
18 |                 successHandler();
19 |             }
20 |         }
21 | 
22 |     },
23 |     {
24 |         cookieName: "myapp_cookiename",
25 |         password: "mdTR2e7stMmnYm67NHeWEPdbQJppzzZ7",
26 |         // secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
27 |         cookieOptions: {
28 |             secure: process.env.NODE_ENV === "production",
29 |         },
30 |     },
31 | );


--------------------------------------------------------------------------------
/pages/api/mysql_test.js:
--------------------------------------------------------------------------------
 1 | import config from '../../config/mysql';
 2 | var mysql = require('mysql');
 3 | 
 4 | export default function handler(req, res) {
 5 |     var statements = "SELECT * FROM items;";
 6 | 
 7 |     var con = mysql.createConnection(config);
 8 | 
 9 |     con.connect(function (err) {
10 |         if (err) {
11 |             res.status(200).json({ err: err });
12 |         };
13 |         con.query(statements, function (err, result) {
14 |             if (err) { res.status(200).json({ err: err }); };
15 |             res.status(200).json({ result: result, req: req.query })
16 |         });
17 |     });
18 | }


--------------------------------------------------------------------------------
/pages/api/user/[id].js:
--------------------------------------------------------------------------------
 1 | import config from '../../../config/mysql';
 2 | var mysql = require('mysql');
 3 | 
 4 | export default function handler(req, res) {
 5 |     const { id } = req.query;
 6 | 
 7 |     // Error Handler 
 8 |     const errorHandler = (err = undefined) => {
 9 |         res.status(401).json({ err: err });     // goes to clients side .catch(err) methods 
10 |     }
11 | 
12 |     const getUser = (id) => { // get info with user id
13 |         var statements = "SELECT id, username FROM auth WHERE id=?;";
14 |         var insert = [id];
15 |         statements = mysql.format(statements, insert);
16 | 
17 |         var con = mysql.createConnection(config);
18 | 
19 |         con.connect(function (err) {
20 |             if (err) {
21 |                 res.status(200).json({ err: err });
22 |             };
23 |             con.query(statements, function (err, result) {
24 |                 if (err) { res.status(200).json({ err: err }); };
25 |                 res.status(200).json({ result: result, req: req.query })
26 |             });
27 |         });
28 |     }
29 | 
30 |     const modifyUser = (id) => {  // modify user with id
31 |         const items = {
32 |             username: req.body.username,
33 |             pwd: req.body.pwd,
34 |         }
35 | 
36 |         if (!req.body.username & !req.body.pwd) { errorHandler("No value passed") }
37 |         else {
38 |             var statements = "";
39 |             if (items.username) {
40 |                 statements += "UPDATE auth SET username=? WHERE id=?;";
41 |                 var insert = [items.username, id];
42 |                 statements = mysql.format(statements, insert);
43 |             }
44 |             if (items.pwd) {
45 |                 statements += "UPDATE auth SET pwd=? WHERE id=?;";
46 |                 var insert = [items.pwd, id];
47 |                 statements = mysql.format(statements, insert);
48 |             }
49 | 
50 |             var con = mysql.createConnection(config);
51 | 
52 |             con.connect(function (err) {
53 |                 if (err) {
54 |                     res.status(401).json({ err: err });
55 |                 };
56 |                 con.query(statements, function (err, result) {
57 |                     if (err) { res.status(401).json({ err: err }); };
58 |                     res.status(200).json({ result: result, req: req.query })
59 |                 });
60 |             });
61 |         }
62 | 
63 |     }
64 | 
65 |     // const deleteUser = (id) => {  // delete user with id
66 |     //     var statements = "DELETE FROM items WHERE id=?;";
67 |     //     var insert = [id];
68 |     //     statements = mysql.format(statements, insert);
69 | 
70 |     //     var con = mysql.createConnection(config);
71 | 
72 |     //     con.connect(function (err) {
73 |     //         if (err) {
74 |     //             res.status(200).json({ err: err });
75 |     //         };
76 |     //         con.query(statements, function (err, result) {
77 |     //             if (err) { res.status(200).json({ err: err }); };
78 |     //             res.status(200).json({ result: result, req: req.query })
79 |     //         });
80 |     //     });
81 | 
82 |     // }
83 | 
84 |     if (req.method === 'POST') {
85 |         errorHandler("Method not available");
86 |     } else if (req.method === 'GET') {
87 |         getUser(id);
88 |     } else if (req.method === 'PUT') {
89 |         modifyUser(id);
90 |     } else if (req.method === 'DELETE') {
91 |         // deleteUser(id);
92 |         errorHandler("Method not available");
93 |     }
94 | }


--------------------------------------------------------------------------------
/pages/done.js:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router'
 2 | import { Flex, Grid, GridItem, Spacer, Stack, Text } from '@chakra-ui/react'
 3 | import MenuBar from "../components/MenuBar";
 4 | import FoldersPanel from "../components/FoldersPanel";
 5 | import AddItemButton from "../components/AddItemButton";
 6 | import TodoListTable from "../components/TodoListTable";
 7 | import RemoveFolderButton from "../components/RemoveFolderButton";
 8 | import AuthRedirect from '../components/AuthRedirect';
 9 | import { useEffect, useState } from 'react';
10 | import { useCookies } from 'react-cookie';
11 | import FolderTable from '../components/FolderTable';
12 | import DoneTable from '../components/DoneTable';
13 | 
14 | const Done = () => {
15 |     const router = useRouter();
16 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
17 | 
18 |     return (
19 |         <>
20 |             <AuthRedirect />
21 |             <Grid templateColumns='repeat(5, 1fr)'>
22 |                 <GridItem colSpan={5}>
23 |                     <MenuBar />
24 |                 </GridItem>
25 |                 <GridItem>
26 |                     <FoldersPanel />
27 |                 </GridItem>
28 |                 <GridItem colSpan={4}>
29 |                     <Stack spacing={5} p={10}>
30 |                         <Flex>
31 |                             <Text>
32 |                                 <Text as="b" fontSize="xl">
33 |                                     Done
34 |                                 </Text>
35 |                             </Text>
36 |                             <Spacer />
37 |                             <AddItemButton />
38 |                         </Flex>
39 |                         <DoneTable />
40 |                     </Stack>
41 |                 </GridItem>
42 |             </Grid>
43 |         </>
44 |     );
45 | }
46 | 
47 | export default Done;
48 | 


--------------------------------------------------------------------------------
/pages/folder/[folderID].js:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router'
 2 | import { Flex, Grid, GridItem, Spacer, Stack, Text } from '@chakra-ui/react'
 3 | import MenuBar from "../../components/MenuBar";
 4 | import FoldersPanel from "../../components/FoldersPanel";
 5 | import AddItemButton from "../../components/AddItemButton";
 6 | import TodoListTable from "../../components/TodoListTable";
 7 | import RemoveFolderButton from "../../components/RemoveFolderButton";
 8 | import AuthRedirect from '../../components/AuthRedirect';
 9 | import { useEffect, useState } from 'react';
10 | import axios from 'axios';
11 | import { useCookies } from 'react-cookie';
12 | import FolderTable from '../../components/FolderTable';
13 | 
14 | const Folder = () => {
15 |     const router = useRouter();
16 |     const { folderID } = router.query;  //url variable
17 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
18 | 
19 |     const [folderData, setFolderData] = useState(undefined);
20 | 
21 |     useEffect(() => {
22 |         if (folderID !== undefined) {
23 |             axios.get("/api/folders/" + folderID + "?userID=" + cookies.userID)
24 |                 .then((res) => {
25 |                     setFolderData(res.data.result[0]);
26 |                 }).catch((err) => {
27 |                     console.error(err);
28 |                 });
29 |         }
30 |     }, [folderID]);
31 | 
32 |     const printFolderName = () => {
33 |         return folderData ? folderData.name : "";
34 |     }
35 | 
36 |     return (
37 |         <>
38 |             <AuthRedirect />
39 |             <Grid templateColumns='repeat(5, 1fr)'>
40 |                 <GridItem colSpan={5}>
41 |                     <MenuBar />
42 |                 </GridItem>
43 |                 <GridItem>
44 |                     <FoldersPanel />
45 |                 </GridItem>
46 |                 <GridItem colSpan={4}>
47 |                     <Stack spacing={5} p={10}>
48 |                         <Flex>
49 |                             <Text>
50 |                                 <Text as="b" fontSize="xl">
51 |                                     Folder: {printFolderName()}
52 |                                     <RemoveFolderButton folderID={folderID}/>
53 |                                 </Text>
54 |                             </Text>
55 |                             <Spacer />
56 |                             <AddItemButton />
57 |                         </Flex>
58 |                         <FolderTable folderID={folderID} />
59 |                     </Stack>
60 |                 </GridItem>
61 |             </Grid>
62 |         </>
63 |     );
64 | }
65 | 
66 | export default Folder;
67 | 


--------------------------------------------------------------------------------
/pages/home.js:
--------------------------------------------------------------------------------
 1 | import MenuBar from "../components/MenuBar";
 2 | import { Flex, Grid, GridItem, Spacer, Stack, Text } from '@chakra-ui/react'
 3 | import FoldersPanel from "../components/FoldersPanel";
 4 | import AddItemButton from "../components/AddItemButton";
 5 | import { useCookies } from 'react-cookie';
 6 | import { useEffect } from "react";
 7 | import AuthRedirect from '../components/AuthRedirect';
 8 | import TodayTable from "../components/TodayTable";
 9 | 
10 | export default function Home() {
11 | 
12 |     const [cookies, setCookie, removeCookie] = useCookies(['userID']);
13 | 
14 |     useEffect(() => {
15 |         // console.log(cookies.userID);
16 |     }, []);
17 | 
18 |     return (
19 |         <>
20 |             <AuthRedirect />
21 |             <Grid templateColumns='repeat(5, 1fr)'>
22 |                 <GridItem colSpan={5}>
23 |                     <MenuBar />
24 |                 </GridItem>
25 |                 <GridItem>
26 |                     <FoldersPanel />
27 |                 </GridItem>
28 |                 <GridItem colSpan={4}>
29 |                     <Stack spacing={5} p={10}>
30 |                         <Flex>
31 |                             <Text>
32 |                                 <Text as="b" fontSize="xl">
33 |                                     Today
34 |                                 </Text>
35 |                                 <Text fontSize="sm">
36 |                                     27 December 2021
37 |                                 </Text>
38 |                             </Text>
39 |                             <Spacer />
40 |                             <AddItemButton />
41 |                         </Flex>
42 |                         <TodayTable />
43 |                     </Stack>
44 |                 </GridItem>
45 |             </Grid>
46 |         </>
47 |     )
48 | }


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import AuthRedirect from '../components/AuthRedirect';
 2 | import { useRouter } from 'next/router'
 3 | import { useEffect } from 'react';
 4 | import { useCookies } from 'react-cookie';
 5 | const axios = require('axios');
 6 | 
 7 | export default function Home() {
 8 | 
 9 |   const [cookies, setCookie, removeCookie] = useCookies(['userID']);
10 |   const router = useRouter();
11 | 
12 |   useEffect(() => {
13 |     axios.get("/api/init").then((res) => {
14 |       if (!cookies.userID) {
15 |         router.push("/login");
16 |       } else {
17 |         axios.post("/api/authStatus", { userID: cookies.userID }).then((res) => {
18 |           if (!res.data.authStatus) {
19 |             router.push("/login");
20 |           } else {
21 |             router.push("/home");
22 |           }
23 |         });
24 |       }
25 |     }).catch((err) => {
26 |       console.error(err);
27 |     });
28 |   }, []);
29 | 
30 |   return (
31 |     <>
32 |       <p>Redirecting...</p>
33 |     </>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/login.js:
--------------------------------------------------------------------------------
 1 | import { Box, Center, Divider, Grid, GridItem, Stack, Text } from "@chakra-ui/react";
 2 | import "../styles/theme";
 3 | import theme from "../styles/theme";
 4 | import "../components/LoginForm"
 5 | import LoginForm from "../components/LoginForm";
 6 | 
 7 | export default function Login() {
 8 | 
 9 |     return (
10 |         <div style={{
11 |             backgroundColor: "#E2E8F0",
12 |         }}>
13 |             <Center height="100vh">
14 |                 <Box m={5} p={5} borderRadius="lg" backgroundColor={theme.colors.white}>
15 |                     <Grid templateColumns='repeat(7, 1fr)'>
16 |                         <GridItem m={5} p={5} colSpan={3}>
17 |                             <Center height="100%">
18 |                                 <Stack spacing="0">
19 |                                     <Text fontSize='xl' as='b'>SelfRemind</Text>
20 |                                     <Text fontSize='sm'>Todo List Manager</Text>
21 |                                 </Stack>
22 |                             </Center>
23 |                         </GridItem>
24 |                         <GridItem>
25 |                             <Center h="100%">
26 |                                 <Divider orientation='vertical' />
27 |                             </Center>
28 |                         </GridItem>
29 |                         <GridItem m={5} p={5} colSpan={3}>
30 |                             <Text as="b">Welcome Back</Text>
31 |                             <LoginForm />
32 |                         </GridItem>
33 |                     </Grid>
34 |                 </Box>
35 |             </Center>
36 |         </div>
37 |     )
38 | 
39 | }


--------------------------------------------------------------------------------
/pages/search/[keywords].js:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router'
 2 | import { Flex, Grid, GridItem, Spacer, Stack, Text } from '@chakra-ui/react'
 3 | import MenuBar from "../../components/MenuBar";
 4 | import FoldersPanel from "../../components/FoldersPanel";
 5 | import AddItemButton from "../../components/AddItemButton";
 6 | import TodoListTable from "../../components/TodoListTable";
 7 | import AuthRedirect from '../../components/AuthRedirect';
 8 | import SearchTable from '../../components/SearchTable';
 9 | 
10 | const Search = (props) => {
11 |     const router = useRouter();
12 |     const { keywords } = router.query;  //url variable
13 | 
14 |     return (
15 |         <>
16 |             <AuthRedirect />
17 |             <Grid templateColumns='repeat(5, 1fr)'>
18 |                 <GridItem colSpan={5}>
19 |                     <MenuBar />
20 |                 </GridItem>
21 |                 <GridItem>
22 |                     <FoldersPanel />
23 |                 </GridItem>
24 |                 <GridItem colSpan={4}>
25 |                     <Stack spacing={5} p={10}>
26 |                         <Flex>
27 |                             <Text>
28 |                                 <Text as="b" fontSize="xl">
29 |                                     Searching: {keywords}
30 |                                 </Text>
31 |                             </Text>
32 |                             <Spacer />
33 |                             <AddItemButton />
34 |                         </Flex>
35 |                         <SearchTable keywords={keywords} />
36 |                     </Stack>
37 |                 </GridItem>
38 |             </Grid>
39 |         </>
40 |     );
41 | }
42 | 
43 | export default Search;
44 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redfrogsss/selfremind/606f508ff582e549edd26009838ea7833bee777e/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="283" height="64" fill="none" viewBox="0 0 283 64"><path fill="#000" d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"/></svg>


--------------------------------------------------------------------------------
/readme-img/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redfrogsss/selfremind/606f508ff582e549edd26009838ea7833bee777e/readme-img/home.png


--------------------------------------------------------------------------------
/readme-img/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redfrogsss/selfremind/606f508ff582e549edd26009838ea7833bee777e/readme-img/login.png


--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   padding: 0 2rem;
  3 | }
  4 | 
  5 | .main {
  6 |   min-height: 100vh;
  7 |   padding: 4rem 0;
  8 |   flex: 1;
  9 |   display: flex;
 10 |   flex-direction: column;
 11 |   justify-content: center;
 12 |   align-items: center;
 13 | }
 14 | 
 15 | .footer {
 16 |   display: flex;
 17 |   flex: 1;
 18 |   padding: 2rem 0;
 19 |   border-top: 1px solid #eaeaea;
 20 |   justify-content: center;
 21 |   align-items: center;
 22 | }
 23 | 
 24 | .footer a {
 25 |   display: flex;
 26 |   justify-content: center;
 27 |   align-items: center;
 28 |   flex-grow: 1;
 29 | }
 30 | 
 31 | .title a {
 32 |   color: #0070f3;
 33 |   text-decoration: none;
 34 | }
 35 | 
 36 | .title a:hover,
 37 | .title a:focus,
 38 | .title a:active {
 39 |   text-decoration: underline;
 40 | }
 41 | 
 42 | .title {
 43 |   margin: 0;
 44 |   line-height: 1.15;
 45 |   font-size: 4rem;
 46 | }
 47 | 
 48 | .title,
 49 | .description {
 50 |   text-align: center;
 51 | }
 52 | 
 53 | .description {
 54 |   margin: 4rem 0;
 55 |   line-height: 1.5;
 56 |   font-size: 1.5rem;
 57 | }
 58 | 
 59 | .code {
 60 |   background: #fafafa;
 61 |   border-radius: 5px;
 62 |   padding: 0.75rem;
 63 |   font-size: 1.1rem;
 64 |   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 65 |     Bitstream Vera Sans Mono, Courier New, monospace;
 66 | }
 67 | 
 68 | .grid {
 69 |   display: flex;
 70 |   align-items: center;
 71 |   justify-content: center;
 72 |   flex-wrap: wrap;
 73 |   max-width: 800px;
 74 | }
 75 | 
 76 | .card {
 77 |   margin: 1rem;
 78 |   padding: 1.5rem;
 79 |   text-align: left;
 80 |   color: inherit;
 81 |   text-decoration: none;
 82 |   border: 1px solid #eaeaea;
 83 |   border-radius: 10px;
 84 |   transition: color 0.15s ease, border-color 0.15s ease;
 85 |   max-width: 300px;
 86 | }
 87 | 
 88 | .card:hover,
 89 | .card:focus,
 90 | .card:active {
 91 |   color: #0070f3;
 92 |   border-color: #0070f3;
 93 | }
 94 | 
 95 | .card h2 {
 96 |   margin: 0 0 1rem 0;
 97 |   font-size: 1.5rem;
 98 | }
 99 | 
100 | .card p {
101 |   margin: 0;
102 |   font-size: 1.25rem;
103 |   line-height: 1.5;
104 | }
105 | 
106 | .logo {
107 |   height: 1em;
108 |   margin-left: 0.5rem;
109 | }
110 | 
111 | @media (max-width: 600px) {
112 |   .grid {
113 |     width: 100%;
114 |     flex-direction: column;
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 | }
 8 | 
 9 | a {
10 |   color: inherit;
11 |   text-decoration: none;
12 | }
13 | 
14 | * {
15 |   box-sizing: border-box;
16 | }
17 | 


--------------------------------------------------------------------------------
/styles/theme.js:
--------------------------------------------------------------------------------
 1 | // theme.js
 2 | export default {
 3 |     colors: {
 4 |         transparent: 'transparent',
 5 |         black: '#000',
 6 |         white: '#fff',
 7 |         gray: {
 8 |             50: '#f7fafc',
 9 |             100: '#EDF2F7',
10 |             200: '#E2E8F0',
11 |             300: '#CBD5E0',
12 |             400: '#A0AEC0',
13 |             500: '#718096',
14 |             600: '#4A5568',
15 |             700: '#2D3748',
16 |             800: '#1A202C',
17 |             900: '#171923',
18 |         },
19 |         red: {
20 |             50: '#FFF5F5',
21 |             100: '#FED7D7',
22 |             200: '#FEB2B2',
23 |             300: '#FC8181',
24 |             400: '#F56565',
25 |             500: '#E53E3E',
26 |             600: '#C53030',
27 |             700: '#9B2C2C',
28 |             800: '#822727',
29 |             900: '#63171B',
30 |         }
31 |     },
32 |     fonts: {
33 |         body: "system-ui, sans-serif",
34 |         heading: "Georgia, serif",
35 |         mono: "Menlo, monospace",
36 |     },
37 |     fontSizes: {
38 |         xs: "0.75rem",
39 |         sm: "0.875rem",
40 |         md: "1rem",
41 |         lg: "1.125rem",
42 |         xl: "1.25rem",
43 |         "2xl": "1.5rem",
44 |         "3xl": "1.875rem",
45 |         "4xl": "2.25rem",
46 |         "5xl": "3rem",
47 |         "6xl": "3.75rem",
48 |         "7xl": "4.5rem",
49 |         "8xl": "6rem",
50 |         "9xl": "8rem",
51 |     },
52 |     fontWeights: {
53 |         hairline: 100,
54 |         thin: 200,
55 |         light: 300,
56 |         normal: 400,
57 |         medium: 500,
58 |         semibold: 600,
59 |         bold: 700,
60 |         extrabold: 800,
61 |         black: 900,
62 |     },
63 |     lineHeights: {
64 |         normal: "normal",
65 |         none: 1,
66 |         shorter: 1.25,
67 |         short: 1.375,
68 |         base: 1.5,
69 |         tall: 1.625,
70 |         taller: "2",
71 |         "3": ".75rem",
72 |         "4": "1rem",
73 |         "5": "1.25rem",
74 |         "6": "1.5rem",
75 |         "7": "1.75rem",
76 |         "8": "2rem",
77 |         "9": "2.25rem",
78 |         "10": "2.5rem",
79 |     },
80 |     letterSpacings: {
81 |         tighter: "-0.05em",
82 |         tight: "-0.025em",
83 |         normal: "0",
84 |         wide: "0.025em",
85 |         wider: "0.05em",
86 |         widest: "0.1em",
87 |     },
88 | }


--------------------------------------------------------------------------------