diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..b47489b8 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +node_modules +package.lock.json +build \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..eba72c61 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,19 @@ +module.exports = { + env: { + browser: true, + es2021: true + }, + extends: [ + 'plugin:react/recommended', + 'standard-with-typescript', + 'airbnb-base', + 'plugin:prettier/recommended' + ], + overrides: [], + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module' + }, + plugins: ['react', 'prettier'], + rules: {} +}; diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..b47489b8 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +node_modules +package.lock.json +build \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..2d5c7bb9 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,15 @@ +{ + "printWidth": 100, + + "semi": true, + + "singleQuote": true, + + "tabWidth": 4, + + "useTabs": false, + + "trailingComma": "none", + + "endOfLine": "auto" +} diff --git a/archive/pages/hackrplay/2022/registration/[id].js b/archive/pages/hackrplay/2022/registration/[id].js deleted file mode 100644 index 4e16ad7f..00000000 --- a/archive/pages/hackrplay/2022/registration/[id].js +++ /dev/null @@ -1,294 +0,0 @@ -import { useAuthenticationStatus, useUserData } from '@nhost/nextjs'; -import styles from '@/styles/Home.module.css'; - -import { FiCheckCircle } from 'react-icons/fi'; -import { NHOST } from '@/services/nhost'; -import { useEffect, useState, forwardRef } from 'react'; -import FormBuilder from '@/components/form-builder'; -import { FIELD_TEMPLATE } from '@/services/consts/registration-update-fields'; -import { getAllUsers } from '@/services/graphql/auth'; -import { - assign_member, - get_idea, - insert_idea, - update_ideas_demographic, - update_ideas_member, -} from '@/services/graphql/ideas'; -import { - PrimaryButton, - SecondaryOutlinedButtonDark, -} from '@/components/Buttons'; -import { useRouter } from 'next/router'; -import LayoutWrapper from '@/components/LayoutWrapper'; -import Snackbar from '@mui/material/Snackbar'; -import MuiAlert from '@mui/material/Alert'; -import { submit } from 'json-graphql-parser/v2'; -import { - get_latest_status, - insert_ideas_status, - list_statuses, - update_ideas_status, -} from '@/services/graphql/status'; -import { escape_new_line, unescape_new_line } from '@/services/util/string'; - -const Alert = forwardRef(function Alert(props, ref) { - return ; -}); - -export default function RegistrationEdit() { - const { isAuthenticated, isLoading } = useAuthenticationStatus(); - const [isDataLoading, setIsDataLoading] = useState(true); - const [isSubmitting, setIsSubmitting] = useState(false); - const [storedIdeaData, setStoredIdeaData] = useState({}); - const [formData, setFormData] = useState({}); - const [alertOpen, setAlertOpen] = useState(false); - const [pageDisabled, setPageDisabled] = useState(false); - - const userData = useUserData(); - const router = useRouter(); - const { id } = router.query; - - const initializeData = () => { - if (Object.keys(storedIdeaData).length === 0) { - setIsDataLoading(true); - const all_apis = [ - { name: 'users', method: getAllUsers }, - { - name: 'status', - method: list_statuses, - post_method: remove_submitted_status, - }, - ]; - const promises = []; - - all_apis.forEach((api) => { - promises.push(api.method()); - }); - - promises.push( - get_idea(id).then((r) => { - const status = get_latest_status(r); - r.description = unescape_new_line(r.description); - if ( - status && - status.id === - process.env.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID - ) { - router.push('../ideas'); - } else { - prepare_idea_object(r); - } - }) - ); - Promise.all(promises) - .then((res) => { - res.forEach((rApi, rApi_ind) => { - try { - const api_obj = all_apis[rApi_ind]; - storedIdeaData[api_obj.name] = rApi; - const anyField = FIELD_TEMPLATE.filter((field) => { - return field.datafield === api_obj.name; - }); - if (anyField.length) { - anyField[0].options = api_obj.post_method - ? api_obj.post_method(rApi) - : rApi; - } - } catch (err) { - // IGNORE - } - }); - - setStoredIdeaData({ ...storedIdeaData }); - }) - .finally(() => { - setIsDataLoading(false); - }); - } - }; - - const remove_submitted_status = (all_statuses) => { - return all_statuses.filter( - (s) => s.id !== process.env.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID - ); - }; - - const prepare_idea_object = (idea) => { - if (idea.idea_members_map) { - idea.users = idea.idea_members_map.user_id_map.id; - } - if (idea.idea_idea_status_map) { - idea.status = get_latest_status(idea); - const all_statuses = []; - - idea.idea_idea_status_map.forEach((st) => { - all_statuses.push(st.idea_status_status_map); - }); - const last_status = all_statuses[all_statuses.length - 1]; - idea.status = last_status?.id; - } - if (userData.id !== idea.idea_owner_map.id) { - setAlertOpen(true); - setPageDisabled(true); - } - setFormData({ ...idea }); - setStoredIdeaData({ ...idea }); - }; - - useEffect(() => { - if (!isLoading) { - if (!isAuthenticated) { - if (typeof window !== 'undefined') { - const protocol = process.env.NEXT_PUBLIC_PROTOCOL - ? process.env.NEXT_PUBLIC_PROTOCOL - : 'https'; - const host = window.location.hostname; - const port = process.env.NEXT_PUBLIC_DEV_PORT - ? `:${process.env.NEXT_PUBLIC_DEV_PORT}` - : ''; - const external_path = NHOST.AUTH_URL( - `${protocol}://${host}${port}/registration` - ); - window.location = external_path; - } - } else { - initializeData(); - } - } - }, [isLoading]); - - if (isLoading) { - return ( -
-
-
- Loading authentication information. Please wait. -
-
-
- ); - } - - if (isDataLoading) { - return ( -
-
-
- Checking authentication status. Please wait. -
-
-
- ); - } - - const isFieldsAreInValid = () => { - let res = false; - FIELD_TEMPLATE.forEach((tmpl) => { - if (tmpl.required && (!formData || !formData[tmpl.datafield])) { - res = true; - } - }); - return res; - }; - - const onIdeaDataChanged = (data) => { - setFormData({ ...data }); - setStoredIdeaData({ ...data }); - }; - - const onSubmit = () => { - setIsSubmitting(true); - - const idea_object = (({ title, description }) => ({ - title, - description, - }))(storedIdeaData); - idea_object.owner = userData.id; - formData.description = idea_object.description = escape_new_line( - idea_object.description - ); - const promises = []; - - promises.push(update_ideas_demographic(formData)); - promises.push(update_ideas_member(formData)); - if (formData.status) { - promises.push(insert_ideas_status(formData)); - } - - Promise.all(promises).then((res) => { - router.push('../ideas'); - }); - }; - - const onCancelClicked = () => { - router.push('../ideas'); - }; - - return ( - -
-
-
-
-

- Registration -

-
-
-
- {' '} - {alertOpen ? ( - - You cannot edit this idea. Only author - can edit an idea. - - ) : null} -
- - onIdeaDataChanged(data) - } - /> - -
-
-
-
-
-
- - onCancelClicked() - }> - Cancel - -
-
-
- onSubmit()} - onClick={() => os()}> - Update Idea - - -
-
-
-
-
-
-
- - ); -} diff --git a/archive/pages/hackrplay/2022/registration/[id].tsx b/archive/pages/hackrplay/2022/registration/[id].tsx new file mode 100644 index 00000000..b3e476c6 --- /dev/null +++ b/archive/pages/hackrplay/2022/registration/[id].tsx @@ -0,0 +1,278 @@ +import { useAuthenticationStatus, useUserData } from '@nhost/nextjs'; +import styles from '@/styles/Home.module.css'; + +import { FiCheckCircle } from 'react-icons/fi'; +import { NHOST } from '@/services/nhost'; +import { useEffect, useState, forwardRef } from 'react'; +import FormBuilder from '@/components/form-builder'; +import { FIELD_TEMPLATE } from '@/services/consts/registration-update-fields'; +import { getAllUsers } from '@/services/graphql/auth'; +import { + assign_member, + get_idea, + insert_idea, + update_ideas_demographic, + update_ideas_member +} from '@/services/graphql/ideas'; +import { PrimaryButton, SecondaryOutlinedButtonDark } from '@/components/Buttons'; +import { useRouter } from 'next/router'; +import LayoutWrapper from '@/components/LayoutWrapper'; +import Snackbar from '@mui/material/Snackbar'; +import MuiAlert from '@mui/material/Alert'; +import { submit } from 'json-graphql-parser/v2'; +import { + get_latest_status, + insert_ideas_status, + list_statuses, + update_ideas_status +} from '@/services/graphql/status'; +import { escape_new_line, unescape_new_line } from '@/services/util/string'; + +const Alert = forwardRef(function Alert(props, ref) { + return ; +}); + +export default function RegistrationEdit() { + const { isAuthenticated, isLoading } = useAuthenticationStatus(); + const [isDataLoading, setIsDataLoading] = useState(true); + const [isSubmitting, setIsSubmitting] = useState(false); + const [storedIdeaData, setStoredIdeaData] = useState({}); + const [formData, setFormData] = useState({}); + const [alertOpen, setAlertOpen] = useState(false); + const [pageDisabled, setPageDisabled] = useState(false); + + const userData = useUserData(); + const router = useRouter(); + const { id } = router.query; + + const initializeData = () => { + if (Object.keys(storedIdeaData).length === 0) { + setIsDataLoading(true); + const all_apis = [ + { name: 'users', method: getAllUsers }, + { + name: 'status', + method: list_statuses, + post_method: remove_submitted_status + } + ]; + const promises = []; + + all_apis.forEach((api) => { + promises.push(api.method()); + }); + + promises.push( + get_idea(id).then((r) => { + const status = get_latest_status(r); + r.description = unescape_new_line(r.description); + if ( + status && + status.id === process.env.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID + ) { + router.push('../ideas'); + } else { + prepare_idea_object(r); + } + }) + ); + Promise.all(promises) + .then((res) => { + res.forEach((rApi, rApi_ind) => { + try { + const api_obj = all_apis[rApi_ind]; + storedIdeaData[api_obj.name] = rApi; + const anyField = FIELD_TEMPLATE.filter((field) => { + return field.datafield === api_obj.name; + }); + if (anyField.length) { + anyField[0].options = api_obj.post_method + ? api_obj.post_method(rApi) + : rApi; + } + } catch (err) { + // IGNORE + } + }); + + setStoredIdeaData({ ...storedIdeaData }); + }) + .finally(() => { + setIsDataLoading(false); + }); + } + }; + + const remove_submitted_status = (all_statuses) => { + return all_statuses.filter( + (s) => s.id !== process.env.NEXT_PUBLIC_HACKATHON_SUBMIT_STATUS_ID + ); + }; + + const prepare_idea_object = (idea) => { + if (idea.idea_members_map) { + idea.users = idea.idea_members_map.user_id_map.id; + } + if (idea.idea_idea_status_map) { + idea.status = get_latest_status(idea); + const all_statuses = []; + + idea.idea_idea_status_map.forEach((st) => { + all_statuses.push(st.idea_status_status_map); + }); + const last_status = all_statuses[all_statuses.length - 1]; + idea.status = last_status?.id; + } + if (userData.id !== idea.idea_owner_map.id) { + setAlertOpen(true); + setPageDisabled(true); + } + setFormData({ ...idea }); + setStoredIdeaData({ ...idea }); + }; + + useEffect(() => { + if (!isLoading) { + if (!isAuthenticated) { + if (typeof window !== 'undefined') { + const protocol = process.env.NEXT_PUBLIC_PROTOCOL + ? process.env.NEXT_PUBLIC_PROTOCOL + : 'https'; + const host = window.location.hostname; + const port = process.env.NEXT_PUBLIC_DEV_PORT + ? `:${process.env.NEXT_PUBLIC_DEV_PORT}` + : ''; + const external_path = NHOST.AUTH_URL( + `${protocol}://${host}${port}/registration` + ); + window.location = external_path; + } + } else { + initializeData(); + } + } + }, [isLoading]); + + if (isLoading) { + return ( +
+
+
+ Loading authentication information. Please wait. +
+
+
+ ); + } + + if (isDataLoading) { + return ( +
+
+
Checking authentication status. Please wait.
+
+
+ ); + } + + const isFieldsAreInValid = () => { + let res = false; + FIELD_TEMPLATE.forEach((tmpl) => { + if (tmpl.required && (!formData || !formData[tmpl.datafield])) { + res = true; + } + }); + return res; + }; + + const onIdeaDataChanged = (data) => { + setFormData({ ...data }); + setStoredIdeaData({ ...data }); + }; + + const onSubmit = () => { + setIsSubmitting(true); + + const idea_object = (({ title, description }) => ({ + title, + description + }))(storedIdeaData); + idea_object.owner = userData.id; + formData.description = idea_object.description = escape_new_line(idea_object.description); + const promises = []; + + promises.push(update_ideas_demographic(formData)); + promises.push(update_ideas_member(formData)); + if (formData.status) { + promises.push(insert_ideas_status(formData)); + } + + Promise.all(promises).then((res) => { + router.push('../ideas'); + }); + }; + + const onCancelClicked = () => { + router.push('../ideas'); + }; + + return ( + +
+
+
+
+

+ Registration +

+
+
+
+ {' '} + {alertOpen ? ( + + You cannot edit this idea. Only author can edit an idea. + + ) : null} +
+ onIdeaDataChanged(data)} + /> + +
+
+
+
+
+
+ onCancelClicked()} + > + Cancel + +
+
+
+ onSubmit()} + onClick={() => os()} + > + Update Idea + + +
+
+
+
+
+
+
+ + ); +} diff --git a/archive/pages/hackrplay/2022/registration/index.js b/archive/pages/hackrplay/2022/registration/index.js deleted file mode 100644 index 009a8409..00000000 --- a/archive/pages/hackrplay/2022/registration/index.js +++ /dev/null @@ -1,205 +0,0 @@ -import { useAuthenticationStatus, useUserData } from '@nhost/nextjs'; -import styles from '@/styles/Home.module.css'; - -import Link from 'next/link'; -import { FiCheckCircle } from 'react-icons/fi'; -import { NHOST } from '@/services/nhost'; -import { useEffect, useState } from 'react'; -import FormBuilder from '@/components/form-builder'; -import { FIELD_TEMPLATE } from '@/services/consts/registration-fields'; -import { getAllUsers } from '@/services/graphql/auth'; -import { assign_member, insert_idea } from '@/services/graphql/ideas'; -import { - PrimaryButton, - SecondaryOutlinedButtonDark, -} from '@/components/Buttons'; -import { useRouter } from 'next/router'; -import LayoutWrapper from '@/components/LayoutWrapper'; -import { insert_ideas_status } from '@/services/graphql/status'; -import { escape_new_line } from '@/services/util/string'; - -export default function Registration() { - const { isAuthenticated, isLoading } = useAuthenticationStatus(); - const [isDataLoading, setIsDataLoading] = useState(true); - const [isSubmitting, setIsSubmitting] = useState(false); - const [storedIdeaData, setStoredIdeaData] = useState({}); - const [formData, setFormData] = useState({}); - const router = useRouter(); - - const userData = useUserData(); - - const initializeData = () => { - if (Object.keys(storedIdeaData).length === 0) { - setIsDataLoading(true); - const all_apis = [{ name: 'users', method: getAllUsers }]; - const promises = []; - all_apis.forEach((api) => { - promises.push(api.method()); - }); - - Promise.all(promises) - .then((res) => { - res.forEach((rApi, rApi_ind) => { - const api_obj = all_apis[rApi_ind]; - storedIdeaData[api_obj.name] = rApi; - const anyField = FIELD_TEMPLATE.filter((field) => { - return field.datafield === api_obj.name; - }); - if (anyField.length) { - anyField[0].options = rApi; - } - }); - setStoredIdeaData({ ...storedIdeaData }); - }) - .finally(() => { - setIsDataLoading(false); - }); - } - }; - - useEffect(() => { - if (!isLoading) { - if (!isAuthenticated) { - if (typeof window !== 'undefined') { - const protocol = process.env.NEXT_PUBLIC_PROTOCOL - ? process.env.NEXT_PUBLIC_PROTOCOL - : 'https'; - const host = window.location.hostname; - const port = process.env.NEXT_PUBLIC_DEV_PORT - ? `:${process.env.NEXT_PUBLIC_DEV_PORT}` - : ''; - const external_path = NHOST.AUTH_URL( - `${protocol}://${host}${port}/hackrplay/2022/registration` - ); - window.location = external_path; - } - } else { - initializeData(); - } - } - }, [isLoading]); - - if (isLoading) { - return ( -
-
-
- Loading authentication information. Please wait. -
-
-
- ); - } - - if (isDataLoading) { - return ( -
-
-
- Checking authentication status. Please wait. -
-
-
- ); - } - - const isFieldsAreInValid = () => { - let res = false; - FIELD_TEMPLATE.forEach((tmpl) => { - if (tmpl.required && (!formData || !formData[tmpl.datafield])) { - res = true; - } - }); - return res; - }; - - const onIdeaDataChanged = (data) => { - setFormData({ ...data }); - setStoredIdeaData({ ...data }); - }; - - const onSubmit = () => { - setIsSubmitting(true); - let idea_id = storedIdeaData.id; - let selected_users = storedIdeaData.users; - const idea_object = (({ title, description }) => ({ - title, - description, - }))(storedIdeaData); - idea_object.owner = userData.id; - idea_object.description = escape_new_line(idea_object.description); - if (!idea_id) - return insert_idea(idea_object).then((res) => { - idea_id = res.id; - const promises = []; - if (selected_users && selected_users.length) { - if (storedIdeaData.users) { - promises.push( - assign_member(idea_id, storedIdeaData.users) - ); - } - } - formData.status = '63c47cd7-f9c4-41e1-87b6-7ebe7b59f00e'; - formData.id = idea_id; - promises.push(insert_ideas_status(formData)); - return Promise.all(promises).then((res) => { - router.push('ideas'); - setIsSubmitting(false); - }); - }); - }; - const onCancelClicked = () => { - router.back(); - }; - - return ( - -
-
-
-
-

- Registration -

-
-
-
-
- Welcome{' '} - - {userData.displayName} - - , register your idea -
-
- - onIdeaDataChanged(data) - } - /> - -
-
-
-
-
-
- - onCancelClicked() - }> - Cancel - -
-
-
-
-
-
-
-
- - ); -} diff --git a/archive/pages/hackrplay/2022/registration/index.tsx b/archive/pages/hackrplay/2022/registration/index.tsx new file mode 100644 index 00000000..5a15705d --- /dev/null +++ b/archive/pages/hackrplay/2022/registration/index.tsx @@ -0,0 +1,196 @@ +import { useAuthenticationStatus, useUserData } from '@nhost/nextjs'; +import styles from '@/styles/Home.module.css'; + +import Link from 'next/link'; +import { FiCheckCircle } from 'react-icons/fi'; +import { NHOST } from '@/services/nhost'; +import { useEffect, useState } from 'react'; +import FormBuilder from '@/components/form-builder'; +import { FIELD_TEMPLATE } from '@/services/consts/registration-fields'; +import { getAllUsers } from '@/services/graphql/auth'; +import { assign_member, insert_idea } from '@/services/graphql/ideas'; +import { PrimaryButton, SecondaryOutlinedButtonDark } from '@/components/Buttons'; +import { useRouter } from 'next/router'; +import LayoutWrapper from '@/components/LayoutWrapper'; +import { insert_ideas_status } from '@/services/graphql/status'; +import { escape_new_line } from '@/services/util/string'; + +export default function Registration() { + const { isAuthenticated, isLoading } = useAuthenticationStatus(); + const [isDataLoading, setIsDataLoading] = useState(true); + const [isSubmitting, setIsSubmitting] = useState(false); + const [storedIdeaData, setStoredIdeaData] = useState({}); + const [formData, setFormData] = useState({}); + const router = useRouter(); + + const userData = useUserData(); + + const initializeData = () => { + if (Object.keys(storedIdeaData).length === 0) { + setIsDataLoading(true); + const all_apis = [{ name: 'users', method: getAllUsers }]; + const promises = []; + all_apis.forEach((api) => { + promises.push(api.method()); + }); + + Promise.all(promises) + .then((res) => { + res.forEach((rApi, rApi_ind) => { + const api_obj = all_apis[rApi_ind]; + storedIdeaData[api_obj.name] = rApi; + const anyField = FIELD_TEMPLATE.filter((field) => { + return field.datafield === api_obj.name; + }); + if (anyField.length) { + anyField[0].options = rApi; + } + }); + setStoredIdeaData({ ...storedIdeaData }); + }) + .finally(() => { + setIsDataLoading(false); + }); + } + }; + + useEffect(() => { + if (!isLoading) { + if (!isAuthenticated) { + if (typeof window !== 'undefined') { + const protocol = process.env.NEXT_PUBLIC_PROTOCOL + ? process.env.NEXT_PUBLIC_PROTOCOL + : 'https'; + const host = window.location.hostname; + const port = process.env.NEXT_PUBLIC_DEV_PORT + ? `:${process.env.NEXT_PUBLIC_DEV_PORT}` + : ''; + const external_path = NHOST.AUTH_URL( + `${protocol}://${host}${port}/hackrplay/2022/registration` + ); + window.location = external_path; + } + } else { + initializeData(); + } + } + }, [isLoading]); + + if (isLoading) { + return ( +
+
+
+ Loading authentication information. Please wait. +
+
+
+ ); + } + + if (isDataLoading) { + return ( +
+
+
Checking authentication status. Please wait.
+
+
+ ); + } + + const isFieldsAreInValid = () => { + let res = false; + FIELD_TEMPLATE.forEach((tmpl) => { + if (tmpl.required && (!formData || !formData[tmpl.datafield])) { + res = true; + } + }); + return res; + }; + + const onIdeaDataChanged = (data) => { + setFormData({ ...data }); + setStoredIdeaData({ ...data }); + }; + + const onSubmit = () => { + setIsSubmitting(true); + let idea_id = storedIdeaData.id; + let selected_users = storedIdeaData.users; + const idea_object = (({ title, description }) => ({ + title, + description + }))(storedIdeaData); + idea_object.owner = userData.id; + idea_object.description = escape_new_line(idea_object.description); + if (!idea_id) + return insert_idea(idea_object).then((res) => { + idea_id = res.id; + const promises = []; + if (selected_users && selected_users.length) { + if (storedIdeaData.users) { + promises.push(assign_member(idea_id, storedIdeaData.users)); + } + } + formData.status = '63c47cd7-f9c4-41e1-87b6-7ebe7b59f00e'; + formData.id = idea_id; + promises.push(insert_ideas_status(formData)); + return Promise.all(promises).then((res) => { + router.push('ideas'); + setIsSubmitting(false); + }); + }); + }; + const onCancelClicked = () => { + router.back(); + }; + + return ( + +
+
+
+
+

+ Registration +

+
+
+
+
+ Welcome{' '} + + {userData.displayName} + + , register your idea +
+
+ onIdeaDataChanged(data)} + /> + +
+
+
+
+
+
+ onCancelClicked()} + > + Cancel + +
+
+
+
+
+
+
+
+ + ); +} diff --git a/components/Banner.js b/components/Banner.tsx similarity index 100% rename from components/Banner.js rename to components/Banner.tsx diff --git a/components/Buttons.js b/components/Buttons.js deleted file mode 100644 index 15af3155..00000000 --- a/components/Buttons.js +++ /dev/null @@ -1,114 +0,0 @@ -export const PrimaryButton = ({ - children, - handleOnClick, - className, - small = false, - ...props -}) => { - const buttonSize = small - ? "md:pt-1 md:pb-0 md:px-4 py-2 px-4 text-lg" - : "md:py-4 md:px-7 py-3 px-5 text-xl"; - - return ( - - ); -}; - -export const SecondaryButton = ({ - children, - handleOnClick, - className, - small = false, -}) => { - const buttonSize = small - ? "md:py-3 md:px-5 py-2 px-4 text-lg" - : "md:py-4 md:px-7 py-3 px-5 text-xl"; - - return ( - - ); -}; - -export const SecondaryLink = ({ - children, - link, - className, - target, - small = false, -}) => { - const buttonSize = small - ? "md:py-3 md:px-5 py-2 px-4 text-lg" - : "md:py-4 md:px-7 py-3 px-5 text-xl"; - - return ( - - {children} - - ); -}; - -export const SecondaryOutlinedButton = ({ - children, - handleOnClick, - small = false, -}) => { - const buttonSize = small - ? "md:py-3 md:px-5 py-2 px-4 text-lg" - : "md:py-4 md:px-7 py-3 px-5 text-xl"; - - return ( - - ); -}; - -export const SecondaryOutlinedButtonDark = ({ children, handleOnClick }) => { - return ( - - ); -}; - -export const ToolBarButton = ({ - children, - handleOnClick, - disabled, - selected, - cclas, -}) => { - return ( -
- -
- ); -}; diff --git a/components/Buttons.tsx b/components/Buttons.tsx new file mode 100644 index 00000000..9adbab8a --- /dev/null +++ b/components/Buttons.tsx @@ -0,0 +1,116 @@ +import { ReactElement, ReactFragment } from 'react'; + +interface IPrimaryButtonProps { + children: ReactFragment; + handleOnClick?: () => void; + className?: string; + small?: boolean; +} + +interface ISecondaryLinkProps { + children: ReactFragment; + link: string; + className?: string; + target: string; + small?: boolean; +} + +export const PrimaryButton = ({ + children, + handleOnClick, + className, + small = false, + ...props +}: IPrimaryButtonProps) => { + const buttonSize = small + ? 'md:pt-1 md:pb-0 md:px-4 py-2 px-4 text-lg' + : 'md:py-4 md:px-7 py-3 px-5 text-xl'; + + return ( + + ); +}; + +export const SecondaryButton = ({ children, handleOnClick, className, small = false }) => { + const buttonSize = small + ? 'md:py-3 md:px-5 py-2 px-4 text-lg' + : 'md:py-4 md:px-7 py-3 px-5 text-xl'; + + return ( + + ); +}; + +export const SecondaryLink = ({ + children, + link, + className, + target, + small = false +}: ISecondaryLinkProps) => { + const buttonSize = small + ? 'md:py-3 md:px-5 py-2 px-4 text-lg' + : 'md:py-4 md:px-7 py-3 px-5 text-xl'; + + return ( + + {children} + + ); +}; + +export const SecondaryOutlinedButton = ({ children, handleOnClick, small = false }) => { + const buttonSize = small + ? 'md:py-3 md:px-5 py-2 px-4 text-lg' + : 'md:py-4 md:px-7 py-3 px-5 text-xl'; + + return ( + + ); +}; + +export const SecondaryOutlinedButtonDark = ({ children, handleOnClick }) => { + return ( + + ); +}; + +export const ToolBarButton = ({ children, handleOnClick, disabled, selected, cclas }) => { + return ( +
+ +
+ ); +}; diff --git a/components/ExtendedFooter.js b/components/ExtendedFooter.tsx similarity index 100% rename from components/ExtendedFooter.js rename to components/ExtendedFooter.tsx diff --git a/components/Footer.js b/components/Footer.js deleted file mode 100644 index 57db43ad..00000000 --- a/components/Footer.js +++ /dev/null @@ -1,82 +0,0 @@ -import Image from "next/image"; -import Link from "next/link"; -import { FaDiscord, FaTwitter, FaRss } from "react-icons/fa"; - -import FooterTriangles from "../public/FooterTriangles.svg"; -import ReactPlayLogo from "../public/ReactPlayLogo.svg"; -import FooterReactLogo from "../public/FooterReactLogo.svg"; -import ExtendedFooter from "./ExtendedFooter"; - -const Footer = ({ currentPath }) => { - return ( - <> - {currentPath == "/" ? ( - - ) : ( - - )} - - ); -}; - -export default Footer; diff --git a/components/Footer.tsx b/components/Footer.tsx new file mode 100644 index 00000000..02a1a07e --- /dev/null +++ b/components/Footer.tsx @@ -0,0 +1,80 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import { FaDiscord, FaTwitter, FaRss } from 'react-icons/fa'; + +import FooterTriangles from '../public/FooterTriangles.svg'; +import ReactPlayLogo from '../public/ReactPlayLogo.svg'; +import FooterReactLogo from '../public/FooterReactLogo.svg'; +import ExtendedFooter from './ExtendedFooter'; + +const Footer = ({ currentPath }) => { + return ( + <> + {currentPath == '/' ? ( + + ) : ( + + )} + + ); +}; + +export default Footer; diff --git a/components/Hack-R-Play/IdeaFilter.js b/components/Hack-R-Play/IdeaFilter.js deleted file mode 100644 index fef27c8e..00000000 --- a/components/Hack-R-Play/IdeaFilter.js +++ /dev/null @@ -1,97 +0,0 @@ -import React, { useState, useEffect } from "react"; - -import Pagination from "@/components/Pagination"; -import SortButtons from "@/components/SortButtons"; -import OwnerFilter from "@/components/OwnerFilter"; -import StatusFilter from "../StatusFilter"; - -export default function IdeaFilters({ - total, - pagesize, - onChange, - isAuthenticated, -}) { - const [filter, setFilter] = useState({}); - - useEffect(() => {}, [total]); - - const resetFilter = () => { - filter.sort_col = "created_at"; - filter.sort_asc = true; - filter.page = 1; - filter.owner = "all"; - filter.pagesize = pagesize; - filter.status_filter = undefined; - return filter; - }; - - const onPageChanged = (index) => { - const fl = resetFilter(); - fl.page = index; - setFilter({ ...fl }); - invokeChange(fl); - }; - - const onOwnerChanged = (owner) => { - const fl = resetFilter(); - - fl.owner = owner; - setFilter({ ...fl }); - invokeChange(fl); - }; - - const onSortChanged = (button) => { - const fl = resetFilter(); - fl.sort_col = button.field; - fl.sort_asc = button.asc; - setFilter({ ...fl }); - invokeChange(fl); - }; - - const onStatusFilterChanged = (status) => { - const fl = resetFilter(); - fl.status_filter = status; - setFilter({ ...fl }); - invokeChange(fl); - }; - - const invokeChange = (filter) => { - if (onChange) { - onChange(filter); - } - }; - - return ( -
- {isAuthenticated ? ( -
- onOwnerChanged(r)} - selected={filter.owner} - > -
- ) : null} -
- onStatusFilterChanged(r)} - selected={filter.status_filter} - > -
-
- onPageChanged(page)} - > - onSortChanged(b)} - buttons={[ - { label: "Date", field: "created_at" }, - { label: "Name", field: "title" }, - // { label: 'Popularity', field: 'liked' }, - ]} - > -
-
- ); -} diff --git a/components/Hack-R-Play/IdeaFilter.tsx b/components/Hack-R-Play/IdeaFilter.tsx new file mode 100644 index 00000000..13f48b04 --- /dev/null +++ b/components/Hack-R-Play/IdeaFilter.tsx @@ -0,0 +1,92 @@ +import React, { useState, useEffect } from 'react'; + +import Pagination from '@/components/Pagination'; +import SortButtons from '@/components/SortButtons'; +import OwnerFilter from '@/components/OwnerFilter'; +import StatusFilter from '../StatusFilter'; + +export default function IdeaFilters({ total, pagesize, onChange, isAuthenticated }) { + const [filter, setFilter] = useState({}); + + useEffect(() => {}, [total]); + + const resetFilter = () => { + filter.sort_col = 'created_at'; + filter.sort_asc = true; + filter.page = 1; + filter.owner = 'all'; + filter.pagesize = pagesize; + filter.status_filter = undefined; + return filter; + }; + + const onPageChanged = (index) => { + const fl = resetFilter(); + fl.page = index; + setFilter({ ...fl }); + invokeChange(fl); + }; + + const onOwnerChanged = (owner) => { + const fl = resetFilter(); + + fl.owner = owner; + setFilter({ ...fl }); + invokeChange(fl); + }; + + const onSortChanged = (button) => { + const fl = resetFilter(); + fl.sort_col = button.field; + fl.sort_asc = button.asc; + setFilter({ ...fl }); + invokeChange(fl); + }; + + const onStatusFilterChanged = (status) => { + const fl = resetFilter(); + fl.status_filter = status; + setFilter({ ...fl }); + invokeChange(fl); + }; + + const invokeChange = (filter) => { + if (onChange) { + onChange(filter); + } + }; + + return ( +
+ {isAuthenticated ? ( +
+ onOwnerChanged(r)} + selected={filter.owner} + > +
+ ) : null} +
+ onStatusFilterChanged(r)} + selected={filter.status_filter} + > +
+
+ onPageChanged(page)} + > + onSortChanged(b)} + buttons={[ + { label: 'Date', field: 'created_at' }, + { label: 'Name', field: 'title' } + // { label: 'Popularity', field: 'liked' }, + ]} + > +
+
+ ); +} diff --git a/components/Hack-R-Play/index.js b/components/Hack-R-Play/index.js deleted file mode 100644 index 7059df04..00000000 --- a/components/Hack-R-Play/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import Hero from "../common/Hero"; -import About from "../common/About"; -import ChallengesAndPrizes from "../common/ChallengesAndPrizes"; -import Judges from "../common/Judges"; -import Partners from "../common/Partners"; -import CTA from "../common/CTA"; -import FAQs from "../common/FAQs"; - -export { Hero, About, ChallengesAndPrizes, Judges, Partners, CTA, FAQs }; diff --git a/components/Hack-R-Play/index.tsx b/components/Hack-R-Play/index.tsx new file mode 100644 index 00000000..ff8afc9d --- /dev/null +++ b/components/Hack-R-Play/index.tsx @@ -0,0 +1,9 @@ +import Hero from '../common/Hero'; +import About from '../common/About'; +import ChallengesAndPrizes from '../common/ChallengesAndPrizes'; +import Judges from '../common/Judges'; +import Partners from '../common/Partners'; +import CTA from '../common/CTA'; +import FAQs from '../common/FAQs'; + +export { Hero, About, ChallengesAndPrizes, Judges, Partners, CTA, FAQs }; diff --git a/components/Header.js b/components/Header.js deleted file mode 100644 index 3e24ab4d..00000000 --- a/components/Header.js +++ /dev/null @@ -1,102 +0,0 @@ -import { useState } from "react"; -import Link from "next/link"; -import Image from "next/image"; -import { useRouter } from "next/router"; -import { AiOutlineMenu, AiOutlineClose } from "react-icons/ai"; - -const MobileHeader = ({ links, setMobileActive, redirectToRegistration }) => { - return ( - <> -
-
- -
- - -
- - ); -}; - -const Header = ({ links, metainfo, secondary = false }) => { - const [mobileActive, setMobileActive] = useState(false); - const router = useRouter(); - const redirectToRegistration = () => { - router.push("/hackrplay/2022/registration"); - }; - - return ( - <> - {secondary ? ( -
-
- - - Navbar Logo - - -
-
- ) : ( -
-
- {links && - links.map((link, index) => ( - - {link.href.includes("http") ? ( - - {link.name} - - ) : ( - - {link.name} - - )} - - ))} -
- -
- )} - {!secondary && mobileActive && ( - - )} - - ); -}; - -export default Header; diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 00000000..b5ba882f --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,102 @@ +import { useState } from 'react'; +import Link from 'next/link'; +import Image from 'next/image'; +import { useRouter } from 'next/router'; +import { AiOutlineMenu, AiOutlineClose } from 'react-icons/ai'; + +const MobileHeader = ({ links, setMobileActive, redirectToRegistration }) => { + return ( + <> +
+
+ +
+ + +
+ + ); +}; + +const Header = ({ links, metainfo, secondary = false }) => { + const [mobileActive, setMobileActive] = useState(false); + const router = useRouter(); + const redirectToRegistration = () => { + router.push('/hackrplay/2022/registration'); + }; + + return ( + <> + {secondary ? ( +
+
+ + + Navbar Logo + + +
+
+ ) : ( +
+
+ {links && + links.map((link, index) => ( + + {link.href.includes('http') ? ( + + {link.name} + + ) : ( + + {link.name} + + )} + + ))} +
+ +
+ )} + {!secondary && mobileActive && ( + + )} + + ); +}; + +export default Header; diff --git a/components/Ideas/Card.js b/components/Ideas/Card.js deleted file mode 100644 index 8707eeec..00000000 --- a/components/Ideas/Card.js +++ /dev/null @@ -1,129 +0,0 @@ -import Image from 'next/image'; -import { FiThumbsUp } from 'react-icons/fi'; -import { BiComment } from 'react-icons/bi'; -import { Grid, Card, Typography } from '@mui/material'; - -import NotStarted from '/public/Idea-List/notStart.svg'; -import InProgress from '/public/Idea-List/inProgress.svg'; -import Complted from '/public/Idea-List/completed.svg'; -import styles from '../../styles/idea.module.css'; - -const IdeaCard = ({ data, onClick }) => { - const get_status_style = (status) => { - const final_status = status || { label: 'Idea Submitted' }; - switch (final_status.label) { - case 'Completed': - return { - image: Complted, - color: '#68FDC6', - }; - case 'In Progress': - return { - image: InProgress, - color: '#FDC668', - }; - case 'Idea Submitted': - default: - return { - image: NotStarted, - color: '#FD6868', - }; - } - }; - return ( - onClick()}> - - - - {data.title} - - -
- - {`status - - - {data?.status?.label.toUpperCase() || - 'IDEA SUBMITTED'} - - -
- -
- {data.description} -
- -
-
- {data.avatarUrl.map((value, index) => { - return ( -
- {value && ( - {'user - )} -
- ); - })} -
-
-
-
- {' '} - -
- {data.like_count} -
-
-
- -
- {data.comment_count} -
-
-
- - - ); -}; -export default IdeaCard; diff --git a/components/Ideas/Card.tsx b/components/Ideas/Card.tsx new file mode 100644 index 00000000..d6b1c49f --- /dev/null +++ b/components/Ideas/Card.tsx @@ -0,0 +1,117 @@ +import Image from 'next/image'; +import { FiThumbsUp } from 'react-icons/fi'; +import { BiComment } from 'react-icons/bi'; +import { Grid, Card, Typography } from '@mui/material'; + +import NotStarted from '/public/Idea-List/notStart.svg'; +import InProgress from '/public/Idea-List/inProgress.svg'; +import Complted from '/public/Idea-List/completed.svg'; +import styles from '../../styles/idea.module.css'; + +const IdeaCard = ({ data, onClick }) => { + const get_status_style = (status) => { + const final_status = status || { label: 'Idea Submitted' }; + switch (final_status.label) { + case 'Completed': + return { + image: Complted, + color: '#68FDC6' + }; + case 'In Progress': + return { + image: InProgress, + color: '#FDC668' + }; + case 'Idea Submitted': + default: + return { + image: NotStarted, + color: '#FD6868' + }; + } + }; + return ( + onClick()}> + + + + {data.title} + + +
+ + {`status + + + {data?.status?.label.toUpperCase() || 'IDEA SUBMITTED'} + + +
+ +
+ {data.description} +
+ +
+
+ {data.avatarUrl.map((value, index) => { + return ( +
+ {value && ( + {'user + )} +
+ ); + })} +
+
+
+
+ {' '} + +
+ {data.like_count} +
+
+
+ +
+ {data.comment_count} +
+
+
+ + + ); +}; +export default IdeaCard; diff --git a/components/Layout.js b/components/Layout.js deleted file mode 100644 index 9eb70573..00000000 --- a/components/Layout.js +++ /dev/null @@ -1,91 +0,0 @@ -import React, { useEffect, useState } from "react"; -import Head from "next/head"; -import { useRouter } from "next/router"; - -import Footer from "./Footer"; -import Header from "./Header"; -import Script from "next/script"; - -const Layout = ({ children, title, description, metainfo }) => { - const currentPath = useRouter().pathname; - const [secondaryNavbar, setSecondaryNavbar] = useState(false); - const [loading, setLoading] = useState(true); - - useEffect(() => { - if ( - currentPath === "/events/22/hackrplay" || - currentPath === "/events/23/twoplaysamonth" || - currentPath === "/" - ) { - setSecondaryNavbar(false); - } else { - setSecondaryNavbar(true); - } - if (metainfo?.name) { - setLoading(false); - } - }, []); - - return ( - <> - {!loading ? ( -
- - {title} - - - - - - - - - - - - - - - - - - - - - - -