32 | Loading...
}>
33 |
18 |
20 | );
21 | };
22 |
23 | export default AuthLayout;
24 |
--------------------------------------------------------------------------------
/server/routes/account.route.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import * as accountController from "../controllers/account.controller";
3 | import { authMiddleware } from "../middlewares/auth";
4 | import { multerUploadSingle } from "../middlewares/multerUploadSingle";
5 |
6 | const accountRouter = express.Router();
7 |
8 | accountRouter.put(
9 | "/",
10 | authMiddleware,
11 | function (req, res, next) {
12 | multerUploadSingle(req, res, next, "profile");
13 | },
14 | accountController.updateAccount
15 | );
16 |
17 | accountRouter.post("/forgot-password", accountController.forgotPassword);
18 | accountRouter.post("/reset-password/:token", accountController.resetPassword);
19 |
20 | export default accountRouter;
21 |
--------------------------------------------------------------------------------
/client/src/components/Skeletons/CardDetailSkeleton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Skeleton from "react-loading-skeleton";
3 |
4 | const CardDetailSkeleton = () => {
5 | return (
6 |
12 |
21 | );
22 | };
23 |
24 | export default CardDetailSkeleton;
25 |
--------------------------------------------------------------------------------
/server/models/comment.model.ts:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 |
3 | const commentSchema = new mongoose.Schema(
4 | {
5 | comment: {
6 | type: String,
7 | required: true,
8 | minlength: 1,
9 | trim: true,
10 | },
11 | isUpdated: {
12 | type: Boolean,
13 | required: true,
14 | default: false,
15 | },
16 | user: {
17 | type: mongoose.Schema.Types.ObjectId,
18 | ref: "User",
19 | required: true,
20 | },
21 | cardId: {
22 | type: mongoose.Schema.Types.ObjectId,
23 | ref: "Card",
24 | required: true,
25 | },
26 | },
27 | { timestamps: true }
28 | );
29 |
30 | const Comment = mongoose.model("Comment", commentSchema);
31 |
32 | export default Comment;
33 |
--------------------------------------------------------------------------------
/server/models/forgotPassword.model.ts:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 | import { add } from "date-fns";
3 | import { FORGOT_PASSWORD_TOKEN_LENGTH } from "../config";
4 |
5 | const forgotPasswordSchema = new mongoose.Schema({
6 | userId: {
7 | type: mongoose.Schema.Types.ObjectId,
8 | ref: "User",
9 | required: true,
10 | },
11 | token: {
12 | type: String,
13 | required: true,
14 | minlength: FORGOT_PASSWORD_TOKEN_LENGTH,
15 | maxlength: FORGOT_PASSWORD_TOKEN_LENGTH,
16 | },
17 | expiresAt: {
18 | type: Date,
19 | default: add(new Date(), {
20 | days: 3,
21 | }),
22 | },
23 | });
24 |
25 | const ForgotPassword = mongoose.model("ForgotPassword", forgotPasswordSchema);
26 |
27 | export default ForgotPassword;
28 |
--------------------------------------------------------------------------------
/server/models/emailVerification.model..ts:
--------------------------------------------------------------------------------
1 | import { add } from "date-fns";
2 | import mongoose from "mongoose";
3 | import { EMAIL_TOKEN_LENGTH } from "../config";
4 |
5 | const emailVerificationSchema = new mongoose.Schema({
6 | userId: {
7 | type: mongoose.Schema.Types.ObjectId,
8 | ref: "User",
9 | required: true,
10 | },
11 | token: {
12 | type: String,
13 | required: true,
14 | minlength: EMAIL_TOKEN_LENGTH,
15 | maxlength: EMAIL_TOKEN_LENGTH,
16 | },
17 | expiresAt: {
18 | type: Date,
19 | default: add(new Date(), {
20 | minutes: 30,
21 | }),
22 | },
23 | });
24 |
25 | const EmailVerification = mongoose.model(
26 | "EmailVerification",
27 | emailVerificationSchema
28 | );
29 |
30 | export default EmailVerification;
31 |
--------------------------------------------------------------------------------
/client/src/components/CustomOption/CustomOption.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Profile from "../Profile/Profile";
3 |
4 | const CustomOption = (props: any) => {
5 | const { innerProps, innerRef, data, isDisabled } = props;
6 |
7 | return (
8 |
16 |
20 |
13 |
20 | );
21 | };
22 |
23 | export default CustomOption;
24 |
--------------------------------------------------------------------------------
/server/routes/favorite.route.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import { authMiddleware } from "../middlewares/auth";
3 | import * as favoriteController from "../controllers/favorite.controller";
4 |
5 | const favoriteRouter = express.Router();
6 |
7 | // Protected(Auth) GET /favorites -> get all my favorites (for sidebar)
8 | favoriteRouter.get("/", authMiddleware, favoriteController.getMyFavorites);
9 | // Protected(Auth) POST /favorites -> make a space or board favorite
10 | favoriteRouter.post("/", authMiddleware, favoriteController.addToFavorite);
11 | // Protected(Auth) DELETE /favorites/:id -> removes a space or board from favorite
12 | favoriteRouter.delete(
13 | "/:id",
14 | authMiddleware,
15 | favoriteController.removeFavorite
16 | );
17 |
18 | export default favoriteRouter;
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # nyc test coverage
18 | .nyc_output
19 |
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 |
23 | # node-waf configuration
24 | .lock-wscript
25 |
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 |
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 |
33 | # Optional npm cache directory
34 | .npm
35 |
36 | # Optional REPL history
37 | .node_repl_history
38 | .DS_Store
39 |
40 | # .env
41 | .env
42 |
43 | dist
44 | dist-ssr
45 | *.local
46 |
--------------------------------------------------------------------------------
/server/app.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import dotenv from "dotenv";
3 | import cors from "cors";
4 | import { connectDB } from "./utils/db";
5 | import { BASE_PATH, PUBLIC_DIR_NAME, STATIC_PATH } from "./config";
6 | import path from "path";
7 | import rootRouter from "./routes";
8 |
9 | // dotenv config
10 | dotenv.config();
11 |
12 | // connectDB
13 | connectDB();
14 |
15 | const app = express();
16 |
17 | const PORT = process.env.PORT || 8000;
18 |
19 | // middlewares
20 | app.use(cors());
21 | app.use(express.json());
22 | // static files -> eg: /api/v1/static -> points to /public dir
23 | app.use(
24 | BASE_PATH + STATIC_PATH,
25 | express.static(path.join(__dirname, PUBLIC_DIR_NAME))
26 | );
27 |
28 | // routes
29 | app.use(`${BASE_PATH}`, rootRouter);
30 |
31 | app.listen(PORT, () => {
32 | console.log(`Running on port ${PORT}`);
33 | });
34 |
--------------------------------------------------------------------------------
/client/src/hooks/useClose.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 |
3 | const useClose = (fn: Function) => {
4 | let ref = useRef
14 |
16 |
17 |
19 | {data.label}
18 |Complete
;
18 | break;
19 | case DUE_DATE_STATUSES.OVERDUE:
20 | component = Overdue
;
21 | break;
22 | default:
23 | return null;
24 | }
25 |
26 | return {component && component}
;
27 | };
28 |
29 | export default DueDateStatus;
30 |
--------------------------------------------------------------------------------
/client/src/components/Loader/Loader.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | interface Props {
4 | size?: number;
5 | }
6 |
7 | const Loader = ({ size = 32 }: Props) => {
8 | return (
9 |
33 | );
34 | };
35 |
36 | export default Loader;
37 |
--------------------------------------------------------------------------------
/server/routes/list.route.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import { authMiddleware } from "../middlewares/auth";
3 | import * as listController from "../controllers/list.controller";
4 |
5 | const listRouter = express.Router();
6 |
7 | // Protected(Auth) POST /lists -> create a new list
8 | listRouter.post("/", authMiddleware, listController.createList);
9 | // Protected(Auth) PUT /lists/:id/name -> update list name
10 | listRouter.put("/:id/name", authMiddleware, listController.updateListName);
11 | // Protected(Auth) PUT /lists/:id/dnd -> dnd list
12 | listRouter.put("/:id/dnd", authMiddleware, listController.dndList);
13 | // Protected(Auth) GET /lists?boardId="boardId" -> get all lists under this board
14 | listRouter.get("/", authMiddleware, listController.getLists);
15 | // Protected(Auth) DELETE /lists/:id -> delete list and cards below it
16 | listRouter.delete("/:id", authMiddleware, listController.deleteList);
17 |
18 | export default listRouter;
19 |
--------------------------------------------------------------------------------
/client/src/pages/Home.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import MyCards from "../components/MyCards/MyCards";
3 | import RecentBoards from "../components/RecentBoards/RecentBoards";
4 |
5 | const Home = () => {
6 | return (
7 |
8 |
14 |
18 |
19 |
25 |
29 |
30 | );
31 | };
32 |
33 | export default Home;
34 |
--------------------------------------------------------------------------------
/server/models/label.model.ts:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 | import { LABEL_COLORS } from "../types/constants";
3 |
4 | const labelSchema = new mongoose.Schema(
5 | {
6 | name: {
7 | type: String,
8 | default: "",
9 | maxlength: 512,
10 | trim: true,
11 | },
12 | color: {
13 | type: String,
14 | required: true,
15 | validate: {
16 | validator: function (value: string) {
17 | return Object.values(LABEL_COLORS).includes(value);
18 | },
19 | message: `Invalid value for color`,
20 | },
21 | trim: true,
22 | },
23 | pos: {
24 | type: Number,
25 | required: true,
26 | min: 1,
27 | max: 7,
28 | },
29 | boardId: {
30 | type: mongoose.Schema.Types.ObjectId,
31 | ref: "Board",
32 | required: true,
33 | },
34 | },
35 | { timestamps: true }
36 | );
37 |
38 | const Label = mongoose.model("Label", labelSchema);
39 |
40 | export default Label;
41 |
--------------------------------------------------------------------------------
/server/types/constants.ts:
--------------------------------------------------------------------------------
1 | export const BOARD_VISIBILITY = {
2 | PRIVATE: "PRIVATE",
3 | PUBLIC: "PUBLIC",
4 | };
5 |
6 | // space member roles
7 | export const SPACE_MEMBER_ROLES = {
8 | ADMIN: "ADMIN",
9 | NORMAL: "NORMAL",
10 | GUEST: "GUEST",
11 | };
12 |
13 | // board member roles
14 | export const BOARD_MEMBER_ROLES = {
15 | ADMIN: "ADMIN",
16 | NORMAL: "NORMAL",
17 | OBSERVER: "OBSERVER",
18 | };
19 |
20 | // favorite obj types
21 | export const SPACE = "SPACE";
22 | export const BOARD = "BOARD";
23 |
24 | // LIST POSSIBLE DRAGS
25 | export const LIST_POSSIBLE_DRAGS = {
26 | LEFT: "LEFT",
27 | RIGHT: "RIGHT",
28 | };
29 |
30 | // CARD POSSIBLE DRAGS
31 | export const CARD_POSSIBLE_DRAGS = {
32 | DOWN: "DOWN",
33 | UP: "UP",
34 | };
35 |
36 | // LABEL COLORS
37 | export const LABEL_COLORS = {
38 | GREEN: "#61BD4F",
39 | YELLOW: "#F1D737",
40 | ORANGE: "#FA9F2E",
41 | RED: "#EB5A46",
42 | PURPLE: "#C377E0",
43 | BLUE: "#0079BF",
44 | LIGHTBLUE: "#3BC3E0",
45 | };
46 |
--------------------------------------------------------------------------------
/server/middlewares/multerUploadSingle.ts:
--------------------------------------------------------------------------------
1 | import { NextFunction, Response } from "express";
2 | import multer from "multer";
3 | import upload from "../utils/multerConfig";
4 |
5 | export const multerUploadSingle = async (
6 | req: any,
7 | res: Response,
8 | next: NextFunction,
9 | fileName: string
10 | ) => {
11 | // const upload = multer().single()
12 | // upload(req, res, (err) => {})
13 | // for us, upload = multer, so upload above becames file
14 | const file = upload.single(fileName);
15 |
16 | file(req, res, (err) => {
17 | // file size error
18 | if (err instanceof multer.MulterError) {
19 | return res.status(400).send({
20 | success: false,
21 | data: {},
22 | message: err.message,
23 | statusCode: 400,
24 | });
25 | } else if (err) {
26 | // invalid file type
27 | return res.status(400).send({
28 | success: false,
29 | data: {},
30 | message: "Unsupported image type",
31 | statusCode: 400,
32 | });
33 | }
34 | next();
35 | });
36 | };
--------------------------------------------------------------------------------
/server/models/list.model.ts:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 |
3 | const listSchema = new mongoose.Schema(
4 | {
5 | name: {
6 | type: String,
7 | required: true,
8 | minlength: 1,
9 | maxlength: 512,
10 | trim: true,
11 | },
12 | boardId: {
13 | type: mongoose.Schema.Types.ObjectId,
14 | ref: "Board",
15 | required: true,
16 | },
17 | pos: {
18 | type: String,
19 | required: true,
20 | trim: true,
21 | },
22 | cards: {
23 | type: [
24 | {
25 | type: mongoose.Schema.Types.ObjectId,
26 | ref: "Card",
27 | required: true,
28 | },
29 | ],
30 | default: [],
31 | },
32 | isCollapsed: {
33 | type: Boolean,
34 | default: false,
35 | },
36 | creator: {
37 | type: mongoose.Schema.Types.ObjectId,
38 | ref: "User",
39 | required: true,
40 | },
41 | },
42 | { timestamps: true }
43 | );
44 |
45 | const List = mongoose.model("List", listSchema);
46 |
47 | export default List;
48 |
--------------------------------------------------------------------------------
/server/routes/user.route.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import * as userController from "../controllers/user.controller";
3 | import { authMiddleware } from "../middlewares/auth";
4 |
5 | const userRouter = express.Router();
6 |
7 | // Protected(Auth) GET /users/getCurrentUser -> gets the current user
8 | userRouter.get(
9 | "/getCurrentUser",
10 | authMiddleware,
11 | userController.getCurrentUser
12 | );
13 | // Protected(Auth) DELETE /users -> deletes the current user
14 | userRouter.delete("/", authMiddleware, userController.deleteCurrentUser);
15 | // Protected(Auth) GET /users/search?q=query&spaceId=id -> search other user
16 | userRouter.get("/search", authMiddleware, userController.searchUser);
17 | // Protected(Auth) GET /users/search/board?q=query&boardId=id -> search other user (board related)
18 | userRouter.get("/search/board", authMiddleware, userController.searchUserBoard);
19 | // Protected(Auth) GET /users/board/id -> get all space & board members
20 | userRouter.get("/board/:id", authMiddleware, userController.getAllMembers);
21 |
22 | export default userRouter;
23 |
--------------------------------------------------------------------------------
/client/src/components/Options/OptionsItem.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { IconType } from "react-icons";
3 |
4 | interface Props {
5 | Icon: IconType;
6 | text: string;
7 | onClick: Function;
8 | iconColor?: string;
9 | iconFillColor?: string;
10 | textColor?: string;
11 | }
12 |
13 | const OptionsItem = ({
14 | Icon,
15 | text,
16 | onClick,
17 | iconColor,
18 | iconFillColor,
19 | textColor,
20 | }: Props) => {
21 | return (
22 | Recent Boards
15 | 16 |My Tasks
26 | 27 |
27 |
33 |
38 | {text}
39 |
40 |
32 |
34 | {text}
35 |
20 | {!show && (
21 |
27 | )}
28 |
29 |
30 |
32 |
8 |
45 | );
46 | };
47 |
48 | export default Error404;
49 |
--------------------------------------------------------------------------------
/client/src/components/FormikComponents/SubmitBtn.tsx:
--------------------------------------------------------------------------------
1 | import { useFormikContext } from "formik";
2 | import React from "react";
3 | import Loader from "../Loader/Loader";
4 |
5 | interface Props {
6 | text: string;
7 | isSubmitting: boolean;
8 | classes?: string;
9 | disabled?: boolean;
10 | noDirtyCheck?: boolean;
11 | }
12 |
13 | const SubmitBtn = ({
14 | text,
15 | isSubmitting,
16 | classes,
17 | disabled = false,
18 | noDirtyCheck = false,
19 | }: Props) => {
20 | const { isValid, dirty } = useFormikContext();
21 |
22 | return isSubmitting === true ? (
23 |
29 | ) : noDirtyCheck ? (
30 |
37 | ) : (
38 |
45 | );
46 | };
47 |
48 | export default SubmitBtn;
49 |
--------------------------------------------------------------------------------
/client/src/components/Profile/Profile.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { HiChevronDoubleUp } from "react-icons/hi";
3 | import AdminIcon from "../../assets/icons/admin.png";
4 |
5 | interface Props {
6 | src?: string;
7 | alt?: string;
8 | classes?: string;
9 | isAdmin?: boolean;
10 | styles?: Object;
11 | onClick?: () => void;
12 | }
13 |
14 | const Profile = ({ src, alt, isAdmin, classes, onClick, styles }: Props) => {
15 | return (
16 |
12 |
44 |
13 |
23 |
29 |
30 | Oops!
14 | 20 | 404 21 |
22 |23 |
Page Not Found
24 |
25 |
26 | Go Home
27 |
28 |
37 | 
42 |
43 |
17 | {src ? (
18 | 
26 | ) : (
27 | 
45 | )}
46 |
47 | );
48 | };
49 |
50 | export default Profile;
51 |
--------------------------------------------------------------------------------
/client/src/components/CustomNavLink/CustomNavLink.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { useState } from "react";
3 | import { Link, useLocation } from "react-router-dom";
4 |
5 | interface Props {
6 | to: string;
7 | list?: string[];
8 | fn?: Function;
9 | onClick?: Function;
10 | showUnderline?: boolean;
11 | children: React.ReactNode;
12 | }
13 |
14 | const CustomNavLink = ({
15 | to,
16 | list,
17 | fn,
18 | showUnderline = true,
19 | children,
20 | onClick,
21 | }: Props) => {
22 | const location = useLocation();
23 | const pathname = location.pathname;
24 |
25 | const [isActive, setIsActive] = useState
32 | *
33 |
34 | )}
35 |
36 | {isAdmin && (
37 |
24 | {isRefetching ? (
25 |
41 | );
42 | };
43 |
44 | export default ErrorCard;
45 |
--------------------------------------------------------------------------------
/client/src/components/ErrorBoardLists/ErrorBoardLists.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { HiOutlineRefresh } from "react-icons/hi";
3 | import { useQueryClient } from "react-query";
4 | import Loader from "../Loader/Loader";
5 | import UtilityBtn from "../UtilityBtn/UtilityBtn";
6 |
7 | interface Props {
8 | msg: string;
9 | isRefetching: boolean;
10 | queryKey: string[];
11 | }
12 |
13 | const ErrorBoardLists = ({ msg, isRefetching, queryKey }: Props) => {
14 | const queryClient = useQueryClient();
15 |
16 | return (
17 |
28 | {msg}
29 | {
35 | queryClient.invalidateQueries(queryKey);
36 | }}
37 | />
38 |
39 | )}
40 |
24 | {isRefetching ? (
25 |
41 | );
42 | };
43 |
44 | export default ErrorBoardLists;
45 |
--------------------------------------------------------------------------------
/client/src/redux/features/modalSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2 | import { ModalObj } from "../../types";
3 |
4 | const initialState: ModalObj = {
5 | modalType: null,
6 | modalProps: {},
7 | modalTitle: "",
8 | showCloseBtn: true,
9 | bgColor: "white",
10 | textColor: "",
11 | };
12 |
13 | const modalSlice = createSlice({
14 | name: "modal",
15 | initialState,
16 | reducers: {
17 | showModal: (state, action: PayloadAction
28 | {msg}
29 | {
35 | queryClient.invalidateQueries(queryKey);
36 | }}
37 | />
38 |
39 | )}
40 |
21 | {members.length > 8 ? (
22 |
48 | );
49 | };
50 |
51 | export default BoardMembers;
52 |
--------------------------------------------------------------------------------
/client/src/components/FormikComponents/ColorLabel.tsx:
--------------------------------------------------------------------------------
1 | import { useField, useFormikContext } from "formik";
2 | import React, { useEffect, useState } from "react";
3 | import { LABEL_COLORS } from "../../types/constants";
4 |
5 | interface Props {
6 | label: string;
7 | name: string;
8 | selected?: string;
9 | classes?: string;
10 | }
11 |
12 | const ColorLabel = ({ label, name, selected, classes }: Props) => {
13 | const { setFieldValue } = useFormikContext();
14 | const [colors, setColors] = useState(LABEL_COLORS);
15 | const [currentChoosen, setCurrentChoosen] = useState(selected || colors[0]);
16 |
17 | useEffect(() => {
18 | setFieldValue(name, currentChoosen);
19 | }, [currentChoosen]);
20 |
21 | return (
22 |
23 | {members.slice(0, 8).map((m: BoardMemberObj) => (
24 |
35 | ) : (
36 | members.map((m: BoardMemberObj) => (
37 | +{members.slice(8).length}
34 |
23 |
45 | );
46 | };
47 |
48 | export default ColorLabel;
49 |
--------------------------------------------------------------------------------
/client/src/utils/lexorank.ts:
--------------------------------------------------------------------------------
1 | export class Lexorank {
2 | MIN_CHAR: number = this.byte('0');
3 | MAX_CHAR: number = this.byte('z');
4 |
5 | insert(prev: string, next: string): [string, boolean] {
6 | if (prev == '') {
7 | prev = this.string(this.MIN_CHAR);
8 | }
9 | if (next == '') {
10 | next = this.string(this.MAX_CHAR);
11 | }
12 |
13 | let rank: string = '';
14 | let i: number = 0;
15 |
16 | while (true) {
17 | let prevChar: number = this.getChar(prev, i, this.MIN_CHAR);
18 | let nextChar: number = this.getChar(next, i, this.MAX_CHAR);
19 |
20 | if (prevChar == nextChar) {
21 | rank += this.string(prevChar);
22 | i++;
23 | continue;
24 | }
25 |
26 | let midChar: number = this.mid(prevChar, nextChar);
27 | if (midChar == prevChar || midChar == nextChar) {
28 | rank += this.string(prevChar);
29 | i++;
30 | continue;
31 | }
32 |
33 | rank += this.string(midChar);
34 | break;
35 | }
36 |
37 | if (rank >= next) {
38 | return [prev, false];
39 | }
40 | return [rank, true];
41 | }
42 |
43 | string(byte: number): string {
44 | return String.fromCharCode(byte);
45 | }
46 |
47 | byte(char: string): number {
48 | return char.charCodeAt(0);
49 | }
50 |
51 | mid(prev: number, next: number): number {
52 | // TODO: consider to use 8 steps each jump
53 | return Math.floor((prev + next) / 2);
54 | }
55 |
56 | getChar(s: string, i: number, defaultChar: number): number {
57 | if (i >= s.length) {
58 | return defaultChar;
59 | }
60 | return this.byte(s.charAt(i));
61 | }
62 | }
--------------------------------------------------------------------------------
/client/src/components/Toasts/Toasts.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useDispatch, useSelector } from "react-redux";
3 | import { toast } from "react-toastify";
4 | import { RootState } from "../../redux/app";
5 | import { removeToast } from "../../redux/features/toastSlice";
6 | import { DEFAULT, ERROR, INFO, SUCCESS, WARNING } from "../../types/constants";
7 |
8 | const Toasts = () => {
9 | const { toasts } = useSelector((state: RootState) => state.toast);
10 |
11 | const dispatch = useDispatch();
12 |
13 | useEffect(() => {
14 | toasts &&
15 | toasts.forEach((t) => {
16 | if (t.kind === ERROR)
17 | toast.error(t.msg, {
18 | toastId: t.kind + t.msg,
19 | onClose: () => {
20 | dispatch(removeToast(t));
21 | },
22 | });
23 | if (t.kind === SUCCESS)
24 | toast.success(t.msg, {
25 | toastId: t.kind + t.msg,
26 | onClose: () => {
27 | dispatch(removeToast(t));
28 | },
29 | });
30 | if (t.kind === INFO)
31 | toast.info(t.msg, {
32 | toastId: t.kind + t.msg,
33 | onClose: () => {
34 | dispatch(removeToast(t));
35 | },
36 | });
37 | if (t.kind === WARNING)
38 | toast.warn(t.msg, {
39 | toastId: t.kind + t.msg,
40 | onClose: () => {
41 | dispatch(removeToast(t));
42 | },
43 | });
44 | if (t.kind === DEFAULT)
45 | toast(t.msg, {
46 | toastId: t.kind + t.msg,
47 | onClose: () => {
48 | dispatch(removeToast(t));
49 | },
50 | });
51 | });
52 | }, [toasts]);
53 | return <>;
54 | };
55 |
56 | export default Toasts;
57 |
--------------------------------------------------------------------------------
/client/src/components/FormikComponents/TextArea.tsx:
--------------------------------------------------------------------------------
1 | import { useField } from "formik";
2 | import React from "react";
3 | import ErrorBox from "./ErrorBox";
4 |
5 | interface Props {
6 | label: string;
7 | id: string;
8 | name: string;
9 | disabled?: boolean;
10 | optional?: boolean;
11 | inline?: boolean;
12 | classes?: string;
13 | }
14 |
15 | const TextArea = ({
16 | label,
17 | id,
18 | name,
19 | classes,
20 | disabled = false,
21 | optional = false,
22 | inline = false,
23 | ...props
24 | }: Props) => {
25 | // props -> every props except label and type -> { name: 'value', id: 'value' }
26 | const [field, meta] = useField(name);
27 |
28 | return (
29 |
24 |
25 |
26 |
44 |
27 | {colors.map((color) => (
28 |
41 | ))}
42 |
43 |
30 |
61 | );
62 | };
63 |
64 | export default TextArea;
65 |
--------------------------------------------------------------------------------
/client/src/components/Options/Options.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { useState } from "react";
3 | import ReactDOM from "react-dom";
4 | import useClose from "../../hooks/useClose";
5 |
6 | interface Props {
7 | show: boolean;
8 | setShow: React.Dispatch
35 |
44 |
58 |
59 | {meta.touched && meta.error &&
41 |
61 | )
62 | );
63 | };
64 |
65 | export default Options;
66 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "dev": "vite",
6 | "build": "tsc && vite build",
7 | "preview": "vite preview"
8 | },
9 | "dependencies": {
10 | "@reduxjs/toolkit": "^1.7.1",
11 | "axios": "^0.24.0",
12 | "date-fns": "^2.28.0",
13 | "debounce-promise": "^3.1.2",
14 | "formik": "^2.2.9",
15 | "javascript-time-ago": "^2.3.13",
16 | "jwt-decode": "^3.1.2",
17 | "react": "^17.0.2",
18 | "react-avatar": "^3.7.0",
19 | "react-beautiful-dnd": "^13.1.0",
20 | "react-dom": "^17.0.2",
21 | "react-google-login": "^5.2.2",
22 | "react-hot-toast": "^2.2.0",
23 | "react-icons": "^4.3.1",
24 | "react-loading-skeleton": "^3.0.3",
25 | "react-masonry-css": "^1.0.16",
26 | "react-query": "^3.34.7",
27 | "react-redux": "^7.2.6",
28 | "react-router-dom": "^6.2.1",
29 | "react-select": "^5.2.2",
30 | "react-toastify": "^8.1.0",
31 | "react-tooltip": "^4.2.21",
32 | "yup": "^0.32.11"
33 | },
34 | "devDependencies": {
35 | "@types/axios": "^0.14.0",
36 | "@types/debounce-promise": "^3.1.4",
37 | "@types/jwt-decode": "^3.1.0",
38 | "@types/react": "^17.0.33",
39 | "@types/react-beautiful-dnd": "^13.1.2",
40 | "@types/react-dom": "^17.0.10",
41 | "@types/react-icons": "^3.0.0",
42 | "@types/react-query": "^1.2.9",
43 | "@types/react-router-dom": "^5.3.2",
44 | "@types/react-select": "^5.0.1",
45 | "@types/react-toastify": "^4.1.0",
46 | "@types/react-tooltip": "^4.2.4",
47 | "@types/react-virtualized": "^9.21.16",
48 | "@types/react-window": "^1.8.5",
49 | "@types/yup": "^0.29.13",
50 | "@vitejs/plugin-react": "^1.0.7",
51 | "autoprefixer": "^10.4.1",
52 | "postcss": "^8.4.5",
53 | "tailwindcss": "^3.0.8",
54 | "typescript": "^4.4.4",
55 | "vite": "^2.7.2"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/client/src/components/Sidebar/SpaceList/BoardList.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useDispatch } from "react-redux";
3 | import { showModal } from "../../../redux/features/modalSlice";
4 | import { BoardObj } from "../../../types";
5 | import { CREATE_BOARD_MODAL } from "../../../types/constants";
6 | import BoardItem from "./BoardItem";
7 |
8 | interface Props {
9 | spaceId: string;
10 | boards: BoardObj[];
11 | setShowPlusIcon: React.Dispatch- window.innerHeight / 2 + 20
46 | ? {
47 | left: x - 20,
48 | bottom: window.innerHeight - y - 7,
49 | minWidth: "150px",
50 | }
51 | : {
52 | left: x - 20,
53 | top: y - 50,
54 | minWidth: "150px",
55 | }
56 | }
57 | >
58 | {children}
59 |
-
25 | {boards.length > 0 ? (
26 | boards.map((b) => (
27 |
- 39 | Create a{" "} 40 | {" "} 57 | 58 | )} 59 |
34 |
66 | );
67 | };
68 |
69 | export default Input;
70 |
--------------------------------------------------------------------------------
/client/src/pages/EmailVerify.tsx:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | import React, { useEffect } from "react";
3 | import { useDispatch, useSelector } from "react-redux";
4 | import { useNavigate, useParams, useSearchParams } from "react-router-dom";
5 | import axiosInstance from "../axiosInstance";
6 | import { logoutUser } from "../redux/features/authSlice";
7 | import { addToast } from "../redux/features/toastSlice";
8 | import { ERROR, SUCCESS } from "../types/constants";
9 |
10 | const EmailVerify = () => {
11 | const dispatch = useDispatch();
12 | const navigate = useNavigate();
13 |
14 | const params = useParams();
15 | const [searchParams, setSearchParams] = useSearchParams();
16 |
17 | useEffect(() => {
18 | axiosInstance
19 | .get(`/email/verify/${params.token}?wuid=${searchParams.get("wuid")}`)
20 | .then((response) => {
21 | const { message } = response.data;
22 |
23 | dispatch(addToast({ kind: SUCCESS, msg: message }));
24 |
25 | navigate("/", { replace: true });
26 | })
27 | .catch((error) => {
28 | if (error.response) {
29 | const response = error.response;
30 | const { message } = response.data;
31 |
32 | switch (response.status) {
33 | case 400:
34 | case 500:
35 | dispatch(addToast({ kind: ERROR, msg: message }));
36 | break;
37 | default:
38 | dispatch(
39 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
40 | );
41 | break;
42 | }
43 | } else if (error.request) {
44 | dispatch(
45 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
46 | );
47 | } else {
48 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
49 | }
50 |
51 | navigate("/", { replace: true });
52 | });
53 | }, []);
54 |
55 | return ;
56 | };
57 |
58 | export default EmailVerify;
59 |
--------------------------------------------------------------------------------
/client/src/redux/features/authSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2 | import { UserObj } from "../../types";
3 | import {
4 | getTokens,
5 | removeTokens,
6 | saveAccessTokens,
7 | saveTokens,
8 | } from "../../utils/helpers";
9 |
10 | interface Tokens {
11 | accessToken: string;
12 | refreshToken: string;
13 | }
14 |
15 | interface AuthState {
16 | accessToken: string | null;
17 | refreshToken: string | null;
18 | user: UserObj | null;
19 | }
20 |
21 | const initialState: AuthState = {
22 | accessToken: getTokens().accessToken,
23 | refreshToken: getTokens().refreshToken,
24 | user: null,
25 | };
26 |
27 | const authSlice = createSlice({
28 | name: "auth",
29 | initialState,
30 | reducers: {
31 | loginUser: (state, action: PayloadAction
39 |
48 |
49 |
63 |
64 | {meta.touched && meta.error &&
66 | {error ? "Something went wrong, please refresh the screen" : "Loading..."}
67 |
68 | );
69 | };
70 |
71 | export default MainLayout;
72 |
--------------------------------------------------------------------------------
/client/src/components/layouts/DefaultLayout.tsx:
--------------------------------------------------------------------------------
1 | import { lazy, Suspense } from "react";
2 | import { useSelector } from "react-redux";
3 | import { Navigate, Route, Routes } from "react-router-dom";
4 | import BoardDetail from "../../pages/spaces/boards/BoardDetail";
5 | import { RootState } from "../../redux/app";
6 | import Header from "../Header/Header";
7 | import Modal from "../Modal/Modal";
8 | import Sidebar from "../Sidebar/Sidebar";
9 | import SpaceLayout from "./SpaceLayout";
10 |
11 | const Home = lazy(() => import("../../pages/Home"));
12 | const Settings = lazy(() => import("../../pages/Settings"));
13 | const Error404 = lazy(() => import("../../pages/Error404"));
14 |
15 | const DefaultLayout = () => {
16 | const { show } = useSelector((state: RootState) => state.sidebar);
17 | const modal = useSelector((state: RootState) => state.modal);
18 |
19 | return (
20 |
21 |
54 |
55 | {/* modal */}
56 | {modal.modalType !== null &&
22 |
30 |
34 |
50 |
51 |
52 |
53 |
46 |
76 | );
77 | };
78 |
79 | export default Select;
80 |
--------------------------------------------------------------------------------
/client/src/types/constants.ts:
--------------------------------------------------------------------------------
1 | // toast types
2 | export const ERROR = "ERROR";
3 | export const SUCCESS = "SUCCESS";
4 | export const INFO = "INFO";
5 | export const WARNING = "WARNING";
6 | export const DEFAULT = "DEFAULT";
7 |
8 | // modal types
9 | export const CREATE_SPACE_MODAL = "CREATE_SPACE_MODAL";
10 | export const CREATE_BOARD_MODAL = "CREATE_BOARD_MODAL";
11 | export const INVITE_SPACE_MEMBER_MODAL = "INVITE_SPACE_MEMBER_MODAL";
12 | export const CONFIRM_LEAVE_SPACE_MODAL = "CONFIRM_LEAVE_SPACE_MODAL";
13 | export const CONFIRM_REMOVE_SPACE_MEMBER_MODAL =
14 | "CONFIRM_REMOVE_SPACE_MEMBER_MODAL";
15 | export const CONFIRM_DELETE_SPACE_MODAL = "CONFIRM_DELETE_SPACE_MODAL";
16 | export const CONFIRM_DELETE_BOARD_MODAL = "CONFIRM_DELETE_BOARD_MODAL";
17 | export const CONFIRM_LEAVE_BOARD_MODAL = "CONFIRM_LEAVE_BOARD_MODAL";
18 | export const CONFIRM_REMOVE_BOARD_MEMBER_MODAL =
19 | "CONFIRM_REMOVE_BOARD_MEMBER_MODAL";
20 | export const CARD_DETAIL_MODAL = "CARD_DETAIL_MODAL";
21 | export const BOARD_LABEL_MODAL = "BOARD_LABEL_MODAL";
22 |
23 | // types
24 | export const SPACE = "SPACE";
25 | export const BOARD = "BOARD";
26 |
27 | // SPACE ROLES
28 | export const SPACE_ROLES = {
29 | ADMIN: "ADMIN",
30 | NORMAL: "NORMAL",
31 | GUEST: "GUEST",
32 | };
33 |
34 | // SPACE ROLES
35 | export const BOARD_ROLES = {
36 | ADMIN: "ADMIN",
37 | NORMAL: "NORMAL",
38 | OBSERVER: "OBSERVER",
39 | };
40 |
41 | // BOARD VISIBILITY TYPES
42 | export const BOARD_VISIBILITY_TYPES = {
43 | PUBLIC: "PUBLIC",
44 | PRIVATE: "PRIVATE",
45 | };
46 |
47 | // BOARD BG COLORS
48 | export const BOARD_COLORS = [
49 | "#cdb4db",
50 | "#ffafcc",
51 | "#a2d2ff",
52 | "#ff595e",
53 | "#ffca3a",
54 | "#90be6d",
55 | ];
56 |
57 | export const LABEL_COLORS = [
58 | "#61BD4F",
59 | "#F1D737",
60 | "#FA9F2E",
61 | "#EB5A46",
62 | "#C377E0",
63 | "#0079BF",
64 | "#3BC3E0",
65 | ];
66 |
67 | // LIST POSSIBLE DRAGS
68 | export const LIST_POSSIBLE_DRAGS = {
69 | LEFT: "LEFT",
70 | RIGHT: "RIGHT",
71 | };
72 |
73 | // CARD POSSIBLE DRAGS
74 | export const CARD_POSSIBLE_DRAGS = {
75 | DOWN: "DOWN",
76 | UP: "UP",
77 | };
78 |
79 | // DUE DATE STATUSES
80 | export const DUE_DATE_STATUSES = {
81 | OVERDUE: "OVERDUE",
82 | COMPLETE: "COMPLETE",
83 | };
84 |
--------------------------------------------------------------------------------
/server/models/card.model.ts:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 | import validator from "validator";
3 |
4 | const cardSchema = new mongoose.Schema(
5 | {
6 | name: {
7 | type: String,
8 | required: true,
9 | minlength: 1,
10 | maxlength: 512,
11 | trim: true,
12 | },
13 | pos: {
14 | type: String,
15 | required: true,
16 | trim: true,
17 | },
18 | listId: {
19 | type: mongoose.Schema.Types.ObjectId,
20 | ref: "List",
21 | required: true,
22 | },
23 | description: {
24 | type: String,
25 | required: false,
26 | trim: true,
27 | },
28 | coverImg: {
29 | type: String,
30 | required: false,
31 | validate: {
32 | validator: function (value: string) {
33 | return value
34 | ? validator.isURL(value, {
35 | require_protocol: true,
36 | })
37 | : true;
38 | },
39 | message: `Invalid Image URL`,
40 | },
41 | trim: true,
42 | },
43 | color: {
44 | type: String,
45 | required: false,
46 | trim: true,
47 | },
48 | dueDate: {
49 | type: Date,
50 | required: false,
51 | },
52 | isComplete: {
53 | type: Boolean,
54 | default: false,
55 | },
56 | members: {
57 | type: [
58 | {
59 | type: mongoose.Schema.Types.ObjectId,
60 | ref: "User",
61 | required: true,
62 | },
63 | ],
64 | default: [],
65 | },
66 | labels: {
67 | type: [
68 | {
69 | type: mongoose.Schema.Types.ObjectId,
70 | ref: "Label",
71 | required: true,
72 | },
73 | ],
74 | default: [],
75 | },
76 | comments: {
77 | type: [
78 | {
79 | type: mongoose.Schema.Types.ObjectId,
80 | ref: "Comment",
81 | required: true,
82 | },
83 | ],
84 | default: [],
85 | },
86 | creator: {
87 | type: mongoose.Schema.Types.ObjectId,
88 | ref: "User",
89 | required: true,
90 | },
91 | },
92 | { timestamps: true }
93 | );
94 |
95 | const Card = mongoose.model("Card", cardSchema);
96 |
97 | export default Card;
98 |
--------------------------------------------------------------------------------
/client/src/components/RecentBoards/RecentBoard.tsx:
--------------------------------------------------------------------------------
1 | import { AxiosError } from "axios";
2 | import React, { useCallback, useState } from "react";
3 | import { HiOutlineLockClosed, HiOutlineStar } from "react-icons/hi";
4 | import { useQueryClient } from "react-query";
5 | import { useDispatch } from "react-redux";
6 | import { Link, useNavigate } from "react-router-dom";
7 | import axiosInstance from "../../axiosInstance";
8 | import { addToast } from "../../redux/features/toastSlice";
9 | import { BoardObj, SpaceObj } from "../../types";
10 | import { BOARD_VISIBILITY_TYPES, ERROR } from "../../types/constants";
11 | import UtilityBtn from "../UtilityBtn/UtilityBtn";
12 |
13 | interface Props {
14 | board: BoardObj;
15 | }
16 |
17 | const RecentBoard = ({ board }: Props) => {
18 | const [isIn, setIsIn] = useState(false);
19 |
20 | return (
21 | setIsIn(true)}
23 | onMouseLeave={() => setIsIn(false)}
24 | to={`/b/${board._id}`}
25 | className="board relative h-28 rounded cursor-pointer text-white font-semibold hover:bg-gradient-to-r from-slate-500 to-slate-500 bg-blend-darken"
26 | style={{
27 | background: board.bgImg ? `url(${board.bgImg})` : board.color,
28 | backgroundRepeat: "no-repeat",
29 | boxShadow: `inset 0 0 0 2000px rgba(0, 0, 0, 0.22)`,
30 | backgroundPosition: "50%",
31 | backgroundOrigin: "border-box",
32 | backgroundSize: "cover",
33 | width: 230,
34 | maxWidth: 230,
35 | backgroundBlendMode: "overlay",
36 | }}
37 | >
38 | {isIn && (
39 |
40 | )}
41 |
51 |
57 |
73 |
74 | {meta.touched && meta.error &&
42 | {board.name}
43 |
44 |
45 |
46 | {board.visibility === BOARD_VISIBILITY_TYPES.PRIVATE && (
47 |
56 |
57 | );
58 | };
59 |
60 | export default RecentBoard;
61 |
--------------------------------------------------------------------------------
/client/src/components/RecentBoards/RecentBoards.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { HiOutlineRefresh } from "react-icons/hi";
3 | import { useQuery, useQueryClient } from "react-query";
4 | import axiosInstance from "../../axiosInstance";
5 | import { BoardObj } from "../../types";
6 | import Board from "../Board/Board";
7 | import Error from "../Error/Error";
8 | import Loader from "../Loader/Loader";
9 | import UtilityBtn from "../UtilityBtn/UtilityBtn";
10 | import RecentBoard from "./RecentBoard";
11 |
12 | const RecentBoards = () => {
13 | const queryClient = useQueryClient();
14 |
15 | const getRecentBoards = async ({ queryKey }: any) => {
16 | const response = await axiosInstance.get(`/boards/recentBoards`);
17 |
18 | const { data } = response.data;
19 |
20 | return data;
21 | };
22 |
23 | const {
24 | data: boards,
25 | isLoading,
26 | error,
27 | } = useQuery
35 |
37 | );
38 | }
39 |
40 | // handle each error accordingly & specific to that situation
41 | if (error) {
42 | return (
43 |
44 |
58 | );
59 | }
60 |
61 | return (
62 |
45 | {
53 | queryClient.invalidateQueries(["getRecentBoards"]);
54 | }}
55 | />
56 |
57 | Oops, something went wrong.
46 |
63 |
75 | );
76 | };
77 |
78 | export default RecentBoards;
79 |
--------------------------------------------------------------------------------
/client/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
2 | import { ToastContainer } from "react-toastify";
3 | import AuthLayout from "./components/layouts/AuthLayout";
4 | import Toasts from "./components/Toasts/Toasts";
5 | import Login from "./pages/auth/Login";
6 | import Register from "./pages/auth/Register";
7 |
8 | import "react-toastify/dist/ReactToastify.css";
9 |
10 | import PrivateRoute from "./PrivateRoute";
11 | import MainLayout from "./components/layouts/MainLayout";
12 | import EmailVerify from "./pages/EmailVerify";
13 | import { WARNING } from "./types/constants";
14 | import ResetPassword from "./pages/ResetPassword";
15 | import ForgotPassword from "./pages/ForgotPassword";
16 |
17 | const App = () => {
18 | return (
19 |
64 | {boards && boards.length > 0 ? (
65 |
74 |
66 | {boards.map((b) => (
67 |
70 | ) : (
71 | No Boards!
72 | )} 73 |
20 |
24 |
25 | {/* /password/recover/:token password - new password page */}
26 |
53 |
63 |
68 |
69 |
70 | );
71 | };
72 |
73 | export default App;
74 |
--------------------------------------------------------------------------------
/server/models/user.model.ts:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 | import bcrypt from "bcrypt";
3 | import validator from "validator";
4 |
5 | const saltRounds = 10;
6 |
7 | const userSchema = new mongoose.Schema(
8 | {
9 | username: {
10 | type: String,
11 | required: true,
12 | minlength: 2,
13 | validate: {
14 | validator: function (value: string) {
15 | return /^[A-Za-z0-9_-]*$/.test(value);
16 | },
17 | message:
18 | "Username must only contain letters, numbers, underscores and dashes",
19 | },
20 | trim: true,
21 | },
22 | email: {
23 | type: String,
24 | required: true,
25 | unique: true,
26 | validate: {
27 | validator: function (value: string) {
28 | return validator.isEmail(value);
29 | },
30 | message: "Invalid email",
31 | },
32 | trim: true,
33 | },
34 | profile: {
35 | type: String,
36 | default: "default.jpg",
37 | trim: true,
38 | },
39 | emailVerified: {
40 | type: Boolean,
41 | required: true,
42 | default: false,
43 | },
44 | isOAuth: {
45 | type: Boolean,
46 | default: false,
47 | required: true,
48 | },
49 | password: {
50 | type: String,
51 | required: function (): boolean {
52 | return !this.isOAuth;
53 | },
54 | minlength: 8,
55 | validate: {
56 | validator: function (value: string) {
57 | if (!/\d/.test(value) || !/[a-zA-Z]/.test(value)) {
58 | return false;
59 | }
60 | },
61 | message: "Password must contain at least one letter and one number",
62 | },
63 | trim: true,
64 | },
65 | joinedAt: {
66 | type: Date,
67 | default: Date.now,
68 | },
69 | },
70 | { timestamps: true }
71 | );
72 |
73 | // middlewares
74 | userSchema.pre("save", async function (next) {
75 | // if password modified, hash it
76 | if (this.isModified("password")) {
77 | // else hash
78 | const salt = await bcrypt.genSalt(saltRounds);
79 | (this as any).password = await bcrypt.hash((this as any).password, salt);
80 | }
81 |
82 | next();
83 | });
84 |
85 | // methods
86 | userSchema.methods.comparePassword = async function (enteredPassword: string) {
87 | return await bcrypt.compare(enteredPassword, this.password);
88 | };
89 |
90 | const User = mongoose.model("User", userSchema);
91 |
92 | export default User;
93 |
--------------------------------------------------------------------------------
/client/src/components/FormikComponents/SelectDropDownAsync.tsx:
--------------------------------------------------------------------------------
1 | import { useField } from "formik";
2 | import React from "react";
3 | import AsyncSelect from "react-select/async";
4 | import ErrorBox from "./ErrorBox";
5 |
6 | interface Props {
7 | label: string;
8 | id: string;
9 | name: string;
10 | loadOptions: (val: string) => Promise
50 |
87 | );
88 | };
89 |
90 | export default SelectDropDownAsync;
91 |
--------------------------------------------------------------------------------
/client/src/components/Sidebar/FavoritesList/FavoritesList.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useQuery, useQueryClient } from "react-query";
3 | import axiosInstance from "../../../axiosInstance";
4 | import { FavoriteObj } from "../../../types";
5 | import { SPACE } from "../../../types/constants";
6 | import Loader from "../../Loader/Loader";
7 | import FavoriteItemBoard from "./FavoriteItemBoard";
8 | import FavoriteItemSpace from "./FavoriteItemSpace";
9 |
10 | const FavoritesList = () => {
11 | const queryClient = useQueryClient();
12 |
13 | const getFavorites = async () => {
14 | const response = await axiosInstance.get(`/favorites`);
15 | const { data } = response.data;
16 |
17 | return data;
18 | };
19 |
20 | const { data, isLoading, error } = useQuery<
21 | FavoriteObj[] | undefined,
22 | any,
23 | FavoriteObj[],
24 | string[]
25 | >(["getFavorites"], getFavorites);
26 |
27 | if (error) {
28 | return (
29 |
55 |
64 |
65 | {
72 | helpers.setValue(value);
73 | }}
74 | value={field.value}
75 | autoFocus={autoFocus}
76 | theme={theme => ({
77 | ...theme,
78 | colors: {
79 | ...theme.colors,
80 | primary25: '#8b5cf6',
81 | }
82 | })}
83 | />
84 |
85 | {meta.touched && meta.error &&
35 |
48 | );
49 | }
50 |
51 | if (isLoading) {
52 | return (
53 |
36 | Unable to get data.
37 |
46 |
47 |
59 |
61 | );
62 | }
63 |
64 | return (
65 | -
66 | {data && data.length > 0 ? (
67 | data.map((fav: FavoriteObj) => {
68 | return fav.type === SPACE ? (
69 |
-
76 |
77 | Nothing here 78 |
79 |
80 | )}
81 |
36 |
38 | );
39 | }
40 |
41 | // handle each error accordingly & specific to that situation
42 | if (error) {
43 | return (
44 |
45 |
59 | );
60 | }
61 |
62 | return (
63 |
46 | {
54 | queryClient.invalidateQueries(["getAllMyCards"]);
55 | }}
56 | />
57 |
58 | Oops, something went wrong.
47 |
64 |
85 | );
86 | };
87 |
88 | export default MyCards;
89 |
--------------------------------------------------------------------------------
/server/models/board.model.ts:
--------------------------------------------------------------------------------
1 | import mongoose from "mongoose";
2 | import validator from "validator";
3 | import { BOARD_MEMBER_ROLES, BOARD_VISIBILITY } from "../types/constants";
4 |
5 | const boardMemberSchema = new mongoose.Schema(
6 | {
7 | memberId: {
8 | type: mongoose.Schema.Types.ObjectId,
9 | ref: "User",
10 | required: true,
11 | },
12 | role: {
13 | type: String,
14 | enum: Object.values(BOARD_MEMBER_ROLES),
15 | default: BOARD_MEMBER_ROLES.NORMAL,
16 | },
17 | fallbackRole: {
18 | type: String,
19 | enum: [...Object.values(BOARD_MEMBER_ROLES)],
20 | required: false,
21 | },
22 | },
23 | { _id: false, timestamps: true }
24 | );
25 |
26 | const boardSchema = new mongoose.Schema(
27 | {
28 | name: {
29 | type: String,
30 | required: true,
31 | minlength: 1,
32 | maxlength: 512,
33 | trim: true,
34 | },
35 | visibility: {
36 | type: String,
37 | enum: Object.values(BOARD_VISIBILITY),
38 | default: BOARD_VISIBILITY.PUBLIC,
39 | },
40 | description: {
41 | type: String,
42 | required: false,
43 | trim: true,
44 | },
45 | labels: {
46 | type: [
47 | {
48 | type: mongoose.Schema.Types.ObjectId,
49 | ref: "Label",
50 | required: true,
51 | },
52 | ],
53 | default: [],
54 | },
55 | bgImg: {
56 | type: String,
57 | required: false,
58 | validate: {
59 | validator: function (value: string) {
60 | return value
61 | ? validator.isURL(value, {
62 | require_protocol: true,
63 | })
64 | : true;
65 | },
66 | message: `Invalid Image URL`,
67 | },
68 | trim: true,
69 | },
70 | color: {
71 | type: String,
72 | required: true,
73 | trim: true,
74 | },
75 | spaceId: {
76 | type: mongoose.Schema.Types.ObjectId,
77 | ref: "Space",
78 | required: true,
79 | },
80 | lists: {
81 | type: [
82 | {
83 | type: mongoose.Schema.Types.ObjectId,
84 | ref: "List",
85 | required: true,
86 | },
87 | ],
88 | default: [],
89 | },
90 | members: {
91 | type: [boardMemberSchema],
92 | default: [],
93 | },
94 | creator: {
95 | type: mongoose.Schema.Types.ObjectId,
96 | ref: "User",
97 | required: true,
98 | },
99 | },
100 | { timestamps: true }
101 | );
102 |
103 | const Board = mongoose.model("Board", boardSchema);
104 |
105 | export default Board;
106 |
--------------------------------------------------------------------------------
/client/src/pages/spaces/SpaceBoards.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useQuery } from "react-query";
3 | import { useDispatch } from "react-redux";
4 | import { Navigate, useParams } from "react-router-dom";
5 | import axiosInstance from "../../axiosInstance";
6 | import Board from "../../components/Board/Board";
7 | import Error from "../../components/Error/Error";
8 | import Loader from "../../components/Loader/Loader";
9 | import { addToast } from "../../redux/features/toastSlice";
10 | import { BoardObj } from "../../types";
11 | import { ERROR } from "../../types/constants";
12 |
13 | interface Props {
14 | spaceId: string;
15 | }
16 |
17 | const SpaceBoards = ({ spaceId }: Props) => {
18 | const dispatch = useDispatch();
19 |
20 | const getSpaceBoards = async ({ queryKey }: any) => {
21 | const response = await axiosInstance.get(`/spaces/${queryKey[1]}/boards`);
22 |
23 | const { data } = response.data;
24 |
25 | return data;
26 | };
27 |
28 | const {
29 | data: boards,
30 | isLoading,
31 | error,
32 | } = useQuery
65 | {cards && cards.length > 0 ? (
66 |
76 | {cards.map((c) => (
77 |
80 | ) : (
81 |
84 | No Cards!
82 | )} 83 |
40 |
42 | );
43 | }
44 |
45 | // handle each error accordingly & specific to that situation
46 | if (error) {
47 | if (error?.response) {
48 | const response = error.response;
49 | const { message } = response.data;
50 |
51 | switch (response.status) {
52 | case 400:
53 | case 404:
54 | dispatch(addToast({ kind: ERROR, msg: message }));
55 | // redirect them to home page
56 | return
75 |
87 | );
88 | };
89 |
90 | export default SpaceBoards;
91 |
--------------------------------------------------------------------------------
/client/src/components/FormikComponents/FileInput.tsx:
--------------------------------------------------------------------------------
1 | import { useField } from "formik";
2 | import { HiOutlineX } from "react-icons/hi";
3 | import ErrorBox from "./ErrorBox";
4 |
5 | interface Props {
6 | label: string;
7 | id: string;
8 | name: string;
9 | disabled?: boolean;
10 | autoFocus?: boolean;
11 | optional?: boolean;
12 | inline?: boolean;
13 | classes?: string;
14 | }
15 |
16 | const FileInput = ({
17 | label,
18 | id,
19 | name,
20 | classes,
21 | disabled = false,
22 | autoFocus = false,
23 | optional = false,
24 | inline = false,
25 | ...props
26 | }: Props) => {
27 | // field -> { name: string, value: string, onChange: () => {}, onBlur: () => {} }
28 | // meta -> { touched: boolean, error: string, ... }
29 | const [field, meta, helpers] = useField({ name, type: "file" });
30 |
31 | const handleFileChange = (e: React.ChangeEvent
76 | {boards && boards.length > 0 ? (
77 |
86 |
78 | {boards.map((b) => (
79 |
82 | ) : (
83 | No Boards!
84 | )} 85 |
45 |
91 | );
92 | };
93 |
94 | export default FileInput;
95 |
--------------------------------------------------------------------------------
/client/src/pages/EmailNotVerified.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import { useDispatch } from "react-redux";
3 | import axiosInstance from "../axiosInstance";
4 | import { logoutUser } from "../redux/features/authSlice";
5 | import { addToast } from "../redux/features/toastSlice";
6 | import { ERROR, SUCCESS } from "../types/constants";
7 |
8 | const EmailNotVerified = () => {
9 | const dispatch = useDispatch();
10 |
11 | const resendEmail = useCallback(() => {
12 | axiosInstance
13 | .post(`/email/resend-verify`)
14 | .then((response) => {
15 | const { message } = response.data;
16 |
17 | dispatch(addToast({ kind: SUCCESS, msg: message }));
18 | })
19 | .catch((error) => {
20 | if (error.response) {
21 | const response = error.response;
22 | const { message } = response.data;
23 |
24 | switch (response.status) {
25 | case 500:
26 | dispatch(addToast({ kind: ERROR, msg: message }));
27 | break;
28 | default:
29 | dispatch(
30 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
31 | );
32 | break;
33 | }
34 | } else if (error.request) {
35 | dispatch(
36 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
37 | );
38 | } else {
39 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
40 | }
41 | });
42 | }, []);
43 |
44 | return (
45 |
50 |
59 |
60 |
89 | {meta.touched && meta.error &&
61 |
77 |
78 | {field.value && (
79 |
86 | )}
87 |
88 |
46 |
80 | );
81 | };
82 |
83 | export default EmailNotVerified;
84 |
--------------------------------------------------------------------------------
/client/src/components/Sidebar/SpaceList/SpaceList.tsx:
--------------------------------------------------------------------------------
1 | import { HiOutlineRefresh } from "react-icons/hi";
2 | import { useQuery, useQueryClient } from "react-query";
3 | import { useDispatch } from "react-redux";
4 | import axiosInstance from "../../../axiosInstance";
5 | import spaces from "../../../data/spaces";
6 | import { showModal } from "../../../redux/features/modalSlice";
7 | import { SpaceObj } from "../../../types";
8 | import { CREATE_SPACE_MODAL } from "../../../types/constants";
9 | import Loader from "../../Loader/Loader";
10 | import UtilityBtn from "../../UtilityBtn/UtilityBtn";
11 | import SpaceItem from "./SpaceItem";
12 |
13 | const SpaceList = () => {
14 | const dispatch = useDispatch();
15 | const queryClient = useQueryClient();
16 |
17 | const getSpaces = async () => {
18 | const response = await axiosInstance.get(`/spaces`);
19 | const { data } = response.data;
20 |
21 | return data;
22 | };
23 |
24 | const { data, isLoading, error } = useQuery<
25 | SpaceObj[] | undefined,
26 | any,
27 | SpaceObj[],
28 | string[]
29 | >(["getSpaces"], getSpaces);
30 |
31 | if (error) {
32 | return (
33 |
52 |
79 | 53 | Verify your Email 54 |
55 |56 | To use Workflow, click the verification link your email. This helps 57 | keep your account secure. 58 |
59 |60 | No email in your inbox or spam folder?{" "} 61 | 64 |
65 |66 | Wrong address?{" "} 67 | {" "} 75 | to sign in with a different email. If you mistyped your email when 76 | signing up, create a new account. 77 |
78 |
39 |
52 | );
53 | }
54 |
55 | if (isLoading) {
56 | return (
57 |
40 | Unable to get data.
41 |
50 |
51 |
63 |
65 | );
66 | }
67 |
68 | return (
69 | -
70 | {data && data.length > 0 ? (
71 | data.map((space) => {
72 | return
- 76 | Start a 77 | 90 | 91 | )} 92 |
47 |
51 | <>
52 | {[BOARD_ROLES.ADMIN, BOARD_ROLES.NORMAL].includes(myRole) ? (
53 |
73 |
74 |
95 | );
96 | };
97 |
98 | export default ListDummy;
99 |
--------------------------------------------------------------------------------
/server/routes/board.route.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import { authMiddleware } from "../middlewares/auth";
3 | import * as boardController from "../controllers/board.controller";
4 |
5 | const boardRouter = express.Router();
6 |
7 | // Protected(Auth) GET /recentBoards -> get recently visited boards
8 | boardRouter.get(
9 | "/recentBoards",
10 | authMiddleware,
11 | boardController.getRecentBoards
12 | );
13 | // Protected(Auth) POST /boards -> create new board
14 | boardRouter.post("/", authMiddleware, boardController.createBoard);
15 | // Protected(Auth) GET /boards/:id -> get board info
16 | boardRouter.get("/:id", authMiddleware, boardController.getBoard);
17 | // Protected(Auth) PUT /boards/:id/visibility -> update board visibility
18 | boardRouter.put(
19 | "/:id/visibility",
20 | authMiddleware,
21 | boardController.changeBoardVisibility
22 | );
23 | // Protected(Auth) PUT /boards/:id/name -> update board name
24 | boardRouter.put("/:id/name", authMiddleware, boardController.updateBoardName);
25 | // Protected(Auth) PUT /boards/:id/description -> update board description
26 | boardRouter.put(
27 | "/:id/description",
28 | authMiddleware,
29 | boardController.updateBoardDesc
30 | );
31 | // Protected(Auth) PUT /boards/:id/background -> update board background
32 | boardRouter.put(
33 | "/:id/background",
34 | authMiddleware,
35 | boardController.updateBoardBackground
36 | );
37 | // Protected(Auth) PUT /boards/:id/members/bulk -> add one or more members to board
38 | boardRouter.put(
39 | "/:id/members/bulk",
40 | authMiddleware,
41 | boardController.addBoardMembers
42 | );
43 | // Protected(Auth) PUT /boards/:id/members/join -> join as board member
44 | boardRouter.put("/:id/members/join", authMiddleware, boardController.joinBoard);
45 | // Protected(Auth) PUT /boards/:id/members/:memberId -> update board member role
46 | boardRouter.put(
47 | "/:id/members/:memberId",
48 | authMiddleware,
49 | boardController.updateMemberRole
50 | );
51 | // Protected(Auth) DELETE /boards/:id/members/:memberId -> remove board member
52 | boardRouter.delete(
53 | "/:id/members/:memberId",
54 | authMiddleware,
55 | boardController.removeMember
56 | );
57 | // Protected(Auth) DELETE /boards/:id/members -> remove board member
58 | boardRouter.delete(
59 | "/:id/members",
60 | authMiddleware,
61 | boardController.leaveFromBoard
62 | );
63 |
64 | // Protected(Auth) GET /boards/:id/labels -> get all board labels
65 | boardRouter.get("/:id/labels", authMiddleware, boardController.getAllLabels);
66 | // Protected(Auth) PUT /boards/:id/labels -> create new label
67 | boardRouter.post("/:id/labels", authMiddleware, boardController.createNewLabel);
68 | // Protected(Auth) PUT /boards/:id/labels -> update label
69 | boardRouter.put("/:id/labels", authMiddleware, boardController.updateLabel);
70 | // Protected(Auth) DELETE /boards/:id/labels -> remove label
71 | boardRouter.delete("/:id/labels", authMiddleware, boardController.removeLabel);
72 |
73 | // Protected(Auth) DELETE /boards/:id -> delete board
74 | boardRouter.delete("/:id", authMiddleware, boardController.deleteBoard);
75 |
76 | export default boardRouter;
77 |
--------------------------------------------------------------------------------
/client/src/components/FormikComponents/RemoteSelect.tsx:
--------------------------------------------------------------------------------
1 | import { useField } from "formik";
2 | import React, { useEffect } from "react";
3 | import { HiOutlineRefresh } from "react-icons/hi";
4 | import { useQueryClient } from "react-query";
5 | import { Option } from "../../types";
6 | import UtilityBtn from "../UtilityBtn/UtilityBtn";
7 | import ErrorBox from "./ErrorBox";
8 |
9 | interface Props {
10 | label: string;
11 | id: string;
12 | name: string;
13 | isLoading: boolean;
14 | isFetching: boolean;
15 | queryKey: string[];
16 | error: any;
17 | options: Option[];
18 | selected?: string;
19 | inline?: boolean;
20 | classes?: string;
21 | }
22 |
23 | const RemoteSelect = ({
24 | label,
25 | id,
26 | name,
27 | queryKey,
28 | isFetching,
29 | isLoading,
30 | error,
31 | options = [],
32 | selected,
33 | classes,
34 | inline,
35 | ...props
36 | }: Props) => {
37 | const queryClient = useQueryClient();
38 |
39 | // props -> every props except label and options -> { name: 'value', id: 'value' }
40 | const [field, meta, helpers] = useField(name);
41 |
42 | useEffect(() => {
43 | if (options.length > 0 && !field.value) {
44 | const exists = selected
45 | ? options.find((o) => o.value === selected)
46 | : undefined;
47 |
48 | // if selected is given and it is also found in the given options
49 | if (exists) {
50 | helpers.setValue(exists.value);
51 | } else {
52 | helpers.setValue(options[0].value);
53 | }
54 | }
55 | }, [options]);
56 |
57 | return (
58 | 61 | {list.name.length > 34 62 | ? list.name.slice(0, 34) + "..." 63 | : list.name} 64 |
65 | )} 66 | 67 | {[BOARD_ROLES.ADMIN, BOARD_ROLES.NORMAL].includes(myRole) && ( 68 | 71 | )} 72 |
75 |
87 |
88 | {[BOARD_ROLES.ADMIN, BOARD_ROLES.NORMAL].includes(myRole) && (
89 |
93 | )}
94 | -
82 | {cards.map((c, index) => (
83 |
59 |
107 | );
108 | };
109 |
110 | export default RemoteSelect;
111 |
--------------------------------------------------------------------------------
/client/src/components/Header/ProfileCard.tsx:
--------------------------------------------------------------------------------
1 | import { HiOutlineLogout } from "react-icons/hi";
2 | import React, { useState } from "react";
3 | import { useDispatch, useSelector } from "react-redux";
4 | import { Link } from "react-router-dom";
5 | import { CgProfile } from "react-icons/cg";
6 | import useClose from "../../hooks/useClose";
7 | import { logoutUser } from "../../redux/features/authSlice";
8 | import { chopChars } from "../../utils/helpers";
9 | import { RootState } from "../../redux/app";
10 | import Profile from "../Profile/Profile";
11 |
12 | const ProfileCard = () => {
13 | const [show, setShow] = useState(false);
14 | const ref = useClose(() => setShow(false));
15 |
16 | const { user } = useSelector((state: RootState) => state.auth);
17 |
18 | const dispatch = useDispatch();
19 |
20 | const handleLogout = () => {
21 | dispatch(logoutUser());
22 | };
23 |
24 | return (
25 |
64 |
70 |
99 | {error ? (
100 |
71 |
87 |
88 | {
94 | queryClient.invalidateQueries(queryKey);
95 | }}
96 | />
97 |
98 |
26 | {user ? (
27 | setShow(!show)}
29 | src={user.profile}
30 | alt={`${user.username} profile`}
31 | classes="cursor-pointer"
32 | />
33 | ) : (
34 | setShow(!show)}
36 | src={undefined}
37 | classes="cursor-pointer"
38 | />
39 | )}
40 |
41 | {show && (
42 |
92 | );
93 | };
94 |
95 | export default ProfileCard;
96 |
--------------------------------------------------------------------------------
/server/routes/card.route.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import * as cardController from "../controllers/card.controller";
3 | import { authMiddleware } from "../middlewares/auth";
4 |
5 | const cardRouter = express.Router();
6 |
7 | // Protected(Auth) GET /cards/all -> get all cards
8 | cardRouter.get("/all", authMiddleware, cardController.getAllCards);
9 | // POST /cards -> create a new card
10 | cardRouter.post("/", authMiddleware, cardController.createCard);
11 | // Protected(Auth) GET /cards/:id -> get card
12 | cardRouter.get("/:id", authMiddleware, cardController.getCard);
13 | // Protected(Auth) DELETE /cards/:id -> delete card
14 | cardRouter.delete("/:id", authMiddleware, cardController.deleteCard);
15 | // Protected(Auth) PUT /cards/:id/dnd -> dnd card
16 | cardRouter.put("/:id/dnd", authMiddleware, cardController.dndCard);
17 | // Protected(Auth) PUT /cards/:id/name -> update card name
18 | cardRouter.put("/:id/name", authMiddleware, cardController.updateCardName);
19 | // Protected(Auth) PUT /cards/:id/description -> update card description
20 | cardRouter.put(
21 | "/:id/description",
22 | authMiddleware,
23 | cardController.updateCardDescription
24 | );
25 | // Protected(Auth) PUT /cards/:id/dueDate -> add/update card dueDate
26 | cardRouter.put("/:id/dueDate", authMiddleware, cardController.updateDueDate);
27 | // Protected(Auth) DELETE /cards/:id/dueDate -> remove card dueDate
28 | cardRouter.delete("/:id/dueDate", authMiddleware, cardController.removeDueDate);
29 | // Protected(Auth) PUT /cards/:id/isComplete -> toggle card isComplete
30 | cardRouter.put(
31 | "/:id/isComplete",
32 | authMiddleware,
33 | cardController.toggleIsComplete
34 | );
35 |
36 | // Protected(Auth) PUT /cards/:id/cover -> add/update card cover
37 | cardRouter.put("/:id/cover", authMiddleware, cardController.updateCardCover);
38 | // Protected(Auth) DELETE /cards/:id/cover -> remove card cover
39 | cardRouter.delete("/:id/cover", authMiddleware, cardController.removeCardCover);
40 |
41 | // Protected(Auth) PUT /cards/:id/members -> add card member
42 | cardRouter.put("/:id/members", authMiddleware, cardController.addAMember);
43 | // Protected(Auth) DELETE /cards/:id/members -> remove from card
44 | cardRouter.delete(
45 | "/:id/members",
46 | authMiddleware,
47 | cardController.removeCardMember
48 | );
49 |
50 | // Protected(Auth) POST /cards/:id/comments -> add comment
51 | cardRouter.post("/:id/comments", authMiddleware, cardController.createComment);
52 | // Protected(Auth) PUT /cards/:id/comments -> update comment
53 | cardRouter.put("/:id/comments", authMiddleware, cardController.updateComment);
54 | // Protected(Auth) DELETE /cards/:id/comments -> delete comment
55 | cardRouter.delete(
56 | "/:id/comments",
57 | authMiddleware,
58 | cardController.deleteComment
59 | );
60 |
61 | // Protected(Auth) GET /cards/:id/labels -> get labels
62 | cardRouter.get("/:id/labels", authMiddleware, cardController.getCardLabels);
63 | // Protected(Auth) PUT /cards/:id/labels -> add a label to card
64 | cardRouter.put("/:id/labels", authMiddleware, cardController.addCardLabel);
65 | // Protected(Auth) DELETE /cards/:id/labels -> remove label from card
66 | cardRouter.delete(
67 | "/:id/labels",
68 | authMiddleware,
69 | cardController.removeCardLabel
70 | );
71 | // Protected(Auth) POST /cards/:id/labels -> create new label card
72 | cardRouter.post("/:id/labels", authMiddleware, cardController.createLabel);
73 |
74 | export default cardRouter;
75 |
--------------------------------------------------------------------------------
/client/src/axiosInstance.ts:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | import { BASE_URL } from "./config";
3 | import { store } from "./redux/app";
4 | import { logoutUser, setAccessToken } from "./redux/features/authSlice";
5 |
6 | const axiosInstance = axios.create();
7 |
8 | // axios defaults
9 | axiosInstance.defaults.baseURL = BASE_URL;
10 |
11 | // interceptors
12 | // Request interceptor
13 | axiosInstance.interceptors.request.use(
14 | (config: any) => {
15 | // bottom line is required, if you are using react-query or something similar
16 | if (config.headers["Authorization"]) {
17 | config.headers["Authorization"] = null;
18 | }
19 | config.headers["Authorization"] =
20 | "Bearer " + store.getState().auth.accessToken;
21 | return config;
22 | },
23 | (error) => {
24 | Promise.reject(error);
25 | }
26 | );
27 |
28 | // for multiple requests
29 | let isRefreshing = false;
30 | let failedQueue: any[] = [];
31 |
32 | const processQueue = (error: any, token = null) => {
33 | failedQueue.forEach((prom) => {
34 | if (error) {
35 | prom.reject(error);
36 | } else {
37 | prom.resolve(token);
38 | }
39 | });
40 |
41 | failedQueue = [];
42 | };
43 |
44 | axiosInstance.interceptors.response.use(
45 | function (response) {
46 | return response;
47 | },
48 | function (error) {
49 | const originalRequest = error.config;
50 |
51 | // if refresh also fails with 401
52 | if (
53 | error.response.status === 401 &&
54 | originalRequest.url.includes("refresh")
55 | ) {
56 | store.dispatch(logoutUser());
57 | }
58 |
59 | // if retried request failed with 401 status
60 | if (error.response.status === 401 && originalRequest._retry) {
61 | // doesn't stops here, but also shows all the toast below due to Promise reject at the bottom
62 | return store.dispatch(logoutUser());
63 | }
64 |
65 | if (
66 | error.response.status === 401 &&
67 | !originalRequest.url.includes("login") &&
68 | !originalRequest._retry
69 | ) {
70 | // if refreshing logic is happening, then push subsequent req to the queue
71 | if (isRefreshing) {
72 | return new Promise(function (resolve, reject) {
73 | failedQueue.push({ resolve, reject });
74 | })
75 | .then(() => {
76 | return axiosInstance(originalRequest);
77 | })
78 | .catch((err) => {
79 | return Promise.reject(err);
80 | });
81 | }
82 |
83 | originalRequest._retry = true;
84 | isRefreshing = true;
85 |
86 | return new Promise(function (resolve, reject) {
87 | axiosInstance
88 | .post(`${BASE_URL}/auth/refresh`, {
89 | refreshToken: store.getState().auth.refreshToken,
90 | })
91 | .then((response) => {
92 | // get the accessToken
93 | const { accessToken } = response.data.data;
94 |
95 | store.dispatch(setAccessToken(accessToken));
96 |
97 | processQueue(null, accessToken);
98 | resolve(axiosInstance(originalRequest));
99 | })
100 | .catch((error) => {
101 | processQueue(error, null);
102 | reject(error);
103 | })
104 | .finally(() => {
105 | isRefreshing = false;
106 | });
107 | });
108 | }
109 |
110 | return Promise.reject(error);
111 | }
112 | );
113 |
114 | export default axiosInstance;
115 |
--------------------------------------------------------------------------------
/client/src/components/ModalComponents/RemoveMemberSpaceConfirmationModal.tsx:
--------------------------------------------------------------------------------
1 | import { AxiosError } from "axios";
2 | import React, { useCallback } from "react";
3 | import { useQueryClient } from "react-query";
4 | import { useDispatch } from "react-redux";
5 | import { useNavigate } from "react-router-dom";
6 | import axiosInstance from "../../axiosInstance";
7 | import { hideModal } from "../../redux/features/modalSlice";
8 | import { addToast } from "../../redux/features/toastSlice";
9 | import { ERROR, SUCCESS } from "../../types/constants";
10 |
11 | interface Props {
12 | spaceId: string;
13 | memberId: string;
14 | }
15 |
16 | const RemoveMemberSpaceConfirmationModal = ({ spaceId, memberId }: Props) => {
17 | const dispatch = useDispatch();
18 |
19 | const queryClient = useQueryClient();
20 |
21 | const navigate = useNavigate();
22 |
23 | const removeMember = useCallback((spaceId, memberId) => {
24 | dispatch(hideModal());
25 |
26 | axiosInstance
27 | .delete(`/spaces/${spaceId}/members/${memberId}`)
28 | .then((response) => {
29 | const { message } = response.data;
30 |
31 | dispatch(
32 | addToast({
33 | kind: SUCCESS,
34 | msg: message,
35 | })
36 | );
37 |
38 | queryClient.invalidateQueries(["getSpaceMembers", spaceId]);
39 | })
40 | .catch((error: AxiosError) => {
41 | if (error.response) {
42 | const response = error.response;
43 | const { message } = response.data;
44 |
45 | switch (response.status) {
46 | case 404:
47 | dispatch(addToast({ kind: ERROR, msg: message }));
48 | queryClient.invalidateQueries(["getSpaces"]);
49 | queryClient.invalidateQueries(["getFavorites"]);
50 | queryClient.invalidateQueries(["getRecentBoards"]);
51 | queryClient.invalidateQueries(["getAllMyCards"]);
52 | // redirect them to home page
53 | navigate("/", { replace: true });
54 | break;
55 | case 400:
56 | case 403:
57 | case 500:
58 | dispatch(addToast({ kind: ERROR, msg: message }));
59 | break;
60 | default:
61 | dispatch(
62 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
63 | );
64 | break;
65 | }
66 | } else if (error.request) {
67 | dispatch(
68 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
69 | );
70 | } else {
71 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
72 | }
73 | });
74 | }, []);
75 |
76 | return (
77 |
48 |
90 | )}
91 |
49 |
65 | {
68 | setShow(false);
69 | }}
70 | className="flex items-center justify-between w-full p-3 text-gray-600 hover:bg-gray-200 "
71 | >
72 | Profile
73 |
50 | {user ? (
51 |
56 |
57 |
64 | 58 | {user ? chopChars(24, user.username) : "Unknown"} 59 |
60 | 61 | {user ? chopChars(24, user.email) : "unknown"} 62 | 63 |
74 |
76 |
77 |
89 |
83 |
104 | );
105 | };
106 |
107 | export default RemoveMemberSpaceConfirmationModal;
108 |
--------------------------------------------------------------------------------
/client/src/components/JoinBtn/JoinBtn.tsx:
--------------------------------------------------------------------------------
1 | import { AxiosError } from "axios";
2 | import React, { useCallback } from "react";
3 | import { useQueryClient } from "react-query";
4 | import { useDispatch } from "react-redux";
5 | import axiosInstance from "../../axiosInstance";
6 | import { addToast } from "../../redux/features/toastSlice";
7 | import { ERROR, SUCCESS } from "../../types/constants";
8 |
9 | interface Props {
10 | boardId: string;
11 | spaceId: string;
12 | }
13 |
14 | const JoinBtn = ({ boardId, spaceId }: Props) => {
15 | const dispatch = useDispatch();
16 |
17 | const queryClient = useQueryClient();
18 |
19 | const handleJoin = useCallback(
20 | (boardId, spaceId) => {
21 | axiosInstance
22 | .put(`/boards/${boardId}/members/join`)
23 | .then((response) => {
24 | const { message } = response.data;
25 |
26 | dispatch(
27 | addToast({
28 | kind: SUCCESS,
29 | msg: message,
30 | })
31 | );
32 |
33 | queryClient.invalidateQueries(["getBoard", boardId]);
34 | queryClient.invalidateQueries(["getSpaces"]);
35 | queryClient.invalidateQueries(["getFavorites"]);
36 |
37 | queryClient.invalidateQueries(["getSpaceBoards", spaceId]);
38 | queryClient.invalidateQueries(["getSpaceSettings", spaceId]);
39 | queryClient.invalidateQueries(["getSpaceMembers", spaceId]);
40 | })
41 | .catch((error: AxiosError) => {
42 | if (error.response) {
43 | const response = error.response;
44 | const { message } = response.data;
45 |
46 | switch (response.status) {
47 | case 403:
48 | dispatch(addToast({ kind: ERROR, msg: message }));
49 |
50 | queryClient.invalidateQueries(["getBoard", boardId]);
51 | queryClient.invalidateQueries(["getSpaces"]);
52 | queryClient.invalidateQueries(["getFavorites"]);
53 | break;
54 | case 404:
55 | dispatch(addToast({ kind: ERROR, msg: message }));
56 |
57 | queryClient.invalidateQueries(["getBoard", boardId]);
58 | queryClient.invalidateQueries(["getSpaces"]);
59 | queryClient.invalidateQueries(["getFavorites"]);
60 |
61 | queryClient.invalidateQueries(["getRecentBoards"]);
62 | queryClient.invalidateQueries(["getAllMyCards"]);
63 |
64 | queryClient.invalidateQueries(["getSpaceInfo", spaceId]);
65 | queryClient.invalidateQueries(["getSpaceBoards", spaceId]);
66 | queryClient.invalidateQueries(["getSpaceMembers", spaceId]);
67 | queryClient.invalidateQueries(["getSpaceSettings", spaceId]);
68 | break;
69 | case 400:
70 | case 500:
71 | dispatch(addToast({ kind: ERROR, msg: message }));
72 | break;
73 | default:
74 | dispatch(
75 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
76 | );
77 | break;
78 | }
79 | } else if (error.request) {
80 | dispatch(
81 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
82 | );
83 | } else {
84 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
85 | }
86 | });
87 | },
88 | [spaceId, boardId]
89 | );
90 |
91 | return (
92 |
98 | );
99 | };
100 |
101 | export default JoinBtn;
102 |
--------------------------------------------------------------------------------
/client/src/components/ModalComponents/LeaveSpaceConfirmationModal.tsx:
--------------------------------------------------------------------------------
1 | import { AxiosError } from "axios";
2 | import React, { useCallback } from "react";
3 | import { useQueryClient } from "react-query";
4 | import { useDispatch } from "react-redux";
5 | import { useNavigate } from "react-router-dom";
6 | import axiosInstance from "../../axiosInstance";
7 | import { hideModal } from "../../redux/features/modalSlice";
8 | import { addToast } from "../../redux/features/toastSlice";
9 | import { ERROR, SUCCESS } from "../../types/constants";
10 |
11 | interface Props {
12 | spaceId: string;
13 | }
14 |
15 | const LeaveSpaceConfirmationModal = ({ spaceId }: Props) => {
16 | const dispatch = useDispatch();
17 |
18 | const queryClient = useQueryClient();
19 |
20 | const navigate = useNavigate();
21 |
22 | const leaveFromSpace = useCallback((spaceId) => {
23 | dispatch(hideModal());
24 |
25 | axiosInstance
26 | .delete(`/spaces/${spaceId}/members`)
27 | .then((response) => {
28 | const { message } = response.data;
29 |
30 | dispatch(
31 | addToast({
32 | kind: SUCCESS,
33 | msg: message,
34 | })
35 | );
36 |
37 | queryClient.invalidateQueries(["getSpaces"]);
38 | queryClient.invalidateQueries(["getFavorites"]);
39 | queryClient.invalidateQueries(["getSpaceInfo", spaceId]);
40 | queryClient.invalidateQueries(["getSpaceMembers", spaceId]);
41 |
42 | queryClient.invalidateQueries(["getRecentBoards"]);
43 | queryClient.invalidateQueries(["getAllMyCards"]);
44 |
45 | navigate("/", { replace: true });
46 | })
47 | .catch((error: AxiosError) => {
48 | if (error.response) {
49 | const response = error.response;
50 | const { message } = response.data;
51 |
52 | switch (response.status) {
53 | case 404:
54 | dispatch(addToast({ kind: ERROR, msg: message }));
55 | queryClient.invalidateQueries(["getSpaces"]);
56 | queryClient.invalidateQueries(["getFavorites"]);
57 | queryClient.invalidateQueries(["getRecentBoards"]);
58 | queryClient.invalidateQueries(["getAllMyCards"]);
59 | // redirect them to home page
60 | navigate("/", { replace: true });
61 | break;
62 | case 400:
63 | case 403:
64 | case 500:
65 | dispatch(addToast({ kind: ERROR, msg: message }));
66 | break;
67 | default:
68 | dispatch(
69 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
70 | );
71 | break;
72 | }
73 | } else if (error.request) {
74 | dispatch(
75 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
76 | );
77 | } else {
78 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
79 | }
80 | });
81 | }, []);
82 |
83 | return (
84 | 84 | The member will be removed from the space as well as from all the 85 | board(s) which he/she is a part of. But if he/she is the only{" "} 86 | admin of any board, then you will fill that space after 87 | removing him/her. 88 |
89 |
90 |
96 |
102 |
103 |
90 |
107 | );
108 | };
109 |
110 | export default LeaveSpaceConfirmationModal;
111 |
--------------------------------------------------------------------------------
/client/src/components/ModalComponents/RemoveMemberBoardConfirmationModal.tsx:
--------------------------------------------------------------------------------
1 | import { AxiosError } from "axios";
2 | import React, { useCallback } from "react";
3 | import { useQueryClient } from "react-query";
4 | import { useDispatch } from "react-redux";
5 | import { useNavigate } from "react-router-dom";
6 | import axiosInstance from "../../axiosInstance";
7 | import { hideModal } from "../../redux/features/modalSlice";
8 | import { addToast } from "../../redux/features/toastSlice";
9 | import { ERROR, SUCCESS } from "../../types/constants";
10 |
11 | interface Props {
12 | spaceId: string;
13 | boardId: string;
14 | memberId: string;
15 | }
16 |
17 | const RemoveMemberBoardConfirmationModal = ({
18 | spaceId,
19 | boardId,
20 | memberId,
21 | }: Props) => {
22 | const dispatch = useDispatch();
23 |
24 | const queryClient = useQueryClient();
25 |
26 | const navigate = useNavigate();
27 |
28 | const removeMember = useCallback((boardId, memberId, spaceId) => {
29 | dispatch(hideModal());
30 |
31 | axiosInstance
32 | .delete(`/boards/${boardId}/members/${memberId}`)
33 | .then((response) => {
34 | const { message } = response.data;
35 |
36 | dispatch(
37 | addToast({
38 | kind: SUCCESS,
39 | msg: message,
40 | })
41 | );
42 |
43 | queryClient.invalidateQueries(["getBoard", boardId]);
44 | })
45 | .catch((error: AxiosError) => {
46 | if (error.response) {
47 | const response = error.response;
48 | const { message } = response.data;
49 |
50 | switch (response.status) {
51 | case 403:
52 | dispatch(addToast({ kind: ERROR, msg: message }));
53 |
54 | queryClient.invalidateQueries(["getBoard", boardId]);
55 | queryClient.invalidateQueries(["getSpaces"]);
56 | queryClient.invalidateQueries(["getFavorites"]);
57 | break;
58 | case 404:
59 | dispatch(addToast({ kind: ERROR, msg: message }));
60 |
61 | queryClient.invalidateQueries(["getBoard", boardId]);
62 | queryClient.invalidateQueries(["getSpaces"]);
63 | queryClient.invalidateQueries(["getFavorites"]);
64 |
65 | queryClient.invalidateQueries(["getRecentBoards"]);
66 | queryClient.invalidateQueries(["getAllMyCards"]);
67 |
68 | queryClient.invalidateQueries(["getSpaceInfo", spaceId]);
69 | queryClient.invalidateQueries(["getSpaceBoards", spaceId]);
70 | queryClient.invalidateQueries(["getSpaceMembers", spaceId]);
71 | queryClient.invalidateQueries(["getSpaceSettings", spaceId]);
72 | break;
73 | case 400:
74 | case 500:
75 | dispatch(addToast({ kind: ERROR, msg: message }));
76 | break;
77 | default:
78 | dispatch(
79 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
80 | );
81 | break;
82 | }
83 | } else if (error.request) {
84 | dispatch(
85 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
86 | );
87 | } else {
88 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
89 | }
90 | });
91 | }, []);
92 |
93 | return (
94 | 91 | If you are a part of one or more boards, even if you leave, you will be 92 | retained as a Guest in this space till you manually 93 | leave from all those boards. 94 |
95 |
96 |
102 |
105 |
106 |
100 |
119 | );
120 | };
121 |
122 | export default RemoveMemberBoardConfirmationModal;
123 |
--------------------------------------------------------------------------------
/client/src/pages/ForgotPassword.tsx:
--------------------------------------------------------------------------------
1 | import { AxiosError } from "axios";
2 | import { Form, Formik } from "formik";
3 | import React, { useCallback, useState } from "react";
4 | import { useDispatch } from "react-redux";
5 | import { Link, useNavigate } from "react-router-dom";
6 | import * as Yup from "yup";
7 | import axiosInstance from "../axiosInstance";
8 | import Input from "../components/FormikComponents/Input";
9 | import SubmitBtn from "../components/FormikComponents/SubmitBtn";
10 | import { addToast } from "../redux/features/toastSlice";
11 | import { ERROR } from "../types/constants";
12 |
13 | interface EmailObj {
14 | email: string;
15 | }
16 |
17 | const ForgotPassword = () => {
18 | const navigate = useNavigate();
19 |
20 | const dispatch = useDispatch();
21 |
22 | const [isMsgScreen, setIsMsgScreen] = useState(false);
23 | const [isSubmitting, setIsSubmitting] = useState(false);
24 |
25 | const initialValues: EmailObj = {
26 | email: "",
27 | };
28 |
29 | const validationSchema = Yup.object({
30 | email: Yup.string().email("Invalid Email").required("Email is required"),
31 | });
32 |
33 | const handleSubmit = useCallback((emailObj: EmailObj) => {
34 | setIsSubmitting(true);
35 |
36 | axiosInstance
37 | .post(`/accounts/forgot-password`, emailObj, {
38 | headers: {
39 | ContentType: "application/json",
40 | },
41 | })
42 | .then((response) => {
43 | setIsSubmitting(false);
44 |
45 | // show message screen
46 | setIsMsgScreen(true);
47 | })
48 | .catch((error: AxiosError) => {
49 | setIsSubmitting(false);
50 |
51 | if (error.response) {
52 | const response = error.response;
53 | const { message } = response.data;
54 |
55 | switch (response.status) {
56 | case 400:
57 | case 500:
58 | dispatch(addToast({ kind: ERROR, msg: message }));
59 | break;
60 | default:
61 | dispatch(
62 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
63 | );
64 | break;
65 | }
66 | } else if (error.request) {
67 | dispatch(
68 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
69 | );
70 | } else {
71 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
72 | }
73 | });
74 | }, []);
75 |
76 | return !isMsgScreen ? (
77 | 101 | The member will be removed from the board as well as from all the 102 | card(s) which he/she is a part of. 103 |
104 |
105 |
111 |
117 |
118 |
122 |
131 | );
132 | };
133 |
134 | export default ForgotPassword;
135 |
--------------------------------------------------------------------------------
/client/src/pages/auth/Login.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useState } from "react";
2 | import { Form, Formik } from "formik";
3 | import * as Yup from "yup";
4 | import Input from "../../components/FormikComponents/Input";
5 | import ErrorBox from "../../components/FormikComponents/ErrorBox";
6 | import SubmitBtn from "../../components/FormikComponents/SubmitBtn";
7 | import { Link } from "react-router-dom";
8 | import { useDispatch } from "react-redux";
9 | import { AxiosError } from "axios";
10 | import { loginUser } from "../../redux/features/authSlice";
11 | import GoogleAuthBtn from "../../components/GoogleAuth/GoogleAuthBtn";
12 | import axiosInstance from "../../axiosInstance";
13 |
14 | interface UserObj {
15 | email: string;
16 | password: string;
17 | }
18 |
19 | const Login = () => {
20 | const dispatch = useDispatch();
21 | const [isSubmitting, setIsSubmitting] = useState(false);
22 |
23 | const initalValues: UserObj = {
24 | email: "",
25 | password: "",
26 | };
27 | const [commonError, setCommonError] = useState("");
28 |
29 | const validationSchema = Yup.object({
30 | email: Yup.string().email("Invalid Email").required("Email is required"),
31 | password: Yup.string().required("Password is required"),
32 | });
33 |
34 | const handleSubmit = useCallback((user: UserObj) => {
35 | setIsSubmitting(true);
36 |
37 | axiosInstance
38 | .post(`/auth/login`, user, {
39 | headers: {
40 | ContentType: "application/json",
41 | },
42 | })
43 | .then((response) => {
44 | const { data } = response.data;
45 |
46 | setCommonError("");
47 |
48 | setIsSubmitting(false);
49 |
50 | dispatch(
51 | loginUser({
52 | accessToken: data.accessToken,
53 | refreshToken: data.refreshToken,
54 | })
55 | );
56 | })
57 | .catch((error: AxiosError) => {
58 | setIsSubmitting(false);
59 |
60 | if (error.response) {
61 | const response = error.response;
62 | const { message } = response.data;
63 |
64 | switch (response.status) {
65 | // bad request or invalid format or unauthorized
66 | case 400:
67 | case 401:
68 | case 500:
69 | setCommonError(message);
70 | break;
71 | default:
72 | setCommonError("Oops, something went wrong");
73 | break;
74 | }
75 | } else if (error.request) {
76 | setCommonError("Oops, something went wrong");
77 | } else {
78 | setCommonError(`Error: ${error.message}`);
79 | }
80 | });
81 | }, []);
82 |
83 | return (
84 | 123 | If an account exists for the email address, you will get an email with 124 | instructions on resetting your password. If it doesn't arrive, be sure 125 | to check your spam folder. 126 |
127 | 128 | Back to Log in 129 | 130 |
104 |
117 | );
118 | };
119 |
120 | export default DeleteSpaceConfirmationModal;
121 |
--------------------------------------------------------------------------------
/client/src/components/ModalComponents/DeleteBoardConfirmationModal.tsx:
--------------------------------------------------------------------------------
1 | import { AxiosError } from "axios";
2 | import React, { useCallback } from "react";
3 | import { useQueryClient } from "react-query";
4 | import { useDispatch } from "react-redux";
5 | import { useLocation, useNavigate } from "react-router-dom";
6 | import axiosInstance from "../../axiosInstance";
7 | import { hideModal } from "../../redux/features/modalSlice";
8 | import { addToast } from "../../redux/features/toastSlice";
9 | import { ERROR, SUCCESS } from "../../types/constants";
10 |
11 | interface Props {
12 | boardId: string;
13 | spaceId: string;
14 | }
15 |
16 | const DeleteBoardConfirmationModal = ({ boardId, spaceId }: Props) => {
17 | const dispatch = useDispatch();
18 |
19 | const queryClient = useQueryClient();
20 |
21 | const navigate = useNavigate();
22 |
23 | const { pathname } = useLocation();
24 |
25 | const deleteBoard = useCallback((boardId) => {
26 | axiosInstance
27 | .delete(`/boards/${boardId}`)
28 | .then((response) => {
29 | dispatch(hideModal());
30 |
31 | queryClient.invalidateQueries(["getRecentBoards"]);
32 | queryClient.invalidateQueries(["getAllMyCards"]);
33 |
34 | queryClient.removeQueries(["getBoard", boardId]);
35 | queryClient.refetchQueries(["getLists", boardId]);
36 | queryClient.invalidateQueries(["getFavorites"]);
37 | queryClient.invalidateQueries(["getSpaces"]);
38 | queryClient.invalidateQueries(["getSpaceBoards", spaceId]);
39 |
40 | // redirect them to space boards page
41 | if (pathname === `/b/${boardId}`) {
42 | navigate(`/s/${spaceId}/boards`, { replace: true });
43 | }
44 | })
45 | .catch((error: AxiosError) => {
46 | dispatch(hideModal());
47 |
48 | if (error.response) {
49 | const response = error.response;
50 | const { message } = response.data;
51 |
52 | switch (response.status) {
53 | case 403:
54 | dispatch(addToast({ kind: ERROR, msg: message }));
55 |
56 | queryClient.invalidateQueries(["getBoard", boardId]);
57 | queryClient.invalidateQueries(["getLists", boardId]);
58 | queryClient.invalidateQueries(["getSpaces"]);
59 | queryClient.invalidateQueries(["getFavorites"]);
60 | break;
61 | case 404:
62 | dispatch(addToast({ kind: ERROR, msg: message }));
63 |
64 | queryClient.invalidateQueries(["getBoard", boardId]);
65 | queryClient.invalidateQueries(["getLists", boardId]);
66 | queryClient.invalidateQueries(["getSpaces"]);
67 | queryClient.invalidateQueries(["getFavorites"]);
68 |
69 | queryClient.invalidateQueries(["getRecentBoards"]);
70 | queryClient.invalidateQueries(["getAllMyCards"]);
71 |
72 | queryClient.invalidateQueries(["getSpaceBoards", spaceId]);
73 | queryClient.invalidateQueries(["getSpaceSettings", spaceId]);
74 | queryClient.invalidateQueries(["getSpaceMembers", spaceId]);
75 | break;
76 | case 400:
77 | queryClient.invalidateQueries(["getBoard", boardId]);
78 | dispatch(addToast({ kind: ERROR, msg: message }));
79 | break;
80 | case 500:
81 | dispatch(addToast({ kind: ERROR, msg: message }));
82 | break;
83 | default:
84 | dispatch(
85 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
86 | );
87 | break;
88 | }
89 | } else if (error.request) {
90 | dispatch(
91 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
92 | );
93 | } else {
94 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
95 | }
96 | });
97 | }, [spaceId]);
98 |
99 | return (
100 | This is permanent and can't be undone.
105 |
106 |
112 |
115 |
116 |
106 |
121 | );
122 | };
123 |
124 | export default DeleteBoardConfirmationModal;
125 |
--------------------------------------------------------------------------------
/client/src/components/ModalComponents/LeaveBoardConfirmationModal.tsx:
--------------------------------------------------------------------------------
1 | import { AxiosError } from "axios";
2 | import React, { useCallback } from "react";
3 | import { useQueryClient } from "react-query";
4 | import { useDispatch } from "react-redux";
5 | import { useNavigate } from "react-router-dom";
6 | import axiosInstance from "../../axiosInstance";
7 | import { hideModal } from "../../redux/features/modalSlice";
8 | import { addToast } from "../../redux/features/toastSlice";
9 | import { ERROR, SUCCESS } from "../../types/constants";
10 |
11 | interface Props {
12 | spaceId: string;
13 | boardId: string;
14 | }
15 |
16 | const LeaveBoardConfirmationModal = ({ spaceId, boardId }: Props) => {
17 | const dispatch = useDispatch();
18 |
19 | const queryClient = useQueryClient();
20 |
21 | const navigate = useNavigate();
22 |
23 | const leaveFromSpace = useCallback((boardId, spaceId) => {
24 | dispatch(hideModal());
25 |
26 | axiosInstance
27 | .delete(`/boards/${boardId}/members`)
28 | .then((response) => {
29 | const { message, data } = response.data;
30 |
31 | dispatch(
32 | addToast({
33 | kind: SUCCESS,
34 | msg: message,
35 | })
36 | );
37 |
38 | queryClient.invalidateQueries(["getBoard", boardId]);
39 | queryClient.invalidateQueries(["getSpaces"]);
40 | queryClient.invalidateQueries(["getFavorites"]);
41 |
42 | queryClient.invalidateQueries(["getSpaceInfo", spaceId]);
43 | queryClient.invalidateQueries(["getSpaceBoards", spaceId]);
44 | queryClient.invalidateQueries(["getSpaceMembers", spaceId]);
45 | queryClient.invalidateQueries(["getSpaceSettings", spaceId]);
46 |
47 | queryClient.invalidateQueries(["getRecentBoards"]);
48 | queryClient.invalidateQueries(["getAllMyCards"]);
49 |
50 | if (!data.isSpacePart) {
51 | navigate(`/`, { replace: true });
52 | }
53 | })
54 | .catch((error: AxiosError) => {
55 | if (error.response) {
56 | const response = error.response;
57 | const { message } = response.data;
58 |
59 | switch (response.status) {
60 | case 403:
61 | dispatch(addToast({ kind: ERROR, msg: message }));
62 |
63 | queryClient.invalidateQueries(["getBoard", boardId]);
64 | queryClient.invalidateQueries(["getSpaces"]);
65 | queryClient.invalidateQueries(["getFavorites"]);
66 | break;
67 | case 404:
68 | dispatch(addToast({ kind: ERROR, msg: message }));
69 |
70 | queryClient.invalidateQueries(["getBoard", boardId]);
71 | queryClient.invalidateQueries(["getSpaces"]);
72 | queryClient.invalidateQueries(["getFavorites"]);
73 |
74 | queryClient.invalidateQueries(["getRecentBoards"]);
75 | queryClient.invalidateQueries(["getAllMyCards"]);
76 |
77 | queryClient.invalidateQueries(["getSpaceInfo", spaceId]);
78 | queryClient.invalidateQueries(["getSpaceBoards", spaceId]);
79 | queryClient.invalidateQueries(["getSpaceMembers", spaceId]);
80 | queryClient.invalidateQueries(["getSpaceSettings", spaceId]);
81 | break;
82 | case 400:
83 | case 500:
84 | dispatch(addToast({ kind: ERROR, msg: message }));
85 | break;
86 | default:
87 | dispatch(
88 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
89 | );
90 | break;
91 | }
92 | } else if (error.request) {
93 | dispatch(
94 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
95 | );
96 | } else {
97 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
98 | }
99 | });
100 | }, []);
101 |
102 | return (
103 | 107 | All lists & cards will be deleted. There is no undo. 108 |
109 |
110 |
116 |
119 |
120 |
109 |
127 | );
128 | };
129 |
130 | export default LeaveBoardConfirmationModal;
131 |
--------------------------------------------------------------------------------
/client/src/components/BoardMenu/ChangeBgMenu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useState } from "react";
2 | import BoardBackground from "../FormikComponents/BoardBackground";
3 | import * as Yup from "yup";
4 | import { Form, Formik } from "formik";
5 | import SubmitBtn from "../FormikComponents/SubmitBtn";
6 | import axiosInstance from "../../axiosInstance";
7 | import { useQueryClient } from "react-query";
8 | import { useDispatch } from "react-redux";
9 | import { addToast } from "../../redux/features/toastSlice";
10 | import { ERROR, SUCCESS } from "../../types/constants";
11 | import { AxiosError } from "axios";
12 |
13 | interface BoardBGObj {
14 | bgImg: string;
15 | color: string;
16 | }
17 |
18 | interface Props {
19 | spaceId: string;
20 | boardId: string;
21 | }
22 |
23 | const ChangeBgMenu = ({ spaceId, boardId }: Props) => {
24 | const dispatch = useDispatch();
25 | const queryClient = useQueryClient();
26 |
27 | const initialValues: BoardBGObj = {
28 | bgImg: "",
29 | color: "",
30 | };
31 | const validationSchema = Yup.object({
32 | bgImg: Yup.string(),
33 | color: Yup.string()
34 | .matches(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, "Invalid color hex code")
35 | .required("Color is required"),
36 | });
37 |
38 | const [isSubmitting, setIsSubmitting] = useState(false);
39 |
40 | const handleSubmit = useCallback(
41 | (boardBg: BoardBGObj) => {
42 | setIsSubmitting(true);
43 |
44 | axiosInstance
45 | .put(
46 | `/boards/${boardId}/background`,
47 | {
48 | ...boardBg,
49 | },
50 | {
51 | headers: {
52 | ContentType: "application/json",
53 | },
54 | }
55 | )
56 | .then((response) => {
57 | const { message } = response.data;
58 |
59 | setIsSubmitting(false);
60 |
61 | queryClient.invalidateQueries(["getRecentBoards"]);
62 |
63 | queryClient.invalidateQueries(["getBoard", boardId]);
64 | queryClient.invalidateQueries(["getSpaces"]);
65 | queryClient.invalidateQueries(["getFavorites"]);
66 | })
67 | .catch((error: AxiosError) => {
68 | setIsSubmitting(false);
69 |
70 | if (error.response) {
71 | const response = error.response;
72 | const { message } = response.data;
73 |
74 | switch (response.status) {
75 | case 403:
76 | dispatch(addToast({ kind: ERROR, msg: message }));
77 |
78 | queryClient.invalidateQueries(["getBoard", boardId]);
79 | queryClient.invalidateQueries(["getSpaces"]);
80 | queryClient.invalidateQueries(["getFavorites"]);
81 | break;
82 | case 404:
83 | dispatch(addToast({ kind: ERROR, msg: message }));
84 |
85 | queryClient.invalidateQueries(["getBoard", boardId]);
86 | queryClient.invalidateQueries(["getSpaces"]);
87 | queryClient.invalidateQueries(["getFavorites"]);
88 |
89 | queryClient.invalidateQueries(["getRecentBoards"]);
90 | queryClient.invalidateQueries(["getAllMyCards"]);
91 |
92 | queryClient.invalidateQueries(["getSpaceInfo", spaceId]);
93 | queryClient.invalidateQueries(["getSpaceBoards", spaceId]);
94 | queryClient.invalidateQueries(["getSpaceMembers", spaceId]);
95 | queryClient.invalidateQueries(["getSpaceSettings", spaceId]);
96 | break;
97 | case 400:
98 | case 500:
99 | dispatch(addToast({ kind: ERROR, msg: message }));
100 | break;
101 | default:
102 | dispatch(
103 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
104 | );
105 | break;
106 | }
107 | } else if (error.request) {
108 | dispatch(
109 | addToast({ kind: ERROR, msg: "Oops, something went wrong" })
110 | );
111 | } else {
112 | dispatch(addToast({ kind: ERROR, msg: `Error: ${error.message}` }));
113 | }
114 | });
115 | },
116 | [boardId, spaceId]
117 | );
118 |
119 | return (
120 | 110 | You will be removed from all the cards on this board. 111 |
112 |
113 |
119 |
125 |
126 |
67 |
68 | {showOption ? (
69 |
80 | ) : (
81 |
82 | )}
83 |
97 |
98 | {!showOption ? (
99 |
153 | );
154 | };
155 |
156 | export default BoardMenu;
157 |
--------------------------------------------------------------------------------
Menu
84 |
96 | -
100 |
- 101 | 107 | 108 | {[BOARD_ROLES.ADMIN, BOARD_ROLES.NORMAL].includes(myRole) && ( 109 |
- 110 | 116 | 117 | )} 118 |
- 119 | 125 | 126 | 127 | {myRole === BOARD_ROLES.ADMIN && ( 128 |
- 129 | 146 | 147 | )} 148 |
{component && component}
151 | )}
152 |