9 |
10 |
11 | 
12 |
13 |
14 |
25 |
26 |
27 |
12 |
13 |
14 | Errand
15 | 16 |
17 | A Simple task-app created to remind yourself of a daily objective in your aimless life. On a serious note, it is a project to recall basic concepts of react, react hooks, create-read-update-delete operations in databases, to learn firebase and of implementing a design using html and css.
18 |
19 |
20 | Report Bug
21 | ·
22 | Request Feature
23 |
28 |
49 |
50 |
51 |
52 |
53 | ## About The Project
54 |
55 | 
56 | 
57 | 
58 |
59 |
60 |
61 | ### Built With
62 |
63 | * 
64 | * 
65 | * 
66 | * 
67 | * 
68 | * 
69 | * 
70 |
71 |
72 |
73 |
74 |
75 | ## Getting Started
76 |
77 | This is an example of how you may give instructions on setting up your project locally.
78 | To get a local copy up and running follow these simple example steps.
79 |
80 | ### Prerequisites
81 |
82 | This is an example of how to list things you need to use the software and how to install them.
83 | * npm
84 | ```sh
85 | npm install npm@latest -g
86 | ```
87 |
88 | ### Installation
89 |
90 | 1. Set up firebase [https://firebase.google.com/](https://firebase.google.com/)
91 | 2. Clone the repo
92 | ```sh
93 | git clone https://github.com/SomnathDas/errand.git
94 | ```
95 | 3. Install NPM packages
96 | ```sh
97 | npm install
98 | ```
99 | 4. Create `.env` file in root dir of the project and enter the following in `.env` file
100 | ```.env
101 | VITE_API_KEY="YOUR API_KEY"
102 | VITE_AUTH_DOMAIN="YOUR AUTH_DOMAIN"
103 | VITE_PROJECT_ID="YOUR PROJECT_ID"
104 | VITE_STORAGE_BUCKET="YOUR STORAGE_BUCKET"
105 | VITE_MESSAGING_SENDER_ID="YOUR MESSAGING_SENDER_ID"
106 | VITE_APP_ID="YOUR APP_ID"
107 | VITE_MEASUREMENT_ID="YOUR MEASUREMENT_ID"
108 | ```
109 | 5. Run the app by
110 | ```sh
111 | npm run dev
112 | ```
113 |
114 |
115 |
116 |
117 | ## Contributing
118 |
119 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
120 |
121 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
122 | Don't forget to give the project a star! Thanks again!
123 |
124 | 1. Fork the Project
125 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
126 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
127 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
128 | 5. Open a Pull Request
129 |
130 |
131 |
132 |
133 | ## License
134 |
135 | Distributed under the GNU Affero General Public License v3.0 License. See `LICENSE.txt` for more information.
136 |
137 |
138 |
139 |
140 |
141 | ## Contact
142 |
143 | Somnath Das - [@instagram_handle](https://instagram.com/samurai3247)
144 |
145 | Project Link: [https://github.com/SomnathDas/errand](https://github.com/SomnathDas/errand)
146 |
147 |
148 |
149 |
150 |
151 | ## Acknowledgments
152 |
153 | * [Design Inspired By Filip Legierski(Task Man)](https://dribbble.com/shots/18475404-Taskman)
154 | * [Login Page Side-Image By Joel Filipe](https://unsplash.com/photos/Lw7BruqPnJY)
155 | * [Image Hosting By Imgur](https://imgur.com)
156 |
157 |
158 |
--------------------------------------------------------------------------------
/components/calender/Calendar.css:
--------------------------------------------------------------------------------
1 | .calendar-container {
2 | /* Variables */
3 | --calendar-bg: white;
4 | --active: #1c5d99;
5 | --trans-active: #1c5d992c;
6 | /* Variables */
7 |
8 | font-family: "Roboto", sans-serif;
9 | background-color: var(--calendar-bg);
10 | padding: 18px;
11 | border-radius: 20px;
12 | }
13 |
14 | .calendar-container.dark {
15 | background-color: var(--global-dark-bg, #080f0f);
16 | color: white;
17 | }
18 |
19 | .calendar-header {
20 | display: flex;
21 | justify-content: space-between;
22 | }
23 |
24 | .calendar-header h1 {
25 | font-weight: 500;
26 | font-size: 1.5rem;
27 | }
28 |
29 | .calendar {
30 | height: 300px;
31 | }
32 |
33 | .calendar-top {
34 | display: flex;
35 | justify-content: space-between;
36 | }
37 |
38 | .prev-next-btn-container {
39 | display: flex;
40 | gap: 20px;
41 | }
42 |
43 | .calendar-month {
44 | font-size: 400;
45 | font-size: 1.2rem;
46 | }
47 |
48 | .calendar-weeks {
49 | list-style: none;
50 | display: grid;
51 | grid-template-columns: repeat(7, 1fr);
52 | column-gap: 10px;
53 | }
54 |
55 | .calendar-days {
56 | list-style: none;
57 | display: grid;
58 | grid-template-columns: repeat(7, 1fr);
59 | }
60 |
61 | .calendar-days-elems {
62 | text-align: center;
63 | border-radius: 9999px;
64 | cursor: pointer;
65 | transition: all 50ms ease-in-out;
66 | }
67 |
68 | .calendar-days-elems:hover {
69 | background-color: var(--active);
70 | color: white;
71 | transition: all 50ms ease-in-out;
72 | }
73 |
74 | .calendar-days-elems.dark:hover {
75 | background-color: #2ec4b554;
76 | color: white;
77 | transition: all 50ms ease-in-out;
78 | }
79 |
80 | .calendar-weeks li {
81 | padding: 10px;
82 | font-weight: 500;
83 | color: #829399;
84 | }
85 |
86 | .calendar-days li {
87 | padding: 10px;
88 | font-weight: 500;
89 | }
90 |
91 | /* Utilities */
92 | .prev-month-date {
93 | color: #829399;
94 | }
95 |
96 | .isToday {
97 | color: white;
98 | background-color: var(--active, #1c5d99);
99 | }
100 |
101 | .isToday.dark {
102 | color: white;
103 | background-color: var(--global-alt-blue, #2ec4b6);
104 | }
105 | /* Utilities */
106 |
107 | /* Create Task Button */
108 | .create-task-btn {
109 | background-color: var(--trans-active, #1c5d992c);
110 | border-radius: 9999px;
111 | border: transparent;
112 | height: 48px;
113 | width: 48px;
114 | display: flex;
115 | justify-content: center;
116 | align-items: center;
117 | cursor: pointer;
118 | transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
119 | }
120 |
121 | .create-task-btn.dark {
122 | background-color: #2ec4b554;
123 | }
124 |
125 | .create-task-btn-label.dark {
126 | color: var(--global-alt-blue, #2ec4b6);
127 | }
128 |
129 | .create-task-icon.dark {
130 | color: white;
131 | border: dashed white 2px;
132 | }
133 |
134 | .create-task-btn-label {
135 | font-family: "Roboto", sans-serif;
136 | font-weight: 500;
137 | color: var(--active, #1c5d99);
138 | opacity: 0;
139 | transition: opacity 120ms cubic-bezier(0.075, 0.82, 0.165, 1);
140 | }
141 |
142 | .create-task-btn:hover .create-task-btn-label {
143 | opacity: 1;
144 | transition: opacity 120ms cubic-bezier(0.075, 0.82, 0.165, 1);
145 | }
146 |
147 | .create-task-icon {
148 | font-size: 28px;
149 | color: var(--active, #1c5d99);
150 | border: dashed #03427c 2px;
151 | border-radius: 9999px;
152 | }
153 |
154 | .create-task-btn:hover {
155 | width: 100px;
156 | transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
157 | }
158 |
159 | .create-task-btn:hover .create-task-icon {
160 | display: none;
161 | }
162 |
163 | .create-task-btn:active {
164 | background-color: white;
165 | border: var(--active, #1c5d99);
166 | }
167 | /* Create Task Button */
168 |
169 | /* Previous and Next Buttons */
170 | .prev-next-btn {
171 | background-color: var(--trans-active, #1c5d992c);
172 | color: var(--active, #1c5d99);
173 | border-radius: 9999px;
174 | border: solid white;
175 | height: 38px;
176 | width: 38px;
177 | display: flex;
178 | justify-content: center;
179 | align-items: center;
180 | cursor: pointer;
181 | transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
182 | }
183 |
184 | .prev-next-btn.dark {
185 | color: var(--global-alt-blue, #2ec4b6);
186 | border: solid #080f0f;
187 | background-color: #2ec4b554;
188 | }
189 |
190 | .prev-next-btn:hover {
191 | width: 80px;
192 | transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
193 | }
194 |
195 | .prev-next-btn:disabled {
196 | background-color: gainsboro;
197 | color: black;
198 | border: solid gray 1px;
199 | }
200 |
201 | .prev-next-btn:active {
202 | background-color: white;
203 | border: var(--active, #1c5d99);
204 | }
205 | /* Previous and Next Buttons */
206 |
207 | .calendar-days-elems {
208 | display: flex;
209 | flex-direction: column;
210 | justify-content: center;
211 | align-items: center;
212 | }
213 |
214 | .has-tasks {
215 | height: 10px;
216 | width: 10px;
217 | background-color: #1c5d99;
218 | border-radius: 100px;
219 | border: solid 1px white;
220 | }
221 |
222 | .has-tasks.dark {
223 | background-color: var(--global-alt-blue, #2ec4b6);
224 | }
225 |
--------------------------------------------------------------------------------
/components/calender/Calendar.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import "./Calendar.css";
3 |
4 | const Calendar = ({
5 | parentTaskFormOpen,
6 | setParentTaskForm,
7 | setParentNowDate,
8 | parentTasks,
9 | parentTheme,
10 | }) => {
11 | const [currentMonthIndex, setCurrentMonthIndex] = useState();
12 | const [currentYear, setCurrentYear] = useState();
13 | const [daysArray, setDaysArray] = useState([]);
14 |
15 | const [allTasks, setAllTasks] = useState();
16 |
17 | useEffect(() => {
18 | setCurrentMonthYear();
19 | }, []);
20 |
21 | useEffect(() => {
22 | let daysArrayTemp = [];
23 | let date = new Date();
24 |
25 | if (currentMonthIndex > 11) {
26 | setCurrentMonthIndex(0);
27 | setCurrentYear(currentYear + 1);
28 | }
29 |
30 | if (currentMonthIndex < 0) {
31 | setCurrentMonthIndex(11);
32 | setCurrentYear(currentYear - 1);
33 | }
34 |
35 | let firstDayofMonth = new Date(currentYear, currentMonthIndex, 1).getDay();
36 | let lastDateofMonth = new Date(
37 | currentYear,
38 | currentMonthIndex + 1,
39 | 0
40 | ).getDate();
41 | let lastDayofMonth = new Date(
42 | currentYear,
43 | currentMonthIndex,
44 | lastDateofMonth
45 | ).getDay();
46 | let lastDateofLastMonth = new Date(
47 | currentYear,
48 | currentMonthIndex,
49 | 0
50 | ).getDate();
51 |
52 | /* Getting Days from Previous Month */
53 | for (let i = firstDayofMonth; i > 0; i--) {
54 | let x = new Date(
55 | `${currentYear}-${currentMonthIndex}-${lastDateofLastMonth - i + 1}`
56 | ).toLocaleDateString();
57 |
58 | daysArrayTemp.push({
59 | date: lastDateofLastMonth - i + 1,
60 | class: `prev-month-date`,
61 | span: allTasks
62 | ?.map((obj) =>
63 | x == obj["completionDate"].toLocaleDateString() ? "has-tasks" : ""
64 | )
65 | .join(" "),
66 | });
67 | }
68 |
69 | /* Getting Days from Current Month */
70 | for (let i = 1; i <= lastDateofMonth; i++) {
71 | let x = new Date(
72 | `${currentYear}-${currentMonthIndex + 1}-${i}`
73 | ).toLocaleDateString();
74 |
75 | if (
76 | i === date.getDate() &&
77 | currentMonthIndex === date.getMonth() &&
78 | currentYear === date.getFullYear()
79 | ) {
80 | daysArrayTemp.push({
81 | date: i,
82 | class: `isToday`,
83 | span: allTasks
84 | ?.map((obj) =>
85 | x == obj["completionDate"].toLocaleDateString() ? "has-tasks" : ""
86 | )
87 | .join(" "),
88 | });
89 | } else {
90 | daysArrayTemp.push({
91 | date: i,
92 | class: ``,
93 | span: allTasks
94 | ?.map((obj) =>
95 | x == obj["completionDate"].toLocaleDateString()
96 | ? `has-tasks ${parentTheme} `
97 | : ""
98 | )
99 | .join(" "),
100 | });
101 | }
102 | }
103 |
104 | /* Getting Days from Coming Month */
105 | for (let i = lastDayofMonth; i < 6; i++) {
106 | let x = new Date(
107 | `${currentYear}-${currentMonthIndex + 2}-${i - lastDayofMonth + 1}`
108 | ).toLocaleDateString();
109 |
110 | daysArrayTemp.push({
111 | date: i - lastDayofMonth + 1,
112 | class: "prev-month-date",
113 | span: allTasks
114 | ?.map((obj) =>
115 | x == obj["completionDate"].toLocaleDateString() ? "has-tasks" : ""
116 | )
117 | .join(" "),
118 | });
119 | }
120 |
121 | setDaysArray(daysArrayTemp);
122 | }, [currentMonthIndex, parentTasks]);
123 |
124 | const monthArray = [
125 | "January",
126 | "February",
127 | "March",
128 | "April",
129 | "May",
130 | "June",
131 | "July",
132 | "August",
133 | "September",
134 | "October",
135 | "November",
136 | "December",
137 | ];
138 |
139 | const setCurrentMonthYear = () => {
140 | const date = new Date();
141 | setCurrentMonthIndex(date.getMonth());
142 | setCurrentYear(date.getFullYear());
143 | setParentNowDate({
144 | date: date.getDate(),
145 | month: monthArray[date.getMonth()],
146 | });
147 | };
148 |
149 | const nextMonth = () => {
150 | setCurrentMonthIndex(currentMonthIndex + 1);
151 | };
152 |
153 | const prevMonth = () => {
154 | setCurrentMonthIndex(currentMonthIndex - 1);
155 | };
156 |
157 | const openTaskForm = () => {
158 | setParentTaskForm(!parentTaskFormOpen);
159 | };
160 |
161 | useEffect(() => {
162 | if (parentTasks) {
163 | let tasksObj = parentTasks.map((obj) => ({
164 | completionDate: new Date(obj["toBeDoneOn"].seconds * 1000),
165 | title: obj["title"],
166 | duration: obj["duration"],
167 | at: new Date(obj["toBeDoneOn"].seconds * 1000).toLocaleTimeString(),
168 | id: obj["id"],
169 | isDone: obj["isDone"],
170 | }));
171 |
172 | setAllTasks(tasksObj);
173 |
174 | if (allTasks) {
175 | let x = daysArray.map((day, index) => [
176 | new Date(
177 | `${currentYear}-${currentMonthIndex}-${day.date}`
178 | ).toLocaleDateString(),
179 | index,
180 | currentMonthIndex,
181 | currentYear,
182 | day.date,
183 | ]);
184 |
185 | let y = allTasks.map((obj) =>
186 | obj["completionDate"].toLocaleDateString()
187 | );
188 | }
189 |
190 | /* `${currentYear}-0${currentMonthIndex}-${daysArray[11].date}` */
191 | }
192 | }, [parentTasks, currentMonthIndex, currentYear, daysArray]);
193 |
194 | return (
195 | Table of Contents
29 |-
30 |
-
31 | About The Project
32 |
-
33 |
- Built With 34 |
36 | -
37 | Getting Started
38 |
-
39 |
- Prerequisites 40 |
- Installation 41 |
43 | - Contributing 44 |
- License 45 |
- Contact 46 |
- Acknowledgments 47 |
196 |
254 | );
255 | };
256 |
257 | export default Calendar;
258 |
--------------------------------------------------------------------------------
/components/circularBtn/CircularBtn.css:
--------------------------------------------------------------------------------
1 | .circular-btn {
2 | background-color: #1c5d99;
3 | border-radius: 100px;
4 | border: solid transparent;
5 | height: 48px;
6 | width: 48px;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | cursor: pointer;
11 | transition: all 100ms cubic-bezier(0.165, 0.84, 0.44, 1);
12 | }
13 |
14 | .circular-btn.dark {
15 | background-color: white;
16 | }
17 |
18 | .circular-btn-label.dark {
19 | color: black;
20 | }
21 |
22 | .circular-btn-icon.dark {
23 | color: black;
24 | }
25 |
26 | .circular-btn-label {
27 | position: fixed;
28 | font-family: "Roboto", sans-serif;
29 | font-weight: 500;
30 | color: white;
31 | opacity: 0;
32 | transition: opacity 120ms cubic-bezier(0.075, 0.82, 0.165, 1);
33 | }
34 |
35 | .circular-btn:hover .circular-btn-label {
36 | opacity: 1;
37 | transition: opacity 120ms cubic-bezier(0.075, 0.82, 0.165, 1);
38 | }
39 |
40 | .circular-btn-icon {
41 | font-size: 28px;
42 | color: white;
43 | border-radius: 9999px;
44 | transition: all 50ms linear;
45 | }
46 |
47 | .circular-btn:hover {
48 | width: 120px;
49 | transition: all 100ms cubic-bezier(0.165, 0.84, 0.44, 1);
50 | }
51 |
52 | .circular-btn:hover .circular-btn-icon {
53 | opacity: 0;
54 | transition: all 50ms linear;
55 | }
56 |
57 | .circular-btn:active {
58 | background-color: white;
59 | border: var(--active, #1c5d99) 1px dashed;
60 | }
61 |
62 | .circular-btn:active .circular-btn-label {
63 | color: black;
64 | }
65 |
--------------------------------------------------------------------------------
/components/circularBtn/CircularBtn.jsx:
--------------------------------------------------------------------------------
1 | import "./CircularBtn.css";
2 |
3 | const CircularBtn = ({
4 | btnType,
5 | btnLabel,
6 | btnIconName,
7 | onClickFunc,
8 | parentTheme,
9 | }) => {
10 | return (
11 |
21 | );
22 | };
23 |
24 | export default CircularBtn;
25 |
--------------------------------------------------------------------------------
/components/glance/Glance.css:
--------------------------------------------------------------------------------
1 | .glance-container {
2 | height: 100%;
3 | overflow-y: scroll;
4 | padding: 20px;
5 |
6 | -webkit-box-shadow: inset 14px 40px 32px -47px rgba(0, 174, 255, 1);
7 | -moz-box-shadow: inset 14px 40px 32px -47px rgba(0, 174, 255, 1);
8 | box-shadow: inset 14px 40px 32px -47px rgba(0, 174, 255, 1);
9 |
10 | display: flex;
11 | flex-direction: column;
12 | gap: 20px;
13 |
14 | font-family: "Roboto", sans-serif;
15 | }
16 |
17 | .glance-container.dark {
18 | -webkit-box-shadow: inset 14px 40px 32px -47px rgb(0, 255, 200);
19 | -moz-box-shadow: inset 14px 40px 32px -47px rgba(0, 255, 200, 1);
20 | box-shadow: inset 14px 40px 32px -47px rgba(0, 255, 200, 1);
21 |
22 | color: white;
23 | }
24 |
25 | .glance-current-date {
26 | font-size: large;
27 | font-weight: lighter;
28 | }
29 |
--------------------------------------------------------------------------------
/components/glance/Glance.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import "./Glance.css";
3 | import GlanceFeed from "./GlanceFeed";
4 |
5 | const Glance = ({ nowDate, parentNowTasks, parentTheme }) => {
6 | const [nowTasks, setNowTasks] = useState([]);
7 |
8 | useEffect(() => {
9 | if (parentNowTasks) {
10 | let taskObj = parentNowTasks.map((obj) => ({
11 | completionDate: new Date(obj["toBeDoneOn"].seconds * 1000),
12 | title: obj["title"],
13 | duration: obj["duration"],
14 | at: new Date(obj["toBeDoneOn"].seconds * 1000).toLocaleTimeString(),
15 | id: obj["id"],
16 | isDone: obj["isDone"],
17 | }));
18 |
19 | setNowTasks(
20 | taskObj.filter(
21 | (obj) => obj["completionDate"].getDate() === nowDate.date
22 | )
23 | );
24 | }
25 | }, [parentNowTasks]);
26 | return (
27 |
197 |
210 | Calendar
198 | 209 |
211 |
253 |
212 |
231 |
232 | 213 | {monthArray[currentMonthIndex]} {currentYear} 214 |
215 |
216 |
222 |
223 |
229 |
230 | -
233 |
- S 234 |
- M 235 |
- T 236 |
- W 237 |
- T 238 |
- F 239 |
- S 240 |
-
242 | {daysArray.map((value, index) => (
243 |
- 247 | {value.date} 248 | 249 | 250 | ))} 251 |
28 |
40 | );
41 | };
42 |
43 | export default Glance;
44 |
--------------------------------------------------------------------------------
/components/glance/GlanceFeed.css:
--------------------------------------------------------------------------------
1 | .glance-head {
2 | display: flex;
3 | gap: 10px;
4 | }
5 |
6 | .glance-body {
7 | background-color: #f7f6f9;
8 | padding: 1rem;
9 | border-radius: 50px;
10 | word-wrap: break-word;
11 | }
12 |
13 | .glance-body.dark {
14 | color: black;
15 | background-color: #2ec4b6;
16 | }
17 |
18 | .glance-head.dark {
19 | color: black;
20 | }
21 |
--------------------------------------------------------------------------------
/components/glance/GlanceFeed.jsx:
--------------------------------------------------------------------------------
1 | import "./GlanceFeed.css";
2 |
3 | const GlanceFeed = ({ taskData, parentTheme }) => {
4 | return (
5 | 29 | 30 | {nowDate.date} 31 | {`\n`} 32 | {nowDate.month} 33 | {" "} 34 | {`\n`}({nowTasks.length} Events) 35 |
36 | {nowTasks.map((data) => ( 37 |Loading
} 39 |
6 |
17 | );
18 | };
19 |
20 | export default GlanceFeed;
21 |
--------------------------------------------------------------------------------
/components/loading/Loading.css:
--------------------------------------------------------------------------------
1 | .loading {
2 | height: 100vh;
3 | background-color: #080f0f;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | }
8 |
9 | .cube {
10 | height: 60px;
11 | animation: 2s lightIn cubic-bezier(0.1, 0.7, 0.8, 0.1) infinite alternate;
12 | }
13 |
14 | @keyframes lightIn {
15 | 0% {
16 | fill: #001219;
17 | }
18 | 50% {
19 | fill: #17bebb;
20 | }
21 | 100% {
22 | fill: #001219;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/components/loading/Loading.jsx:
--------------------------------------------------------------------------------
1 | import "./Loading.css";
2 |
3 | const Loading = () => {
4 | return (
5 |
7 |
8 | {taskData.isDone ? "check_circle" : "check_circle_outline"}
9 |
10 |
12 | {taskData.at}
11 |
13 |
16 | {taskData.title}
14 |{taskData.duration} mins
15 |
6 |
15 |
16 | );
17 | };
18 |
19 | export default Loading;
20 |
--------------------------------------------------------------------------------
/components/navButton/NavButton.css:
--------------------------------------------------------------------------------
1 | .button {
2 | background-color: var(--trans-active, #1c5d992c);
3 | border-radius: 9999px;
4 | border: solid transparent;
5 | height: 48px;
6 | width: 48px;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | cursor: pointer;
11 | transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
12 | }
13 |
14 | .button.dark {
15 | background-color: #2ec4b554;
16 | }
17 |
18 | .button-label.dark {
19 | color: var(--global-alt-blue, #2ec4b6);
20 | }
21 |
22 | .button-icon.dark {
23 | color: var(--global-alt-blue, #2ec4b6);
24 | }
25 |
26 | .button-label {
27 | position: fixed;
28 | font-family: "Roboto", sans-serif;
29 | font-weight: 500;
30 | color: var(--active, #1c5d99);
31 | opacity: 0;
32 | transition: opacity 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
33 | transform: rotate(270deg);
34 | }
35 |
36 | .button:hover .button-label {
37 | opacity: 1;
38 | transition: opacity 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
39 | }
40 |
41 | .button-icon {
42 | font-size: 28px;
43 | color: var(--active, #1c5d99);
44 | border-radius: 9999px;
45 | transition: all 100ms linear;
46 | }
47 |
48 | @media screen and (min-width: 1000px) {
49 | .button:hover {
50 | height: 100px;
51 | transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
52 | }
53 | }
54 |
55 | .button:hover .button-icon {
56 | opacity: 0;
57 | transition: all 100ms linear;
58 | }
59 |
60 | .button:active {
61 | background-color: white;
62 | border: var(--active, #1c5d99);
63 | }
64 |
--------------------------------------------------------------------------------
/components/navButton/NavButton.jsx:
--------------------------------------------------------------------------------
1 | import "./NavButton.css";
2 |
3 | const NavButton = ({ label, iconName, onClickHandler, parentTheme }) => {
4 | return (
5 |
11 | );
12 | };
13 |
14 | export default NavButton;
15 |
--------------------------------------------------------------------------------
/components/navbar/Navbar.css:
--------------------------------------------------------------------------------
1 | .navbar-container {
2 | position: fixed;
3 | }
4 |
5 | .navbar-list {
6 | display: flex;
7 | gap: 1rem;
8 | flex-direction: column;
9 | list-style: none;
10 | }
11 |
12 | .nav-user-profile-pic {
13 | border-radius: 100px;
14 | height: 48px;
15 | width: 48px;
16 | }
17 |
18 | @media screen and (max-width: 1000px) {
19 | .navbar-list {
20 | flex-direction: row;
21 | }
22 |
23 | .navbar-container {
24 | background-color: rgba(255, 255, 255, 0.726);
25 | width: 100%;
26 | display: flex;
27 | justify-content: center;
28 | padding: 12px;
29 | }
30 |
31 | .navbar-container.dark {
32 | background-color: #080f0f3d;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/components/navbar/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import { signOut } from "firebase/auth";
2 | import NavButton from "../navButton/NavButton";
3 | import "./Navbar.css";
4 |
5 | /* Firebase */
6 | import { auth } from "../../config/firebase/firebase";
7 | import { useAuthState } from "react-firebase-hooks/auth";
8 | import { db } from "../../config/firebase/firebase";
9 | import { doc, setDoc } from "firebase/firestore";
10 |
11 | const Navbar = ({
12 | parentIsLoggingOut,
13 | parentSetIsLoggingOut,
14 | parentTheme,
15 | parentChangeTheme,
16 | }) => {
17 | const [user, loading, error] = useAuthState(auth);
18 | const logout = async () => {
19 | parentSetIsLoggingOut(1);
20 | try {
21 | await signOut(auth);
22 | parentSetIsLoggingOut(0);
23 | } catch (err) {
24 | console.log(err);
25 | }
26 | };
27 |
28 | const changeTheme = async () => {
29 | switch (parentTheme) {
30 | case "light":
31 | parentChangeTheme("dark");
32 | break;
33 | case "dark":
34 | parentChangeTheme("light");
35 | break;
36 | default:
37 | parentChangeTheme("dark");
38 | break;
39 | }
40 |
41 | await setDoc(doc(db, "users", user.uid), {
42 | id: user.uid,
43 | theme: parentTheme === "dark" ? "light" : "dark",
44 | });
45 | };
46 |
47 | return (
48 |
75 | );
76 | };
77 |
78 | export default Navbar;
79 |
--------------------------------------------------------------------------------
/components/overlay/Overlay.css:
--------------------------------------------------------------------------------
1 | .overlay-background {
2 | position: fixed;
3 | height: 100vh;
4 | width: 100vw;
5 | background-color: rgba(0, 0, 0, 0.329);
6 | backdrop-filter: blur(6px);
7 | -webkit-backdrop-filter: blur(6px);
8 | z-index: 99;
9 | }
10 |
11 | .overlay-container {
12 | height: 100%;
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | }
17 |
--------------------------------------------------------------------------------
/components/overlay/Overlay.jsx:
--------------------------------------------------------------------------------
1 | import "./Overlay.css";
2 |
3 | const Overlay = ({ isOpen, children }) => {
4 | return (
5 | <>
6 | {isOpen ? (
7 |
8 |
10 | ) : (
11 | ""
12 | )}
13 |
14 | );
15 | };
16 |
17 | export default Overlay;
18 |
--------------------------------------------------------------------------------
/components/quickAccess/QuickAccess.css:
--------------------------------------------------------------------------------
1 | .quick-access-container {
2 | padding: 24px;
3 | display: flex;
4 | flex-direction: column;
5 | gap: 20px;
6 | }
7 |
8 | .quick-access-head {
9 | font-family: "Roboto", sans-serif;
10 | }
11 |
12 | .quick-access-head h1 {
13 | font-size: 2rem;
14 | font-weight: 300;
15 | /* text-decoration: underline wavy var(--global-blue, #1c5d99) 2px; */
16 | }
17 |
18 | .quick-access-cards {
19 | display: grid;
20 | grid-template-columns: repeat(3, auto);
21 | gap: 1rem;
22 | }
23 |
24 | @media screen and (max-width: 500px) {
25 | .quick-access-cards {
26 | display: grid;
27 | justify-content: center;
28 | grid-template-areas:
29 | "A A"
30 | "B C";
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/components/quickAccess/QuickAccess.jsx:
--------------------------------------------------------------------------------
1 | import "./QuickAccess.css";
2 | import QuickAccessCards from "./QuickAccessCards";
3 |
4 | /* Firebase */
5 | import { useCollectionData } from "react-firebase-hooks/firestore";
6 | import { auth, db } from "../../config/firebase/firebase";
7 | import { collection, query, where } from "firebase/firestore";
8 | import { useEffect, useState } from "react";
9 | import { useAuthState } from "react-firebase-hooks/auth";
10 |
11 | const QuickAccess = ({ parentFilter, parentSetFilter }) => {
12 | const [user, isUserLoading, isUserError] = useAuthState(auth);
13 |
14 | const [meetingAmt, setMeetingAmt] = useState(0);
15 | const [groceryAmt, setGroceryAmt] = useState(0);
16 | const [assignmentAmt, setAssignmentAmt] = useState(0);
17 |
18 | const [qForMeeting, setQForMeeting] = useState();
19 | const [qForGrocery, setQForGrocery] = useState();
20 | const [qForAssignment, setQForAssignment] = useState();
21 |
22 | /* Firebase Database */
23 | useEffect(() => {
24 | const tasksRef = collection(db, "users", user.uid, "tasks");
25 |
26 | const qForMeeting = query(tasksRef, where("tag", "==", "meeting"));
27 | const qForGrocery = query(tasksRef, where("tag", "==", "grocery"));
28 | const qForAssignment = query(tasksRef, where("tag", "==", "assignment"));
29 |
30 | setQForMeeting(qForMeeting);
31 | setQForGrocery(qForGrocery);
32 | setQForAssignment(qForAssignment);
33 | }, [user]);
34 |
35 | const [tasksM, isTaskLoadingM, isTaskErrorM, snapshotM] =
36 | useCollectionData(qForMeeting);
37 |
38 | const [tasksG, isTaskLoadingG, isTaskErrorG, snapshotG] =
39 | useCollectionData(qForGrocery);
40 |
41 | const [tasksA, isTaskLoadingA, isTaskErrorA, snapshotA] =
42 | useCollectionData(qForAssignment);
43 |
44 | useEffect(() => {
45 | setMeetingAmt(
46 | snapshotM?.docs.map((doc) => ({ id: doc.id, ...doc.data() })).length
47 | );
48 | setGroceryAmt(
49 | snapshotG?.docs.map((doc) => ({ id: doc.id, ...doc.data() })).length
50 | );
51 | setAssignmentAmt(
52 | snapshotA?.docs.map((doc) => ({ id: doc.id, ...doc.data() })).length
53 | );
54 | }, [snapshotM, snapshotG, snapshotA]);
55 |
56 | return (
57 | {children}
9 |
58 |
94 | );
95 | };
96 |
97 | export default QuickAccess;
98 |
--------------------------------------------------------------------------------
/components/quickAccess/QuickAccessCards.css:
--------------------------------------------------------------------------------
1 | .card-container {
2 | height: 148px;
3 | border-radius: 20px;
4 | padding: 20px;
5 | display: flex;
6 | flex-direction: column;
7 | justify-content: space-between;
8 | }
9 |
10 | .active {
11 | color: black !important;
12 | background-color: white !important;
13 | }
14 |
15 | .active .card-icon {
16 | color: black !important;
17 | }
18 |
19 | .active .card-content {
20 | color: black !important;
21 | }
22 |
23 | .active .card-option-icon {
24 | color: black !important;
25 | }
26 |
27 | .card-container:hover {
28 | background-color: white !important;
29 | cursor: pointer;
30 | }
31 |
32 | .card-container:hover .card-icon {
33 | color: black;
34 | }
35 |
36 | .card-container:hover .card-content {
37 | color: black;
38 | }
39 |
40 | .card-container:hover .card-option-icon {
41 | color: black;
42 | }
43 |
44 | .card-content {
45 | color: white;
46 | }
47 |
48 | .card-head {
49 | display: flex;
50 | justify-content: space-between;
51 | }
52 |
53 | .card-icon {
54 | color: white;
55 | }
56 |
57 | .card-option-icon {
58 | color: rgba(255, 255, 255, 0.548);
59 | }
60 |
61 | .card-content h1 {
62 | font-family: "Roboto", sans-serif;
63 | font-weight: 500;
64 | font-size: 1.5rem;
65 | }
66 |
67 | .card-content h2 {
68 | font-family: "Roboto", sans-serif;
69 | font-weight: 300;
70 | font-size: 1rem;
71 | }
72 |
73 | @media screen and (min-width: 500px) {
74 | .card-container {
75 | grid-area: unset !important;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/components/quickAccess/QuickAccessCards.jsx:
--------------------------------------------------------------------------------
1 | import "./QuickAccessCards.css";
2 |
3 | const QuickAccessCards = ({
4 | id,
5 | iconName,
6 | cardColor,
7 | taskAmt,
8 | taskCategory,
9 | gridArea,
10 | parentFilter,
11 | onClickHandler,
12 | }) => {
13 | return (
14 |
59 |
61 | Quick Access
60 |
62 | parentSetFilter(parentFilter === 1 ? 0 : 1)}
71 | />
72 | parentSetFilter(parentFilter === 2 ? 0 : 2)}
81 | />
82 | parentSetFilter(parentFilter === 3 ? 0 : 3)}
91 | />
92 |
93 |
23 |
34 | );
35 | };
36 |
37 | export default QuickAccessCards;
38 |
--------------------------------------------------------------------------------
/components/taskForm/TaskForm.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: center;
5 | align-items: center;
6 | height: 100%;
7 | width: 100%;
8 | }
9 |
10 | .task-form-container {
11 | display: grid;
12 | gap: 20px;
13 | width: 50%;
14 | font-family: "Roboto", sans-serif;
15 | }
16 |
17 | .task-form-container button {
18 | justify-self: center;
19 | }
20 |
21 | .task-form-container input,
22 | .task-form-container select {
23 | background-color: white;
24 | font-family: "Roboto", sans-serif;
25 | font-weight: bold;
26 | padding: 10px;
27 | border-radius: 18px;
28 | border: none;
29 | outline: none;
30 | }
31 |
32 | .task-form-container input:focus,
33 | .task-form-container select:focus {
34 | outline: lightcoral solid 1px;
35 | }
36 |
37 | .task-form-container label {
38 | font-size: 1rem;
39 | font-weight: bold;
40 | color: white;
41 | }
42 |
--------------------------------------------------------------------------------
/components/taskForm/TaskForm.jsx:
--------------------------------------------------------------------------------
1 | import CircularBtn from "../circularBtn/CircularBtn";
2 | import "./TaskForm.css";
3 | import { useState, useEffect } from "react";
4 |
5 | /* Firebase */
6 | import { auth, db } from "../../config/firebase/firebase";
7 | import {
8 | doc,
9 | addDoc,
10 | collection,
11 | Timestamp,
12 | serverTimestamp,
13 | } from "firebase/firestore";
14 |
15 | const TaskForm = ({ isOpen, setIsOpen, parentTheme }) => {
16 | const [title, setTitle] = useState("");
17 | const [duration, setDuration] = useState();
18 | const [toBeDoneOn, setToBeDoneOn] = useState(
19 | new Date().toISOString().substring(0, 16)
20 | );
21 | const [tag, setTag] = useState("assignment");
22 | const [priority, setPriority] = useState(1);
23 |
24 | const createTask = async () => {
25 | if (title.trim().length < 2 || toBeDoneOn === null || priority === null) {
26 | return 0;
27 | }
28 |
29 | let date = new Date(toBeDoneOn);
30 |
31 | await addDoc(collection(db, "users", auth.currentUser.uid, "tasks"), {
32 | title: title,
33 | duration: parseInt(duration),
34 | toBeDoneOn: Timestamp.fromDate(date),
35 | tag: tag,
36 | priority: priority,
37 | isDone: 0,
38 | createdAt: serverTimestamp(),
39 | });
40 |
41 | setTitle("");
42 | setDuration(0);
43 | setToBeDoneOn("2023-06-");
44 |
45 | setIsOpen(false);
46 | };
47 |
48 | return (
49 |
24 | {iconName}
25 |
26 | more_horiz
27 |
28 |
29 |
30 |
33 | {taskAmt}
31 |{taskCategory}
32 |
50 |
128 | );
129 | };
130 |
131 | export default TaskForm;
132 |
--------------------------------------------------------------------------------
/components/taskShow/TaskFeed.css:
--------------------------------------------------------------------------------
1 | .task-feed-container {
2 | display: flex;
3 | justify-content: space-between;
4 | background-color: white;
5 | border-radius: 20px;
6 | padding: 1.2rem;
7 | /*border: dashed 1.2px #1c5d99;*/
8 | border: solid 1.2px transparent;
9 | gap: 10px;
10 | }
11 |
12 | .task-feed-container.dark {
13 | background-color: var(--global-alt-blue, #2ec4b6);
14 | }
15 |
16 | .task-feed-container:hover {
17 | border: solid 1.2px #1c5d99;
18 | cursor: pointer;
19 | }
20 |
21 | .task-head {
22 | display: flex;
23 | gap: 10px;
24 | justify-content: center;
25 | align-items: center;
26 | }
27 |
28 | .task-head h2 {
29 | font-family: "Poppins", sans-serif;
30 | font-weight: 500;
31 | font-size: 1.2rem;
32 | word-wrap: break-word;
33 | }
34 |
35 | #is-done {
36 | cursor: pointer;
37 | }
38 |
39 | #is-done:checked ~ #task-title {
40 | text-decoration: line-through;
41 | }
42 |
43 | @media screen and (max-width: 500px) {
44 | .task-head h2 {
45 | font-size: 1rem;
46 | word-break: break-word;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/components/taskShow/TaskFeed.jsx:
--------------------------------------------------------------------------------
1 | import "./TaskFeed.css";
2 | import { useEffect, useState } from "react";
3 |
4 | /* Firebase */
5 | import { auth, db } from "../../config/firebase/firebase";
6 | import { doc, updateDoc, deleteDoc } from "firebase/firestore";
7 | import CircularBtn from "../circularBtn/CircularBtn";
8 |
9 | const TaskFeed = ({ taskData, parentTheme }) => {
10 | const [taskDone, setTaskDone] = useState(taskData["isDone"]);
11 |
12 | useEffect(() => {
13 | const updateIsDone = async () => {
14 | await updateDoc(
15 | doc(db, "users", auth.currentUser.uid, "tasks", taskData["id"]),
16 | {
17 | isDone: taskDone,
18 | }
19 | );
20 | };
21 | updateIsDone();
22 | }, [taskDone]);
23 |
24 | useEffect(() => {
25 | setTaskDone(taskData["isDone"]);
26 | }, [taskData]);
27 |
28 | const deleteTask = async () => {
29 | await deleteDoc(
30 | doc(db, "users", auth.currentUser.uid, "tasks", taskData["id"])
31 | );
32 | };
33 | return (
34 |
51 | setIsOpen(!isOpen)}
56 | parentTheme={parentTheme}
57 | />
58 |
59 |
60 |
127 |
35 |
56 | );
57 | };
58 |
59 | export default TaskFeed;
60 |
--------------------------------------------------------------------------------
/components/taskShow/Tasks.css:
--------------------------------------------------------------------------------
1 | .tasks-container {
2 | font-family: "Roboto", sans-serif;
3 | padding: 24px;
4 | display: flex;
5 | flex-direction: column;
6 | gap: 20px;
7 |
8 | height: 100%;
9 | overflow-y: scroll;
10 | }
11 |
12 | .tasks-container h1 {
13 | font-size: 2rem;
14 | font-weight: 300;
15 | /* text-decoration: underline wavy var(--global-blue, #1c5d99) 2px; */
16 | }
17 |
18 | .task-head {
19 | display: flex;
20 | justify-content: space-between;
21 | }
22 |
23 | .tasks-feed {
24 | display: flex;
25 | flex-direction: column;
26 | gap: 16px;
27 | padding: 12px;
28 | }
29 |
30 | /* Create Task Button */
31 | .create-task-btn-mob {
32 | background-color: var(--trans-active, #1c5d992c);
33 | border-radius: 9999px;
34 | border: solid white 1px;
35 | padding: 12px;
36 | display: flex;
37 | justify-content: center;
38 | align-items: center;
39 | cursor: pointer;
40 | }
41 |
42 | .create-task-btn-label-mob {
43 | font-family: "Roboto", sans-serif;
44 | font-weight: 500;
45 | color: var(--active, #1c5d99);
46 | }
47 |
48 | .create-task-btn-mob:active {
49 | background-color: white;
50 | border: var(--active, #1c5d99) solid 1px;
51 | }
52 |
53 | .create-task-btn-mob.dark {
54 | background-color: #2ec4b554;
55 | }
56 |
57 | .create-task-btn-label-mob.dark {
58 | color: var(--global-alt-blue, #2ec4b6);
59 | }
60 |
61 | .create-task-btn-mob:active {
62 | border: var(--global-alt-blue, #2ec4b6);
63 | }
64 |
65 | /* Create Task Button */
66 |
67 | @media screen and (max-width: 500px) {
68 | .tasks-container {
69 | height: auto;
70 | overflow-y: unset;
71 | }
72 | }
73 |
74 | @media screen and (min-width: 1000px) {
75 | .create-task-btn-mob {
76 | display: none;
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/components/taskShow/Tasks.jsx:
--------------------------------------------------------------------------------
1 | import TaskFeed from "./TaskFeed";
2 | import "./Tasks.css";
3 |
4 | const Tasks = ({
5 | setIsOpen,
6 | isOpen,
7 | parentTasks,
8 | isTaskLoading,
9 | parentFilter,
10 | parentTheme,
11 | }) => {
12 | return (
13 |
36 | setTaskDone(e.target.checked)}
43 | />
44 |
46 | {taskData.title}
45 |
47 |
55 |
14 |
44 | );
45 | };
46 |
47 | export default Tasks;
48 |
--------------------------------------------------------------------------------
/config/firebase/firebase.js:
--------------------------------------------------------------------------------
1 | import { initializeApp } from "firebase/app";
2 | import { getAuth, GoogleAuthProvider } from "firebase/auth";
3 | import { getFirestore } from "firebase/firestore";
4 |
5 | const firebaseConfig = {
6 | apiKey: import.meta.env.VITE_API_KEY,
7 | authDomain: import.meta.env.VITE_AUTH_DOMAIN,
8 | projectId: import.meta.env.VITE_PROJECT_ID,
9 | storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
10 | messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
11 | appId: import.meta.env.VITE_APP_ID,
12 | measurementId: import.meta.env.VITE_MEASUREMENT_ID,
13 | };
14 |
15 | const app = initializeApp(firebaseConfig);
16 |
17 | export const db = getFirestore(app);
18 |
19 | export const googleProvider = new GoogleAuthProvider();
20 | export const auth = getAuth(app);
21 |
22 | export default app;
23 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
15 |
31 |
32 | 16 | {parentFilter === 1 17 | ? `Meetings (${parentTasks.length})` 18 | : parentFilter === 2 19 | ? `Groceries (${parentTasks.length})` 20 | : parentFilter === 3 21 | ? `Assignments (${parentTasks.length})` 22 | : `All Tasks (${parentTasks.length})`} 23 |
24 | 30 |
33 | {parentTasks.length !== 0 || null ? (
34 | parentTasks.map((doc) => (
35 |
43 | Tasks Loading
39 | ) : ( 40 |No Tasks
41 | )} 42 |
94 |
95 | setIsCreateTask(val)}
97 | isOpen={isCreateTask}
98 | parentTheme={theme}
99 | />
100 |
101 |
144 | ) : loading || isLoggingOut ? (
145 |
102 | setIsLoggingOut(value)}
105 | parentTheme={theme}
106 | parentChangeTheme={(theme) => setTheme(theme)}
107 | />
108 |
109 |
110 | setFilter(val)}
113 | />
114 | setIsCreateTask(val)}
116 | isOpen={isCreateTask}
117 | parentTasks={filteredTasks || []}
118 | parentFilter={filter}
119 | isTaskLoading={isTaskLoading}
120 | parentTheme={theme}
121 | />
122 |
123 |
124 | setIsCreateTask(isOpen)}
126 | parentTaskFormOpen={isCreateTask}
127 | setParentNowDate={(date) => setNowDate(date)}
128 | parentTasks={snapshot?.docs.map((doc) => ({
129 | id: doc.id,
130 | ...doc.data(),
131 | }))}
132 | parentTheme={theme}
133 | >
134 | ({
138 | id: doc.id,
139 | ...doc.data(),
140 | }))}
141 | />
142 |
143 |
38 |
54 | );
55 | };
56 |
57 | export default Login;
58 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SomnathDas/errand/c9e80b2d796a6279e99ea410273c387d24c40739/src/App.css
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import Home from "../pages/home/Home";
2 | import Login from "../pages/login/Login";
3 | import "./App.css";
4 |
5 | import { Routes, Route } from "react-router-dom";
6 |
7 | const App = () => {
8 | return (
9 |
39 |
51 |
52 |
53 |
40 |
45 |
46 |
50 |