diff --git a/README.md b/README.md index 946b715..6a7eb58 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,10 @@ -# voyage-tasks +# Chingu Collaborate -Your project's `readme` is as important to success as your code. For -this reason you should put as much care into its creation and maintenance -as you would any other component of the application. +This project aims to streamline and address some of the main issues associated with the primary offering of Chingu, known as Voyages. -If you are unsure of what should go into the `readme` let this article, -written by an experienced Chingu, be your starting point - -[Keys to a well written README](https://tinyurl.com/yk3wubft). +Firstly, with self-taught developers emerging daily, we wanted to create a platform where Chingus don't have to wait for the next available voyage that may sometimes be months away. -And before we go there's "one more thing"! Once you decide what to include -in your `readme` feel free to replace the text we've provided here. +Secondly, while Chingus may initially be able to commit to a Voyage there may be commitments along the way that lead them to abandoning Voyages before completion. Unfortunately, this can directly impact other Chingus and their experience with Voyages too. For example, teams can quickly go from having 5 members assigned to their voyage, to 2 members. The main problem here is that with 2 members in a voyage, Chingus aren't able to develop their collaborative learning skills that they intended to develop through their Voyage. + +For these reasons, we decided to create a platform to help Chingus. Using Chingu Collaborate, Chingus will be able to collborate with other decicated Chingus in the event they miss the deadline to join a Voyage or the next Voyage is months away. Additionally, Voyage teams can leverage Chingu Collaborate to gain help with their Voyages. -> Own it & Make it your Own! diff --git a/package-lock.json b/package-lock.json index 2fd3c39..60d7935 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,14 +12,18 @@ "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@reduxjs/toolkit": "^1.8.4", + "chakra-react-select": "^4.1.5", "framer-motion": "^7.2.0", + "luxon": "^3.0.3", "mongodb": "^4.8.1", "mongoose": "^6.5.2", "next": "12.2.5", "next-auth": "^4.10.3", "react": "18.2.0", "react-dom": "18.2.0", - "react-icons": "^4.4.0" + "react-icons": "^4.4.0", + "react-select": "^5.4.0", + "swr": "^1.3.0" }, "devDependencies": { "eslint": "8.22.0", @@ -2023,6 +2027,34 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, + "node_modules/@types/react": { + "version": "18.0.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.18.tgz", + "integrity": "sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + }, "node_modules/@types/webidl-conversions": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-6.1.1.tgz", @@ -2488,6 +2520,25 @@ } ] }, + "node_modules/chakra-react-select": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/chakra-react-select/-/chakra-react-select-4.1.5.tgz", + "integrity": "sha512-a1HarCQ7aNpJ0T/AFIvvnlXA5iWGLYfeXE07QSga11YGfzbA49Jyx7OQwnhQKthT/jIgmhhbez0gsCrvlgM7Gw==", + "dependencies": { + "react-select": "^5.4.0" + }, + "peerDependencies": { + "@chakra-ui/form-control": "^2.0.0", + "@chakra-ui/icon": "^3.0.0", + "@chakra-ui/layout": "^2.0.0", + "@chakra-ui/menu": "^2.0.0", + "@chakra-ui/spinner": "^2.0.0", + "@chakra-ui/system": "^2.0.0", + "@emotion/react": "^11.8.1", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -2691,6 +2742,15 @@ "node": ">=6.0.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.222", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.222.tgz", @@ -4136,6 +4196,19 @@ "node": ">=10" } }, + "node_modules/luxon": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.0.3.tgz", + "integrity": "sha512-+EfHWnF+UT7GgTnq5zXg3ldnTKL2zdv7QJgsU5bjjpbH17E3qi/puMhQyJVYuCq+FRkogvB5WB6iVvUr+E4a7w==", + "engines": { + "node": ">=12" + } + }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/memory-pager": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz", @@ -4879,6 +4952,24 @@ } } }, + "node_modules/react-select": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.4.0.tgz", + "integrity": "sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==", + "dependencies": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^5.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -4901,6 +4992,21 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/redux": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", @@ -5300,6 +5406,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swr": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz", + "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==", + "peerDependencies": { + "react": "^16.11.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -7080,6 +7194,34 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, + "@types/react": { + "version": "18.0.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.18.tgz", + "integrity": "sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "requires": { + "@types/react": "*" + } + }, + "@types/scheduler": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + }, "@types/webidl-conversions": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-6.1.1.tgz", @@ -7378,6 +7520,14 @@ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001378.tgz", "integrity": "sha512-JVQnfoO7FK7WvU4ZkBRbPjaot4+YqxogSDosHv0Hv5mWpUESmN+UubMU6L/hGz8QlQ2aY5U0vR6MOs6j/CXpNA==" }, + "chakra-react-select": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/chakra-react-select/-/chakra-react-select-4.1.5.tgz", + "integrity": "sha512-a1HarCQ7aNpJ0T/AFIvvnlXA5iWGLYfeXE07QSga11YGfzbA49Jyx7OQwnhQKthT/jIgmhhbez0gsCrvlgM7Gw==", + "requires": { + "react-select": "^5.4.0" + } + }, "chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -7535,6 +7685,15 @@ "esutils": "^2.0.2" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "electron-to-chromium": { "version": "1.4.222", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.222.tgz", @@ -8627,6 +8786,16 @@ "yallist": "^4.0.0" } }, + "luxon": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.0.3.tgz", + "integrity": "sha512-+EfHWnF+UT7GgTnq5zXg3ldnTKL2zdv7QJgsU5bjjpbH17E3qi/puMhQyJVYuCq+FRkogvB5WB6iVvUr+E4a7w==" + }, + "memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "memory-pager": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz", @@ -9131,6 +9300,20 @@ "tslib": "^2.0.0" } }, + "react-select": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.4.0.tgz", + "integrity": "sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==", + "requires": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^5.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0" + } + }, "react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -9141,6 +9324,17 @@ "tslib": "^2.0.0" } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "redux": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", @@ -9415,6 +9609,12 @@ "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, + "swr": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz", + "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==", + "requires": {} + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/package.json b/package.json index 12f4c89..9572ab6 100644 --- a/package.json +++ b/package.json @@ -13,14 +13,18 @@ "@emotion/react": "^11.10.0", "@emotion/styled": "^11.10.0", "@reduxjs/toolkit": "^1.8.4", + "chakra-react-select": "^4.1.5", "framer-motion": "^7.2.0", + "luxon": "^3.0.3", "mongodb": "^4.8.1", "mongoose": "^6.5.2", "next": "12.2.5", "next-auth": "^4.10.3", "react": "18.2.0", "react-dom": "18.2.0", - "react-icons": "^4.4.0" + "react-icons": "^4.4.0", + "react-select": "^5.4.0", + "swr": "^1.3.0" }, "devDependencies": { "eslint": "8.22.0", diff --git a/pages/_app.js b/pages/_app.js deleted file mode 100644 index 1e1cec9..0000000 --- a/pages/_app.js +++ /dev/null @@ -1,7 +0,0 @@ -import '../styles/globals.css' - -function MyApp({ Component, pageProps }) { - return -} - -export default MyApp diff --git a/pages/api/hello.js b/pages/api/hello.js deleted file mode 100644 index df63de8..0000000 --- a/pages/api/hello.js +++ /dev/null @@ -1,5 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction - -export default function handler(req, res) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/pages/index.js b/pages/index.js deleted file mode 100644 index dc4b640..0000000 --- a/pages/index.js +++ /dev/null @@ -1,69 +0,0 @@ -import Head from 'next/head' -import Image from 'next/image' -import styles from '../styles/Home.module.css' - -export default function Home() { - return ( -
- - Create Next App - - - - -
-

- Welcome to Next.js! -

- -

- Get started by editing{' '} - pages/index.js -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

- Instantly deploy your Next.js site to a public URL with Vercel. -

- -
-
- - -
- ) -} diff --git a/public/favicon.ico b/public/favicon.ico index 718d6fe..85671bd 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index fbf0e25..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/src/components/AddProjectModal/index.js b/src/components/AddProjectModal/index.js new file mode 100644 index 0000000..d79f144 --- /dev/null +++ b/src/components/AddProjectModal/index.js @@ -0,0 +1,336 @@ +import { useState } from 'react' +import { + Button, + Text, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalCloseButton, + ModalBody, + ModalFooter, + useDisclosure, + FormControl, + FormLabel, + Input, + Textarea, +} from '@chakra-ui/react' +import { Select } from 'chakra-react-select' +import { useSession } from 'next-auth/react' +import { useRouter } from 'next/router' + +function AddProjectModal({ reachedMaximumPostedProjects }) { + const { isOpen, onOpen, onClose } = useDisclosure() + const { data: session } = useSession() + const router = useRouter() + const [isLoading, setIsLoading] = useState(false) + const [projectTitleExists, setProjectTitleExists] = useState(false) + + const options = [ + { value: 'JavaScript', label: 'JavaScript', colorScheme: 'yellow' }, + { value: 'TypeScript', label: 'TypeScript', colorScheme: 'blue' }, + { value: 'React', label: 'React', colorScheme: 'cyan' }, + { value: 'Node.js', label: 'Node.js', colorScheme: 'green' }, + { value: 'Express.js', label: 'Express.js', colorScheme: 'blackAlpha' }, + { value: 'MongoDB', label: 'MongoDB', colorScheme: 'green' }, + { value: 'Next.js', label: 'Next.js', colorScheme: 'gray' }, + ] + + const timeZones = [ + { value: 'UTC+14:00', label: 'UTC+14:00' }, + { value: 'UTC+13:00', label: 'UTC+13:00' }, + { value: 'UTC+12:45', label: 'UTC+12:45' }, + { value: 'UTC+12:00', label: 'UTC+12:00' }, + { value: 'UTC+11:00', label: 'UTC+11:00' }, + { value: 'UTC+10:30', label: 'UTC+10:30' }, + { value: 'UTC+10:00', label: 'UTC+10:00' }, + { value: 'UTC+9:30', label: 'UTC+9:30' }, + { value: 'UTC+9:00', label: 'UTC+9:00' }, + { value: 'UTC+8:45', label: 'UTC+8:45' }, + { value: 'UTC+8:00', label: 'UTC+8:00' }, + { value: 'UTC+7:00', label: 'UTC+7:00' }, + { value: 'UTC+6:30', label: 'UTC+6:30' }, + { value: 'UTC+6:00', label: 'UTC+6:00' }, + { value: 'UTC+5:45', label: 'UTC+5:45' }, + { value: 'UTC+5:30', label: 'UTC+5:30' }, + { value: 'UTC+5:00', label: 'UTC+5:00' }, + { value: 'UTC+4:30', label: 'UTC+4:30' }, + { value: 'UTC+4:00', label: 'UTC+4:00' }, + { value: 'UTC+3:00', label: 'UTC+3:00' }, + { value: 'UTC+2:00', label: 'UTC+2:00' }, + { value: 'UTC+1:00', label: 'UTC+1:00' }, + { value: 'UTC+0:00', label: 'UTC+0:00' }, + { value: 'UTC-1:00', label: 'UTC-1:00' }, + { value: 'UTC-2:00', label: 'UTC-2:00' }, + { value: 'UTC-2:30', label: 'UTC-2:30' }, + { value: 'UTC-3:00', label: 'UTC-3:00' }, + { value: 'UTC-4:00', label: 'UTC-4:00' }, + { value: 'UTC-5:00', label: 'UTC-5:00' }, + { value: 'UTC-6:00', label: 'UTC-6:00' }, + { value: 'UTC-7:00', label: 'UTC-7:00' }, + { value: 'UTC-8:00', label: 'UTC-8:00' }, + { value: 'UTC-9:00', label: 'UTC-9:00' }, + { value: 'UTC-9:30', label: 'UTC-9:30' }, + { value: 'UTC-10:00', label: 'UTC-10:00' }, + { value: 'UTC-11:00', label: 'UTC-11:00' }, + { value: 'UTC-12:00', label: 'UTC-12:00' }, + ] + + const inputMarginBottom = '1rem' + const labelMarginBottom = '0' + + // Input Values + const [title, setTitle] = useState('') + const [technologies, setTechnologies] = useState('') + const [timezone, setTimezone] = useState({}) + const [details, setDetails] = useState('') + + // Input didFocusOn + const [didFocusOnTitle, setDidFocusOnTitle] = useState(false) + const [didFocusOnTechnologies, setDidFocusOnTechnologies] = useState(false) + const [didFocusOnTimezone, setDidFocusOnTimezone] = useState(false) + const [didFocusOnDetails, setDidFocusOnDetails] = useState(false) + + // Input Validation + // a) Required Inputs + const titleIsValid = + title.trim().length >= 5 && + title.length <= 50 && + title.trim().length !== 0 + + const technologiesIsValid = technologies.length > 0 + + const timezoneIsValid = Object.keys(timezone).length > 0 + + const detailsIsValid = + details.length >= 250 && + details.length <= 800 && + details.trim().length !== 0 + + //Form Validation + const formIsValid = + titleIsValid && technologiesIsValid && timezoneIsValid && detailsIsValid + + const resetStates = () => { + setTitle('') + setTechnologies('') + setTimezone({}) + setDetails('') + setDidFocusOnTitle(false) + setDidFocusOnTechnologies(false) + setDidFocusOnTimezone(false) + setDidFocusOnDetails(false) + setProjectTitleExists(false) + setIsLoading(false) + } + + const closeHandler = () => { + resetStates() + onClose() + } + + const formSubmit = async () => { + setProjectTitleExists(false) + setIsLoading(true) + const user_id = session.dbUser._id + + let formData = { + timezone, + title, + technologies, + details, + admin: user_id, + } + + try { + const response = await fetch('/api/projects', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(formData), + }) + + const data = await response.json() + if (response.status == '200') { + return router.reload() + } + + if (response.status == '400') { + if (data.error === 'Project Title is already taken') { + setProjectTitleExists(true) + } + } + setIsLoading(false) + } catch (error) { + setIsLoading(false) + console.log( + 'Something went wrong while trying to add project idea.' + ) + } + } + + return ( + <> + + + + + + Project Idea + + + + + Title + + { + setDidFocusOnTitle(true) + }} + onChange={(e) => { + setTitle(e.target.value) + }} + type="text" + marginBottom={inputMarginBottom} + /> + {projectTitleExists && ( + + Project already exists. + + )} + {didFocusOnTitle && ( + + Between 5 and 50 characters. + + )} + + + Technologies + + { + setDidFocusOnTimezone(true) + }} + onChange={(e) => { + setTimezone(e.value) + }} + options={timeZones} + /> + + Description + +