From 220193b7370399acd4b795947274b8d8f881ac9b Mon Sep 17 00:00:00 2001 From: MuntazirHaider Date: Wed, 16 Aug 2023 17:21:47 +0530 Subject: [PATCH 01/10] Setup Husky --- lint-staged.config.js | 3 +++ package.json | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 lint-staged.config.js diff --git a/lint-staged.config.js b/lint-staged.config.js new file mode 100644 index 00000000..7fdb8588 --- /dev/null +++ b/lint-staged.config.js @@ -0,0 +1,3 @@ +module.exports = { + '**/*': ['npm run lint', 'npm run format', 'git add'], + }; \ No newline at end of file diff --git a/package.json b/package.json index 4ec2f6d5..450a65e7 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,8 @@ "version": "0.0.0", "type": "module", "scripts": { + "lint": "eslint .", + "format": "prettier --write .", "dev": "vite", "build": "vite build", "preview": "vite preview", @@ -12,7 +14,10 @@ "prettier:write": "npx prettier --write .", "cy:run": "cypress run --headless --browser chrome", "cy:open": "cypress open --browser chrome", - "test": "start-server-and-test dev http://localhost:5173 cy:run" + "test": "start-server-and-test dev http://localhost:5173 cy:run", + "emulator-import": "firebase emulators:start --import=testdata", + "emulator": "firebase emulators:start", + "emulator-export": "firebase emulators:export" }, "dependencies": { "@ant-design/icons": "^4.2.2", @@ -86,8 +91,16 @@ "@vitejs/plugin-react-swc": "^3.0.0", "common-tags": "^1.8.2", "cypress": "^12.3.0", + "husky": "^8.0.3", "less": "^4.1.3", + "lint-staged": "^14.0.0", "vite": "^4.0.0", "webpack": "^4.46.0" + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } } + } From 02c289d440c601c6923a101dce2758148279a0ea Mon Sep 17 00:00:00 2001 From: MuntazirHaider Date: Wed, 16 Aug 2023 18:05:08 +0530 Subject: [PATCH 02/10] setup husky and modify documentation --- CONTRIBUTING.md | 43 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d61909c4..841a64c4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -32,10 +32,11 @@ 6. Create a `.env` file in root of directory. 7. Setup firebase and get your own set of keys. ( follow steps in [Firebase Setup](#firebase-setup) section to setup firebase ) 8. Copy all the key fields from `.env.sample` and place your own set of values there. -9. Run `npm run dev`. -10. Visit [http://127.0.0.1:5173/](http://127.0.0.1:5173/) in your preferred browser. +9. Setup husky ( follow steps in [Husky Setup](#husky-setup) section to setup firebase ) +10. Run `npm run dev`. +11. Visit [http://127.0.0.1:5173/](http://127.0.0.1:5173/) in your preferred browser. ->πŸ“**NOTE** : Above steps are enough for you to get started with the Codelabz app. If you want to access the database you need to start the emulators. +>πŸ“**NOTE** : Above steps are enough for you to get started with the Codelabz app. If you want to access the database you need to start the emulators.For setup husky follow [Husky Setup](#husky-setup) ### Using Docker-Compose You can also use docker-compose to setup your project. Simply create your `.env` file and run @@ -49,6 +50,42 @@ This will setup your project along with firebase emulator in a docker environmen +## Husky Setup + +1.install Husky and lint-staged by running the following command +``` +npm install husky lint-staged --save-dev +``` +2. create lint-staged.config.js file in root directory and add following code +``` +module.exports = { + '**/*': ['npm run lint', 'npm run format', 'git add'], +}; + +``` +3.Modify package.json file according to the code given below +``` +{ + "name": "your-project-name", + "version": "version", + "dependencies": { + // your dependencies + }, + "scripts": { + "lint": "eslint .", + "format": "prettier --write .", + // ... other scripts + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + } +} + +``` + + ## Firebase Setup 1. Sign in to https://console.firebase.google.com/. From 46c5676e250ca4f5b760bf272f0e98ca19765c54 Mon Sep 17 00:00:00 2001 From: MuntazirHaider Date: Sun, 20 Aug 2023 15:27:07 +0530 Subject: [PATCH 03/10] Final Commit For Husky --- .eslintrc.cjs | 16 + .github/ISSUE_TEMPLATE/bug_report.md | 24 +- .github/ISSUE_TEMPLATE/feature_request.md | 7 +- .github/PULL_REQUEST_TEMPLATE.md | 8 + .husky/pre-commit | 6 + CONTRIBUTING.md | 104 +- ISSUE_TEMPLATE/Bug_Report.md | 15 +- ISSUE_TEMPLATE/Feature_Request.md | 7 +- README.md | 40 +- TESTDATA.md | 2 + code_of_conduct.md | 37 +- cypress.config.js | 7 +- cypress/e2e/authed_tests/visit_routes.cy.js | 20 +- .../auth/forgotPassword/forgotpassword.cy.js | 4 +- .../e2e/components/auth/logout/logout.cy.js | 28 +- .../e2e/components/auth/signup/signup.cy.js | 4 +- .../e2e/components/codefeed/codefeed.cy.js | 4 +- cypress/e2e/components/editor/editor.cy.js | 73 +- .../e2e/components/errorPage/errorPage.cy.js | 14 +- .../components/hamburgermenu/hamburger.cy.js | 31 +- .../e2e/components/homepage/homepage.cy.js | 3 +- .../organization/organization.cy.js | 11 +- .../e2e/components/profile/SocialIcons.cy.js | 1 - cypress/e2e/components/profile/profile.cy.js | 5 +- .../components/profile/user-dashboard.cy.js | 198 +- .../e2e/components/tutorials/tutorial.cy.js | 6 +- cypress/e2e/unauthed_test/login.spec.cy.js | 4 +- .../e2e/unauthed_test/visit_routes.spec.cy.js | 2 +- cypress/plugins/index.js | 2 +- cypress/support/commands.js | 2 +- cypress/support/e2e.js | 4 +- cypress/unused/cards/CardWithPicture.cy.js | 28 +- cypress/unused/cards/CardWithoutPicture.cy.js | 26 +- cypress/unused/cards/cardtabs.cy.js | 78 +- cypress/unused/dashboard/dashboard.cy.js | 58 +- database.rules.json | 10 +- firebase.json | 10 +- firestore.indexes.json | 6 +- functions/.eslintrc.json | 8 +- .../cloud_functions/onUpdateFunctions.js | 8 +- functions/cloud_functions/pubSubFunctions.js | 6 +- index.html | 26 +- less.config.js | 14 +- lint-staged.config.js | 3 - old_README.md | 121 +- old_local-firebase-emulators-import-export.md | 16 +- package.json | 9 +- remoteconfig.template.json | 2 +- rule_sets.md | 13 +- src/App.jsx | 26 +- src/App.less | 732 +++---- .../AuthPage/ForgotPassword/index.jsx | 280 +-- src/components/AuthPage/Login/ViewAlerts.jsx | 143 +- src/components/AuthPage/Login/styles.jsx | 20 +- src/components/AuthPage/SignUp/index.jsx | 122 +- src/components/AuthPage/SignUp/styles.jsx | 20 +- src/components/AuthPage/index.jsx | 67 +- .../AuthPage/smButton/smButtons.jsx | 109 +- src/components/AuthPage/smButton/styles.jsx | 72 +- src/components/CardTabs/Events/index.jsx | 136 +- src/components/CardTabs/Tags/index.jsx | 121 +- src/components/CardTabs/Users/UserElement.jsx | 107 +- src/components/CardTabs/Users/index.jsx | 93 +- src/components/CodelabCard/index.jsx | 344 +-- src/components/CodelabCard/styles.jsx | 204 +- src/components/Dashboard/index.jsx | 1184 ++++++----- src/components/Editor/UserList.jsx | 5 +- src/components/ErrorPages/404.jsx | 201 +- src/components/Footer/index.jsx | 349 +-- src/components/FooterLinks/index.jsx | 78 +- src/components/Forms/UserAccount/styles.jsx | 44 +- src/components/Forms/UserEmail/index.jsx | 175 +- src/components/Forms/UserEmail/styles.jsx | 70 +- src/components/Forms/UserForm/styles.jsx | 120 +- src/components/Forms/UserPassword/styles.jsx | 80 +- src/components/Home/index.jsx | 497 ++--- src/components/HomePage/index.jsx | 615 +++--- src/components/HomePage/styles.jsx | 186 +- src/components/HomePage/userList.jsx | 2 +- .../ResetPassword/PasswordResetForm.jsx | 228 +- .../ManageUsers/ResetPassword/index.jsx | 135 +- .../ManageUsers/VerifyEmail/index.jsx | 143 +- src/components/MyFeed/Carousel/styles.jsx | 180 +- src/components/MyFeed/ExploreOrgs.jsx | 240 ++- src/components/MyFeed/index.jsx | 76 +- .../NavBar/_old/MainNavbar/LeftMenu.jsx | 51 +- .../NavBar/_old/MainNavbar/index.jsx | 182 +- .../NavBar/_old/MiniNavbar/index.jsx | 131 +- .../NavBar/new/MainNavbar/LeftMenu.jsx | 133 +- .../NavBar/new/MainNavbar/index.jsx | 247 +-- .../NavBar/new/MiniNavbar/index.jsx | 59 +- .../Notification/NotificationBox.jsx | 9 +- src/components/Notification/index.jsx | 6 +- .../OrgInfoCard/editOrgDetailsModal.jsx | 436 ++-- .../Organization/OrgInfoCard/orgInfoCard.jsx | 774 +++---- .../Organization/OrgInfoCard/styles.jsx | 20 +- .../OrgSidebar/createOrgModal.jsx | 286 +-- .../Organization/OrgSidebar/orgIcons.jsx | 115 +- .../Organization/OrgSidebar/orgSidebar.jsx | 20 +- .../Organization/OrgUsers/OrgDelete.jsx | 163 +- .../Organization/OrgUsers/OrgDeleteModal.jsx | 148 +- .../Organization/OrgUsers/OrgUsers.jsx | 327 +-- .../OrgUsersCard/addOrgUserModal.jsx | 292 +-- .../OrgUsersCard/orgUsersCard.jsx | 677 +++--- .../OrganizationSocials/index.jsx | 110 +- .../OrganizationSocials/styles.jsx | 172 +- .../Organization/Orgsocial/index.jsx | 190 +- .../Organization/Orgsocial/styles.jsx | 206 +- .../Organization/ViewOrganization/About.jsx | 297 +-- .../Organization/ViewOrganization/Feeds.jsx | 108 +- .../ViewOrganization/_old_index.jsx | 680 +++--- src/components/Organization/index_old.jsx | 117 +- .../Organization/pages/Passwords.jsx | 163 +- .../Organization/pages/Socialmedia.jsx | 34 +- src/components/Organization/pages/Users.jsx | 189 +- src/components/Organization/styles.jsx | 8 +- .../Profile/ChangeProfile/ChangeProfile.jsx | 391 ++-- .../Profile/ConnectSocials/styles.jsx | 202 +- .../Profile/Organizations/styles.jsx | 230 +- .../editProfileDetailsModal.jsx | 805 +++---- .../Profile/ProfileInfoCard/index.jsx | 876 ++++---- .../Profile/SocialIcons/SocialIcons.jsx | 103 +- .../Profile/SwitchAccount/SwitchAccount.jsx | 267 +-- src/components/Profile/ViewProfile/index.jsx | 634 +++--- src/components/Profile/index_old.jsx | 22 +- .../ProfileBanner/Organization/styles.jsx | 246 +-- .../profile/ProfileCardOne/index.jsx | 237 ++- .../profile/ProfileCardOne/styles.jsx | 286 +-- .../profile/ProfileCardThree/index.jsx | 158 +- .../profile/ProfileCardThree/styles.jsx | 160 +- .../profile/ProfileCardTwo/index.jsx | 106 +- .../profile/ProfileCardTwo/styles.jsx | 98 +- src/components/Topbar/Activity/index.jsx | 94 +- src/components/Topbar/NewCodelabz/index.jsx | 108 +- .../BaseTutorialsComponent/TutorialCard.jsx | 96 +- .../BaseTutorialsComponent/index.jsx | 103 +- .../Search/SearchResultsComponent.jsx | 36 +- .../Tutorials/NewTutorial/index.jsx | 14 +- src/components/Tutorials/index.jsx | 8 +- .../Tutorials/subComps/AddNewStep.jsx | 269 +-- .../Tutorials/subComps/ColorPickerModal.jsx | 178 +- .../Tutorials/subComps/ControlButtons.jsx | 2 +- .../Tutorials/subComps/EditControls.jsx | 28 +- .../Tutorials/subComps/HtmlTextRenderer.jsx | 2 +- .../Tutorials/subComps/ImageDrawer.jsx | 365 ++-- .../Tutorials/subComps/RemoveStepModal.jsx | 153 +- .../Tutorials/subComps/StepsPanel.jsx | 2 +- .../Tutorials/subComps/StepsTitle.jsx | 274 +-- .../User/UserProfile/UserHighlights.jsx | 65 +- .../User/UserProfile/UserProfile.jsx | 204 +- src/components/UserDashboard/styles.jsx | 140 +- src/components/UserDetails/Description.jsx | 78 +- src/components/UserDetails/Highlights.jsx | 115 +- .../ui-helpers/Inputs/PrimaryInput.jsx | 46 +- .../ui-helpers/Inputs/SecondaryInput.jsx | 46 +- src/components/util/CodelabCard/index.jsx | 80 +- src/components/util/CodelabCard/styles.js | 46 +- src/css/Firepad/firepad.css | 126 +- src/css/Searchbar/searchbar.css | 33 +- src/css/codelabz.css | 118 +- src/css/codemirror.css | 436 ++-- src/css/quillEditor.css | 1890 +++++++++-------- src/globalComponents/Divider.jsx | 52 +- src/globalComponents/TabPanel/Contents.jsx | 2 +- src/globalComponents/TabPanel/Tabs.jsx | 6 +- src/helpers/CustomRenderers.jsx | 2 +- src/helpers/_oldappBar.jsx | 471 ++-- src/helpers/appBar.jsx | 184 +- src/helpers/avatarName.jsx | 2 +- src/helpers/countryDropdown.jsx | 66 +- src/helpers/countryList.jsx | 4 +- src/helpers/customHooks/useAllowDashboard.jsx | 4 +- src/helpers/dummyData.jsx | 18 +- src/helpers/emptyTutorials.jsx | 45 +- src/helpers/errorMsgHandler.jsx | 4 +- src/helpers/images.jsx | 46 +- src/helpers/spinner.jsx | 29 +- src/helpers/tutorialTime.jsx | 2 +- src/helpers/userListModifiers.jsx | 2 +- src/index.css | 2 +- src/routes.jsx | 2 +- src/serviceWorker.js | 35 +- src/setupTests.js | 2 +- src/store/actions/authActions.js | 48 +- src/store/actions/index.js | 8 +- src/store/actions/orgActions.js | 66 +- src/store/actions/profileActions.js | 285 ++- src/store/actions/tutorialsActions.js | 499 +++-- .../reducers/authReducer/profileReducer.js | 8 +- .../authReducer/recoverPasswordReducer.js | 16 +- .../authReducer/verifyEmailReducer.js | 10 +- src/store/reducers/orgReducer/dataReducer.js | 8 +- .../reducers/orgReducer/generalReducer.js | 18 +- src/store/reducers/orgReducer/index.js | 12 +- .../orgReducer/launchedOrgsReducer.js | 8 +- src/store/reducers/orgReducer/userReducer.js | 10 +- .../reducers/profileReducer/dataReducer.js | 10 +- .../profileReducer/profileEditReducer.js | 8 +- .../reducers/profileReducer/userReducer.js | 8 +- .../tutorialsReducer/createReducer.js | 8 +- .../tutorialsReducer/currentReducer.js | 8 +- .../reducers/tutorialsReducer/dataReducer.js | 10 +- .../tutorialsReducer/editorReducer.js | 6 +- .../reducers/tutorialsReducer/imageReducer.js | 14 +- src/stories/AuthPage/Login/index.stories.jsx | 12 +- src/stories/AuthPage/Signup/index.stories.jsx | 8 +- src/stories/AuthPage/index.stories.jsx | 10 +- src/stories/Cards/index.stories.jsx | 46 +- .../CodeFeed/ExploreOrg/index.stories.jsx | 10 +- src/stories/CodeFeed/index.stories.jsx | 12 +- src/stories/Dashboard/index.stories.jsx | 12 +- src/stories/Footer/index.stories.jsx | 2 +- .../Forms/UserAccount/index.stories.jsx | 6 +- src/stories/Forms/UserEmail/index.stories.jsx | 6 +- .../Forms/UserPassword/index.stories.jsx | 6 +- src/stories/HomePage/index.stories.jsx | 12 +- .../ManageUsers/VerifyEmail/index.stories.jsx | 2 +- .../AddOrganizationsCard/index.stories.jsx | 4 +- .../Organization/DeleteOrg/index.stories.jsx | 9 +- .../EditOrgCard/index.stories.jsx | 8 +- .../Organization/OrgUsers/index.stories.jsx | 52 +- .../OrgUsersCard/index.stories.jsx | 4 +- .../OrganizationSocials/index.stories.jsx | 8 +- src/stories/Organization/index.stories.jsx | 10 +- .../Profile/ViewProfile/index.stories.jsx | 10 +- .../ProfileCardOne/index.stories.jsx | 6 +- .../ProfileCardThree/indes.stories.jsx | 6 +- .../ProfileCardTwo/index.stories.jsx | 6 +- src/stories/ProfileBanner/index.stories.jsx | 6 +- src/stories/SideBar/index.stories.jsx | 39 +- .../Topbar/AboutFeed/index.stories.jsx | 12 +- src/stories/Topbar/Activity/index.stories.jsx | 4 +- .../Topbar/ActivityList/index.stories.jsx | 14 +- .../Topbar/NewCodeLabz/index.stories.jsx | 4 +- .../Tutorials/BaseTutorials/index.stories.jsx | 10 +- .../Tutorials/MyTutorials/index.stories.jsx | 4 +- .../Tutorials/NewTutorials/index.stories.jsx | 6 +- .../Tutorials/OrgTutorials/index.stories.jsx | 12 +- src/stories/Tutorials/index.stories.jsx | 4 +- .../UserDetails/AboutUsers.stories.jsx | 8 +- .../UserDetails/Description.stories.jsx | 31 +- .../UserDetails/Highlights.stories.jsx | 32 +- testdata/auth_export/accounts.json | 104 +- testdata/auth_export/config.json | 2 +- .../codelabz-966e5-default-rtdb.json | 5 +- testdata/database_export/codelabz-966e5.json | 230 +- .../codelabz-eb407-default-rtdb.json | 5 +- testdata/database_export/codelabz-eb407.json | 47 +- testdata/firebase-export-metadata.json | 2 +- testdata/storage_export/buckets.json | 2 +- vite.config.js | 17 +- 251 files changed, 14204 insertions(+), 13372 deletions(-) create mode 100644 .eslintrc.cjs create mode 100644 .husky/pre-commit delete mode 100644 lint-staged.config.js diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 00000000..2655cb43 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,16 @@ +module.exports = { + env: { + browser: true, + es2021: true + }, + extends: ["eslint:recommended", "plugin:react/recommended"], + parserOptions: { + ecmaFeatures: { + jsx: true + }, + ecmaVersion: 2017, + sourceType: "module" + }, + plugins: ["react"], + rules: {} +}; diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea78..9b77ea71 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -1,10 +1,9 @@ --- name: Bug report about: Create a report to help us improve -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7d..2bc5d5f7 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -1,10 +1,9 @@ --- name: Feature request about: Suggest an idea for this project -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Is your feature request related to a problem? Please describe.** diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index f0b0882b..0746b07c 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,18 +1,22 @@ ## Description + ## Related Issue + ## Motivation and Context + ## How Has This Been Tested? + @@ -20,14 +24,18 @@ ## Screenshots or GIF (In case of UI changes): ## Types of changes + + - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) ## Checklist: + + - [ ] My code follows the code style of this project. - [ ] My change requires a change to the documentation. - [ ] I have updated the documentation accordingly. diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 00000000..13cbda15 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,6 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npm run lint +npm run format + diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 841a64c4..302bc53a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,5 @@ # Table of Content + - [Table of Content](#table-of-content) - [User Guide](#user-guide) - [Prerequisites](#prerequisites) @@ -13,33 +14,35 @@ # User Guide ## Prerequisites + - Node.js version 14. - Java JDK version 11 or higher. (For running emulators) - make command line tool. ( optional ) -> πŸ“**NOTE** : `make` is optional here. You can open `Makefile` and type the associated command manually also, but it is recommended to use `make` so you don't need to run multiple commands. -> - + > πŸ“**NOTE** : `make` is optional here. You can open `Makefile` and type the associated command manually also, but it is recommended to use `make` so you don't need to run multiple commands. ## Project Setup + > πŸ“**NOTE**: Make sure that you are using version 14 of node. > ⚑**Tip**: You can use nvm (node version manager) tool to install multiple node versions and can switch between them easily. + 1. Fork the repo as your own copy. 2. Click on `Code` button and then copy HTTPs link. ( it will look like this `https://github.com//Codelabz.git`) 3. Clone the repo by running `git clone https://github.com//Codelabz.git` 4. Go to the folder `cd Codelabz`. 5. Run `npm install` or `make install`( this will install all the dependencies in your project) -6. Create a `.env` file in root of directory. +6. Create a `.env` file in root of directory. 7. Setup firebase and get your own set of keys. ( follow steps in [Firebase Setup](#firebase-setup) section to setup firebase ) 8. Copy all the key fields from `.env.sample` and place your own set of values there. -9. Setup husky ( follow steps in [Husky Setup](#husky-setup) section to setup firebase ) -10. Run `npm run dev`. -11. Visit [http://127.0.0.1:5173/](http://127.0.0.1:5173/) in your preferred browser. +9. Run `npm run dev`. +10. Visit [http://127.0.0.1:5173/](http://127.0.0.1:5173/) in your preferred browser. ->πŸ“**NOTE** : Above steps are enough for you to get started with the Codelabz app. If you want to access the database you need to start the emulators.For setup husky follow [Husky Setup](#husky-setup) +> πŸ“**NOTE** : Above steps are enough for you to get started with the Codelabz app. If you want to access the database you need to start the emulators.For setup husky follow [Husky Setup](#husky-setup) ### Using Docker-Compose -You can also use docker-compose to setup your project. Simply create your `.env` file and run + +You can also use docker-compose to setup your project. Simply create your `.env` file and run + ``` docker-compose up ``` @@ -50,74 +53,38 @@ This will setup your project along with firebase emulator in a docker environmen -## Husky Setup - -1.install Husky and lint-staged by running the following command -``` -npm install husky lint-staged --save-dev -``` -2. create lint-staged.config.js file in root directory and add following code -``` -module.exports = { - '**/*': ['npm run lint', 'npm run format', 'git add'], -}; - -``` -3.Modify package.json file according to the code given below -``` -{ - "name": "your-project-name", - "version": "version", - "dependencies": { - // your dependencies - }, - "scripts": { - "lint": "eslint .", - "format": "prettier --write .", - // ... other scripts - }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - } -} - -``` - - ## Firebase Setup 1. Sign in to https://console.firebase.google.com/. -2. Click **Add Project** and necessary information about the project.(Below mentioned the Steps to add project to firebase) - - To add Firebase resources to an existing Google Cloud project, enter its project name or select it from the dropdown menu. - - To create a new project, enter the desired project name. You can also optionally edit the project ID displayed below the project name - - Firebase generates a unique ID for your Firebase project based upon the name you give it. If you want to edit this project ID, you must do it now as it cannot be altered after Firebase provisions resources for your project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID. +2. Click **Add Project** and necessary information about the project.(Below mentioned the Steps to add project to firebase) + - To add Firebase resources to an existing Google Cloud project, enter its project name or select it from the dropdown menu. + - To create a new project, enter the desired project name. You can also optionally edit the project ID displayed below the project name + - Firebase generates a unique ID for your Firebase project based upon the name you give it. If you want to edit this project ID, you must do it now as it cannot be altered after Firebase provisions resources for your project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID. 3. Agree to the terms and click **Create Project**. 4. After creating the project, click **Add Firebase to your web app**. - - In the center of the Firebase console's project overview page, click the Web icon to launch the setup workflow. - - If you've already added an app to your Firebase project, click Add app to display the platform options. - - Enter your app's nickname. - - This nickname is an internal, convenience identifier and is only visible to you in the Firebase console. - - Click Register app. + - In the center of the Firebase console's project overview page, click the Web icon to launch the setup workflow. + - If you've already added an app to your Firebase project, click Add app to display the platform options. + - Enter your app's nickname. + - This nickname is an internal, convenience identifier and is only visible to you in the Firebase console. + - Click Register app. 5. Copy the firebase configuration. 6. Follow the below steps to setup firebase functions - - Go to functions directory (`cd functions`) and install dependencies (`npm install`) - - Create a folder `private` inside functions directory - - Then you have to generate a private key file for your service account. Follow the below steps to get private key: - 1. In the Firebase console, open Settings > Service Accounts. - 2. Click Generate New Private Key, then confirm by clicking Generate Key. - 3. Securely store the JSON file containing the key and rename it to `cl-dev-pk.json` - 4. Move the `cl-dev-pk.json` to `Codelabz/functions/private` + - Go to functions directory (`cd functions`) and install dependencies (`npm install`) + - Create a folder `private` inside functions directory + - Then you have to generate a private key file for your service account. Follow the below steps to get private key: + 1. In the Firebase console, open Settings > Service Accounts. + 2. Click Generate New Private Key, then confirm by clicking Generate Key. + 3. Securely store the JSON file containing the key and rename it to `cl-dev-pk.json` + 4. Move the `cl-dev-pk.json` to `Codelabz/functions/private` 7. Paste the configuration `.env` file. **(this will be found in the project settings section of firebase cloud)** -8. You can find your `` in the Realtime Database section of the Firebase console. Depending on the location of the database, the database URL will be in one of the following forms: - - `https://DATABASE_NAME.firebaseio.com` **(for databases in us-central1)** - - `https://DATABASE_NAME.REGION.firebasedatabase.app`**(for databases in all other locations)** +8. You can find your `` in the Realtime Database section of the Firebase console. Depending on the location of the database, the database URL will be in one of the following forms: + - `https://DATABASE_NAME.firebaseio.com` **(for databases in us-central1)** + - `https://DATABASE_NAME.REGION.firebasedatabase.app`**(for databases in all other locations)** 9. You can get your `` from Cloud-Messaging tab - - navigate to the setting of your project Open the Cloud Messaging tab. - - scroll to the Web configuration section. - - In the Web Push certificates tab, click Generate Key Pair. The console displays a notice that the key pair was generated. You get your Vapid key form there. -10. As you're using emulator, set `` to "true" + - navigate to the setting of your project Open the Cloud Messaging tab. + - scroll to the Web configuration section. + - In the Web Push certificates tab, click Generate Key Pair. The console displays a notice that the key pair was generated. You get your Vapid key form there. +10. As you're using emulator, set `` to "true" 11. You can get your `` as cypress project id from [cypress cloud](https://cloud.cypress.io) You should fill in these values in their relevant fields in the `.env` file. @@ -129,6 +96,7 @@ Run your firebase emulator by running the following command. ``` make emulator-import ``` + This will run the emulator with the `testdata`. Check out [TESTDATA.md](./TESTDATA.md) for more info. if you don't want to import testdata, run diff --git a/ISSUE_TEMPLATE/Bug_Report.md b/ISSUE_TEMPLATE/Bug_Report.md index a5f89d1f..b0b6ecfa 100644 --- a/ISSUE_TEMPLATE/Bug_Report.md +++ b/ISSUE_TEMPLATE/Bug_Report.md @@ -1,10 +1,9 @@ --- name: Bug report about: Create a report to help us improve -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,9 +24,10 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Device Information (please complete the following information):** - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. diff --git a/ISSUE_TEMPLATE/Feature_Request.md b/ISSUE_TEMPLATE/Feature_Request.md index bbcbbe7d..2bc5d5f7 100644 --- a/ISSUE_TEMPLATE/Feature_Request.md +++ b/ISSUE_TEMPLATE/Feature_Request.md @@ -1,10 +1,9 @@ --- name: Feature request about: Suggest an idea for this project -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Is your feature request related to a problem? Please describe.** diff --git a/README.md b/README.md index 735b1743..b66205b8 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,25 @@ # Table of Content πŸ“‘ + 1. [CodeLabz](#codelabz) 2. [Deployment](#deployment) 3. [Community](#community) 4. [Contribute](#contribute) -5. [FAQs (Frequently Asked Questions)](#faqs) +5. [FAQs (Frequently Asked Questions)](#faqs) + +# CodeLabz -# CodeLabz **CodeLabz** is a platform where the users can engage with online tutorials and the organizations can create tutorials for the users. The platform will be developed using ReactJS frontend library and the backend will be developed using the Google Cloud Firestore and Google Firebase Real-Time database. -# Deployment +# Deployment + You can see the app live at [https://dev.codelabz.io/](https://dev.codelabz.io/) # Community + Join and communicate with other members on our community. We communicate on gitter. [![Gitter](https://badges.gitter.im/scorelab/CodeLabz.svg)](https://gitter.im/scorelab/CodeLabz?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) - + # Contribute Contributions are always welcome! @@ -27,60 +31,74 @@ Please adhere to this project's [code of conduct](./code_of_conduct.md). # FAQs ### 1. Do I need to purchase Blaze plan to run the app ? + ### Answer - - No, you don't need to purchase Blaze plan to run the app. You need to purchase it only if you want to deploy firebase cloud functions. + +No, you don't need to purchase Blaze plan to run the app. You need to purchase it only if you want to deploy firebase cloud functions. +
### 2. `npm install` command is not executing successfully in my system. + ### Answer - - First of all make sure that your are using version 14 of node. If the problem still persists try `npm install --legacy-peer-deps`. + +First of all make sure that your are using version 14 of node. If the problem still persists try `npm install --legacy-peer-deps`. +
### 3. Login/Signup is not working. + ### Solution :- + This problem generally arises when you have not setuped/started the Firebase emulators. -1. [Setup firebase emulator](#install-configure-and-integrate-firebase-emulator-suite). +1. [Setup firebase emulator](#install-configure-and-integrate-firebase-emulator-suite). 2. [Start the Emulators](#to-start-the-emulators-) 3. Run the app using `npm run dev`. ->πŸ“**NOTE** : Remember to start the emulators before running the app. +> πŸ“**NOTE** : Remember to start the emulators before running the app. - To start emulators - `firebase emulators:start --import=firebase.json --project `.
- In some case all the emulator will not start. So you can execute a separate command for a particular emulator
- For example if auth emulator is not starting you can use this command -
`firebase emulators:start --import=firebase.json --project --only auth`. +For example if auth emulator is not starting you can use this command -
`firebase emulators:start --import=firebase.json --project --only auth`.
### 4. I am creating new account and it says that confirmation mail is sent to my email but I didn't got any mail. ### Answer :- + This feature is not implemented completely and we are currently working on this. If you still want to login/signup, you can try login/signup with google option. +
### 5. I have done the environment setup, but when I start the app it is showing white/blank screen. ### Solution :- + This problem can arise in multiple scenarios :- + 1. Check the browser console and see what error are you getting there and try to fix it. 2. Make sure that you have created `.env` file and placed all values to the keys. 3. In some cases it can also arise due to any active ad-blocker extension in your browser. So make sure to turn it off.
### 6. make command not found + ![image](https://user-images.githubusercontent.com/88550925/224977291-25101480-608b-41e6-a0b6-f03ff23f66b4.png) -### Solution :- +### Solution :- + The Make Command Not Found error indicates that the make utility is either not installed on the system or it’s not present in the PATH variable. Follow this link to fix this issue. [Click here](https://www.technewstoday.com/fix-make-command-not-found/) - ### 7. I want to contribute but don't know where to start. ### Answer :- + 1. First of all try to make yourself comfortable with the app and explore its functionalities. 2. Have a look into issues that are already raised and are not assigned to anyone and ask the mentors to get it assigned it to you. 3. If you want to work on a new issue, first try to discuss it in the gitter channel with the mentors and then raise the issue. diff --git a/TESTDATA.md b/TESTDATA.md index 795b1383..d2f3df7e 100644 --- a/TESTDATA.md +++ b/TESTDATA.md @@ -1,5 +1,7 @@ # TESTDATA + Located at `./testdata`. + ```mermaid flowchart TB sougatarmail("Email Pass Login \n \n sougatariju13@gmail.com \n\n Pass : 123456 ") diff --git a/code_of_conduct.md b/code_of_conduct.md index a1794257..94b91883 100644 --- a/code_of_conduct.md +++ b/code_of_conduct.md @@ -1,39 +1,40 @@ # Contributing When contributing to this repository, please first discuss the change you wish to make via issue, -email or any other method with the owners of this repository before making a change. +email or any other method with the owners of this repository before making a change. Please note we have a code of conduct, please follow it in all your interactions with the project. ## Pull Request Process -* Ensure any install or build dependencies are removed before the end of the layer when doing a build. +- Ensure any install or build dependencies are removed before the end of the layer when doing a build. -* ___Pull request message format: [Fixes done] #[issue number] [Description of the issue]___ -* Wait for the maintainers to review your pull request and do the changes if requested. +- **_Pull request message format: [Fixes done] #[issue number] [Description of the issue]_** +- Wait for the maintainers to review your pull request and do the changes if requested. ## Best Contribution Practices **Commits** -* Write clear meaningful git commit messages. -* Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged. (More info at https://github.com/blog/1506-closing-issues-via-pull-requests ) -* When you're submitting a PR for a UI-related issue, it would be really awesome if you add a screenshot of your change or a link to a deployment where it can be tested out along with your PR. This makes it very easy for the reviewers and you'll also get reviews quicker. + +- Write clear meaningful git commit messages. +- Make sure your PR's description contains GitHub's special keyword references that automatically close the related issue when the PR is merged. (More info at https://github.com/blog/1506-closing-issues-via-pull-requests ) +- When you're submitting a PR for a UI-related issue, it would be really awesome if you add a screenshot of your change or a link to a deployment where it can be tested out along with your PR. This makes it very easy for the reviewers and you'll also get reviews quicker. **Feature Requests and Bug Reports** -* When you file a feature request or when you are submitting a bug report, make sure you add steps to reproduce it. Especially if that bug is some weird/rare one. -* ___Please follow the templates when posting a issue.___ +- When you file a feature request or when you are submitting a bug report, make sure you add steps to reproduce it. Especially if that bug is some weird/rare one. - * Feature_Request / Bug_Report - [includes in repository] +- **_Please follow the templates when posting a issue._** - * Would you like to work on the issue? - * [X] Yes - * [ ] No - * [ ] Other: + - Feature_Request / Bug_Report - [includes in repository] + - Would you like to work on the issue? + - [x] Yes + - [ ] No + - [ ] Other: **Join the development** -* Before you join development, please set up the project on your local machine, run it and go through the application completely. -* If you would like to work on an issue, drop in a comment at the issue. If it is already assigned to someone, but there is no sign of any work being done, please free to drop in a comment so that the issue can be assigned to you if the previous assignee has dropped it entirely. -* Feel free to Ask Anything! 😎 [Gitter]:https://gitter.im/scorelab/ - [homepage]:https://github.com/scorelab/ +- Before you join development, please set up the project on your local machine, run it and go through the application completely. +- If you would like to work on an issue, drop in a comment at the issue. If it is already assigned to someone, but there is no sign of any work being done, please free to drop in a comment so that the issue can be assigned to you if the previous assignee has dropped it entirely. +- Feel free to Ask Anything! 😎 [Gitter]:https://gitter.im/scorelab/ + [homepage]:https://github.com/scorelab/ diff --git a/cypress.config.js b/cypress.config.js index bafe9561..74e60379 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -1,13 +1,12 @@ -import { defineConfig } from 'cypress'; - +import { defineConfig } from "cypress"; export default defineConfig({ e2e: { setupNodeEvents(on, config) { // implement node event listeners here }, - baseUrl: 'http://localhost:5173', - testIsolation: false, + baseUrl: "http://localhost:5173", + testIsolation: false }, projectId: process.env.CYPRESS_PROJECT_ID }); diff --git a/cypress/e2e/authed_tests/visit_routes.cy.js b/cypress/e2e/authed_tests/visit_routes.cy.js index a1bb5dc7..79d76e00 100644 --- a/cypress/e2e/authed_tests/visit_routes.cy.js +++ b/cypress/e2e/authed_tests/visit_routes.cy.js @@ -25,7 +25,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { cy.visit(`${this.base_url}login`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); }); @@ -34,7 +34,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { cy.visit(`${this.base_url}signup`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); }); @@ -43,7 +43,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { cy.visit(`${this.base_url}forgotpassword`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); }); @@ -52,7 +52,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { cy.visit(`${this.base_url}manageusers`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}`); }); }); @@ -61,7 +61,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { cy.visit(`${this.base_url}dashboard`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); }); @@ -70,7 +70,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { cy.visit(`${this.base_url}dashboard/my_feed`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); }); @@ -79,7 +79,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { cy.visit(`${this.base_url}profile`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}profile`); }); }); @@ -88,7 +88,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { cy.visit(`${this.base_url}org/codelabzorg`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}org/codelabzorg`); }); }); @@ -97,7 +97,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { cy.visit(`${this.base_url}tutorials`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}tutorials`); }); }); @@ -105,7 +105,7 @@ describe("Authenticated Route Access Test | CodeLabz", () => { it("Visit Home Page - Passing", function () { cy.visit(`${this.base_url}`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}`); }); }); diff --git a/cypress/e2e/components/auth/forgotPassword/forgotpassword.cy.js b/cypress/e2e/components/auth/forgotPassword/forgotpassword.cy.js index 3b48ecf4..1522a94d 100644 --- a/cypress/e2e/components/auth/forgotPassword/forgotpassword.cy.js +++ b/cypress/e2e/components/auth/forgotPassword/forgotpassword.cy.js @@ -11,7 +11,6 @@ describe("Forgot Password Page | CodeLabz", () => { }); }); - before(function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); }); @@ -23,8 +22,7 @@ describe("Forgot Password Page | CodeLabz", () => { it("empty email ", function () { cy.visit(`${this.base_url}forgotpassword`); - cy.get("[data-testId=forgotPasswordButton]").should('be.disabled'); - + cy.get("[data-testId=forgotPasswordButton]").should("be.disabled"); }); it("successfull ", function () { cy.visit(`${this.base_url}forgotpassword`); diff --git a/cypress/e2e/components/auth/logout/logout.cy.js b/cypress/e2e/components/auth/logout/logout.cy.js index da62724e..f95d1e5a 100644 --- a/cypress/e2e/components/auth/logout/logout.cy.js +++ b/cypress/e2e/components/auth/logout/logout.cy.js @@ -13,10 +13,10 @@ describe("Testing Logout Functionality | CodeLabz", () => { before(function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); - }) + }); it("Logout using Navbar", function () { - cy.visit(`${this.base_url}`) + cy.visit(`${this.base_url}`); cy.wait(2000); if (cy.get("[data-testid=Logout]").should("not.exist")) { cy.get("[data-test-id=login]").click(); @@ -25,7 +25,7 @@ describe("Testing Logout Functionality | CodeLabz", () => { cy.get(".password").type(this.credentials.password); cy.get("[data-testid=loginButton]").click(); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); } @@ -34,16 +34,15 @@ describe("Testing Logout Functionality | CodeLabz", () => { cy.get("[data-testid=Logout]").should("exist"); cy.get("[data-testid=Logout]").click(); cy.get("[data-testid=Logout]").should("not.exist"); - cy.visit(`${this.base_url}profile`) - cy.location().should((loc) => { + cy.visit(`${this.base_url}profile`); + cy.location().should(loc => { expect(loc.href).to.not.eq(`${this.base_url}profile`); - expect(loc.href).to.eq(`${this.base_url}login`) + expect(loc.href).to.eq(`${this.base_url}login`); }); - - }) + }); it("Logout using Profile Dropdown", function () { - cy.visit(`${this.base_url}`) + cy.visit(`${this.base_url}`); cy.wait(2000); if (cy.get("[data-testid=nav-user]").should("not.exist")) { cy.get("[data-test-id=login]").click(); @@ -52,7 +51,7 @@ describe("Testing Logout Functionality | CodeLabz", () => { cy.get(".password").type(this.credentials.password); cy.get("[data-testid=loginButton]").click(); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); } @@ -62,12 +61,11 @@ describe("Testing Logout Functionality | CodeLabz", () => { cy.get("[data-testid=nav-user]").click(); cy.get("#log-out").should("exist"); cy.get("#log-out").click(); - cy.visit(`${this.base_url}profile`) + cy.visit(`${this.base_url}profile`); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.not.eq(`${this.base_url}profile`); - expect(loc.href).to.eq(`${this.base_url}login`) + expect(loc.href).to.eq(`${this.base_url}login`); }); - - }) + }); }); diff --git a/cypress/e2e/components/auth/signup/signup.cy.js b/cypress/e2e/components/auth/signup/signup.cy.js index a7864b7d..0afa27fe 100644 --- a/cypress/e2e/components/auth/signup/signup.cy.js +++ b/cypress/e2e/components/auth/signup/signup.cy.js @@ -1,9 +1,9 @@ /// -import { faker } from "@faker-js/faker" +import { faker } from "@faker-js/faker"; describe("SignUp Page | CodeLabz", () => { beforeEach(function () { - indexedDB.deleteDatabase('firebaseLocalStorageDb'); + indexedDB.deleteDatabase("firebaseLocalStorageDb"); cy.fixture("login").then(function (credentials) { this.credentials = credentials; diff --git a/cypress/e2e/components/codefeed/codefeed.cy.js b/cypress/e2e/components/codefeed/codefeed.cy.js index af64d086..cd268c06 100644 --- a/cypress/e2e/components/codefeed/codefeed.cy.js +++ b/cypress/e2e/components/codefeed/codefeed.cy.js @@ -15,7 +15,7 @@ describe("Codefeed Page | CodeLabz", () => { indexedDB.deleteDatabase("firebaseLocalStorageDb"); cy.visit(`${this.base_url}dashboard`); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.not.eq(`${this.base_url}dashboard/my_feed`); }); }); @@ -32,7 +32,7 @@ describe("Codefeed Page | CodeLabz", () => { it("Check Codefeed Page Url accessable by logged in user", function () { cy.visit(`${this.base_url}dashboard/my_feed`); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); }); diff --git a/cypress/e2e/components/editor/editor.cy.js b/cypress/e2e/components/editor/editor.cy.js index a7ae3b49..495d166a 100644 --- a/cypress/e2e/components/editor/editor.cy.js +++ b/cypress/e2e/components/editor/editor.cy.js @@ -19,22 +19,25 @@ describe("Editor Test | CodeLabz", () => { cy.wait(5000); }); - it("Should create new tutorial", function () { cy.visit(`${this.base_url}tutorials`); cy.get("[data-testId=NewTutorialBtn]").click(); cy.get("[data-testId=tutorialNewModal]").should("exist"); cy.get("#orgSelect").should("exist").click(); cy.get("#react-select-3-listbox").eq(0).click(); - cy.get("[data-testId=newTutorial_title]").should("exist").type("test tutorial"); - cy.get("[data-testId=newTutorial_summary]").should("exist").type("test tutorial summary"); + cy.get("[data-testId=newTutorial_title]") + .should("exist") + .type("test tutorial"); + cy.get("[data-testId=newTutorial_summary]") + .should("exist") + .type("test tutorial summary"); cy.get("[data-testId=newTutorialSubmit]").should("exist").click(); cy.wait(2000); cy.get("[data-testId=tutorialNewModal]").should("not.exist"); }); it("Check Preview and Editor mode exist", function () { - cy.get('[data-testId=tutorial-content').should("exist"); + cy.get("[data-testId=tutorial-content").should("exist"); cy.get("[data-testId=editorMode]").click(); cy.get("[data-testId=stepTitleInput]").should("exist"); cy.get("[data-testId=stepTimeInput]").should("exist"); @@ -43,43 +46,57 @@ describe("Editor Test | CodeLabz", () => { }); it("Check more dropdown menu", function () { - cy.get('[data-testid=dropdown-menu-button]').should("exist").click(); - cy.get('[data-testid=editor-dropdown-menu]').should('exist'); - const menuItems = ['Edit Description', 'Edit CodeLabz Theme', 'Move to Trash']; - cy.get('[data-testid=editor-dropdown-menu]').find('li').each(($el, index, $list) => { - expect($el.text().trim()).to.eq(menuItems[index]); - }); - cy.get('[data-testid=editor-dropdown-menu]>[aria-hidden=true]').click(); + cy.get("[data-testid=dropdown-menu-button]").should("exist").click(); + cy.get("[data-testid=editor-dropdown-menu]").should("exist"); + const menuItems = [ + "Edit Description", + "Edit CodeLabz Theme", + "Move to Trash" + ]; + cy.get("[data-testid=editor-dropdown-menu]") + .find("li") + .each(($el, index, $list) => { + expect($el.text().trim()).to.eq(menuItems[index]); + }); + cy.get("[data-testid=editor-dropdown-menu]>[aria-hidden=true]").click(); }); it("Should publish tutorial successfully", function () { - cy.get('[data-testid=tutorialTitle]').contains("test tutorial"); + cy.get("[data-testid=tutorialTitle]").contains("test tutorial"); cy.get("[data-testId=editorMode]").click(); cy.wait(2000); - cy.get('.ql-editor').type("{selectall}{backspace}"); - cy.get('.ql-editor').type("test{enter}line2"); - cy.get('[data-testId=stepTitleInput]').type("{selectall}{backspace}Test step1"); - cy.get('[data-testId=stepTimeInput]').type('{uparrow}{uparrow}'); - cy.get('[data-testId=publishTutorial]').click(); + cy.get(".ql-editor").type("{selectall}{backspace}"); + cy.get(".ql-editor").type("test{enter}line2"); + cy.get("[data-testId=stepTitleInput]").type( + "{selectall}{backspace}Test step1" + ); + cy.get("[data-testId=stepTimeInput]").type("{uparrow}{uparrow}"); + cy.get("[data-testId=publishTutorial]").click(); cy.wait(2000); - cy.get('[data-testId=stepsPanel]>div').eq(0).contains("Test step1"); + cy.get("[data-testId=stepsPanel]>div").eq(0).contains("Test step1"); }); it("Should add new step", function () { - cy.get('[data-testId=addNewStep]').click(); - cy.get('[data-testId=newStepModal]').should("exist"); - cy.get('[data-testId=newStepTitleInput]').type("Test step2"); - cy.get('[data-testId=newStepTimeInput]').type("10"); - cy.get('[data-testId=newStepSubmitButton]').click(); + cy.get("[data-testId=addNewStep]").click(); + cy.get("[data-testId=newStepModal]").should("exist"); + cy.get("[data-testId=newStepTitleInput]").type("Test step2"); + cy.get("[data-testId=newStepTimeInput]").type("10"); + cy.get("[data-testId=newStepSubmitButton]").click(); cy.wait(1000); - cy.get('[data-testid=stepsPanel]>div').eq(2).contains("Test step2"); + cy.get("[data-testid=stepsPanel]>div").eq(2).contains("Test step2"); }); it("should switch between tutorial steps", function () { - cy.get('[data-testId=nextStepButton]').click(); - cy.get('[data-testId=stepsPanel]>div').eq(2).find('.Mui-active').should('exist'); - cy.get('[data-testId=previousStepButton]').click(); - cy.get('[data-testId=stepsPanel]>div').eq(0).find('.Mui-active').should('exist'); + cy.get("[data-testId=nextStepButton]").click(); + cy.get("[data-testId=stepsPanel]>div") + .eq(2) + .find(".Mui-active") + .should("exist"); + cy.get("[data-testId=previousStepButton]").click(); + cy.get("[data-testId=stepsPanel]>div") + .eq(0) + .find(".Mui-active") + .should("exist"); }); it("add image input", function () { diff --git a/cypress/e2e/components/errorPage/errorPage.cy.js b/cypress/e2e/components/errorPage/errorPage.cy.js index 225ccf0a..f76dbe64 100644 --- a/cypress/e2e/components/errorPage/errorPage.cy.js +++ b/cypress/e2e/components/errorPage/errorPage.cy.js @@ -13,20 +13,16 @@ describe("Error Page Test | CodeLabz", () => { it("login", function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); - cy.visit(`${this.base_url}login`) + cy.visit(`${this.base_url}login`); cy.get(".email").type(this.credentials.email); cy.get(".password").type(this.credentials.password); cy.get(".loginButton").click(); cy.wait(5000); - }) + }); it("wrong url", function () { cy.visit(`${this.base_url}test1`); - cy.get("[data-testId=errorPage]").should("exist") - cy.contains("We can't seem to find the page you are looking for") - }) - - - - + cy.get("[data-testId=errorPage]").should("exist"); + cy.contains("We can't seem to find the page you are looking for"); + }); }); diff --git a/cypress/e2e/components/hamburgermenu/hamburger.cy.js b/cypress/e2e/components/hamburgermenu/hamburger.cy.js index 62573e99..d26ff350 100644 --- a/cypress/e2e/components/hamburgermenu/hamburger.cy.js +++ b/cypress/e2e/components/hamburgermenu/hamburger.cy.js @@ -1,22 +1,21 @@ /// describe("Hamburger Menu Test | CodeLabz", () => { - beforeEach(function () { - cy.fixture("login").then(function (credentials) { - this.credentials = credentials; - }); - cy.fixture("base_url").then(function (data) { - this.base_url = data.base_url; - cy.visit(this.base_url); - }); + beforeEach(function () { + cy.fixture("login").then(function (credentials) { + this.credentials = credentials; }); - - it("Check hamburger menu appears on smaller screens", function () { - indexedDB.deleteDatabase("firebaseLocalStorageDb"); - cy.visit(`${this.base_url}dashboard`); - - cy.viewport(850,640).get("[data-testid=MenuIcon]").should("exist"); - cy.get("[data-testid=MenuIcon]").click(); + cy.fixture("base_url").then(function (data) { + this.base_url = data.base_url; + cy.visit(this.base_url); }); }); - \ No newline at end of file + + it("Check hamburger menu appears on smaller screens", function () { + indexedDB.deleteDatabase("firebaseLocalStorageDb"); + cy.visit(`${this.base_url}dashboard`); + + cy.viewport(850, 640).get("[data-testid=MenuIcon]").should("exist"); + cy.get("[data-testid=MenuIcon]").click(); + }); +}); diff --git a/cypress/e2e/components/homepage/homepage.cy.js b/cypress/e2e/components/homepage/homepage.cy.js index 19943dfd..c828ce81 100644 --- a/cypress/e2e/components/homepage/homepage.cy.js +++ b/cypress/e2e/components/homepage/homepage.cy.js @@ -13,7 +13,7 @@ describe("Error Page Test | CodeLabz", () => { before(function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); - }) + }); it("check not logged in user can access homepage", function () { cy.visit(this.base_url); @@ -24,5 +24,4 @@ describe("Error Page Test | CodeLabz", () => { cy.get("[data-testId=homepageMainBody"); cy.get("[data-testId=homepageMainBody").should("have.length.at.least", 1); }); - }); diff --git a/cypress/e2e/components/organization/organization.cy.js b/cypress/e2e/components/organization/organization.cy.js index ebc9899b..c90c4bbe 100644 --- a/cypress/e2e/components/organization/organization.cy.js +++ b/cypress/e2e/components/organization/organization.cy.js @@ -15,7 +15,7 @@ describe("Organization Page | CodeLabz", () => { before(function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); - }) + }); it("Check Organization Page is not accessable by non-loggedin user", function () { cy.visit(`${this.base_url}org/settings/codelabzorg`); @@ -29,9 +29,8 @@ describe("Organization Page | CodeLabz", () => { it("Login With Your Account If Not Logged In", function () { cy.visit(`${this.base_url}org/settings/codelabzorg`); - cy.wait(4000) + cy.wait(4000); cy.location().then(loc => { - if (loc.href === `${this.base_url}login`) { cy.wait(3000); cy.get(".email").type(this.credentials.email); @@ -72,7 +71,7 @@ describe("Organization Page | CodeLabz", () => { cy.get('[data-testid="Users"]').should("exist").click(); cy.wait(4000); cy.get('[data-testid="organization-users-page"]').should("exist"); - }) + }); it("Checking Passwords Tab", function () { cy.visit(`${this.base_url}org/settings/codelabzorg`); @@ -80,7 +79,7 @@ describe("Organization Page | CodeLabz", () => { cy.get('[data-testid="Passwords"]').should("exist").click(); cy.wait(4000); cy.get('[data-testid="organization-passwords-page"]').should("exist"); - }) + }); it("Checking Social Media Tabs", function () { cy.visit(`${this.base_url}org/settings/codelabzorg`); @@ -92,5 +91,5 @@ describe("Organization Page | CodeLabz", () => { cy.get("[data-testId=githubButton]").should("exist"); cy.get("[data-testId=googleButton]").should("exist"); cy.get("[data-testId=twitterButton]").should("exist"); - }) + }); }); diff --git a/cypress/e2e/components/profile/SocialIcons.cy.js b/cypress/e2e/components/profile/SocialIcons.cy.js index 1dd29a55..6e70e14b 100644 --- a/cypress/e2e/components/profile/SocialIcons.cy.js +++ b/cypress/e2e/components/profile/SocialIcons.cy.js @@ -1,7 +1,6 @@ /// describe("Social Icons | CodeLabz", () => { - before(function () { cy.fixture("login").then(function (credentials) { this.credentials = credentials; diff --git a/cypress/e2e/components/profile/profile.cy.js b/cypress/e2e/components/profile/profile.cy.js index 53ee29ff..ebf5a432 100644 --- a/cypress/e2e/components/profile/profile.cy.js +++ b/cypress/e2e/components/profile/profile.cy.js @@ -12,7 +12,7 @@ describe("Profile Page | CodeLabz", () => { before(function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); - }) + }); it("Login With Your Account", function () { cy.visit(`${this.base_url}login`); @@ -35,7 +35,7 @@ describe("Profile Page | CodeLabz", () => { cy.get("[data-testId=HighlightsLanguages]").should("exist"); cy.get("[data-testId=HighlightsJoinedDate]").should("exist"); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}profile`); }); }); @@ -61,5 +61,4 @@ describe("Profile Page | CodeLabz", () => { // // cy.get("#editModalBox").should("have.length"); // expect("#editModalBox").to.have.length.at.least(4); // }); - }); diff --git a/cypress/e2e/components/profile/user-dashboard.cy.js b/cypress/e2e/components/profile/user-dashboard.cy.js index 87702163..18d385d0 100644 --- a/cypress/e2e/components/profile/user-dashboard.cy.js +++ b/cypress/e2e/components/profile/user-dashboard.cy.js @@ -1,109 +1,115 @@ /// describe("User Dashboard Test | CodeLabz", () => { - beforeEach(function () { - cy.fixture("login").then(function (credentials) { - this.credentials = credentials; - }); - cy.fixture("base_url").then(function (data) { - this.base_url = data.base_url; - }); - }) + beforeEach(function () { + cy.fixture("login").then(function (credentials) { + this.credentials = credentials; + }); + cy.fixture("base_url").then(function (data) { + this.base_url = data.base_url; + }); + }); - it("login", function () { - indexedDB.deleteDatabase("firebaseLocalStorageDb"); - cy.visit(`${this.base_url}login`); - cy.wait(10000); - cy.get(".email").type(this.credentials.email); - cy.get(".password").type(this.credentials.password); - cy.get(".loginButton").click(); - cy.wait(5000); - }) + it("login", function () { + indexedDB.deleteDatabase("firebaseLocalStorageDb"); + cy.visit(`${this.base_url}login`); + cy.wait(10000); + cy.get(".email").type(this.credentials.email); + cy.get(".password").type(this.credentials.password); + cy.get(".loginButton").click(); + cy.wait(5000); + }); - it("check user dashboard", function () { - cy.visit(`${this.base_url}user-dashboard/profile`); - }) + it("check user dashboard", function () { + cy.visit(`${this.base_url}user-dashboard/profile`); + }); - it("Check Switch Account", function () { - cy.visit(`${this.base_url}user-dashboard/profile`); + it("Check Switch Account", function () { + cy.visit(`${this.base_url}user-dashboard/profile`); - cy.get("[data-testId=switchAccount]").should("exist"); - cy.get("[data-testId=switchAccount_switch]").should("exist") - }) + cy.get("[data-testId=switchAccount]").should("exist"); + cy.get("[data-testId=switchAccount_switch]").should("exist"); + }); - it("Check Profile", function () { - cy.visit(`${this.base_url}user-dashboard/profile`); - cy.get('[data-testid="profile"] > .makeStyles-navLink-81 > .MuiButtonBase-root').should("exist").click(); - cy.wait(2000); - cy.get("[data-testId=profilePage]").should("exist"); - cy.get("[data-testid=name]").children().clear().type("testname"); - cy.get("[data-testId=selectCountry]").click(); - cy.get("[data-testId=selectCountryItem]").first().click(); - cy.get("[data-testId=website]").children().clear().type("https://test.web"); - cy.get("[data-testId=description]").children().clear().type("description"); - cy.get("[data-testId=editProfileFacebook]") - .find("div > input") - .clear() - .type("facebook"); - cy.get("[data-testId=editProfileTwitter]") - .find("div > input") - .clear() - .type("twitter"); - cy.get("[data-testId=editProfileLinkedin]") - .find("div > input") - .clear() - .type("linkedin"); - cy.get("[data-testId=editProfileGithub]") - .find("div > input") - .clear() - .type("github"); - cy.get("[data-testId=editProfileSave]").click(); + it("Check Profile", function () { + cy.visit(`${this.base_url}user-dashboard/profile`); + cy.get( + '[data-testid="profile"] > .makeStyles-navLink-81 > .MuiButtonBase-root' + ) + .should("exist") + .click(); + cy.wait(2000); + cy.get("[data-testId=profilePage]").should("exist"); + cy.get("[data-testid=name]").children().clear().type("testname"); + cy.get("[data-testId=selectCountry]").click(); + cy.get("[data-testId=selectCountryItem]").first().click(); + cy.get("[data-testId=website]").children().clear().type("https://test.web"); + cy.get("[data-testId=description]").children().clear().type("description"); + cy.get("[data-testId=editProfileFacebook]") + .find("div > input") + .clear() + .type("facebook"); + cy.get("[data-testId=editProfileTwitter]") + .find("div > input") + .clear() + .type("twitter"); + cy.get("[data-testId=editProfileLinkedin]") + .find("div > input") + .clear() + .type("linkedin"); + cy.get("[data-testId=editProfileGithub]") + .find("div > input") + .clear() + .type("github"); + cy.get("[data-testId=editProfileSave]").click(); + }); - }) + it("Check User Settings", function () { + cy.visit(`${this.base_url}user-dashboard/profile`); - it("Check User Settings", function () { - cy.visit(`${this.base_url}user-dashboard/profile`); + cy.get( + '[data-testid="userSettings"] > .makeStyles-navLink-81 > .MuiButtonBase-root' + ) + .should("exist") + .click(); + cy.get("[data-testId=userSettingsPage]").should("exist"); + cy.get("[data-testId=exportData]").should("exist"); + cy.get("[data-testId=startExport]").should("exist"); + cy.get("[data-testId=successorSettings]").should("exist"); + cy.get("[data-testId=addSuccessor]").should("exist"); + cy.get("[data-testId=deactivateAccount]").should("exist"); + cy.get("[data-testId=deleteAccount]").should("exist"); + }); - cy.get('[data-testid="userSettings"] > .makeStyles-navLink-81 > .MuiButtonBase-root').should("exist").click(); - cy.get("[data-testId=userSettingsPage]").should("exist"); - cy.get("[data-testId=exportData]").should("exist"); - cy.get("[data-testId=startExport]").should("exist"); - cy.get("[data-testId=successorSettings]").should("exist"); - cy.get("[data-testId=addSuccessor]").should("exist"); - cy.get("[data-testId=deactivateAccount]").should("exist"); - cy.get("[data-testId=deleteAccount]").should("exist"); + it("Check Social Media", function () { + cy.visit(`${this.base_url}user-dashboard/profile`); + cy.wait(2000); + cy.get("[data-testId=socialMedia]").should("exist").click(); + cy.get("[data-testId=socialMediaPage]").should("exist"); + // cy.wait(2000); + }); + it("Check Password", function () { + cy.visit(`${this.base_url}user-dashboard/profile`); + cy.wait(2000); + cy.get("[data-testId=password]").should("exist").click(); + cy.get("[data-testId=passwordPage]").should("exist"); + cy.get("[data-testId=oldPassword]").type("oldPassword"); + cy.get("[data-testId=newPassword]").type("newPassword"); + cy.get("[data-testId=confirmPassword]").type("newPassword"); + cy.get("[data-testId=updatePassword]").should("exist"); + cy.get("[data-testId=logout]").should("exist"); + cy.get("[data-testId=logoutOfOtherBrowsers]").should("exist"); + cy.get("[data-testId=loginSecurity]").should("exist"); + cy.get("[data-testId=emailVerification]").should("exist"); - }) + // cy.wait(2000); + }); + it("Check Organizations", function () { + cy.visit(`${this.base_url}user-dashboard/profile`); + cy.wait(2000); - it("Check Social Media", function () { - cy.visit(`${this.base_url}user-dashboard/profile`); - cy.wait(2000); - cy.get("[data-testId=socialMedia]").should("exist").click(); - cy.get("[data-testId=socialMediaPage]").should("exist"); - // cy.wait(2000); - }) - it("Check Password", function () { - cy.visit(`${this.base_url}user-dashboard/profile`); - cy.wait(2000); - cy.get("[data-testId=password]").should("exist").click(); - cy.get("[data-testId=passwordPage]").should("exist"); - cy.get("[data-testId=oldPassword]").type("oldPassword"); - cy.get("[data-testId=newPassword]").type("newPassword"); - cy.get("[data-testId=confirmPassword]").type("newPassword"); - cy.get("[data-testId=updatePassword]").should("exist"); - cy.get("[data-testId=logout]").should("exist"); - cy.get("[data-testId=logoutOfOtherBrowsers]").should("exist"); - cy.get("[data-testId=loginSecurity]").should("exist"); - cy.get("[data-testId=emailVerification]").should("exist"); - - // cy.wait(2000); - }) - it("Check Organizations", function () { - cy.visit(`${this.base_url}user-dashboard/profile`); - cy.wait(2000) - - cy.get("[data-testId=organizations]").should("exist").click(); - cy.get("[data-testId=organizationsPage]").should("exist"); - // cy.wait(2000); - }) -}) \ No newline at end of file + cy.get("[data-testId=organizations]").should("exist").click(); + cy.get("[data-testId=organizationsPage]").should("exist"); + // cy.wait(2000); + }); +}); diff --git a/cypress/e2e/components/tutorials/tutorial.cy.js b/cypress/e2e/components/tutorials/tutorial.cy.js index 1633fe66..33be2b74 100644 --- a/cypress/e2e/components/tutorials/tutorial.cy.js +++ b/cypress/e2e/components/tutorials/tutorial.cy.js @@ -12,11 +12,11 @@ describe("Tutorial Test | CodeLabz", () => { before(function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); - }) + }); it("tutorial page is not accessable from outside", function () { cy.visit(`${this.base_url}tutorials`); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.not.eq(`${this.base_url}tutorials`); }); }); @@ -30,7 +30,7 @@ describe("Tutorial Test | CodeLabz", () => { it("logged in user can access tutorial page", function () { cy.visit(`${this.base_url}tutorials`); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}tutorials`); }); }); diff --git a/cypress/e2e/unauthed_test/login.spec.cy.js b/cypress/e2e/unauthed_test/login.spec.cy.js index 9c7da017..701febf0 100644 --- a/cypress/e2e/unauthed_test/login.spec.cy.js +++ b/cypress/e2e/unauthed_test/login.spec.cy.js @@ -13,7 +13,7 @@ describe("Login Test | CodeLabz", () => { before(function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); - }) + }); it("Login Test - Passing", function () { // cy.visit(`${this.base_url}login`); @@ -21,7 +21,7 @@ describe("Login Test | CodeLabz", () => { cy.get(".password").type(this.credentials.password); cy.get(".loginButton").click(); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); }); diff --git a/cypress/e2e/unauthed_test/visit_routes.spec.cy.js b/cypress/e2e/unauthed_test/visit_routes.spec.cy.js index daeb0b53..76dc5abd 100644 --- a/cypress/e2e/unauthed_test/visit_routes.spec.cy.js +++ b/cypress/e2e/unauthed_test/visit_routes.spec.cy.js @@ -9,7 +9,7 @@ describe("Unauthenticated Routes Access Test | CodeLabz", () => { before(function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); - }) + }); it("Visit Login Page - Passing", function () { cy.visit(`${this.base_url}login`); diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index aa9918d2..8dd144a6 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -18,4 +18,4 @@ module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits // `config` is the resolved Cypress config -} +}; diff --git a/cypress/support/commands.js b/cypress/support/commands.js index cb8af3d7..ca4d256f 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -22,4 +22,4 @@ // // // -- This will overwrite an existing command -- -// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) \ No newline at end of file +// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index 0e7290a1..3a252243 100644 --- a/cypress/support/e2e.js +++ b/cypress/support/e2e.js @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import "./commands"; // Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file +// require('./commands') diff --git a/cypress/unused/cards/CardWithPicture.cy.js b/cypress/unused/cards/CardWithPicture.cy.js index 879ab2df..fac7ee07 100644 --- a/cypress/unused/cards/CardWithPicture.cy.js +++ b/cypress/unused/cards/CardWithPicture.cy.js @@ -1,18 +1,18 @@ /// describe("Card | CodeLabz", () => { - it("Check connect buttons", function () { - cy.visit("http://localhost:3000/"); - cy.get("[data-testId=Image]").should("exist"); - cy.get("[data-testId=UserAvatar]").should("exist"); - cy.get("[data-testId=UserName]").should("exist"); - cy.get("[data-testId=UserOrgName]").should("exist"); - cy.get("[data-testId=Title]").should("exist"); - cy.get("[data-testId=Description]").should("exist"); - cy.get("[data-testId=Time]").should("exist"); - cy.get("[data-testId=CommentIcon]").should("exist"); - cy.get("[data-testId=ShareIcon]").should("exist"); - cy.get("[data-testId=NotifIcon]").should("exist"); - cy.get("[data-testId=MoreIcon]").should("exist"); - }); + it("Check connect buttons", function () { + cy.visit("http://localhost:3000/"); + cy.get("[data-testId=Image]").should("exist"); + cy.get("[data-testId=UserAvatar]").should("exist"); + cy.get("[data-testId=UserName]").should("exist"); + cy.get("[data-testId=UserOrgName]").should("exist"); + cy.get("[data-testId=Title]").should("exist"); + cy.get("[data-testId=Description]").should("exist"); + cy.get("[data-testId=Time]").should("exist"); + cy.get("[data-testId=CommentIcon]").should("exist"); + cy.get("[data-testId=ShareIcon]").should("exist"); + cy.get("[data-testId=NotifIcon]").should("exist"); + cy.get("[data-testId=MoreIcon]").should("exist"); + }); }); diff --git a/cypress/unused/cards/CardWithoutPicture.cy.js b/cypress/unused/cards/CardWithoutPicture.cy.js index b3b63385..c8b37128 100644 --- a/cypress/unused/cards/CardWithoutPicture.cy.js +++ b/cypress/unused/cards/CardWithoutPicture.cy.js @@ -1,17 +1,17 @@ /// describe("Card | CodeLabz", () => { - it("Check connect buttons", function () { - cy.visit("http://localhost:3000/"); - cy.get("[data-testId=UserAvatar]").should("exist"); - cy.get("[data-testId=UserName]").should("exist"); - cy.get("[data-testId=UserOrgName]").should("exist"); - cy.get("[data-testId=Title]").should("exist"); - cy.get("[data-testId=Description]").should("exist"); - cy.get("[data-testId=Time]").should("exist"); - cy.get("[data-testId=CommentIcon]").should("exist"); - cy.get("[data-testId=ShareIcon]").should("exist"); - cy.get("[data-testId=NotifIcon]").should("exist"); - cy.get("[data-testId=MoreIcon]").should("exist"); - }); + it("Check connect buttons", function () { + cy.visit("http://localhost:3000/"); + cy.get("[data-testId=UserAvatar]").should("exist"); + cy.get("[data-testId=UserName]").should("exist"); + cy.get("[data-testId=UserOrgName]").should("exist"); + cy.get("[data-testId=Title]").should("exist"); + cy.get("[data-testId=Description]").should("exist"); + cy.get("[data-testId=Time]").should("exist"); + cy.get("[data-testId=CommentIcon]").should("exist"); + cy.get("[data-testId=ShareIcon]").should("exist"); + cy.get("[data-testId=NotifIcon]").should("exist"); + cy.get("[data-testId=MoreIcon]").should("exist"); + }); }); diff --git a/cypress/unused/cards/cardtabs.cy.js b/cypress/unused/cards/cardtabs.cy.js index a84630fa..879b680e 100644 --- a/cypress/unused/cards/cardtabs.cy.js +++ b/cypress/unused/cards/cardtabs.cy.js @@ -1,48 +1,38 @@ +describe("Card-Tabs | CodeLabz", () => { + context("Testing all Card Tabs", () => { + beforeEach(() => { + cy.viewport(1280, 751); + cy.visit("http://localhost:3000"); + }); -describe( "Card-Tabs | CodeLabz",() => -{ - context( "Testing all Card Tabs",() => - { - beforeEach( () => - { - cy.viewport( 1280,751 ); - cy.visit( "http://localhost:3000" ); - }); + it("displays all card-tabs", () => { + cy.get("[data-testId=homepageTagSidebar]").should("exist"); + cy.get("[data-testId=homepageUpcomingEvents]").should("exist"); + cy.get("[data-testId=homepageUsersToFollow]").should("exist"); + cy.get("[data-testId=homepageContributors]").should("exist"); + }); - it( "displays all card-tabs",() => - { - cy.get( "[data-testId=homepageTagSidebar]" ).should( "exist" ); - cy.get( "[data-testId=homepageUpcomingEvents]" ).should( "exist" ); - cy.get( "[data-testId=homepageUsersToFollow]" ).should( "exist" ); - cy.get( "[data-testId=homepageContributors]" ).should( "exist" ); - } ); + it("Testing User Card", () => { + cy.get("[data-testId=UsersCardImg]").should("exist"); + cy.get("[data-testId= UsersCard]").should("exist"); + cy.get("[data-testId= UsersCardTitle]").should("exist"); + cy.get("[data-testId=UserName]").should("exist"); + cy.get("[data-testId= UserDesg]").should("exist"); + cy.get("[data-testId= UserAdd]").should("exist"); + }); - it( "Testing User Card",() => - { - cy.get( "[data-testId=UsersCardImg]" ).should( "exist" ); - cy.get( "[data-testId= UsersCard]" ).should( "exist" ); - cy.get( "[data-testId= UsersCardTitle]" ).should( "exist" ); - cy.get( "[data-testId=UserName]" ).should( "exist" ); - cy.get( "[data-testId= UserDesg]" ).should( "exist" ); - cy.get( "[data-testId= UserAdd]" ).should( "exist" ); - } ) + it("Testing Upcoming Event Card", () => { + cy.get("[data-testId=upcomingEventCard]").should("exist"); + cy.get("[data-testId= upEventImg]").should("exist"); + cy.get("[data-testId= upEventName]").should("exist"); + cy.get("[data-testId=upEventDate]").should("exist"); + cy.get("[data-testId=upEventBox]").should("exist"); + }); - it( "Testing Upcoming Event Card",() => - { - cy.get( "[data-testId=upcomingEventCard]" ).should( "exist" ); - cy.get( "[data-testId= upEventImg]" ).should( "exist" ); - cy.get( "[data-testId= upEventName]" ).should( "exist" ); - cy.get( "[data-testId=upEventDate]" ).should( "exist" ); - cy.get( "[data-testId=upEventBox]" ).should( "exist" ); - } ) - - it( "Testing Tags Card",() => - { - cy.get( "[data-testId=TagsCard]" ).should( "exist" ); - cy.get( "[data-testId=TagsCardTitle]" ).should( "exist" ); - cy.get( "[data-testId= TagsChip]" ).should( "exist" ); - } ) - - } ); - -} ); \ No newline at end of file + it("Testing Tags Card", () => { + cy.get("[data-testId=TagsCard]").should("exist"); + cy.get("[data-testId=TagsCardTitle]").should("exist"); + cy.get("[data-testId= TagsChip]").should("exist"); + }); + }); +}); diff --git a/cypress/unused/dashboard/dashboard.cy.js b/cypress/unused/dashboard/dashboard.cy.js index 90b912f0..d49c5d7e 100644 --- a/cypress/unused/dashboard/dashboard.cy.js +++ b/cypress/unused/dashboard/dashboard.cy.js @@ -13,19 +13,18 @@ describe("Dashboard Test | CodeLabz", () => { it("login", function () { indexedDB.deleteDatabase("firebaseLocalStorageDb"); - cy.visit(`${this.base_url}login`) - cy.wait(5000) + cy.visit(`${this.base_url}login`); + cy.wait(5000); cy.get(".email").type(this.credentials.email); cy.get(".password").type(this.credentials.password); cy.get(".loginButton").click(); cy.wait(5000); - }) - + }); it("Check empty user handle ", function () { cy.visit(`${this.base_url}dashboard`); cy.wait(3000); - cy.get('[data-testid="userName"]').type('{selectall}{backspace}') + cy.get('[data-testid="userName"]').type("{selectall}{backspace}"); cy.get('[data-testid="userName"]').type("testusername"); cy.get('[data-testid="userCountry"]').type("India"); @@ -33,32 +32,33 @@ describe("Dashboard Test | CodeLabz", () => { cy.contains("Please enter a handle"); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard`); }); }); - it("Check that the user handle only contains lowercase alphanumeric characters ", function () { cy.visit(`${this.base_url}dashboard`); cy.wait(3000); - cy.get('[data-testid="userName"]').type('{selectall}{backspace}') + cy.get('[data-testid="userName"]').type("{selectall}{backspace}"); cy.get('[data-testid="userName"]').type("testusername"); cy.get('[data-testid="userHandle"]').type("TESTUSER@"); cy.get('[data-testid="userCountry"]').type("India"); cy.get('[data-testid="submit-button"]').click(); - cy.contains("User handle can only contain lowercase alphanumeric characters"); + cy.contains( + "User handle can only contain lowercase alphanumeric characters" + ); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard`); }); }); it("Check User handle cannot be less than 6 characters", function () { cy.visit(`${this.base_url}dashboard`); cy.wait(3000); - cy.get('[data-testid="userName"]').type('{selectall}{backspace}') + cy.get('[data-testid="userName"]').type("{selectall}{backspace}"); cy.get('[data-testid="userName"]').type("testusername"); cy.get('[data-testid="userHandle"]').type("test"); @@ -67,7 +67,7 @@ describe("Dashboard Test | CodeLabz", () => { cy.contains("User handle cannot be less than 6 characters"); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard`); }); }); @@ -75,7 +75,7 @@ describe("Dashboard Test | CodeLabz", () => { it("Check Organization handle can only contain lowercase alphanumeric characters ", function () { cy.visit(`${this.base_url}dashboard`); cy.wait(3000); - cy.get('[data-testid="userName"]').type('{selectall}{backspace}') + cy.get('[data-testid="userName"]').type("{selectall}{backspace}"); cy.get('[data-testid="userName"]').type("testusername"); cy.get('[data-testid="userHandle"]').type("testuserhandle"); @@ -84,9 +84,11 @@ describe("Dashboard Test | CodeLabz", () => { cy.get('[data-testid="orgName"]').type("testorgname"); cy.get('[data-testid="orgHandle"]').type("TESTORG"); cy.get('[data-testid="submit-button"]').click(); - cy.contains("Organization handle can only contain lowercase alphanumeric characters"); + cy.contains( + "Organization handle can only contain lowercase alphanumeric characters" + ); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard`); }); }); @@ -94,7 +96,7 @@ describe("Dashboard Test | CodeLabz", () => { it("Check Organization handle cannot be less than 6 characters ", function () { cy.visit(`${this.base_url}dashboard`); cy.wait(3000); - cy.get('[data-testid="userName"]').type('{selectall}{backspace}') + cy.get('[data-testid="userName"]').type("{selectall}{backspace}"); cy.get('[data-testid="userName"]').type("testusername"); cy.get('[data-testid="userHandle"]').type("testuserhandle"); @@ -105,7 +107,7 @@ describe("Dashboard Test | CodeLabz", () => { cy.get('[data-testid="submit-button"]').click(); cy.contains("Organization handle cannot be less than 6 characters"); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard`); }); }); @@ -113,7 +115,7 @@ describe("Dashboard Test | CodeLabz", () => { it("Check Organization website cannot be empty ", function () { cy.visit(`${this.base_url}dashboard`); cy.wait(3000); - cy.get('[data-testid="userName"]').type('{selectall}{backspace}') + cy.get('[data-testid="userName"]').type("{selectall}{backspace}"); cy.get('[data-testid="userName"]').type("testusername"); cy.get('[data-testid="userHandle"]').type("testuserhandle"); @@ -126,7 +128,7 @@ describe("Dashboard Test | CodeLabz", () => { cy.get('[data-testid="submit-button"]').click(); cy.contains("Please enter a website"); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard`); }); }); @@ -134,7 +136,7 @@ describe("Dashboard Test | CodeLabz", () => { it("Check Organization website should be a valid URL ", function () { cy.visit(`${this.base_url}dashboard`); cy.wait(3000); - cy.get('[data-testid="userName"]').type('{selectall}{backspace}') + cy.get('[data-testid="userName"]').type("{selectall}{backspace}"); cy.get('[data-testid="userName"]').type("testusername"); cy.get('[data-testid="userHandle"]').type("testuserhandle"); @@ -143,18 +145,18 @@ describe("Dashboard Test | CodeLabz", () => { cy.get('[data-testid="orgName"]').type("testorgname"); cy.get('[data-testid="orgHandle"]').type("testorghandle"); cy.get('[data-testid="orgCountry"]').type("India"); - cy.get('[data-testid="orgWebsite"]').type('testorgwebsite') + cy.get('[data-testid="orgWebsite"]').type("testorgwebsite"); cy.get('[data-testid="submit-button"]').click(); cy.contains("Please provide a valid URL"); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard`); }); }); it("Save User and Org Data", function () { cy.visit(`${this.base_url}dashboard`); cy.wait(3000); - cy.get('[data-testid="userName"]').type('{selectall}{backspace}') + cy.get('[data-testid="userName"]').type("{selectall}{backspace}"); cy.get('[data-testid="userName"]').type("testusername"); cy.get('[data-testid="userHandle"]').type("testuserhandle"); @@ -163,20 +165,20 @@ describe("Dashboard Test | CodeLabz", () => { cy.get('[data-testid="orgName"]').type("testorgname"); cy.get('[data-testid="orgHandle"]').type("codelabzorg"); cy.get('[data-testid="orgCountry"]').type("India"); - cy.get('[data-testid="orgWebsite"]').type('https://testorgwebsite.com') + cy.get('[data-testid="orgWebsite"]').type("https://testorgwebsite.com"); cy.get('[data-testid="submit-button"]').click(); cy.wait(5000); - cy.location().should((loc) => { + cy.location().should(loc => { expect(loc.href).to.eq(`${this.base_url}dashboard/my_feed`); }); }); it("prev user dashboard access denied", function () { cy.visit(`${this.base_url}dashboard`); - cy.wait(5000) - cy.location().should((loc) => { + cy.wait(5000); + cy.location().should(loc => { expect(loc.href).to.not.eq(`${this.base_url}dashboard`); }); - }) + }); }); diff --git a/database.rules.json b/database.rules.json index 199fe67b..f1366029 100644 --- a/database.rules.json +++ b/database.rules.json @@ -1,6 +1,6 @@ { - "rules": { - ".read": false, - ".write": false - } -} \ No newline at end of file + "rules": { + ".read": false, + ".write": false + } +} diff --git a/firebase.json b/firebase.json index aebf610b..41f26b12 100644 --- a/firebase.json +++ b/firebase.json @@ -1,17 +1,11 @@ { "functions": { - "predeploy": [ - "npm --prefix \"$RESOURCE_DIR\" run lint" - ], + "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"], "source": "functions" }, "hosting": { "public": "build", - "ignore": [ - "firebase.json", - "**/.*", - "**/node_modules/**" - ] + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"] }, "emulators": { "functions": { diff --git a/firestore.indexes.json b/firestore.indexes.json index 20170cd3..415027e5 100644 --- a/firestore.indexes.json +++ b/firestore.indexes.json @@ -1,4 +1,4 @@ { - "indexes": [], - "fieldOverrides": [] -} \ No newline at end of file + "indexes": [], + "fieldOverrides": [] +} diff --git a/functions/.eslintrc.json b/functions/.eslintrc.json index 6b6beb65..fd88a4b8 100644 --- a/functions/.eslintrc.json +++ b/functions/.eslintrc.json @@ -3,9 +3,7 @@ // Required for certain syntax usages "ecmaVersion": 2017 }, - "plugins": [ - "promise" - ], + "plugins": ["promise"], "extends": "eslint:recommended", "rules": { // Removed rule "disallow the use of console" from recommended eslint rules @@ -56,7 +54,7 @@ // Warn against unnecessary calls to .bind() "no-extra-bind": 1, - // Warn against unnecessary labels + // Warn against unnecessary labels "no-extra-label": 1, // Disallow leading or trailing decimal points in numeric literals @@ -111,7 +109,7 @@ "prefer-arrow-callback": 1, // Return inside each then() to create readable and reusable Promise chains. - // Forces developers to return console logs and http calls in promises. + // Forces developers to return console logs and http calls in promises. "promise/always-return": 2, //Enforces the use of catch() on un-returned promises diff --git a/functions/cloud_functions/onUpdateFunctions.js b/functions/cloud_functions/onUpdateFunctions.js index e9dc0087..043d71d3 100644 --- a/functions/cloud_functions/onUpdateFunctions.js +++ b/functions/cloud_functions/onUpdateFunctions.js @@ -39,9 +39,7 @@ exports.addOrgUserHandler = async (change, context) => { ) }); return console.log( - `user [${addedUser[0]}] successfully updated. Added [${ - context.params.org_handle - }] to organizations.` + `user [${addedUser[0]}] successfully updated. Added [${context.params.org_handle}] to organizations.` ); } else if (removedUser.length > 0) { await db @@ -53,9 +51,7 @@ exports.addOrgUserHandler = async (change, context) => { ) }); return console.log( - `user [${removedUser[0]}] successfully updated. Removed [${ - context.params.org_handle - }] from organizations.` + `user [${removedUser[0]}] successfully updated. Removed [${context.params.org_handle}] from organizations.` ); } else { return console.log(`No new added users or removed users`); diff --git a/functions/cloud_functions/pubSubFunctions.js b/functions/cloud_functions/pubSubFunctions.js index a2d91afb..e97ce6db 100644 --- a/functions/cloud_functions/pubSubFunctions.js +++ b/functions/cloud_functions/pubSubFunctions.js @@ -35,11 +35,7 @@ exports.deleteTutorialStepsHandler = async () => { .child(step.step_id) .remove(); - await rtdb - .ref() - .child("delete_steps") - .child(step.id) - .remove(); + await rtdb.ref().child("delete_steps").child(step.id).remove(); }); await Promise.all(promises); console.log("completed of deleting tutorial steps"); diff --git a/index.html b/index.html index cbcf7c1a..275b444d 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,15 @@ + + + + + Codelabz + - - - - - Codelabz - - - -
- - - - - \ No newline at end of file + +
+ + + + diff --git a/less.config.js b/less.config.js index 48b668d9..5b997099 100644 --- a/less.config.js +++ b/less.config.js @@ -3,14 +3,14 @@ const lessOptions = { javascriptEnabled: true, modifyVars: { // "@primary-color": "#3AAFA9", - '@primary-color': '#455A64', - '@font-family': "'Poppins', sans-serif", - '@font-size-base': '14px', - '@border-radius-base': '5px', - }, - }, + "@primary-color": "#455A64", + "@font-family": "'Poppins', sans-serif", + "@font-size-base": "14px", + "@border-radius-base": "5px" + } + } }; module.exports = { - lessOptions, + lessOptions }; diff --git a/lint-staged.config.js b/lint-staged.config.js deleted file mode 100644 index 7fdb8588..00000000 --- a/lint-staged.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - '**/*': ['npm run lint', 'npm run format', 'git add'], - }; \ No newline at end of file diff --git a/old_README.md b/old_README.md index f31c7b05..f012e3a6 100644 --- a/old_README.md +++ b/old_README.md @@ -1,24 +1,26 @@ # Table of Content + - [Table of Content](#table-of-content) - [CodeLabz](#codelabz) - [Deployed on](#deployed-on) - [Community](#community) - [User Guide](#user-guide) - - [How to Setup](#how-to-setup) - - [How to Use](#how-to-use) + - [How to Setup](#how-to-setup) + - [How to Use](#how-to-use) - [Set-up-Firebase](#set-up-firebase) - - [How to Deploy Firebase Cloud Functions](#how-to-deploy-firebase-cloud-functions) + - [How to Deploy Firebase Cloud Functions](#how-to-deploy-firebase-cloud-functions) - [Firebase Emulator Flow](#firebase-emulator-flow) - [Install, Configure and Integrate Firebase Emulator Suite](#install-configure-and-integrate-firebase-emulator-suite) - [**How to install**](#how-to-install) - - [Before installing the Emulator Suite you will need:-](#before-installing-the-emulator-suite-you-will-need-) - - [To install the Emulator Suite:](#to-install-the-emulator-suite) + - [Before installing the Emulator Suite you will need:-](#before-installing-the-emulator-suite-you-will-need-) + - [To install the Emulator Suite:](#to-install-the-emulator-suite) - [**How to Configure**](#how-to-configure) - - [Configure Emulator Suite:-](#configure-emulator-suite-) - - [Port Configuration - These are the Default Ports Provided you can change them while initializing(if needed)](#port-configuration---these-are-the-default-ports-provided-you-can-change-them-while-initializingif-needed) + - [Configure Emulator Suite:-](#configure-emulator-suite-) + - [Port Configuration - These are the Default Ports Provided you can change them while initializing(if needed)](#port-configuration---these-are-the-default-ports-provided-you-can-change-them-while-initializingif-needed) - [Integrate With your CI System.](#integrate-with-your-ci-system) - - [To Start the Emulators:-](#to-start-the-emulators-) - - [Import and Export:-](#import-and-export-) + - [To Start the Emulators:-](#to-start-the-emulators-) + - [Import and Export:-](#import-and-export-) + # CodeLabz CodeLabz is a platform where the users can engage with online tutorials and the organizations can create tutorials for the users. The platform will be developed using ReactJS frontend library and the backend will be developed using the Google Cloud Firestore and Google Firebase Real-Time database. @@ -27,7 +29,7 @@ CodeLabz is a platform where the users can engage with online tutorials and the https://dev.codelabz.io/ -# Community +# Community Join and communicate with other members on our community. We communicate on gitter @@ -51,32 +53,34 @@ Run `npm install` in `CodeLabz` folder. cd CodeLabz/ npm install ``` + > **NOTE**: If `npm install` is not executing successfully, then use node v14 and `npm install --legacy-peer-deps` and try again. First you need to create a `.env` file in `CodeLabz` folder following the template provided in the file `.env.sample`.

## Set-up-Firebase + 1. Sign in to https://console.firebase.google.com/. -2. Click **Add Project** and necessary information about the project.(Below mentioned the Steps to add project to firebase) - - To add Firebase resources to an existing Google Cloud project, enter its project name or select it from the dropdown menu. - - To create a new project, enter the desired project name. You can also optionally edit the project ID displayed below the project name - - Firebase generates a unique ID for your Firebase project based upon the name you give it. If you want to edit this project ID, you must do it now as it cannot be altered after Firebase provisions resources for your project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID. +2. Click **Add Project** and necessary information about the project.(Below mentioned the Steps to add project to firebase) + - To add Firebase resources to an existing Google Cloud project, enter its project name or select it from the dropdown menu. + - To create a new project, enter the desired project name. You can also optionally edit the project ID displayed below the project name + - Firebase generates a unique ID for your Firebase project based upon the name you give it. If you want to edit this project ID, you must do it now as it cannot be altered after Firebase provisions resources for your project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID. 3. Agree to the terms and click **Create Project**. 4. After creating the project, click **Add Firebase to your web app**. - - In the center of the Firebase console's project overview page, click the Web icon to launch the setup workflow. - - If you've already added an app to your Firebase project, click Add app to display the platform options. - - Enter your app's nickname. - - This nickname is an internal, convenience identifier and is only visible to you in the Firebase console. - - Click Register app. + - In the center of the Firebase console's project overview page, click the Web icon to launch the setup workflow. + - If you've already added an app to your Firebase project, click Add app to display the platform options. + - Enter your app's nickname. + - This nickname is an internal, convenience identifier and is only visible to you in the Firebase console. + - Click Register app. 5. Copy the firebase configuration. 6. Paste the configuration `.env` file. -7. You can find your **** in the Realtime Database section of the Firebase console. Depending on the location of the database, the database URL will be in one of the following forms: - - https://DATABASE_NAME.firebaseio.com (for databases in us-central1) - - https://DATABASE_NAME.REGION.firebasedatabase.app (for databases in all other locations) +7. You can find your **** in the Realtime Database section of the Firebase console. Depending on the location of the database, the database URL will be in one of the following forms: + - https://DATABASE_NAME.firebaseio.com (for databases in us-central1) + - https://DATABASE_NAME.REGION.firebasedatabase.app (for databases in all other locations) 8. You can get your from Cloud-Messaging tab - - navigate to the setting of your project Open the Cloud Messaging tab. - - scroll to the Web configuration section. - - In the Web Push certificates tab, click Generate Key Pair. The console displays a notice that the key pair was generated. You get your Vapid key form there. + - navigate to the setting of your project Open the Cloud Messaging tab. + - scroll to the Web configuration section. + - In the Web Push certificates tab, click Generate Key Pair. The console displays a notice that the key pair was generated. You get your Vapid key form there. You should fill in these values in their relevant fields in the `.env` file. @@ -142,7 +146,9 @@ It will redirect to 6006 port. Find detailed information [here](https://storyboo To run cypress tests: `npx cypress run` It will open a prompt displaying all the tests. You can find detailed information [here](https://docs.cypress.io/guides/guides/command-line#How-to-run-commands) + # Firebase Emulator Flow + ```mermaid flowchart TB sougatarmail("Email Pass Login \n \n sougatariju13@gmail.com \n\n Pass : 123456 ") @@ -169,8 +175,11 @@ flowchart TB auth[(Authentication)]--->mahendarmail--->mahendar auth[(Authentication)]--->sarfarazmail--->sarfaraz ``` + # Install, Configure and Integrate Firebase Emulator Suite + ## **How to install** + #### Before installing the Emulator Suite you will need:- - Node.js version 8.0 or higher. @@ -178,53 +187,56 @@ flowchart TB - Java JDK version 11 or higher. #### To install the Emulator Suite: -- Install the Firebase CLI. If you don't already have the Firebase CLI installed, install it (https://firebase.google.com/docs/cli#install-cli-windows). + +- Install the Firebase CLI. If you don't already have the Firebase CLI installed, install it (https://firebase.google.com/docs/cli#install-cli-windows). You will need CLI version 8.14.0 or higher to use the Emulator Suite. - You can install the Firebase CLI using npm (the Node Package Manager). Note that you will need to install Node.js and npm. Installing Node.js should install npm as well. ``` npm install -g firebase-tools ``` - + - You can check which version you have installed using the following command in the terminal. - + ``` firebase --version ``` - + - After Installation, Initialize the firebase Using - + ``` firebase init ``` -- Now Set up the Emulator Suite. The Below Command Provides you the emultors Like, Authentication,Firestore, Realtime Database,Storage DataBase etc. - Select the emulators you needed - +- Now Set up the Emulator Suite. The Below Command Provides you the emultors Like, Authentication,Firestore, Realtime Database,Storage DataBase etc. + Select the emulators you needed + ``` firebase init emulators -``` -## **How to Configure** +``` + +## **How to Configure** #### Configure Emulator Suite:- - You can optionally configure the emulators network ports and path to Security Rules definitions in the firebase.json file: - Change emulator ports by running `firebase init emulators` or by editing `firebase.json` manually. - -Note:-(***Recommended***)If you don't configure these settings, the emulators will listen on their default ports, and the Cloud Firestore, Realtime Database and Cloud Storage - emulators will run with open data security. + +Note:-(**_Recommended_**)If you don't configure these settings, the emulators will listen on their default ports, and the Cloud Firestore, Realtime Database and Cloud Storage +emulators will run with open data security. + #### Port Configuration - These are the Default Ports Provided you can change them while initializing(if needed) -| Emulator | Ports| -| --- | --- | -| Authentication | 9099 | -| Emulator Suite UI | 9099 | -| Cloud Functions | 9099 | -| Realtime Database | 9099 | -| Cloud Firestore | 8080 | -| Cloud Storage | 8080 | -| Firebase Hosting | 5000 | -| Pub/Sub | 8085 | +| Emulator | Ports | +| ----------------- | ----- | +| Authentication | 9099 | +| Emulator Suite UI | 9099 | +| Cloud Functions | 9099 | +| Realtime Database | 9099 | +| Cloud Firestore | 8080 | +| Cloud Storage | 8080 | +| Firebase Hosting | 5000 | +| Pub/Sub | 8085 | - The emulators will take Security Rules configuration from the database, firestore and storage configuration keys in `firebase.json`. @@ -233,20 +245,25 @@ Note:-(***Recommended***)If you don't configure these settings, the emulators wi - Installation and configuration of the Emulator Suite with containers in a typical CI setup is straightforward. #### To Start the Emulators:- + - The Emulators can be start according to the user preferences, .Find detailed information [here](https://github.com/scorelab/Codelabz/blob/master/local-firebase-emulators-import-export.md) ``` firebase emulators:start ``` -or + +or + ``` npm run emulator ``` + - You need to run `firebase emulators:start` or `npm run emulator` first and then run `npm start` inorder to run the codelabz webpage. - You can check/open Emulator suite by visiting [localhost:4000](http://localhost:4000). - + #### Import and Export:- -- To import ```npm run emulator-import``` -- To export ```npm run emulator-export``` + +- To import `npm run emulator-import` +- To export `npm run emulator-export` - Note:- To understand beforehand about importing data from and to emulators, please see [this](https://github.com/scorelab/Codelabz/blob/master/local-firebase-emulators-import-export.md). - **READ THE [RULE-SET](https://github.com/scorelab/Codelabz/blob/master/rule_sets.md) FILE PRIOR TO USING "testdata" FILE.** diff --git a/old_local-firebase-emulators-import-export.md b/old_local-firebase-emulators-import-export.md index 897f8232..5ac14473 100644 --- a/old_local-firebase-emulators-import-export.md +++ b/old_local-firebase-emulators-import-export.md @@ -1,16 +1,22 @@ # Start up Emulators + #### The Emulators can be start based on the user preferences:- + **NOTE**:- To Run the webpage First you need to start Emulators to load the Database You can start the emulators in different mode. -### **Initial Start** -- To Start all the emulators at a time we can use the command `firebase emulators:start` + +### **Initial Start** + +- To Start all the emulators at a time we can use the command `firebase emulators:start` ![image](https://user-images.githubusercontent.com/80961448/176614967-c3fd2564-6661-49c5-a44f-73b1b87847cf.png) -### **Start Particular Emulator** -- By including `--only` flag will Limit which emulators to start. Supply a comma-separated list of emulator names, specifying one or more of 'auth', 'database', 'firestore', 'functions', 'hosting', or 'pubsub'. +### **Start Particular Emulator** + +- By including `--only` flag will Limit which emulators to start. Supply a comma-separated list of emulator names, specifying one or more of 'auth', 'database', 'firestore', 'functions', 'hosting', or 'pubsub'. - Example:-`firebase emulators:start --only firestore` will start the firestore emulator only. # Import Data to Emulators + - To import data to emulators there should be a pre-exisiting data file which contains data about respective Emulators. - we can get the data file by exporting it from the database emualators(if your are using for first time the must be created). - To import data we can use the command in terminal while starting the emulators `firebase emulators:start --import=file_name`, the file name can be any thing if the file exist in the project folder then the data from it is imported to the firebase local emulators. @@ -18,9 +24,9 @@ ![image](![image](https://user-images.githubusercontent.com/80961448/183344475-bd45326a-3cac-4057-a33e-97218b64c875.png) # Export Data From Emulators + - To export data from Local Emulators use the command `firebase emulators:export file_name` - if the path is specified for the file the data is stored at the particular location else it will be in the stored in the project file itself - if the file_name is already exisiting the data in the file is overidded else the new file will be created if the file isn't exist already. ![image](https://user-images.githubusercontent.com/80961448/176616740-d31e4572-25be-4249-b598-96cf87d04b59.png) - diff --git a/package.json b/package.json index 450a65e7..8f394d6b 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "lint": "eslint .", + "lint": "eslint .", "format": "prettier --write .", "dev": "vite", "build": "vite build", @@ -17,7 +17,8 @@ "test": "start-server-and-test dev http://localhost:5173 cy:run", "emulator-import": "firebase emulators:start --import=testdata", "emulator": "firebase emulators:start", - "emulator-export": "firebase emulators:export" + "emulator-export": "firebase emulators:export", + "prepare": "husky install" }, "dependencies": { "@ant-design/icons": "^4.2.2", @@ -91,7 +92,8 @@ "@vitejs/plugin-react-swc": "^3.0.0", "common-tags": "^1.8.2", "cypress": "^12.3.0", - "husky": "^8.0.3", + "eslint-plugin-react": "^7.33.2", + "husky": "^8.0.0", "less": "^4.1.3", "lint-staged": "^14.0.0", "vite": "^4.0.0", @@ -102,5 +104,4 @@ "pre-commit": "lint-staged" } } - } diff --git a/remoteconfig.template.json b/remoteconfig.template.json index 9e26dfee..0967ef42 100644 --- a/remoteconfig.template.json +++ b/remoteconfig.template.json @@ -1 +1 @@ -{} \ No newline at end of file +{} diff --git a/rule_sets.md b/rule_sets.md index 04d8924a..7bddf97b 100644 --- a/rule_sets.md +++ b/rule_sets.md @@ -1,20 +1,29 @@ # Important points while using the "test data" file:- -- You can use the data in the "testdata" file by importing while starting the emulators,please refer firebase_import_export.md file for indetailed information. + +- You can use the data in the "testdata" file by importing while starting the emulators,please refer firebase_import_export.md file for indetailed information. - if you import the data using "testdata" file the you can see the sample data that contains users,sample tutorials and organisation details. - If your using the script for importing and exporting the data, all the changes made in emulators will be reflecting the data associated in the "testdata" file upon exporting it. - Don't perform export operation,if no changes are made to the emulators(like adding newuser, creating new orgs and create new codelabz tutorial) this may change the data in the testdata file. - Do not use export operation if you haven't import the data from testdata before - you can perform export operation if you have performed import operation while starting the emulators so that the data from testdata file will i.e., remain no change or additional data is appended + # Export the Emulators data in your own file:- + Insted of using the pre-existing data file "testdata" you can export the data in your own file externally. + - To export the data to any external file you can use the below command in the terminal + ``` firebase emulators:export file_name ``` -- You can give the file name with preferred file location(on your local) in the "file_name" flag if you don't mention location ,the file will be created in the current folder itself and if the file is already existing you are asked to over ride the data in it while performing this task. + +- You can give the file name with preferred file location(on your local) in the "file_name" flag if you don't mention location ,the file will be created in the current folder itself and if the file is already existing you are asked to over ride the data in it while performing this task. - If the file isn't exist already a new file will be create at the given location with the given file name and data is exported into that file. + # Import data from your own file to Emulators:- + - You import that specific data file while starting emulators only using the following command:- + ``` firebase emulators:start --import=file_name ``` diff --git a/src/App.jsx b/src/App.jsx index f33e767a..8598d544 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,20 +6,20 @@ import { useDispatch, useSelector } from "react-redux"; import { getProfileData } from "./store/actions"; const App = () => { - const firebase = useFirebase(); - const dispatch = useDispatch(); - const organizations = useSelector( - ({ - firebase: { - profile: { organizations }, - }, - }) => organizations - ); + const firebase = useFirebase(); + const dispatch = useDispatch(); + const organizations = useSelector( + ({ + firebase: { + profile: { organizations } + } + }) => organizations + ); - useEffect(() => { - getProfileData(organizations)(firebase, dispatch); - }, [organizations, firebase, dispatch]); - return ; + useEffect(() => { + getProfileData(organizations)(firebase, dispatch); + }, [organizations, firebase, dispatch]); + return ; }; export default App; diff --git a/src/App.less b/src/App.less index d644610e..78d12f07 100644 --- a/src/App.less +++ b/src/App.less @@ -2,774 +2,774 @@ @import "./css/codelabz.css"; img { - max-width: 100%; + max-width: 100%; } .brand-font { - font-family: "Aldrich", sans-serif; + font-family: "Aldrich", sans-serif; } .signin-image { - padding-right: 50px; - max-height: 80vh; + padding-right: 50px; + max-height: 80vh; } .homepage-image { - padding-bottom: 20px; - max-height: calc(100vh - 72px); + padding-bottom: 20px; + max-height: calc(100vh - 72px); } .homepage-interface { - padding: 20px 0px; - width: 100%; - max-width: calc(100vw - 48px); + padding: 20px 0px; + width: 100%; + max-width: calc(100vw - 48px); } .signup-image { - padding-left: 50px; + padding-left: 50px; } .auth-image-col { - max-width: 800px; + max-width: 800px; } .auth-form-col { - max-width: 500px; + max-width: 500px; } .home-row { - text-align: center; - overflow-x: hidden; - overflow-y: hidden; + text-align: center; + overflow-x: hidden; + overflow-y: hidden; } .home-left-col { - padding: 0 24px; + padding: 0 24px; } .home-right-col { - padding: 0 24px; + padding: 0 24px; } .home-description { - font-weight: normal; + font-weight: normal; } // footer is visible in the screen .row-fullheight { - min-height: calc( - 100vh - 64px - 245px - ); /* 64px is the height of the navbar, 245px is the height of the footer */ + min-height: calc( + 100vh - 64px - 245px + ); /* 64px is the height of the navbar, 245px is the height of the footer */ } // footer is below the visible screen .row-footer-below { - min-height: calc(100vh - 72px); /* 72px is the height of the navbar */ + min-height: calc(100vh - 72px); /* 72px is the height of the navbar */ } .auth-margin { - margin-bottom: 50px; + margin-bottom: 50px; } @media (min-width: 767px) { - .home-row { - min-height: calc(100vh - 72px); - text-align: left; - } + .home-row { + min-height: calc(100vh - 72px); + text-align: left; + } - .home-title { - font-size: 3rem; - } + .home-title { + font-size: 3rem; + } - .home-description { - font-size: 1.8rem; - } + .home-description { + font-size: 1.8rem; + } - .homepage-interface { - padding: 20px 20px; - width: 80%; - } + .homepage-interface { + padding: 20px 20px; + width: 80%; + } } @media (max-width: 767px) { - .mobile-top-padding { - padding-top: 40px; - } + .mobile-top-padding { + padding-top: 40px; + } - .row-fullheight { - min-height: 100%; /* 72px is the height of the navbar, 285px is the height of the footer */ - } + .row-fullheight { + min-height: 100%; /* 72px is the height of the navbar, 285px is the height of the footer */ + } - .row-footer-below { - min-height: 100%; /* 72px is the height of the navbar, 285px is the height of the footer */ - } + .row-footer-below { + min-height: 100%; /* 72px is the height of the navbar, 285px is the height of the footer */ + } - .auth-margin { - margin-top: 50px; - margin-bottom: 50px; - } + .auth-margin { + margin-top: 50px; + margin-bottom: 50px; + } - .max-height-mobile > .ant-card-body { - max-height: 70vh; - overflow-y: scroll; - } + .max-height-mobile > .ant-card-body { + max-height: 70vh; + overflow-y: scroll; + } } .center { - margin-left: auto; - margin-right: auto; - text-align: center; - align-items: center; - align-self: center; - justify-content: center; - justify-items: center; - justify-self: center; + margin-left: auto; + margin-right: auto; + text-align: center; + align-items: center; + align-self: center; + justify-content: center; + justify-items: center; + justify-self: center; } .text-center { - text-align: center; + text-align: center; } .text-bold { - font-weight: bold; + font-weight: bold; } .code-box-shape { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - width: 50px; - height: 50px; - border-radius: 4px; - background: #1890ff; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: 50px; + height: 50px; + border-radius: 4px; + background: #1890ff; } /* Navbar */ .navbar { - padding-bottom: 1px; - border-bottom: solid 1px #e8e8e8; - background-color: white; - box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.12), - 0 6px 16px -11px rgba(0, 0, 0, 0.08); - position: "sticky"; + padding-bottom: 1px; + border-bottom: solid 1px #e8e8e8; + background-color: white; + box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.12), + 0 6px 16px -11px rgba(0, 0, 0, 0.08); + position: "sticky"; - top: 0; - margin-bottom: 20px; - z-index: 99990; + top: 0; + margin-bottom: 20px; + z-index: 99990; } .headroom--pinned { - box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.12), - 0 6px 16px -11px rgba(0, 0, 0, 0.08); - z-index: 800 !important; + box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.12), + 0 6px 16px -11px rgba(0, 0, 0, 0.08); + z-index: 800 !important; } .headroom-wrapper { - z-index: 800; - height: fit-content!important; + z-index: 800; + height: fit-content !important; } .navbar-mini { - background-color: white; - z-index: 99990; + background-color: white; + z-index: 99990; } .nav-header { - background-color: white; - border-bottom: 0; - padding: 0 4px 0 24px; + background-color: white; + border-bottom: 0; + padding: 0 4px 0 24px; } .logo { - width: 200px; - float: left; + width: 200px; + float: left; } .logo a { - display: inline-block; - font-size: 20px; - text-transform: capitalize; + display: inline-block; + font-size: 20px; + text-transform: capitalize; } .navbar-menu { - width: calc(100% - 200px); - float: left; + width: calc(100% - 200px); + float: left; } .navbar-menu .ant-layout-header { - padding: 0 20px; + padding: 0 20px; } .navbar-menu .ant-menu-horizontal { - border-bottom: 0; + border-bottom: 0; } .navbar-menu .ant-menu-item { - padding-bottom: 0px; + padding-bottom: 0px; } .navbar-menu .leftMenu { - float: left; + float: left; } .navbar-menu .rightMenu { - float: right; + float: right; } .barsMenu { - float: right; - height: 32px; - padding: 6px; - margin-top: 10px; - display: none; - background: none; + float: right; + height: 32px; + padding: 6px; + margin-top: 10px; + display: none; + background: none; } .barsBtn { - display: block; - width: 20px; - height: 2px; - background: grey; - position: relative; + display: block; + width: 20px; + height: 2px; + background: grey; + position: relative; } .barsBtn:after, .barsBtn:before { - content: attr(x); - width: 20px; - position: absolute; - top: -6px; - left: 0; - height: 2px; - background: grey; + content: attr(x); + width: 20px; + position: absolute; + top: -6px; + left: 0; + height: 2px; + background: grey; } .barsBtn:after { - top: auto; - bottom: -6px; + top: auto; + bottom: -6px; } .ant-drawer-body { - padding: 0; + padding: 0; } .ant-drawer-body .ant-menu-horizontal > .ant-menu-item, .ant-drawer-body .ant-menu-horizontal > .ant-menu-submenu { - display: inline-block; - width: 100%; + display: inline-block; + width: 100%; } .ant-drawer-body .ant-menu-horizontal { - border-bottom: none; + border-bottom: none; } .ant-drawer-body .ant-menu-horizontal > .ant-menu-item:hover { - border-bottom-color: transparent; + border-bottom-color: transparent; } @media (max-width: 767px) { - .barsMenu { - display: inline-block; - margin-right: 10px; - } + .barsMenu { + display: inline-block; + margin-right: 10px; + } - .leftMenu, - .rightMenu { - display: none; - } + .leftMenu, + .rightMenu { + display: none; + } - .logo a { - margin-left: -10px; - } + .logo a { + margin-left: -10px; + } - .ant-drawer-title > .brand-font { - margin-bottom: 0; - } + .ant-drawer-title > .brand-font { + margin-bottom: 0; + } } .twitter > span, .google > span, .github > span, .facebook > span { - color: #ffffff; - transition: color 0.2s; + color: #ffffff; + transition: color 0.2s; } .sm-text { - font-size: 16px; + font-size: 16px; } .twitter, .twitter:focus:not(:hover) { - border-color: #1da1f2; - background-color: #1da1f2; + border-color: #1da1f2; + background-color: #1da1f2; } .twitter-color { - color: #1da1f2; + color: #1da1f2; } .twitter:hover { - border-color: #1da1f2; + border-color: #1da1f2; } .twitter:hover > span { - color: #1da1f2; - transition: color 0.2s; + color: #1da1f2; + transition: color 0.2s; } .google, .google:focus:not(:hover) { - border-color: #db3236; - background-color: #db3236; + border-color: #db3236; + background-color: #db3236; } .google-color { - color: #db3236; + color: #db3236; } .google:hover { - border-color: #db3236; + border-color: #db3236; } .google:hover > span { - color: #db3236; - transition: color 0.2s; + color: #db3236; + transition: color 0.2s; } .github, .github:focus:not(:hover) { - border-color: #211f1f; - background-color: #211f1f; + border-color: #211f1f; + background-color: #211f1f; } .github-color { - color: #211f1f; + color: #211f1f; } .github:hover { - border-color: #211f1f; + border-color: #211f1f; } .github:hover > span { - color: #211f1f; - transition: color 0.2s; + color: #211f1f; + transition: color 0.2s; } .facebook, .facebook:focus:not(:hover) { - border-color: #4267b2; - background-color: #4267b2; + border-color: #4267b2; + background-color: #4267b2; } .facebook-color { - color: #4267b2; + color: #4267b2; } .facebook:hover { - border-color: #4267b2; + border-color: #4267b2; } .facebook:hover > span { - color: #4267b2; - transition: color 0.2s; + color: #4267b2; + transition: color 0.2s; } .linkedin-color { - color: #0176b2; + color: #0176b2; } .website-color { - color: #000000; + color: #000000; } /* spinner */ .pulse { - animation: pulse 2s ease-out; - animation-iteration-count: infinite; - opacity: 1; - font-size: 2rem; - color: @primary-color; + animation: pulse 2s ease-out; + animation-iteration-count: infinite; + opacity: 1; + font-size: 2rem; + color: @primary-color; - font-family: "Aldrich", sans-serif; + font-family: "Aldrich", sans-serif; } @keyframes pulse { - 0% { - opacity: 0; - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - } + 0% { + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } } .ant-form-item-explain { - padding-top: 8px; - padding-bottom: 16px; + padding-top: 8px; + padding-bottom: 16px; } .call-to-action-btn { - height: 50px; - padding: 6px 25px; - font-size: 20px; - border-radius: @border-radius-base; + height: 50px; + padding: 6px 25px; + font-size: 20px; + border-radius: @border-radius-base; } .flip-image { - transform: scaleX(-1); - -webkit-transform: scaleX(-1); + transform: scaleX(-1); + -webkit-transform: scaleX(-1); } .light-green-bg { - background-color: #f7fcfb; + background-color: #f7fcfb; } .light-grey-bg { - background-color: fade(@primary-color, 5%); + background-color: fade(@primary-color, 5%); } .footer-link { - transition: all 0.2s; - color: rgba(0, 0, 0, 0.9); - text-decoration: none; + transition: all 0.2s; + color: rgba(0, 0, 0, 0.9); + text-decoration: none; } .dash-image { - max-height: calc(100vh - 250px); + max-height: calc(100vh - 250px); } .div-transition { - transition: flex 0.2s; + transition: flex 0.2s; } footer { - margin-top: 0px; + margin-top: 0px; } .mini-sidebar-column { - position: relative; - left: 0; - top: 0; - width: 66px; - // min-height: calc(100vh - 64px); - border-right: 1px solid #e8e8e8; - overflow-y: hidden; - background-color: white; - // box-shadow: 6px 0px 6px -6px rgba(0, 0, 0, 0.1); - padding-bottom: 16px; - margin-bottom: -50px; //height of footer margin - height: 100%; + position: relative; + left: 0; + top: 0; + width: 66px; + // min-height: calc(100vh - 64px); + border-right: 1px solid #e8e8e8; + overflow-y: hidden; + background-color: white; + // box-shadow: 6px 0px 6px -6px rgba(0, 0, 0, 0.1); + padding-bottom: 16px; + margin-bottom: -50px; //height of footer margin + height: 100%; } .mini-sidebar-column:hover { - overflow-y: overlay; + overflow-y: overlay; } /* width */ .mini-sidebar-column::-webkit-scrollbar { - width: 8px; - background: transparent; - background-color: rgba(0, 0, 0, 0); - border-radius: 50px; + width: 8px; + background: transparent; + background-color: rgba(0, 0, 0, 0); + border-radius: 50px; } /* Handle */ .mini-sidebar-column::-webkit-scrollbar-thumb { - border-color: transparent; - border-style: solid; - border-width: 2px; - border-radius: 50px; - background-clip: padding-box; - background-color: rgba(0, 0, 0, 0.2); - cursor: pointer; + border-color: transparent; + border-style: solid; + border-width: 2px; + border-radius: 50px; + background-clip: padding-box; + background-color: rgba(0, 0, 0, 0.2); + cursor: pointer; } /* Handle on hover */ .mini-sidebar-column::-webkit-scrollbar-thumb:hover { - background: rgba(0, 0, 0, 0.5); - width: 8px; - cursor: pointer; + background: rgba(0, 0, 0, 0.5); + width: 8px; + cursor: pointer; } .mini-sidebar-column::-webkit-scrollbar-corner { - border-radius: 50%; + border-radius: 50%; } .minisidebar-item { - margin-top: 16px; - border: #ffffff 1px solid; - border-radius: 50%; - padding: 3px; - transition: all 0.2s; - cursor: pointer; - filter: opacity(0.9); + margin-top: 16px; + border: #ffffff 1px solid; + border-radius: 50%; + padding: 3px; + transition: all 0.2s; + cursor: pointer; + filter: opacity(0.9); } .minisidebar-item-no-border { - border: #ffffff 1px solid !important; + border: #ffffff 1px solid !important; } .minisidebar-item:hover:not(.minisidebar-active) { - border: transparent 1px solid !important; - cursor: pointer; - transition: all 0.2s; - filter: opacity(1); + border: transparent 1px solid !important; + cursor: pointer; + transition: all 0.2s; + filter: opacity(1); } .minisidebar-item:active:not(.minisidebar-active) { - // border: @primary-color 1px solid !important; + // border: @primary-color 1px solid !important; - transition: all 0s; + transition: all 0s; } .minisidebar-item-border { - border: #b4b4b4 1px solid; + border: #b4b4b4 1px solid; } .minisidebar-active { - border: @primary-color 1px solid !important; + border: @primary-color 1px solid !important; - box-shadow: 0 0 0 2px rgba(58, 175, 169, 0.2); - filter: opacity(1); + box-shadow: 0 0 0 2px rgba(58, 175, 169, 0.2); + filter: opacity(1); } @media (min-width: 767px) { - .org-row { - margin-bottom: -42px; - } + .org-row { + margin-bottom: -42px; + } - .ant-card-extra { - padding: 0px; - } + .ant-card-extra { + padding: 0px; + } } .org-image-background { - align-items: center; - text-align: center; - border-radius: 6px; + align-items: center; + text-align: center; + border-radius: 6px; } .org-image { - //border: 1px solid #f0f0f0; - padding: 0 2px; + //border: 1px solid #f0f0f0; + padding: 0 2px; } .org-image-card > .ant-card-body { - padding: 0; - border: 0; + padding: 0; + border: 0; } .org-image-card - > .ant-card-body - > .ant-upload-picture-card-wrapper - > .ant-upload.ant-upload-select-picture-card { - width: 100%; + > .ant-card-body + > .ant-upload-picture-card-wrapper + > .ant-upload.ant-upload-select-picture-card { + width: 100%; } .form-label { - margin-bottom: 4px; - display: inline-block; - font-size: 0.8rem !important; + margin-bottom: 4px; + display: inline-block; + font-size: 0.8rem !important; } .text-justified { - text-align: justify; + text-align: justify; } .tutorial-steps-sider { - // min-height: calc(100vh - 64px); - // overflow-y: hidden; - height: 100%; + // min-height: calc(100vh - 64px); + // overflow-y: hidden; + height: 100%; } .tutorial-steps-sider:hover { - overflow-y: auto; + overflow-y: auto; } .tutorial-title-header { - width: 100%; - border-bottom: solid 1px #e8e8e8; - background-color: @primary-color; + width: 100%; + border-bottom: solid 1px #e8e8e8; + background-color: @primary-color; } .scrollfix { - border-right: solid 1px #e8e8e8; - // padding-right: 15px; + border-right: solid 1px #e8e8e8; + // padding-right: 15px; } .ant-page-header-heading-title { - white-space: inherit !important; + white-space: inherit !important; } .ant-page-header-fix { - white-space: break-spaces !important; - background-color: white; + white-space: break-spaces !important; + background-color: white; } .ant-page-header-unfix { - white-space: nowrap !important; - background-color: white; + white-space: nowrap !important; + background-color: white; } .ant-page-header.low-padding { - padding: 4px 24px !important; + padding: 4px 24px !important; } .tutorial-content { - min-height: calc(100vh); - // overflow-y: auto; - font-family: "Verdana", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", - monospace; - text-align: justify; + min-height: calc(100vh); + // overflow-y: auto; + font-family: "Verdana", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", + monospace; + text-align: justify; } @media (max-width: 767px) { - .tutorial-content { - min-height: calc(100vh); - } + .tutorial-content { + min-height: calc(100vh); + } } .ant-layout { - background-color: white !important; + background-color: white !important; } .tutorial-button-row { - position: fixed; - bottom: 54px; - width: 100%; + position: fixed; + bottom: 54px; + width: 100%; } .tutorial-paper { - background-color: white; - box-shadow: 0 0 6px -2px rgba(0, 0, 0, 0.32), - 0 0 16px -11px rgba(0, 0, 0, 0.16); - max-width: 1080px; - width: 100%; - border-radius: 2px; + background-color: white; + box-shadow: 0 0 6px -2px rgba(0, 0, 0, 0.32), + 0 0 16px -11px rgba(0, 0, 0, 0.16); + max-width: 1080px; + width: 100%; + border-radius: 2px; } .ant-steps-item-tail { - height: 120% !important; - padding: 32px 0 10px !important; - // display: none !important; + height: 120% !important; + padding: 32px 0 10px !important; + // display: none !important; } .ant-steps-item-container { - padding: 0px 10px 0px 10px; - margin-bottom: 16px; + padding: 0px 10px 0px 10px; + margin-bottom: 16px; } .ant-steps-vertical .ant-steps-item-content { - min-height: auto; + min-height: auto; } .ant-steps-item-active > .ant-steps-item-container { - background-color: #f5fbfb; - padding: 16px 10px 16px 10px; - border: 1px solid fade(@primary-color, 60%); + background-color: #f5fbfb; + padding: 16px 10px 16px 10px; + border: 1px solid fade(@primary-color, 60%); - border-radius: @border-radius-base; - transition: padding 0.1s ease-out; - z-index: inherit; + border-radius: @border-radius-base; + transition: padding 0.1s ease-out; + z-index: inherit; } .ant-steps-vertical - > .ant-steps-item - > .ant-steps-item-container - > .ant-steps-item-tail::after { - margin-left: 10px; - z-index: -1; + > .ant-steps-item + > .ant-steps-item-container + > .ant-steps-item-tail::after { + margin-left: 10px; + z-index: -1; } .ant-steps-item-active > .ant-steps-item-container > .ant-steps-item-tail { - margin-top: 34px !important; - height: 100% !important; - transition: all 0.1s ease-in; + margin-top: 34px !important; + height: 100% !important; + transition: all 0.1s ease-in; } .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail { - display: inline-block !important; - height: 120% !important; + display: inline-block !important; + height: 120% !important; } .ant-steps-item-finish:last-of-type - > .ant-steps-item-container - > .ant-steps-item-tail { - display: inline-block !important; - height: 110% !important; + > .ant-steps-item-container + > .ant-steps-item-tail { + display: inline-block !important; + height: 110% !important; } .editor-icon { - border: 0; - border-radius: 50%; - padding: 3px; - transition: all 0.2s; - width: 35px; - display: inline-block; - background-color: white; - margin-right: 8px; + border: 0; + border-radius: 50%; + padding: 3px; + transition: all 0.2s; + width: 35px; + display: inline-block; + background-color: white; + margin-right: 8px; } .editor-icon > .ant-badge > .ant-badge-dot { - right: 4px; - top: 26px; - width: 10px; - height: 10px; - box-shadow: 0 0 0 2px #fff; + right: 4px; + top: 26px; + width: 10px; + height: 10px; + box-shadow: 0 0 0 2px #fff; } .editor-icon .ant-avatar { - margin-right: 0px !important; + margin-right: 0px !important; } .ant-btn-text { - color: rgba(0, 0, 0, 0.65); - background: transparent; - border-color: transparent; - box-shadow: none; + color: rgba(0, 0, 0, 0.65); + background: transparent; + border-color: transparent; + box-shadow: none; } .tutorial-title-input, .tutorial-title-input > .ant-input { - border-top: 0 !important; - border-left: 0 !important; - border-right: 0 !important; - border-radius: 0 !important; - font-weight: bold; - color: black; + border-top: 0 !important; + border-left: 0 !important; + border-right: 0 !important; + border-radius: 0 !important; + font-weight: bold; + color: black; } .tutorial-title-input > .ant-input-suffix { - font-size: 14px; - font-weight: normal; + font-size: 14px; + font-weight: normal; } .custom-step - > .ant-steps-item-container - > .ant-steps-item-content - > .ant-steps-item-title { - width: 100%; + > .ant-steps-item-container + > .ant-steps-item-content + > .ant-steps-item-title { + width: 100%; } .tutorial-card > .ant-card-actions > li { - text-align: right; - padding: 0 12px; + text-align: right; + padding: 0 12px; } .tutorial-card > .ant-card-actions { - border-top: none; + border-top: none; } .rc-color-picker-panel { - margin: 0 auto !important; + margin: 0 auto !important; } a { - text-decoration: none; - color: #271d1d; + text-decoration: none; + color: #271d1d; } diff --git a/src/components/AuthPage/ForgotPassword/index.jsx b/src/components/AuthPage/ForgotPassword/index.jsx index 57ea45e1..0af4016b 100644 --- a/src/components/AuthPage/ForgotPassword/index.jsx +++ b/src/components/AuthPage/ForgotPassword/index.jsx @@ -16,160 +16,164 @@ import { Alert } from "@mui/material"; import PropTypes from "prop-types"; const useStyles = makeStyles({ - root: { - padding: "2rem", - background: "theme.palette.background.paper", - border: "none", - boxShadow: "none", - }, - heading: { - fontWeight: 600, - }, + root: { + padding: "2rem", + background: "theme.palette.background.paper", + border: "none", + boxShadow: "none" + }, + heading: { + fontWeight: 600 + } }); const ForgotPassword = ({ - rootBackground = "rgba(0,0,0,.01)", - confirmationText = "We have sent you an email containing the link to reset your password .Please check your inbox including spams", - fontweight = "800", - buttonColor = "blue", + rootBackground = "rgba(0,0,0,.01)", + confirmationText = "We have sent you an email containing the link to reset your password .Please check your inbox including spams", + fontweight = "800", + buttonColor = "blue" }) => { - const firebase = useFirebase(); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(""); - const [success, setSuccess] = useState(false); - const [email, setEmail] = useState(""); - const [open, setOpen] = React.useState(true); - const [isValidEmail, setIsValidEmail] = useState(false); - const errorProps = useSelector(({ auth }) => auth.profile.error); - const loadingProps = useSelector(({ auth }) => auth.profile.loading); - const dispatch = useDispatch(); + const firebase = useFirebase(); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(""); + const [success, setSuccess] = useState(false); + const [email, setEmail] = useState(""); + const [open, setOpen] = React.useState(true); + const [isValidEmail, setIsValidEmail] = useState(false); + const errorProps = useSelector(({ auth }) => auth.profile.error); + const loadingProps = useSelector(({ auth }) => auth.profile.loading); + const dispatch = useDispatch(); - useEffect(() => setError(errorProps), [errorProps]); - useEffect(() => setLoading(loadingProps), [loadingProps]); - useEffect(() => setOpen(true), [loadingProps]); + useEffect(() => setError(errorProps), [errorProps]); + useEffect(() => setLoading(loadingProps), [loadingProps]); + useEffect(() => setOpen(true), [loadingProps]); - useEffect(() => { - if (errorProps === false && loadingProps === false) { - setSuccess(true); - } else { - setSuccess(false); - } - }, [errorProps, loadingProps]); + useEffect(() => { + if (errorProps === false && loadingProps === false) { + setSuccess(true); + } else { + setSuccess(false); + } + }, [errorProps, loadingProps]); - useEffect( - () => () => { - clearAuthError()(dispatch); - }, - [dispatch] - ); + useEffect( + () => () => { + clearAuthError()(dispatch); + }, + [dispatch] + ); - const onSubmit = async (values) => { - values.preventDefault(); - setError(""); - await sendPasswordResetEmail(email)(firebase, dispatch); - }; + const onSubmit = async values => { + values.preventDefault(); + setError(""); + await sendPasswordResetEmail(email)(firebase, dispatch); + }; - const handleChange =(e)=>{ - const enteredEmail = e.target.value; - setEmail(enteredEmail) - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+\s*$/; - const isValid = emailRegex.test(enteredEmail); - setIsValidEmail(isValid); - } - const classes = useStyles(); + const handleChange = e => { + const enteredEmail = e.target.value; + setEmail(enteredEmail); + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+\s*$/; + const isValid = emailRegex.test(enteredEmail); + setIsValidEmail(isValid); + }; + const classes = useStyles(); - return ( - - - Trouble logging in? - -

- Don't worry, we got it covered.
- Enter the email address registered with us and -
we will send you a link to reset your password. -

+ return ( + + + Trouble logging in? + +

+ Don't worry, we got it covered.
+ Enter the email address registered with us and +
we will send you a link to reset your password. +

- {error && ( - - { - setOpen(false); - }} - message={""}> - {error} - - - )} + {error && ( + + { + setOpen(false); + }} + message={""} + > + {error} + + + )} - {success && ( - - { - setOpen(false); - }} - message={""}> - {confirmationText} - - - )} + {success && ( + + { + setOpen(false); + }} + message={""} + > + {confirmationText} + + + )} -
- - -   - - } - /> - - - - or - - - - Back to Sign in - - - - - New to CodeLabz?{" "} - Create an account - - -
- ); +
+ + +   + + } + /> + + + + or + + + + Back to Sign in + + + + + New to CodeLabz?{" "} + Create an account + + +
+ ); }; ForgotPassword.propTypes = { - rootBackground: PropTypes.string, - confirmationText: PropTypes.string, - fontweight: PropTypes.string, - buttonColor: PropTypes.string, + rootBackground: PropTypes.string, + confirmationText: PropTypes.string, + fontweight: PropTypes.string, + buttonColor: PropTypes.string }; export default ForgotPassword; diff --git a/src/components/AuthPage/Login/ViewAlerts.jsx b/src/components/AuthPage/Login/ViewAlerts.jsx index ae7f982c..39e084f5 100644 --- a/src/components/AuthPage/Login/ViewAlerts.jsx +++ b/src/components/AuthPage/Login/ViewAlerts.jsx @@ -8,86 +8,89 @@ import { useDispatch, useSelector } from "react-redux"; import { resendVerifyEmail } from "../../../store/actions"; const AlertComp = ({ description, type }) => { - const [isOpen, setIsOpen] = useState(true); - return ( - - { - setIsOpen(false); - }}> - - - } - className="mb-16"> - {description} - - - ); + const [isOpen, setIsOpen] = useState(true); + return ( + + { + setIsOpen(false); + }} + > + + + } + className="mb-16" + > + {description} + + + ); }; const ViewAlerts = ({ error }) => { - const [resendLoading, setResendLoading] = useState(false); - const [resendError, setResendError] = useState(""); - const [success, setSuccess] = useState(false); - const dispatch = useDispatch(); - const errorProp = useSelector(({ auth }) => auth.verifyEmail.error); - const loadingProp = useSelector(({ auth }) => auth.verifyEmail.loading); - const email = useSelector(({ auth }) => auth.verifyEmail.email); + const [resendLoading, setResendLoading] = useState(false); + const [resendError, setResendError] = useState(""); + const [success, setSuccess] = useState(false); + const dispatch = useDispatch(); + const errorProp = useSelector(({ auth }) => auth.verifyEmail.error); + const loadingProp = useSelector(({ auth }) => auth.verifyEmail.loading); + const email = useSelector(({ auth }) => auth.verifyEmail.email); - useEffect(() => setResendError(errorProp), [errorProp]); - useEffect(() => setResendLoading(loadingProp), [loadingProp]); + useEffect(() => setResendError(errorProp), [errorProp]); + useEffect(() => setResendLoading(loadingProp), [loadingProp]); - useEffect(() => { - if (errorProp === false && loadingProp === false) { - setSuccess(true); - } else { - setSuccess(false); - } - }, [errorProp, loadingProp]); + useEffect(() => { + if (errorProp === false && loadingProp === false) { + setSuccess(true); + } else { + setSuccess(false); + } + }, [errorProp, loadingProp]); - return ( - <> - {error && error !== "email-unverified" && !resendError && ( - - )} + return ( + <> + {error && error !== "email-unverified" && !resendError && ( + + )} - {error && error === "email-unverified" && !resendError && ( - - Please verify your email. Click{" "} - {" "} - to resend the verification email. - - } - /> - )} + {error && error === "email-unverified" && !resendError && ( + + Please verify your email. Click{" "} + {" "} + to resend the verification email. + + } + /> + )} - {resendError && } + {resendError && } - {resendLoading && ( - - )} + {resendLoading && ( + + )} - {success && ( - - )} - - ); + {success && ( + + )} + + ); }; export default ViewAlerts; diff --git a/src/components/AuthPage/Login/styles.jsx b/src/components/AuthPage/Login/styles.jsx index 2144889c..32376373 100644 --- a/src/components/AuthPage/Login/styles.jsx +++ b/src/components/AuthPage/Login/styles.jsx @@ -1,15 +1,15 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - card: { - border: "1px solid #cccccc", - boxShadow: "none", - [theme.breakpoints.down(750)]: { - minWidth: "90vw", - border: "none", - boxShadow: "none", - }, - }, +const useStyles = makeStyles(theme => ({ + card: { + border: "1px solid #cccccc", + boxShadow: "none", + [theme.breakpoints.down(750)]: { + minWidth: "90vw", + border: "none", + boxShadow: "none" + } + } })); export default useStyles; diff --git a/src/components/AuthPage/SignUp/index.jsx b/src/components/AuthPage/SignUp/index.jsx index 387f3fd2..74acf804 100644 --- a/src/components/AuthPage/SignUp/index.jsx +++ b/src/components/AuthPage/SignUp/index.jsx @@ -11,68 +11,72 @@ import useStyles from "./styles"; import PropTypes from "prop-types"; const SignUp = ({ background = "white" }) => { - const classes = useStyles(); - const handleMouseEnter = (e) => { - e.target.style.color = "royalblue"; - }; - const handleMouseLeave = (e) => { - e.target.style.color = "#03AAFA"; - }; + const classes = useStyles(); + const handleMouseEnter = e => { + e.target.style.color = "royalblue"; + }; + const handleMouseLeave = e => { + e.target.style.color = "#03AAFA"; + }; - return ( - - - - Create an account - - - or - - - - Already have a{" "} - CodeLabz account?{" "} - - { - handleMouseEnter(e); - }} - onMouseLeave={(e) => { - handleMouseLeave(e); - }}> - Log In - - - - - - - ); + return ( + + + + Create an account + + + or + + + + Already have a{" "} + CodeLabz account?{" "} + + { + handleMouseEnter(e); + }} + onMouseLeave={e => { + handleMouseLeave(e); + }} + > + Log In + + + + + + + ); }; SignUp.prototype = { - background: PropTypes.string, + background: PropTypes.string }; export default SignUp; diff --git a/src/components/AuthPage/SignUp/styles.jsx b/src/components/AuthPage/SignUp/styles.jsx index d073884c..67303ce7 100644 --- a/src/components/AuthPage/SignUp/styles.jsx +++ b/src/components/AuthPage/SignUp/styles.jsx @@ -1,15 +1,15 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - card: { - border: "1px solid #cccccc", - boxShadow: "none", - maxWidth: "520px", - [theme.breakpoints.down(750)]: { - border: "none", - boxShadow: "none", - }, - }, +const useStyles = makeStyles(theme => ({ + card: { + border: "1px solid #cccccc", + boxShadow: "none", + maxWidth: "520px", + [theme.breakpoints.down(750)]: { + border: "none", + boxShadow: "none" + } + } })); export default useStyles; diff --git a/src/components/AuthPage/index.jsx b/src/components/AuthPage/index.jsx index 77dae42d..3dd10114 100644 --- a/src/components/AuthPage/index.jsx +++ b/src/components/AuthPage/index.jsx @@ -7,41 +7,42 @@ import Login from "./Login"; import SignUp from "./SignUp"; const AuthPage = ({ type }) => { - const [show, setShow] = useState(false); - const [showType, setShowType] = useState(type); + const [show, setShow] = useState(false); + const [showType, setShowType] = useState(type); - useEffect(() => { - setShow(false); - setTimeout(() => { - setShowType(type); - setShow(true); - }, 200); - }, [type]); + useEffect(() => { + setShow(false); + setTimeout(() => { + setShowType(type); + setShow(true); + }, 200); + }, [type]); - return ( - - - - {showType === "login" ? ( - - ) : showType === "signup" ? ( - - ) : ( - - )} - - - - ); + return ( + + + + {showType === "login" ? ( + + ) : showType === "signup" ? ( + + ) : ( + + )} + + + + ); }; export default UserIsNotAuthenticated(AuthPage); diff --git a/src/components/AuthPage/smButton/smButtons.jsx b/src/components/AuthPage/smButton/smButtons.jsx index b836b0ed..226c31f4 100644 --- a/src/components/AuthPage/smButton/smButtons.jsx +++ b/src/components/AuthPage/smButton/smButtons.jsx @@ -10,58 +10,63 @@ import { signInWithGoogle, signInWithProviderID } from "../../../store/actions"; import useStyles from "./styles"; const SmButtons = () => { - const dispatch = useDispatch(); - const firebase = useFirebase(); - const classes = useStyles(); - return ( - - - - signInWithGoogle()(firebase, dispatch)} - className={classes.google}> - google - - - - - signInWithProviderID("facebook")(firebase, dispatch)} - className={classes.button}> - - Facebook - - - - - signInWithProviderID("twitter")(firebase, dispatch)} - className={classes.button}> - - Twitter - - - - - signInWithProviderID("github")(firebase, dispatch)} - className={classes.button}> - - Github - - - - - ); + const dispatch = useDispatch(); + const firebase = useFirebase(); + const classes = useStyles(); + return ( + + + + signInWithGoogle()(firebase, dispatch)} + className={classes.google} + > + google + + + + + signInWithProviderID("facebook")(firebase, dispatch)} + className={classes.button} + > + + Facebook + + + + + signInWithProviderID("twitter")(firebase, dispatch)} + className={classes.button} + > + + Twitter + + + + + signInWithProviderID("github")(firebase, dispatch)} + className={classes.button} + > + + Github + + + + + ); }; export default SmButtons; diff --git a/src/components/AuthPage/smButton/styles.jsx b/src/components/AuthPage/smButton/styles.jsx index 1839d39c..1ba3d92a 100644 --- a/src/components/AuthPage/smButton/styles.jsx +++ b/src/components/AuthPage/smButton/styles.jsx @@ -1,41 +1,41 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - button: { - height: "35px", - "&:hover": { - transform: "scale(1.2)", - }, - }, - root: { - display: "flex", - alignItems: "center", - alignContent: "center", - justifyContent: "space-around", - flexFlow: "row", - }, - fb: { - fontSize: "42px", - color: "#5269a4", - }, - tw: { - color: "#7194ef", - fontSize: "40px", - }, - git: { - fontSize: "35px", - }, - go: {}, - imageIcon: { - display: "flex", - height: "inherit", - width: "inherit", - margin: "auto", - }, - google: { - textAlign: "center", - fontSize: "35px", - }, +const useStyles = makeStyles(theme => ({ + button: { + height: "35px", + "&:hover": { + transform: "scale(1.2)" + } + }, + root: { + display: "flex", + alignItems: "center", + alignContent: "center", + justifyContent: "space-around", + flexFlow: "row" + }, + fb: { + fontSize: "42px", + color: "#5269a4" + }, + tw: { + color: "#7194ef", + fontSize: "40px" + }, + git: { + fontSize: "35px" + }, + go: {}, + imageIcon: { + display: "flex", + height: "inherit", + width: "inherit", + margin: "auto" + }, + google: { + textAlign: "center", + fontSize: "35px" + } })); export default useStyles; diff --git a/src/components/CardTabs/Events/index.jsx b/src/components/CardTabs/Events/index.jsx index 8161da71..9369bfa4 100644 --- a/src/components/CardTabs/Events/index.jsx +++ b/src/components/CardTabs/Events/index.jsx @@ -6,77 +6,81 @@ import React, { useEffect } from "react"; import { makeStyles } from "@mui/styles"; import { Grid } from "@mui/material"; -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - flexWrap: "wrap", - "& > *": { - margin: theme.spacing(0.5), - }, - marginBottom: "2rem", - width: "100%", - flex: 1, - }, - logo: { - width: "2rem", - height: "2rem", - borderRadius: "50%", - marginRight: "10px", - }, +const useStyles = makeStyles(theme => ({ + root: { + display: "flex", + flexWrap: "wrap", + "& > *": { + margin: theme.spacing(0.5) + }, + marginBottom: "2rem", + width: "100%", + flex: 1 + }, + logo: { + width: "2rem", + height: "2rem", + borderRadius: "50%", + marginRight: "10px" + }, - card: { - display: "flex", - width: "100%", - }, + card: { + display: "flex", + width: "100%" + } })); -const EventsCard = (props) => { - const classes = useStyles(); +const EventsCard = props => { + const classes = useStyles(); - return ( -
- - - - {props.title} - - {props.events.map(function (event, index) { - return ( - - - - + return ( +
+ + + + {props.title} + + {props.events.map(function (event, index) { + return ( + + + + - - - {event.name} - - - {event.date} - - - - ); - })} - - -
- ); + + + {event.name} + + + {event.date} + + + + ); + })} + + +
+ ); }; export default EventsCard; diff --git a/src/components/CardTabs/Tags/index.jsx b/src/components/CardTabs/Tags/index.jsx index a0a5ccd2..8e242114 100644 --- a/src/components/CardTabs/Tags/index.jsx +++ b/src/components/CardTabs/Tags/index.jsx @@ -5,69 +5,70 @@ import Typography from "@mui/material/Typography"; import React, { useEffect } from "react"; import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - justifyContent: "center", - flexWrap: "wrap", - "& > *": { - margin: theme.spacing(0.5), - }, - marginBottom: "2rem", - [theme.breakpoints.down("md")]: { - marginBottom: theme.spacing(0), - margin: "0.25rem", - }, - }, - tagsContainer: { - [theme.breakpoints.down("sm")]: { - maxWidth: "90vw", - display: "flex", - whiteSpace: "nowrap", - overflow: "auto", - "&::-webkit-scrollbar": { - height: "5px", - }, - }, - }, - chip: { - margin: "0px 10px 10px 0px", - borderRadius: "5px", - cursor: "pointer", - }, +const useStyles = makeStyles(theme => ({ + root: { + display: "flex", + justifyContent: "center", + flexWrap: "wrap", + "& > *": { + margin: theme.spacing(0.5) + }, + marginBottom: "2rem", + [theme.breakpoints.down("md")]: { + marginBottom: theme.spacing(0), + margin: "0.25rem" + } + }, + tagsContainer: { + [theme.breakpoints.down("sm")]: { + maxWidth: "90vw", + display: "flex", + whiteSpace: "nowrap", + overflow: "auto", + "&::-webkit-scrollbar": { + height: "5px" + } + } + }, + chip: { + margin: "0px 10px 10px 0px", + borderRadius: "5px", + cursor: "pointer" + } })); -const TagCard = (props) => { - const classes = useStyles(); +const TagCard = props => { + const classes = useStyles(); - return ( -
- - - - Popular Tags - -
- {props.tags.map(function (tag, index) { - return ( - - ); - })} -
- - -
- ); + return ( +
+ + + + Popular Tags + +
+ {props.tags.map(function (tag, index) { + return ( + + ); + })} +
+ + +
+ ); }; export default TagCard; diff --git a/src/components/CardTabs/Users/UserElement.jsx b/src/components/CardTabs/Users/UserElement.jsx index 7c3aee0b..2a6c2a9c 100644 --- a/src/components/CardTabs/Users/UserElement.jsx +++ b/src/components/CardTabs/Users/UserElement.jsx @@ -4,57 +4,62 @@ import AddUser from "../../../assets/images/add-user.svg"; import CheckUser from "../../../assets/images/square-check-regular.svg"; const UserElement = ({ user, index, useStyles }) => { - const classes = useStyles(); - const [icon, setIcon] = useState(true); - return ( - - - - - - {user.name} - - - {user.desg} - - - - { - setIcon(false); - }} - data-testId={index == 0 ? "UserAdd" : ""} - sx={ - icon && { - cursor: "pointer", - } - }> - - - - ); + const classes = useStyles(); + const [icon, setIcon] = useState(true); + return ( + + + + + + {user.name} + + + {user.desg} + + + + { + setIcon(false); + }} + data-testId={index == 0 ? "UserAdd" : ""} + sx={ + icon && { + cursor: "pointer" + } + } + > + + + + ); }; export default UserElement; diff --git a/src/components/CardTabs/Users/index.jsx b/src/components/CardTabs/Users/index.jsx index b9143ab8..c3912d9d 100644 --- a/src/components/CardTabs/Users/index.jsx +++ b/src/components/CardTabs/Users/index.jsx @@ -5,56 +5,57 @@ import React from "react"; import { makeStyles } from "@mui/styles"; import UserElement from "./UserElement"; -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - flexWrap: "wrap", - "& > *": { - margin: theme.spacing(0.5), - }, - flex: 1, - marginBottom: "2rem", - }, - userImg: { - width: "2rem", - height: "2rem", - borderRadius: "50%", - marginRight: "10px", - }, +const useStyles = makeStyles(theme => ({ + root: { + display: "flex", + flexWrap: "wrap", + "& > *": { + margin: theme.spacing(0.5) + }, + flex: 1, + marginBottom: "2rem" + }, + userImg: { + width: "2rem", + height: "2rem", + borderRadius: "50%", + marginRight: "10px" + }, - card: { - display: "flex", - minWidth: "100%", - width: "100%", - }, + card: { + display: "flex", + minWidth: "100%", + width: "100%" + }, - cardContent: { - width: "100%", - }, + cardContent: { + width: "100%" + } })); -const UserCard = (props) => { - const classes = useStyles(); - return ( -
- - - - {props.title} - - {props.users.map(function (user, index) { - return ( - - ); - })} - - -
- ); +const UserCard = props => { + const classes = useStyles(); + return ( +
+ + + + {props.title} + + {props.users.map(function (user, index) { + return ( + + ); + })} + + +
+ ); }; export default UserCard; diff --git a/src/components/CodelabCard/index.jsx b/src/components/CodelabCard/index.jsx index edf46f3a..74575bf8 100644 --- a/src/components/CodelabCard/index.jsx +++ b/src/components/CodelabCard/index.jsx @@ -13,177 +13,187 @@ import useStyles from "./styles"; import PropTypes from "prop-types"; const CardComponent = ({ - title = "I made 100 more CSS loaders for your next project", - tags = "#css #webdev #beginners #html", - profilePic = "demoperson4.jpeg", - org = false, - background = "white", + title = "I made 100 more CSS loaders for your next project", + tags = "#css #webdev #beginners #html", + profilePic = "demoperson4.jpeg", + org = false, + background = "white" }) => { - const classes = useStyles(); - const [logoPath, setLogoPath] = React.useState(""); - React.useEffect(() => { - setLogoPath(org); - }, [org]); + const classes = useStyles(); + const [logoPath, setLogoPath] = React.useState(""); + React.useEffect(() => { + setLogoPath(org); + }, [org]); - return ( - <> - - - {logoPath ? ( - - - logo - - - - ) : ( - - )} - - } - title={ - org ? ( - - Demo Name {for}{" "} - ScoreLabz - - ) : ( - Demo Name - ) - } - subheader="May25,2021(3 days ago)" - titleTypographyProps={{ align: "left" }} - subheaderTypographyProps={{ align: "left" }} - /> - - - - - {title} - - - - - {tags} - - - - - - - - {!org ? ( - - - - - - 222 - - - ) : ( - "" - )} - - - - - - {org ? ( - - comment - - ) : ( - - 20 - - )} - - - - - - 10 min read - - - - - - - - - - ); + return ( + <> + + + {logoPath ? ( + + + logo + + + + ) : ( + + )} + + } + title={ + org ? ( + + Demo Name {for}{" "} + ScoreLabz + + ) : ( + Demo Name + ) + } + subheader="May25,2021(3 days ago)" + titleTypographyProps={{ align: "left" }} + subheaderTypographyProps={{ align: "left" }} + /> + + + + + {title} + + + + + {tags} + + + + + + + + {!org ? ( + + + + + + 222 + + + ) : ( + "" + )} + + + + + + {org ? ( + + comment + + ) : ( + + 20 + + )} + + + + + + 10 min read + + + + + + + + + + ); }; CardComponent.propTypes = { - title: PropTypes.string, - tags: PropTypes.string, - profilePic: PropTypes.string, - org: PropTypes.bool, - background: PropTypes.string, + title: PropTypes.string, + tags: PropTypes.string, + profilePic: PropTypes.string, + org: PropTypes.bool, + background: PropTypes.string }; export default CardComponent; diff --git a/src/components/CodelabCard/styles.jsx b/src/components/CodelabCard/styles.jsx index 077b2832..28e09b57 100644 --- a/src/components/CodelabCard/styles.jsx +++ b/src/components/CodelabCard/styles.jsx @@ -1,107 +1,107 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - card: { - margin: ".5rem", - width: "50vw", - position: "relative", - maxWidth: "80vw", - textAlign: "left", - minHeight: "20vh", - display: "flex", - justifyContent: "center", - flexDirection: "column", - [theme.breakpoints.down(750)]: { - width: "90vw", - }, - }, - heading: { - fontWeight: 700, - marginTop: "-.5rem", - [theme.breakpoints.down(750)]: { - fontSize: "1rem", - }, - }, - body: { - padding: "0rem 2rem 0rem 3.5rem", - paddingBottom: "0rem", - [theme.breakpoints.down(750)]: { - padding: "0rem 1rem 0rem 1rem", - justify: "center", - textAlign: "left", - }, - }, - tags: { - fontWeight: "500", - color: "#455A64", - }, - avatar: { - height: "2rem", - width: "2rem", - position: "relative", - left: "1rem", - border: "1.5px solid black", - borderRadius: "500px", - }, - cardContent: { - paddingTop: "1rem", - }, - cardAction: { - padding: "0rem 0rem 0rem 3.8rem", - [theme.breakpoints.down(750)]: { - padding: "0", - }, - }, - button: { - background: "#BCBCBC", - width: "1rem", - height: "2rem", - marginBottom: ".5rem", - [theme.breakpoints.down(750)]: { - height: "1.4rem", - }, - }, - logo: { - width: "2.5rem", - height: "2rem", - marginTop: "0rem", - zIndex: "1", - }, - organizationLogo: { - display: "flex", - alignItems: "left", - justifyContent: "flex-start", - flexDirecton: "column", - paddingRight: "10px", - width: "auto", - }, - cardHeader: { - padding: "1rem 1rem 0rem 1rem", - }, - readTime: { - [theme.breakpoints.down(750)]: { - fontSize: ".5rem", - background: "red", - display: "none", - }, - }, - headerGrid: { - width: "2rem", - height: ".5rem", - marginTop: "-1.5rem", - border: "0.1px solid #f4f4f4", - }, - personImg: { - zIndex: 2, - position: "relative", - left: "1.5rem", - top: "-.6rem", - border: "1px solid black", - borderRadius: "500px", - }, - logoImg: { - height: "1rem", - }, +const useStyles = makeStyles(theme => ({ + card: { + margin: ".5rem", + width: "50vw", + position: "relative", + maxWidth: "80vw", + textAlign: "left", + minHeight: "20vh", + display: "flex", + justifyContent: "center", + flexDirection: "column", + [theme.breakpoints.down(750)]: { + width: "90vw" + } + }, + heading: { + fontWeight: 700, + marginTop: "-.5rem", + [theme.breakpoints.down(750)]: { + fontSize: "1rem" + } + }, + body: { + padding: "0rem 2rem 0rem 3.5rem", + paddingBottom: "0rem", + [theme.breakpoints.down(750)]: { + padding: "0rem 1rem 0rem 1rem", + justify: "center", + textAlign: "left" + } + }, + tags: { + fontWeight: "500", + color: "#455A64" + }, + avatar: { + height: "2rem", + width: "2rem", + position: "relative", + left: "1rem", + border: "1.5px solid black", + borderRadius: "500px" + }, + cardContent: { + paddingTop: "1rem" + }, + cardAction: { + padding: "0rem 0rem 0rem 3.8rem", + [theme.breakpoints.down(750)]: { + padding: "0" + } + }, + button: { + background: "#BCBCBC", + width: "1rem", + height: "2rem", + marginBottom: ".5rem", + [theme.breakpoints.down(750)]: { + height: "1.4rem" + } + }, + logo: { + width: "2.5rem", + height: "2rem", + marginTop: "0rem", + zIndex: "1" + }, + organizationLogo: { + display: "flex", + alignItems: "left", + justifyContent: "flex-start", + flexDirecton: "column", + paddingRight: "10px", + width: "auto" + }, + cardHeader: { + padding: "1rem 1rem 0rem 1rem" + }, + readTime: { + [theme.breakpoints.down(750)]: { + fontSize: ".5rem", + background: "red", + display: "none" + } + }, + headerGrid: { + width: "2rem", + height: ".5rem", + marginTop: "-1.5rem", + border: "0.1px solid #f4f4f4" + }, + personImg: { + zIndex: 2, + position: "relative", + left: "1.5rem", + top: "-.6rem", + border: "1px solid black", + borderRadius: "500px" + }, + logoImg: { + height: "1rem" + } })); export default useStyles; diff --git a/src/components/Dashboard/index.jsx b/src/components/Dashboard/index.jsx index 5b22529b..55f24d96 100644 --- a/src/components/Dashboard/index.jsx +++ b/src/components/Dashboard/index.jsx @@ -23,10 +23,10 @@ import BusinessIcon from "@mui/icons-material/Business"; import { useFirebase, useFirestore } from "react-redux-firebase"; import { useDispatch, useSelector } from "react-redux"; import { - checkOrgHandleExists, - checkUserHandleExists, - clearProfileEditError, - setUpInitialData, + checkOrgHandleExists, + checkUserHandleExists, + clearProfileEditError, + setUpInitialData } from "../../store/actions"; import { makeStyles } from "@mui/styles"; import countryList from "../../helpers/countryList"; @@ -36,623 +36,627 @@ import Fade from "react-reveal/Fade"; import "../../css/Searchbar/searchbar.css"; import { - validateName, - validateHandle, - validateCountry, - validateOrgWebsite, + validateName, + validateHandle, + validateCountry, + validateOrgWebsite } from "../../helpers/validations"; import PropTypes from "prop-types"; const Dashboard = ({ background = "white", textColor = "black" }) => { - const [loading, setLoading] = useState(false); - const [error, setError] = useState(""); - const [showOrgForm, setShowOrgForm] = useState(null); - const [focusLeft, setFocusLeft] = useState(true); - const [showImage, setShowImage] = useState(false); - const firebase = useFirebase(); - const firestore = useFirestore(); - const dispatch = useDispatch(); - const errorProp = useSelector(({ auth }) => auth.profile.error); - const loadingProp = useSelector(({ auth }) => auth.profile.loading); - const [name, setName] = useState(""); - const [nameValidateError, setNameValidateError] = useState(false); - const [nameValidateErrorMessage, setNameValidateErrorMessage] = useState(""); - const [orgName, setOrgName] = useState(""); - const [orgNameValidateError, setOrgNameValidateError] = useState(false); - const [orgNameValidateErrorMessage, setOrgNameValidateErrorMessage] = - useState(""); - const [handle, setHandle] = useState(""); - const [handleValidateError, setHandleValidateError] = useState(false); - const [handleValidateErrorMessage, setHandleValidateErrorMessage] = - useState(""); - const [orgHandle, setOrgHandle] = useState(""); - const [orgHandleValidateError, setOrgHandleValidateError] = useState(false); - const [orgHandleValidateErrorMessage, setOrgHandleValidateErrorMessage] = - useState(""); - const [country, setCountry] = useState(""); - const [countryValidateError, setCountryValidateError] = useState(false); - const [orgCountry, setOrgCountry] = useState(""); - const [orgCountryValidateError, setOrgCountryValidateError] = useState(false); - const [orgWebsite, setOrgWebsite] = useState(""); - const [orgWebsiteValidateError, setOrgWebsiteValidateError] = useState(false); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(""); + const [showOrgForm, setShowOrgForm] = useState(null); + const [focusLeft, setFocusLeft] = useState(true); + const [showImage, setShowImage] = useState(false); + const firebase = useFirebase(); + const firestore = useFirestore(); + const dispatch = useDispatch(); + const errorProp = useSelector(({ auth }) => auth.profile.error); + const loadingProp = useSelector(({ auth }) => auth.profile.loading); + const [name, setName] = useState(""); + const [nameValidateError, setNameValidateError] = useState(false); + const [nameValidateErrorMessage, setNameValidateErrorMessage] = useState(""); + const [orgName, setOrgName] = useState(""); + const [orgNameValidateError, setOrgNameValidateError] = useState(false); + const [orgNameValidateErrorMessage, setOrgNameValidateErrorMessage] = + useState(""); + const [handle, setHandle] = useState(""); + const [handleValidateError, setHandleValidateError] = useState(false); + const [handleValidateErrorMessage, setHandleValidateErrorMessage] = + useState(""); + const [orgHandle, setOrgHandle] = useState(""); + const [orgHandleValidateError, setOrgHandleValidateError] = useState(false); + const [orgHandleValidateErrorMessage, setOrgHandleValidateErrorMessage] = + useState(""); + const [country, setCountry] = useState(""); + const [countryValidateError, setCountryValidateError] = useState(false); + const [orgCountry, setOrgCountry] = useState(""); + const [orgCountryValidateError, setOrgCountryValidateError] = useState(false); + const [orgWebsite, setOrgWebsite] = useState(""); + const [orgWebsiteValidateError, setOrgWebsiteValidateError] = useState(false); - const [filteredData, setFilteredData] = useState([]); - const [countrySearch, setCountrySearch] = useState(""); + const [filteredData, setFilteredData] = useState([]); + const [countrySearch, setCountrySearch] = useState(""); - const [orgFilteredData, setOrgFilteredData] = useState([]); - const [orgCountrySearch, setOrgCountrySearch] = useState(""); + const [orgFilteredData, setOrgFilteredData] = useState([]); + const [orgCountrySearch, setOrgCountrySearch] = useState(""); - const [orgWebsiteValidateErrorMessage, setOrgWebsiteValidateErrorMessage] = - useState(""); + const [orgWebsiteValidateErrorMessage, setOrgWebsiteValidateErrorMessage] = + useState(""); - const displayName = useSelector( - ({ - firebase: { - profile: { displayName }, - }, - }) => displayName - ); - const children = []; + const displayName = useSelector( + ({ + firebase: { + profile: { displayName } + } + }) => displayName + ); + const children = []; - for (let i = 0; i < countryList.length; i++) { - children.push( - - {countryList[i].name} - - ); - } + for (let i = 0; i < countryList.length; i++) { + children.push( + + {countryList[i].name} + + ); + } - useEffect(() => { - setShowImage(false); - setTimeout(() => { - setShowImage(focusLeft ? "user" : "org"); - }, 200); - }, [focusLeft]); + useEffect(() => { + setShowImage(false); + setTimeout(() => { + setShowImage(focusLeft ? "user" : "org"); + }, 200); + }, [focusLeft]); - useEffect(() => setError(errorProp), [errorProp]); - useEffect(() => setLoading(loadingProp), [loadingProp]); + useEffect(() => setError(errorProp), [errorProp]); + useEffect(() => setLoading(loadingProp), [loadingProp]); - useEffect( - () => () => { - clearProfileEditError()(dispatch); - }, - [dispatch] - ); + useEffect( + () => () => { + clearProfileEditError()(dispatch); + }, + [dispatch] + ); - const validated = () => { - if (showOrgForm) { - const nameValid = validateName( - name, - setNameValidateError, - setNameValidateErrorMessage, - "Please enter your name", - "Please enter a real name" - ); - const orgNameValid = validateName( - orgName, - setOrgNameValidateError, - setOrgNameValidateErrorMessage, - "Please enter organization name", - "Please enter a real name" - ); - const countryValid = validateCountry(country, setCountryValidateError); - const orgCountryValid = validateCountry( - orgCountry, - setOrgCountryValidateError - ); - const orgWebsiteValid = validateOrgWebsite( - orgWebsite, - setOrgWebsiteValidateError, - setOrgWebsiteValidateErrorMessage - ); - if ( - nameValid && - orgNameValid && - countryValid && - orgCountryValid && - orgWebsiteValid - ) { - return true; - } else { - return false; - } - } else { - const nameValid = validateName( - name, - setNameValidateError, - setNameValidateErrorMessage, - "Please enter your name", - "Please enter a real name" - ); - const countryValid = validateCountry(country, setCountryValidateError); - if (nameValid && countryValid) { - return true; - } else { - return false; - } - } - }; + const validated = () => { + if (showOrgForm) { + const nameValid = validateName( + name, + setNameValidateError, + setNameValidateErrorMessage, + "Please enter your name", + "Please enter a real name" + ); + const orgNameValid = validateName( + orgName, + setOrgNameValidateError, + setOrgNameValidateErrorMessage, + "Please enter organization name", + "Please enter a real name" + ); + const countryValid = validateCountry(country, setCountryValidateError); + const orgCountryValid = validateCountry( + orgCountry, + setOrgCountryValidateError + ); + const orgWebsiteValid = validateOrgWebsite( + orgWebsite, + setOrgWebsiteValidateError, + setOrgWebsiteValidateErrorMessage + ); + if ( + nameValid && + orgNameValid && + countryValid && + orgCountryValid && + orgWebsiteValid + ) { + return true; + } else { + return false; + } + } else { + const nameValid = validateName( + name, + setNameValidateError, + setNameValidateErrorMessage, + "Please enter your name", + "Please enter a real name" + ); + const countryValid = validateCountry(country, setCountryValidateError); + if (nameValid && countryValid) { + return true; + } else { + return false; + } + } + }; - useEffect(() => { - const handleSearch = () => { - const searchInput = countrySearch; - const newFilteredData = countryList.filter( - (value) => - value.name.toLowerCase().indexOf(searchInput.toLowerCase()) > -1 || - value.code.toLowerCase().indexOf(searchInput.toLowerCase()) > -1 - ); - if (searchInput === "") { - setFilteredData([]); - } else { - setFilteredData(newFilteredData); - } - }; - handleSearch(); - }, [countrySearch]); + useEffect(() => { + const handleSearch = () => { + const searchInput = countrySearch; + const newFilteredData = countryList.filter( + value => + value.name.toLowerCase().indexOf(searchInput.toLowerCase()) > -1 || + value.code.toLowerCase().indexOf(searchInput.toLowerCase()) > -1 + ); + if (searchInput === "") { + setFilteredData([]); + } else { + setFilteredData(newFilteredData); + } + }; + handleSearch(); + }, [countrySearch]); - useEffect(() => { - const handleOrgCountrySearch = () => { - const searchOrgCountryInput = orgCountrySearch; - const newFilteredData = countryList.filter( - (value) => - value.name - .toLowerCase() - .indexOf(searchOrgCountryInput.toLowerCase()) > -1 || - value.code - .toLowerCase() - .indexOf(searchOrgCountryInput.toLowerCase()) > -1 - ); - if (searchOrgCountryInput === "") { - setOrgFilteredData([]); - } else { - setOrgFilteredData(newFilteredData); - } - }; - handleOrgCountrySearch(); - }, [orgCountrySearch]); + useEffect(() => { + const handleOrgCountrySearch = () => { + const searchOrgCountryInput = orgCountrySearch; + const newFilteredData = countryList.filter( + value => + value.name + .toLowerCase() + .indexOf(searchOrgCountryInput.toLowerCase()) > -1 || + value.code + .toLowerCase() + .indexOf(searchOrgCountryInput.toLowerCase()) > -1 + ); + if (searchOrgCountryInput === "") { + setOrgFilteredData([]); + } else { + setOrgFilteredData(newFilteredData); + } + }; + handleOrgCountrySearch(); + }, [orgCountrySearch]); - const onSubmit = async () => { - validateHandle( - checkUserHandleExists, - firebase, - dispatch, - handle, - setHandleValidateError, - setHandleValidateErrorMessage, - "Please enter a handle", - "User handle can only contain lowercase alphanumeric characters", - "User handle cannot be less than 6 characters", - `The handle ${handle} is already taken` - ).then(async (validateUserHandle) => { - if (showOrgForm) { - validateHandle( - checkOrgHandleExists, - firebase, - dispatch, - orgHandle, - setOrgHandleValidateError, - setOrgHandleValidateErrorMessage, - "Please enter a handle", - "Organization handle can only contain lowercase alphanumeric characters", - "Organization handle cannot be less than 6 characters", - `The handle ${orgHandle} is already taken` - ).then(async (validateOrgHandle) => { - if (validated() && validateOrgHandle && validateUserHandle) { - setError(""); - await setUpInitialData({ - orgData: showOrgForm, - name, - handle, - country, - org_handle: orgHandle, - org_name: orgName, - org_website: orgWebsite, - org_country: orgCountry, - })(firebase, firestore, dispatch); - } - }); - } else { - if (validated() && validateUserHandle) { - setError(""); - await setUpInitialData({ - orgData: showOrgForm, - name, - handle, - country, - })(firebase, firestore, dispatch); - } - } - }); - }; + const onSubmit = async () => { + validateHandle( + checkUserHandleExists, + firebase, + dispatch, + handle, + setHandleValidateError, + setHandleValidateErrorMessage, + "Please enter a handle", + "User handle can only contain lowercase alphanumeric characters", + "User handle cannot be less than 6 characters", + `The handle ${handle} is already taken` + ).then(async validateUserHandle => { + if (showOrgForm) { + validateHandle( + checkOrgHandleExists, + firebase, + dispatch, + orgHandle, + setOrgHandleValidateError, + setOrgHandleValidateErrorMessage, + "Please enter a handle", + "Organization handle can only contain lowercase alphanumeric characters", + "Organization handle cannot be less than 6 characters", + `The handle ${orgHandle} is already taken` + ).then(async validateOrgHandle => { + if (validated() && validateOrgHandle && validateUserHandle) { + setError(""); + await setUpInitialData({ + orgData: showOrgForm, + name, + handle, + country, + org_handle: orgHandle, + org_name: orgName, + org_website: orgWebsite, + org_country: orgCountry + })(firebase, firestore, dispatch); + } + }); + } else { + if (validated() && validateUserHandle) { + setError(""); + await setUpInitialData({ + orgData: showOrgForm, + name, + handle, + country + })(firebase, firestore, dispatch); + } + } + }); + }; - //If display Name is present then show that as value inside user name input - useEffect(() => { - if (displayName) { - setName(displayName); - } - }, [displayName]); + //If display Name is present then show that as value inside user name input + useEffect(() => { + if (displayName) { + setName(displayName); + } + }, [displayName]); - //OnChange - const onChangeName = (name) => setName(name); - const onChangeOrgName = (orgName) => setOrgName(orgName); - const onChangeHandle = (handle) => setHandle(handle); - const onChangeOrgHandle = (orgHandle) => setOrgHandle(orgHandle); - const onChangeCountry = (country) => setCountry(country); - const onChangeOrgCountry = (orgCountry) => setOrgCountry(orgCountry); - const onChangeOrgWebsite = (orgWebsite) => setOrgWebsite(orgWebsite); + //OnChange + const onChangeName = name => setName(name); + const onChangeOrgName = orgName => setOrgName(orgName); + const onChangeHandle = handle => setHandle(handle); + const onChangeOrgHandle = orgHandle => setOrgHandle(orgHandle); + const onChangeCountry = country => setCountry(country); + const onChangeOrgCountry = orgCountry => setOrgCountry(orgCountry); + const onChangeOrgWebsite = orgWebsite => setOrgWebsite(orgWebsite); - const onFocusHandle = () => { - setHandleValidateError(false); - setHandleValidateErrorMessage(""); - }; - console.log(country); + const onFocusHandle = () => { + setHandleValidateError(false); + setHandleValidateErrorMessage(""); + }; + console.log(country); - return ( -
- - -

- Welcome to CodeLabz! -

-

- Let's complete your profile before we dive in. -

- + return ( +
+ + +

+ Welcome to CodeLabz! +

+

+ Let's complete your profile before we dive in. +

+ - - {error && ( - - - - {error} - - - - )} + + {error && ( + + + + {error} + + + + )} - - setFocusLeft(true)} - item={true}> - - - - Your Details - - + + setFocusLeft(true)} + item={true} + > + + + + Your Details + + - + - - onChangeName(event.target.value)} - helperText={ - nameValidateError ? nameValidateErrorMessage : null - } - fullWidth - autoComplete="handle" - required - style={{ marginBottom: "15px" }} - InputProps={{ - "data-testid": "userName", - startAdornment: ( - - - - ), - }} - /> - onChangeHandle(event.target.value)} - helperText={ - handleValidateError ? handleValidateErrorMessage : null - } - fullWidth - autoComplete="handle" - required - onFocus={onFocusHandle} - style={{ marginBottom: "15px" }} - InputProps={{ - "data-testid":"userHandle", - startAdornment: ( - - - - ), - }} - /> -
- { - setCountry(e.target.value); - setCountrySearch(e.target.value); - }} - onFocus={() => { - setCountrySearch(country); - onFocusHandle(); - }} - fullWidth - autoComplete="country" - required - style={{ marginBottom: "15px" }} - InputProps={{ - "data-testid":"userCountry", - startAdornment: ( - - - - ), - }} - /> -
- {filteredData.length !== 0 && ( -
- {filteredData.map((item) => { - return ( -
{ - setCountry(item.name); - setCountrySearch(""); - }} - style={{ color: textColor }}> - {item.name} -
- ); - })} -
- )} -
-
- - - - - - - - {/* col-pad-24 pr-12 pt-8 pb-24 div-transition */} - setFocusLeft(false)} - item={true}> - {showOrgForm && ( - - - - -

- Organization Details -

- - - + + onChangeName(event.target.value)} + helperText={ + nameValidateError ? nameValidateErrorMessage : null + } + fullWidth + autoComplete="handle" + required + style={{ marginBottom: "15px" }} + InputProps={{ + "data-testid": "userName", + startAdornment: ( + + + + ) + }} + /> + onChangeHandle(event.target.value)} + helperText={ + handleValidateError ? handleValidateErrorMessage : null + } + fullWidth + autoComplete="handle" + required + onFocus={onFocusHandle} + style={{ marginBottom: "15px" }} + InputProps={{ + "data-testid": "userHandle", + startAdornment: ( + + + + ) + }} + /> +
+ { + setCountry(e.target.value); + setCountrySearch(e.target.value); + }} + onFocus={() => { + setCountrySearch(country); + onFocusHandle(); + }} + fullWidth + autoComplete="country" + required + style={{ marginBottom: "15px" }} + InputProps={{ + "data-testid": "userCountry", + startAdornment: ( + + + + ) + }} + /> +
+ {filteredData.length !== 0 && ( +
+ {filteredData.map(item => { + return ( +
{ + setCountry(item.name); + setCountrySearch(""); + }} + style={{ color: textColor }} + > + {item.name} +
+ ); + })} +
+ )} +
+
+ + + + + + + + {/* col-pad-24 pr-12 pt-8 pb-24 div-transition */} + setFocusLeft(false)} + item={true} + > + {showOrgForm && ( + + + + +

+ Organization Details +

+ + + - + - - onChangeOrgName(event.target.value)} - helperText={ - orgNameValidateError - ? orgNameValidateErrorMessage - : null - } - fullWidth - autoComplete="handle" - required - style={{ marginBottom: "15px" }} - InputProps={{ - "data-testid":"orgName", - startAdornment: ( - - - - ), - }} - /> - - onChangeOrgHandle(event.target.value) - } - helperText={ - orgHandleValidateError - ? orgHandleValidateErrorMessage - : null - } - fullWidth - autoComplete="orgHandle" - required - style={{ marginBottom: "15px" }} - InputProps={{ - "data-testid":"orgHandle", - startAdornment: ( - - - - ), - }} - /> -
- { - setOrgCountry(e.target.value); - setOrgCountrySearch(e.target.value); - }} - onFocus={() => { - setOrgCountrySearch(orgCountry); - onFocusHandle(); - }} - fullWidth - autoComplete="orgCountry" - required - InputProps={{ - "data-testid":"orgCountry", - startAdornment: ( - - - - ), - }} - /> -
- {orgFilteredData.length !== 0 && ( -
- {orgFilteredData.map((item) => { - return ( -
{ - setOrgCountry(item.name); - setOrgCountrySearch(""); - }} - style={{ color: textColor }}> - {item.name} -
- ); - })} -
- )} -
-
- + + onChangeOrgName(event.target.value)} + helperText={ + orgNameValidateError + ? orgNameValidateErrorMessage + : null + } + fullWidth + autoComplete="handle" + required + style={{ marginBottom: "15px" }} + InputProps={{ + "data-testid": "orgName", + startAdornment: ( + + + + ) + }} + /> + onChangeOrgHandle(event.target.value)} + helperText={ + orgHandleValidateError + ? orgHandleValidateErrorMessage + : null + } + fullWidth + autoComplete="orgHandle" + required + style={{ marginBottom: "15px" }} + InputProps={{ + "data-testid": "orgHandle", + startAdornment: ( + + + + ) + }} + /> +
+ { + setOrgCountry(e.target.value); + setOrgCountrySearch(e.target.value); + }} + onFocus={() => { + setOrgCountrySearch(orgCountry); + onFocusHandle(); + }} + fullWidth + autoComplete="orgCountry" + required + InputProps={{ + "data-testid": "orgCountry", + startAdornment: ( + + + + ) + }} + /> +
+ {orgFilteredData.length !== 0 && ( +
+ {orgFilteredData.map(item => { + return ( +
{ + setOrgCountry(item.name); + setOrgCountrySearch(""); + }} + style={{ color: textColor }} + > + {item.name} +
+ ); + })} +
+ )} +
+
+ - - - onChangeOrgWebsite(event.target.value) - } - helperText={ - orgWebsiteValidateError - ? orgWebsiteValidateErrorMessage - : null - } - fullWidth - autoComplete="orgWebsite" - required - style={{ marginBottom: "15px" }} - InputProps={{ - "data-testid":"orgWebsite", - startAdornment: ( - - - - ), - }} - /> - - - )} - + + onChangeOrgWebsite(event.target.value)} + helperText={ + orgWebsiteValidateError + ? orgWebsiteValidateErrorMessage + : null + } + fullWidth + autoComplete="orgWebsite" + required + style={{ marginBottom: "15px" }} + InputProps={{ + "data-testid": "orgWebsite", + startAdornment: ( + + + + ) + }} + /> + + + )} + - - - - - - {!showOrgForm && ( - + + + + + {!showOrgForm && ( + - - Background for auth - - - )} - -
- ); + item={true} + > + + Background for auth + + + )} + +
+ ); }; Dashboard.prototype = { - background: PropTypes.string, - textColor: PropTypes.string, + background: PropTypes.string, + textColor: PropTypes.string }; export default Dashboard; diff --git a/src/components/Editor/UserList.jsx b/src/components/Editor/UserList.jsx index c87b25f9..f89580ba 100644 --- a/src/components/Editor/UserList.jsx +++ b/src/components/Editor/UserList.jsx @@ -65,10 +65,7 @@ const UserList = ({ noteID, tutorial_id }) => { } }); - ref - .child(currentUserHandle) - .onDisconnect() - .remove(); + ref.child(currentUserHandle).onDisconnect().remove(); return () => { ref.off("value"); diff --git a/src/components/ErrorPages/404.jsx b/src/components/ErrorPages/404.jsx index 65e1a3cc..f73005cb 100644 --- a/src/components/ErrorPages/404.jsx +++ b/src/components/ErrorPages/404.jsx @@ -4,110 +4,113 @@ import { makeStyles } from "@mui/styles"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; -const useStyles = makeStyles((theme) => ({ - wrapper: { - height: "65vh", - display: "flex", - alignItems: "center", - flexFlow: "column", - justifyContent: "center", - }, - image: { - height: "10rem", - width: "20rem", +const useStyles = makeStyles(theme => ({ + wrapper: { + height: "65vh", + display: "flex", + alignItems: "center", + flexFlow: "column", + justifyContent: "center" + }, + image: { + height: "10rem", + width: "20rem", - alignItems: "center", - [theme.breakpoints.down(750)]: { - height: "10rem", - width: "15rem", - }, - }, - oops: { - listStyle: "none", - flexFlow: "row", - display: "flex", - marginLeft: "-3rem", - fontSize: "1.5rem", - color: "#465E66", - "& li:nth-child(1)": { - transform: "rotate(-190deg) translateY(-20px)", - }, - "& li:nth-child(2)": { - transform: "rotate(-10deg)", - }, - "& li:nth-child(3)": { - transform: "rotate(0deg)", - }, - "& li:nth-child(4)": { - transform: "rotate(10deg)", - }, - "& li:nth-child(5)": { - transform: "rotate(10deg)", - }, - "& li:nth-child(6)": { - transform: "rotate(-10deg)", - }, - "& li:nth-child(7)": { - transform: "rotate(10deg)", - }, - "& li:nth-child(8)": { - transform: "rotate(10deg)", - }, - "& li:nth-child(9)": { - transform: "rotate(20deg)", - }, - "& li:nth-child(10)": { - transform: "rotate(20deg)", - }, - "& li:nth-child(11)": { - transform: "rotate(1deg)", - }, - }, + alignItems: "center", + [theme.breakpoints.down(750)]: { + height: "10rem", + width: "15rem" + } + }, + oops: { + listStyle: "none", + flexFlow: "row", + display: "flex", + marginLeft: "-3rem", + fontSize: "1.5rem", + color: "#465E66", + "& li:nth-child(1)": { + transform: "rotate(-190deg) translateY(-20px)" + }, + "& li:nth-child(2)": { + transform: "rotate(-10deg)" + }, + "& li:nth-child(3)": { + transform: "rotate(0deg)" + }, + "& li:nth-child(4)": { + transform: "rotate(10deg)" + }, + "& li:nth-child(5)": { + transform: "rotate(10deg)" + }, + "& li:nth-child(6)": { + transform: "rotate(-10deg)" + }, + "& li:nth-child(7)": { + transform: "rotate(10deg)" + }, + "& li:nth-child(8)": { + transform: "rotate(10deg)" + }, + "& li:nth-child(9)": { + transform: "rotate(20deg)" + }, + "& li:nth-child(10)": { + transform: "rotate(20deg)" + }, + "& li:nth-child(11)": { + transform: "rotate(1deg)" + } + } })); const NotFound = ({ background = "white", textColor = "black" }) => { - const classes = useStyles(); + const classes = useStyles(); - return ( - - - error - - - - Oops! - - - -
    -
  • P
    • -
  • A
    • -
  • G
    • -
  • E
    • -
  • !
    • -
  • B
    • -
  • R
    • -
  • O
    • -
  • K
    • -
  • E
    • -
  • N
    • -
- - - - We can't seem to find the page you are looking for - - - - ); + return ( + + + error + + + + Oops! + + + +
    +
  • P
    • +
  • A
    • +
  • G
    • +
  • E
    • +
  • !
    • +
  • B
    • +
  • R
    • +
  • O
    • +
  • K
    • +
  • E
    • +
  • N
    • +
+ + + + We can't seem to find the page you are looking for + + + + ); }; export default NotFound; diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx index 36a8735f..784f8c9c 100644 --- a/src/components/Footer/index.jsx +++ b/src/components/Footer/index.jsx @@ -16,180 +16,189 @@ import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined"; import CopyrightOutlinedIcon from "@mui/icons-material/CopyrightOutlined"; const Footer = () => { - const useStyles = makeStyles({ - item: { - display: "flex", - alignItems: "left", - justifyContent: "flex-start", - }, - }); - const classes = useStyles(); - return ( - + ); }; export default Footer; diff --git a/src/components/FooterLinks/index.jsx b/src/components/FooterLinks/index.jsx index 7f8626db..3ac54800 100644 --- a/src/components/FooterLinks/index.jsx +++ b/src/components/FooterLinks/index.jsx @@ -5,48 +5,48 @@ import Typography from "@mui/material/Typography"; import React, { useEffect } from "react"; import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - justifyContent: "center", - flexWrap: "wrap", - "& > *": { - margin: theme.spacing(0.5), - }, - marginBottom: "1rem", - border: "none", - backgroundColor: "transparent", - boxShadow: "none", - }, - chip: { - margin: "0px 10px 10px 0px", - backgroundColor: "transparent", - border: "none", - cursor: "pointer", - }, +const useStyles = makeStyles(theme => ({ + root: { + display: "flex", + justifyContent: "center", + flexWrap: "wrap", + "& > *": { + margin: theme.spacing(0.5) + }, + marginBottom: "1rem", + border: "none", + backgroundColor: "transparent", + boxShadow: "none" + }, + chip: { + margin: "0px 10px 10px 0px", + backgroundColor: "transparent", + border: "none", + cursor: "pointer" + } })); -const FooterLinks = (props) => { - const classes = useStyles(); +const FooterLinks = props => { + const classes = useStyles(); - return ( - - - {props.elements.map(function (el, index) { - return ( - - - - ); - })} - - - ); + return ( + + + {props.elements.map(function (el, index) { + return ( + + + + ); + })} + + + ); }; export default FooterLinks; diff --git a/src/components/Forms/UserAccount/styles.jsx b/src/components/Forms/UserAccount/styles.jsx index 629c0c28..9fe8d969 100644 --- a/src/components/Forms/UserAccount/styles.jsx +++ b/src/components/Forms/UserAccount/styles.jsx @@ -1,27 +1,27 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - card: { - boxShadow: "none", - padding: "25px 25px", - border: "1px solid #e8e8e8", - borderRadius: 15, - width: "95%", - "@media (max-width: 960px)": { - width: "100%", - padding: "15px 15px", - }, - }, - row: { - display: "flex", - alignItems: "center", - marginBottom: 10, - }, - text: { - "@media (max-width: 400px)": { - fontSize: 13, - }, - }, +const useStyles = makeStyles(theme => ({ + card: { + boxShadow: "none", + padding: "25px 25px", + border: "1px solid #e8e8e8", + borderRadius: 15, + width: "95%", + "@media (max-width: 960px)": { + width: "100%", + padding: "15px 15px" + } + }, + row: { + display: "flex", + alignItems: "center", + marginBottom: 10 + }, + text: { + "@media (max-width: 400px)": { + fontSize: 13 + } + } })); export default useStyles; diff --git a/src/components/Forms/UserEmail/index.jsx b/src/components/Forms/UserEmail/index.jsx index b3d4b727..dc1e0728 100644 --- a/src/components/Forms/UserEmail/index.jsx +++ b/src/components/Forms/UserEmail/index.jsx @@ -2,101 +2,106 @@ import React, { useState } from "react"; import useStyles from "./styles"; import data from "./emailAddressConfig.json"; import { - Box, - Card, - FormControl, - Typography, - MenuItem, - Select, - OutlinedInput, + Box, + Card, + FormControl, + Typography, + MenuItem, + Select, + OutlinedInput } from "@mui/material"; import { Input } from "../../ui-helpers/Inputs/PrimaryInput"; import { useSelector } from "react-redux"; const UserEmail = () => { - const classes = useStyles(); + const classes = useStyles(); - const [primaryEmail, setPrimaryEmail] = useState(data.primaryEmail); - const [backupEmail, setBackupEmail] = useState(data.backupEmail); + const [primaryEmail, setPrimaryEmail] = useState(data.primaryEmail); + const [backupEmail, setBackupEmail] = useState(data.backupEmail); - const profileData = useSelector(({ firebase: { profile } }) => profile); + const profileData = useSelector(({ firebase: { profile } }) => profile); - const handleChangePrimaryEmail = (event) => { - setPrimaryEmail(event.target.value); - }; + const handleChangePrimaryEmail = event => { + setPrimaryEmail(event.target.value); + }; - const handleChangeBackupEmail = (event) => { - setBackupEmail(event.target.value); - }; + const handleChangeBackupEmail = event => { + setBackupEmail(event.target.value); + }; - return ( - - - - {data.primaryEmail} -{" "} - - Primary - - - - Add email address - - - Add - - - - - Primary email address - - - - - - - - Backup email address - - - - - - - - ); + return ( + + + + {data.primaryEmail} -{" "} + + Primary + + + + Add email address + + + Add + + + + + Primary email address + + + + + + + + Backup email address + + + + + + + + ); }; export default UserEmail; diff --git a/src/components/Forms/UserEmail/styles.jsx b/src/components/Forms/UserEmail/styles.jsx index 1b1ec2ee..7675e7d8 100644 --- a/src/components/Forms/UserEmail/styles.jsx +++ b/src/components/Forms/UserEmail/styles.jsx @@ -1,40 +1,40 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - card: { - boxShadow: "none", - padding: "15px 30px", - border: "1px solid #e8e8e8", - borderRadius: 15, - width: "95%", - "@media (max-width: 960px)": { - width: "100%", - padding: "10px 15px", - }, - }, - input: { - marginRight: 10, - width: 250, - backgroundColor: "#F9F9F9", - borderRadius: 6, - "& input": { - padding: "18px !important", - }, - }, - text: { - "@media (max-width: 490px)": { - marginBottom: 10, - }, - }, - email: { - display: "flex", - alignItems: "center", - margin: "10px 0", - "@media (max-width: 490px)": { - flexDirection: "column", - alignItems: "flex-start", - }, - }, +const useStyles = makeStyles(theme => ({ + card: { + boxShadow: "none", + padding: "15px 30px", + border: "1px solid #e8e8e8", + borderRadius: 15, + width: "95%", + "@media (max-width: 960px)": { + width: "100%", + padding: "10px 15px" + } + }, + input: { + marginRight: 10, + width: 250, + backgroundColor: "#F9F9F9", + borderRadius: 6, + "& input": { + padding: "18px !important" + } + }, + text: { + "@media (max-width: 490px)": { + marginBottom: 10 + } + }, + email: { + display: "flex", + alignItems: "center", + margin: "10px 0", + "@media (max-width: 490px)": { + flexDirection: "column", + alignItems: "flex-start" + } + } })); export default useStyles; diff --git a/src/components/Forms/UserForm/styles.jsx b/src/components/Forms/UserForm/styles.jsx index 22ea3199..2ab01a4c 100644 --- a/src/components/Forms/UserForm/styles.jsx +++ b/src/components/Forms/UserForm/styles.jsx @@ -1,65 +1,65 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - marginBottom: 20, - boxShadow: "none", - padding: "20px 30px", - border: "1px solid #e8e8e8", - borderRadius: 15, - width: "95%", - "@media (max-width: 960px)": { - width: "100%", - padding: "15px 20px", - }, - }, - input: { - "& input": { - padding: "18px !important", - width: "250px !important", - }, - }, - errorMessage: { - fontSize: 12, - color: "#f44336", - marginTop: 4, - }, - fb: { - fontSize: 31, - color: "#1877F2", - marginRight: 4, - "@media (max-width: 500px)": { - marginRight: 7, - fontSize: 24, - }, - }, - tw: { - color: "#03A9F4", - fontSize: 30, - marginRight: 5, - "@media (max-width: 500px)": { - marginRight: 6, - fontSize: 23, - }, - }, - li: { - color: "#0077b5", - fontSize: 31, - marginRight: 5, - "@media (max-width: 500px)": { - marginRight: 6, - fontSize: 23, - }, - }, - git: { - fontSize: 26, - marginRight: 7, - marginLeft: 3, - "@media (max-width: 500px)": { - marginRight: 7, - fontSize: 19, - }, - }, +const useStyles = makeStyles(theme => ({ + root: { + marginBottom: 20, + boxShadow: "none", + padding: "20px 30px", + border: "1px solid #e8e8e8", + borderRadius: 15, + width: "95%", + "@media (max-width: 960px)": { + width: "100%", + padding: "15px 20px" + } + }, + input: { + "& input": { + padding: "18px !important", + width: "250px !important" + } + }, + errorMessage: { + fontSize: 12, + color: "#f44336", + marginTop: 4 + }, + fb: { + fontSize: 31, + color: "#1877F2", + marginRight: 4, + "@media (max-width: 500px)": { + marginRight: 7, + fontSize: 24 + } + }, + tw: { + color: "#03A9F4", + fontSize: 30, + marginRight: 5, + "@media (max-width: 500px)": { + marginRight: 6, + fontSize: 23 + } + }, + li: { + color: "#0077b5", + fontSize: 31, + marginRight: 5, + "@media (max-width: 500px)": { + marginRight: 6, + fontSize: 23 + } + }, + git: { + fontSize: 26, + marginRight: 7, + marginLeft: 3, + "@media (max-width: 500px)": { + marginRight: 7, + fontSize: 19 + } + } })); export default useStyles; diff --git a/src/components/Forms/UserPassword/styles.jsx b/src/components/Forms/UserPassword/styles.jsx index d2ea1b90..0680012e 100644 --- a/src/components/Forms/UserPassword/styles.jsx +++ b/src/components/Forms/UserPassword/styles.jsx @@ -1,45 +1,45 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - card: { - boxShadow: "none", - padding: "20px 40px", - border: "1px solid #e8e8e8", - borderRadius: 15, - width: "95%", - "@media (max-width: 960px)": { - width: "100%", - padding: "10px 5px", - }, - }, - input: { - marginRight: 10, - width: 250, - backgroundColor: "#F9F9F9", - borderRadius: 6, - "& input": { - padding: "18px !important", - }, - }, - button: { - backgroundColor: "#F9F9F9", - border: "1px solid #D2D2D2", - textTransform: "none", - height: 35, - width: 175, - margin: "15px 0", - }, - row: { - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, - text: { - margin: "5px 0", - "@media (max-width: 400px)": { - fontSize: 13, - }, - }, +const useStyles = makeStyles(theme => ({ + card: { + boxShadow: "none", + padding: "20px 40px", + border: "1px solid #e8e8e8", + borderRadius: 15, + width: "95%", + "@media (max-width: 960px)": { + width: "100%", + padding: "10px 5px" + } + }, + input: { + marginRight: 10, + width: 250, + backgroundColor: "#F9F9F9", + borderRadius: 6, + "& input": { + padding: "18px !important" + } + }, + button: { + backgroundColor: "#F9F9F9", + border: "1px solid #D2D2D2", + textTransform: "none", + height: 35, + width: 175, + margin: "15px 0" + }, + row: { + display: "flex", + justifyContent: "space-between", + alignItems: "center" + }, + text: { + margin: "5px 0", + "@media (max-width: 400px)": { + fontSize: 13 + } + } })); export default useStyles; diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index cc480714..8fb36990 100644 --- a/src/components/Home/index.jsx +++ b/src/components/Home/index.jsx @@ -20,264 +20,271 @@ import { messaging } from "../../config"; import { useAuthStatus } from "../../helpers/customHooks"; const Home = () => { - const authed = useAuthStatus(); - const isDesktop = useMediaQuery({ - query: "(min-device-width: 767px)", - }); + const authed = useAuthStatus(); + const isDesktop = useMediaQuery({ + query: "(min-device-width: 767px)" + }); - useEffect(() => { - if (messaging) { - if ( - Notification.permission !== "granted" && - Notification.permission !== "denied" - ) { - Notification.requestPermission().then((permission) => { - if (permission === "granted") { - messaging - .getToken() - .then((refreshedToken) => { - console.log(refreshedToken); - }) - .catch((e) => console.log(e)); - } - }); - } - } - }, []); + useEffect(() => { + if (messaging) { + if ( + Notification.permission !== "granted" && + Notification.permission !== "denied" + ) { + Notification.requestPermission().then(permission => { + if (permission === "granted") { + messaging + .getToken() + .then(refreshedToken => { + console.log(refreshedToken); + }) + .catch(e => console.log(e)); + } + }); + } + } + }, []); - useEffect(() => { - if (messaging) { - const unsubscribe = messaging.onMessage( - (payload) => { - console.log(payload); - }, - (error) => console.log(error) - ); + useEffect(() => { + if (messaging) { + const unsubscribe = messaging.onMessage( + payload => { + console.log(payload); + }, + error => console.log(error) + ); - return () => { - unsubscribe && unsubscribe(); - }; - } - }, []); + return () => { + unsubscribe && unsubscribe(); + }; + } + }, []); - useEffect(() => { - if (messaging) { - const unsubscribe = messaging.onTokenRefresh( - () => { - messaging - .getToken() - .then((refreshedToken) => { - console.log(refreshedToken); - }) - .catch((e) => { - console.log(e); - }); - }, - (error) => console.log(error) - ); + useEffect(() => { + if (messaging) { + const unsubscribe = messaging.onTokenRefresh( + () => { + messaging + .getToken() + .then(refreshedToken => { + console.log(refreshedToken); + }) + .catch(e => { + console.log(e); + }); + }, + error => console.log(error) + ); - return () => { - unsubscribe && unsubscribe(); - }; - } - }, []); + return () => { + unsubscribe && unsubscribe(); + }; + } + }, []); - return ( - <> - - - -

Get first hand experience in coding.

-

- Choose from hundreds of coding guides, tutorials and examples to - learn new technology your heart desires. -

+ return ( + <> + + + +

Get first hand experience in coding.

+

+ Choose from hundreds of coding guides, tutorials and examples to + learn new technology your heart desires. +

- - - - - - - - Background for auth - - - + + + + + + + + Background for auth + + + - - -

- Step-by-step instructions -

-

- Follow them to the dot and you wouldn't miss anything -

- - Background for auth - - - + + +

+ Step-by-step instructions +

+

+ Follow them to the dot and you wouldn't miss anything +

+ + Background for auth + + + - - -

Learning made easier

-

Features that help you get going

- + + +

Learning made easier

+

Features that help you get going

+ - - - - - } - title="Contemplative Reptile" - /> - - - Feature 1 - - - Lorem ipsum dolor sit amet consectetur, adipisicing elit. - - - - - - - - - - + + + + + } + title="Contemplative Reptile" + /> + + + Feature 1 + + + Lorem ipsum dolor sit amet consectetur, adipisicing elit. + + + + + + + + + + - - - - - } - title="Contemplative Reptile" - /> - - - Feature 1 - - - Lorem ipsum dolor sit amet consectetur, adipisicing elit. - - - - - - - - - - + + + + + } + title="Contemplative Reptile" + /> + + + Feature 1 + + + Lorem ipsum dolor sit amet consectetur, adipisicing elit. + + + + + + + + + + - - - - - } - title="Contemplative Reptile" - /> - - - Feature 1 - - - Lorem ipsum dolor sit amet consectetur, adipisicing elit. - - - - - - - - - - + + + + + } + title="Contemplative Reptile" + /> + + + Feature 1 + + + Lorem ipsum dolor sit amet consectetur, adipisicing elit. + + + + + + + + + + - - - - - } - title="Contemplative Reptile" - /> - - - Feature 1 - - - Lorem ipsum dolor sit amet consectetur, adipisicing elit. - - - - - - - - - - - - - ); + + + + + } + title="Contemplative Reptile" + /> + + + Feature 1 + + + Lorem ipsum dolor sit amet consectetur, adipisicing elit. + + + + + + + + + + + + + ); }; export default Home; diff --git a/src/components/HomePage/index.jsx b/src/components/HomePage/index.jsx index f7b8c9d8..a2e9930d 100644 --- a/src/components/HomePage/index.jsx +++ b/src/components/HomePage/index.jsx @@ -33,315 +33,324 @@ import useWindowSize from "../../helpers/customHooks/useWindowSize"; import NewTutorial from "../Tutorials/NewTutorial"; function HomePage({ background = "white", textColor = "black" }) { - const classes = useStyles(); - const [value, setValue] = useState(2); - const [selectedTab, setSelectedTab] = useState("1"); - const [visibleModal, setVisibleModal] = useState(false); - const [footerContent, setFooterContent] = useState([ - { name: "Help", link: "https://dev.codelabz.io/" }, - { name: "About", link: "https://dev.codelabz.io/" }, - { name: "Content Policy", link: "https://dev.codelabz.io/" }, - { name: "Terms", link: "https://dev.codelabz.io/" }, - { name: "Privacy Policy", link: "https://dev.codelabz.io/" }, - { - name: `CodeLabz @${new Date().getFullYear()}`, - link: "https://dev.codelabz.io/", - }, - ]); + const classes = useStyles(); + const [value, setValue] = useState(2); + const [selectedTab, setSelectedTab] = useState("1"); + const [visibleModal, setVisibleModal] = useState(false); + const [footerContent, setFooterContent] = useState([ + { name: "Help", link: "https://dev.codelabz.io/" }, + { name: "About", link: "https://dev.codelabz.io/" }, + { name: "Content Policy", link: "https://dev.codelabz.io/" }, + { name: "Terms", link: "https://dev.codelabz.io/" }, + { name: "Privacy Policy", link: "https://dev.codelabz.io/" }, + { + name: `CodeLabz @${new Date().getFullYear()}`, + link: "https://dev.codelabz.io/" + } + ]); - const windowSize = useWindowSize(); - const [openMenu, setOpen] = useState(false); - const toggleSlider = () => { - setOpen(!openMenu); - }; - const [upcomingEvents, setUpEvents] = useState([ - { - name: "Google Summer of Code", - img: [OrgUser], - date: "25 March, 2022", - }, - { - name: "Google Summer of Code", - img: [OrgUser], - date: "25 March, 2022", - }, - { - name: "Google Summer of Code", - img: [OrgUser], - date: "25 March, 2022", - }, - { - name: "Google Summer of Code", - img: [OrgUser], - date: "25 March, 2022", - }, - ]); - const [tags, setTags] = useState([ - "HTML", - "JavaScript", - "Css", - "Python", - "React", - "Java", - "HTML", - "JavaScript", - "Css", - "Python", - "React", - "HTML", - "JavaScript", - "Css", - "Python", - "React", - "Java", - "HTML", - "JavaScript", - "Css", - "Python", - "React", - ]); + const windowSize = useWindowSize(); + const [openMenu, setOpen] = useState(false); + const toggleSlider = () => { + setOpen(!openMenu); + }; + const [upcomingEvents, setUpEvents] = useState([ + { + name: "Google Summer of Code", + img: [OrgUser], + date: "25 March, 2022" + }, + { + name: "Google Summer of Code", + img: [OrgUser], + date: "25 March, 2022" + }, + { + name: "Google Summer of Code", + img: [OrgUser], + date: "25 March, 2022" + }, + { + name: "Google Summer of Code", + img: [OrgUser], + date: "25 March, 2022" + } + ]); + const [tags, setTags] = useState([ + "HTML", + "JavaScript", + "Css", + "Python", + "React", + "Java", + "HTML", + "JavaScript", + "Css", + "Python", + "React", + "HTML", + "JavaScript", + "Css", + "Python", + "React", + "Java", + "HTML", + "JavaScript", + "Css", + "Python", + "React" + ]); - const [usersToFollow, setUsersToFollow] = useState([ - { - name: "Janvi Thakkar", - img: [OrgUser], - desg: "Software Engineer", - onClick: {}, - }, - { - name: "Janvi Thakkar", - img: [OrgUser], - desg: "Software Engineer", - onClick: {}, - }, - { - name: "Janvi Thakkar", - img: [OrgUser], - desg: "Software Engineer", - onClick: {}, - }, - { - name: "Janvi Thakkar", - img: [OrgUser], - desg: "Software Engineer", - onClick: {}, - }, - ]); + const [usersToFollow, setUsersToFollow] = useState([ + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + } + ]); - const [contributors, setContributors] = useState([ - { - name: "Janvi Thakkar", - img: [OrgUser], - desg: "Software Engineer", - onClick: {}, - }, - { - name: "Janvi Thakkar", - img: [OrgUser], - desg: "Software Engineer", - onClick: {}, - }, - { - name: "Janvi Thakkar", - img: [OrgUser], - desg: "Software Engineer", - onClick: {}, - }, - { - name: "Janvi Thakkar", - img: [OrgUser], - desg: "Software Engineer", - onClick: {}, - }, - ]); + const [contributors, setContributors] = useState([ + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + }, + { + name: "Janvi Thakkar", + img: [OrgUser], + desg: "Software Engineer", + onClick: {} + } + ]); - const notification = () => {}; - const handleChange = (event, newValue) => { - setValue(newValue); - }; - const handleTabChange = (event, newValue) => { - setSelectedTab(newValue); - }; - const closeModal = () => { - setVisibleModal((prev) => !prev); - }; - return ( - - -
- {windowSize.width > 750 && ( - - - - - - )} -
- - - closeModal(e)} - /> - - - - - - - {userList.persons.map((person) => { - return person.Heading == "CardWithoutPicture" ? ( - - ) : ( - - ); - })} - - - - } - value="1" - style={{ width: "25%" }} - /> - } - value="2" - style={{ width: "25%" }} - /> - } - value="3" - style={{ width: "25%" }} - /> - } - value="4" - style={{ width: "25%" }} - /> - - - - - - - - - - - - - - - - + const notification = () => {}; + const handleChange = (event, newValue) => { + setValue(newValue); + }; + const handleTabChange = (event, newValue) => { + setSelectedTab(newValue); + }; + const closeModal = () => { + setVisibleModal(prev => !prev); + }; + return ( + + +
+ {windowSize.width > 750 && ( + + + + + + )} +
+ + + closeModal(e)} + /> + + + + + + + {userList.persons.map(person => { + return person.Heading == "CardWithoutPicture" ? ( + + ) : ( + + ); + })} + + + + } + value="1" + style={{ width: "25%" }} + /> + } + value="2" + style={{ width: "25%" }} + /> + } + value="3" + style={{ width: "25%" }} + /> + } + value="4" + style={{ width: "25%" }} + /> + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - ); + + + + + + + + + ); } export default HomePage; diff --git a/src/components/HomePage/styles.jsx b/src/components/HomePage/styles.jsx index 7372425b..069d3bce 100644 --- a/src/components/HomePage/styles.jsx +++ b/src/components/HomePage/styles.jsx @@ -1,100 +1,100 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - wrapper: { - display: "flex", - alignItems: "top", - justifyContent: "center", - height: "100%", - background: "#f2f2f2", - }, - mainBody: { - display: "flex", - alignContent: "center", - justifyContent: "center", - height: "100%", - margin: "1rem 0 2rem 0", - flexDirection: "column", - }, - sideBody: { - display: "flex", - alignContent: "center", - justifyContent: "center", - width: "fit-content", - margin: "1rem 1rem 2rem 1rem", - height: "100%", - flexDirection: "column", - [theme.breakpoints.down(960)]: { - display: "none", - }, - maxWidth: "300px", - }, - cardBody: { - display: "flex", - justifyContent: "space-between", - width: "100%", - alignItems: "center", - direction: "column", - }, - sort: { - width: "100%", - display: "flex", - alignItems: "center", - justifyContent: "space-between", - flexDirection: "row", - margin: "0rem 0 0rem 0", - }, - sortedList: { - display: "flex", - alignItems: "center", - justifyContent: "space-around", - flexDirection: "row", - width: "auto", - [theme.breakpoints.down(750)]: { - display: "none", - }, - }, - navigation: { - "&:selcted": { - border: "2px solid black", - }, - }, - sideCard: { - display: "flex", - alignItems: "center", - justifyContent: "center", - flexDirection: "column", - maxHeight: "35rem", - margin: "0 0 2rem 0", - background: "white", - boxShadow: ".5px 2px 5px gray", - }, +const useStyles = makeStyles(theme => ({ + wrapper: { + display: "flex", + alignItems: "top", + justifyContent: "center", + height: "100%", + background: "#f2f2f2" + }, + mainBody: { + display: "flex", + alignContent: "center", + justifyContent: "center", + height: "100%", + margin: "1rem 0 2rem 0", + flexDirection: "column" + }, + sideBody: { + display: "flex", + alignContent: "center", + justifyContent: "center", + width: "fit-content", + margin: "1rem 1rem 2rem 1rem", + height: "100%", + flexDirection: "column", + [theme.breakpoints.down(960)]: { + display: "none" + }, + maxWidth: "300px" + }, + cardBody: { + display: "flex", + justifyContent: "space-between", + width: "100%", + alignItems: "center", + direction: "column" + }, + sort: { + width: "100%", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + flexDirection: "row", + margin: "0rem 0 0rem 0" + }, + sortedList: { + display: "flex", + alignItems: "center", + justifyContent: "space-around", + flexDirection: "row", + width: "auto", + [theme.breakpoints.down(750)]: { + display: "none" + } + }, + navigation: { + "&:selcted": { + border: "2px solid black" + } + }, + sideCard: { + display: "flex", + alignItems: "center", + justifyContent: "center", + flexDirection: "column", + maxHeight: "35rem", + margin: "0 0 2rem 0", + background: "white", + boxShadow: ".5px 2px 5px gray" + }, - leftSideCard: { - display: "flex", - alignItems: "left", - justifyContent: "center", - flexDirection: "column", - maxHeight: "35rem", - margin: "0 0 2rem 0", - background: "white", - boxShadow: ".5px 2px 5px gray", - }, + leftSideCard: { + display: "flex", + alignItems: "left", + justifyContent: "center", + flexDirection: "column", + maxHeight: "35rem", + margin: "0 0 2rem 0", + background: "white", + boxShadow: ".5px 2px 5px gray" + }, - outerSideBar: { - minWidth: "100%", - }, - contentPart: { - height: "100%", - display: "flex", - flexDirection: "row", - justifyContent: "center", - maxWidth: "1400px", - }, - card: { - padding: "6px", - margin: "0 0.5rem 0 0.5rem", - }, + outerSideBar: { + minWidth: "100%" + }, + contentPart: { + height: "100%", + display: "flex", + flexDirection: "row", + justifyContent: "center", + maxWidth: "1400px" + }, + card: { + padding: "6px", + margin: "0 0.5rem 0 0.5rem" + } })); export default useStyles; diff --git a/src/components/HomePage/userList.jsx b/src/components/HomePage/userList.jsx index 422e1631..3b2ad2a9 100644 --- a/src/components/HomePage/userList.jsx +++ b/src/components/HomePage/userList.jsx @@ -1,4 +1,4 @@ -export const userList = { +export const userList = { persons: [ { Heading: "CardWithPicture", diff --git a/src/components/ManageUsers/ResetPassword/PasswordResetForm.jsx b/src/components/ManageUsers/ResetPassword/PasswordResetForm.jsx index 63f19346..bab99650 100644 --- a/src/components/ManageUsers/ResetPassword/PasswordResetForm.jsx +++ b/src/components/ManageUsers/ResetPassword/PasswordResetForm.jsx @@ -13,125 +13,127 @@ import { Link } from "react-router-dom"; const { Title } = Typography; const PasswordResetForm = ({ actionCode }) => { - const firebase = useFirebase(); - const dispatch = useDispatch(); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(""); - const [success, setSuccess] = useState(false); - const errorProp = useSelector(({ auth }) => auth.recoverPassword.resetError); - const loadingProp = useSelector( - ({ auth }) => auth.recoverPassword.resetLoading - ); - const email = useSelector(({ auth }) => auth.recoverPassword.user); + const firebase = useFirebase(); + const dispatch = useDispatch(); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(""); + const [success, setSuccess] = useState(false); + const errorProp = useSelector(({ auth }) => auth.recoverPassword.resetError); + const loadingProp = useSelector( + ({ auth }) => auth.recoverPassword.resetLoading + ); + const email = useSelector(({ auth }) => auth.recoverPassword.user); - useEffect(() => setError(errorProp), [errorProp]); - useEffect(() => setLoading(loadingProp), [loadingProp]); + useEffect(() => setError(errorProp), [errorProp]); + useEffect(() => setLoading(loadingProp), [loadingProp]); - const onSubmit = async ({ password }) => { - setError(""); - setLoading(true); - await confirmPasswordReset({ actionCode, password })(firebase, dispatch); - setLoading(false); - }; + const onSubmit = async ({ password }) => { + setError(""); + setLoading(true); + await confirmPasswordReset({ actionCode, password })(firebase, dispatch); + setLoading(false); + }; - useEffect(() => { - if (errorProp === false && loadingProp === false) { - setSuccess(true); - } else { - setSuccess(false); - } - }, [errorProp, loadingProp]); + useEffect(() => { + if (errorProp === false && loadingProp === false) { + setSuccess(true); + } else { + setSuccess(false); + } + }, [errorProp, loadingProp]); - return ( - <> - - Reset password for {email} - + return ( + <> + + Reset password for {email} + - {error && ( - - )} + {error && ( + + )} - {success && ( - <> - - - - Sign in - - - - )} - {!success && ( - <> -
- - } - placeholder="Password" - /> - - ({ - validator(rule, value) { - if (!value || getFieldValue("password") === value) { - return Promise.resolve(); - } - return Promise.reject( - "The two passwords that you entered does not match" - ); - }, - }), - ]}> - } - required - placeholder="Confirm password" - /> - - - - -
- - - Back to CodeLabz - - - - )} - - ); + {success && ( + <> + + + + Sign in + + + + )} + {!success && ( + <> +
+ + } + placeholder="Password" + /> + + ({ + validator(rule, value) { + if (!value || getFieldValue("password") === value) { + return Promise.resolve(); + } + return Promise.reject( + "The two passwords that you entered does not match" + ); + } + }) + ]} + > + } + required + placeholder="Confirm password" + /> + + + + +
+ + + Back to CodeLabz + + + + )} + + ); }; export default PasswordResetForm; diff --git a/src/components/ManageUsers/ResetPassword/index.jsx b/src/components/ManageUsers/ResetPassword/index.jsx index 7c8bef9d..43349f53 100644 --- a/src/components/ManageUsers/ResetPassword/index.jsx +++ b/src/components/ManageUsers/ResetPassword/index.jsx @@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react"; import { useFirebase } from "react-redux-firebase"; import { useDispatch, useSelector } from "react-redux"; import { - clearRecoverPasswordError, - verifyPasswordResetCode, + clearRecoverPasswordError, + verifyPasswordResetCode } from "../../../store/actions"; import Alert from "@mui/lab/Alert"; import Card from "@mui/material/Card"; @@ -15,78 +15,79 @@ import PasswordResetForm from "./PasswordResetForm"; const { Title } = Typography; const ResetPassword = ({ queryParams = "test" }) => { - const firebase = useFirebase(); - const dispatch = useDispatch(); - const { oobCode: actionCode } = queryParams; - const [error, setError] = useState(null); - const [loading, setLoading] = useState(false); - const [success, setSuccess] = useState(false); - const errorProps = useSelector(({ auth }) => auth.recoverPassword.error); - const loadingProps = useSelector(({ auth }) => auth.recoverPassword.loading); + const firebase = useFirebase(); + const dispatch = useDispatch(); + const { oobCode: actionCode } = queryParams; + const [error, setError] = useState(null); + const [loading, setLoading] = useState(false); + const [success, setSuccess] = useState(false); + const errorProps = useSelector(({ auth }) => auth.recoverPassword.error); + const loadingProps = useSelector(({ auth }) => auth.recoverPassword.loading); - useEffect(() => { - verifyPasswordResetCode(actionCode)(firebase, dispatch); - }, [actionCode, firebase, dispatch]); + useEffect(() => { + verifyPasswordResetCode(actionCode)(firebase, dispatch); + }, [actionCode, firebase, dispatch]); - useEffect(() => { - setError(errorProps); - }, [errorProps]); + useEffect(() => { + setError(errorProps); + }, [errorProps]); - useEffect(() => { - setLoading(loadingProps); - }, [loadingProps]); + useEffect(() => { + setLoading(loadingProps); + }, [loadingProps]); - useEffect(() => { - if (errorProps === false && loadingProps === false) { - setSuccess(true); - } else { - setSuccess(false); - } - }, [errorProps, loadingProps]); + useEffect(() => { + if (errorProps === false && loadingProps === false) { + setSuccess(true); + } else { + setSuccess(false); + } + }, [errorProps, loadingProps]); - useEffect( - () => () => { - clearRecoverPasswordError()(dispatch); - }, - [dispatch] - ); + useEffect( + () => () => { + clearRecoverPasswordError()(dispatch); + }, + [dispatch] + ); - return ( - <> - - - - {loading && ( - - Please wait... - - )} - {error && ( - <> - - - - Back to CodeLabz - - - - )} + return ( + <> + + + + {loading && ( + + Please wait... + + )} + {error && ( + <> + + + + Back to CodeLabz + + + + )} - {success && } - - - - - ); + {success && } + + + + + ); }; export default ResetPassword; diff --git a/src/components/ManageUsers/VerifyEmail/index.jsx b/src/components/ManageUsers/VerifyEmail/index.jsx index 119ed016..18bb13df 100644 --- a/src/components/ManageUsers/VerifyEmail/index.jsx +++ b/src/components/ManageUsers/VerifyEmail/index.jsx @@ -9,85 +9,86 @@ import { useDispatch, useSelector } from "react-redux"; import { verifyEmail, clearAuthError } from "../../../store/actions"; const VerifyEmail = ({ queryParams = "test" }) => { - const firebase = useFirebase(); - const dispatch = useDispatch(); - const { oobCode: actionCode } = queryParams; - const [error, setError] = useState(null); - const [loading, setLoading] = useState(false); - const [success, setSuccess] = useState(false); - const errorProps = useSelector(({ auth }) => auth.verifyEmail.error); - const loadingProps = useSelector(({ auth }) => auth.verifyEmail.loading); + const firebase = useFirebase(); + const dispatch = useDispatch(); + const { oobCode: actionCode } = queryParams; + const [error, setError] = useState(null); + const [loading, setLoading] = useState(false); + const [success, setSuccess] = useState(false); + const errorProps = useSelector(({ auth }) => auth.verifyEmail.error); + const loadingProps = useSelector(({ auth }) => auth.verifyEmail.loading); - useEffect(() => { - verifyEmail(actionCode)(firebase, dispatch); - }, [actionCode, firebase, dispatch]); + useEffect(() => { + verifyEmail(actionCode)(firebase, dispatch); + }, [actionCode, firebase, dispatch]); - useEffect( - () => () => { - clearAuthError()(dispatch); - }, - [dispatch] - ); + useEffect( + () => () => { + clearAuthError()(dispatch); + }, + [dispatch] + ); - useEffect(() => { - setError(errorProps); - }, [errorProps]); + useEffect(() => { + setError(errorProps); + }, [errorProps]); - useEffect(() => { - setLoading(loadingProps); - }, [loadingProps]); + useEffect(() => { + setLoading(loadingProps); + }, [loadingProps]); - useEffect(() => { - if (errorProps === false && loadingProps === false) { - setSuccess(true); - } else { - setSuccess(false); - } - }, [errorProps, loadingProps]); + useEffect(() => { + if (errorProps === false && loadingProps === false) { + setSuccess(true); + } else { + setSuccess(false); + } + }, [errorProps, loadingProps]); - return ( - <> - - - - {loading && ( - - Now verifying your email - - )} + return ( + <> + + + + {loading && ( + + Now verifying your email + + )} - {error && ( - <> - - Verification failed - - - - Back to CodeLabz - - - - )} + {error && ( + <> + + Verification failed + + + + Back to CodeLabz + + + + )} - {success && ( - <> - - Your email has been verified! - - - - Log in - - - - )} - - - - - ); + {success && ( + <> + + Your email has been verified! + + + + Log in + + + + )} + + + + + ); }; export default VerifyEmail; diff --git a/src/components/MyFeed/Carousel/styles.jsx b/src/components/MyFeed/Carousel/styles.jsx index aa97f024..b8697102 100644 --- a/src/components/MyFeed/Carousel/styles.jsx +++ b/src/components/MyFeed/Carousel/styles.jsx @@ -1,97 +1,97 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - slides: { - height: "100%", - width: "100%", - display: "flex", - alignItems: "center", - justifyContent: "center", - position: "relative", - zIndex: "2", - boxSizing: "border-box", - }, - image: { - height: "20rem", - width: "20rem", - }, - slide: {}, - slideActive: {}, - slideContainer: { - width: 900, - overflow: "hidden", - display: "flex", - height: 500, - }, - root: { - boxShadow: "0rem 2rem 2rem gray", - height: 445, - zIndex: "2", - display: "flex", - alignItems: "center", - justifyContent: "space-evenly", - flexDirection: "column", - transform: "scale(0.8)", - }, - rootAnim: { - animation: "$myEffectRoot 1000ms", - }, - rootLeft: { - maxWidth: 300, - animation: "$myEffect 1200ms", - height: 345, - minWidth: 280, - zIndex: "-1", - position: "relative", - left: "60%", - display: "flex", - alignItems: "center", - justifyContent: "space-evenly", - filter: "brightness(0.74) blur(2px)", - }, - rootRight: { - maxWidth: 300, - animation: "$myEffect 1200ms", - height: 345, - minWidth: 280, - zIndex: "-1", - position: "relative", - right: "60%", - display: "flex", - alignItems: "center", - justifyContent: "space-evenly", - filter: "brightness(0.74) blur(2px)", - }, - media: { - height: 140, - }, - arrow: { - "&:hover": { - transform: "scale(1.2,1.2)", - }, - }, - "@keyframes myEffect": { - "0%": { - opacity: 1, +const useStyles = makeStyles(theme => ({ + slides: { + height: "100%", + width: "100%", + display: "flex", + alignItems: "center", + justifyContent: "center", + position: "relative", + zIndex: "2", + boxSizing: "border-box" + }, + image: { + height: "20rem", + width: "20rem" + }, + slide: {}, + slideActive: {}, + slideContainer: { + width: 900, + overflow: "hidden", + display: "flex", + height: 500 + }, + root: { + boxShadow: "0rem 2rem 2rem gray", + height: 445, + zIndex: "2", + display: "flex", + alignItems: "center", + justifyContent: "space-evenly", + flexDirection: "column", + transform: "scale(0.8)" + }, + rootAnim: { + animation: "$myEffectRoot 1000ms" + }, + rootLeft: { + maxWidth: 300, + animation: "$myEffect 1200ms", + height: 345, + minWidth: 280, + zIndex: "-1", + position: "relative", + left: "60%", + display: "flex", + alignItems: "center", + justifyContent: "space-evenly", + filter: "brightness(0.74) blur(2px)" + }, + rootRight: { + maxWidth: 300, + animation: "$myEffect 1200ms", + height: 345, + minWidth: 280, + zIndex: "-1", + position: "relative", + right: "60%", + display: "flex", + alignItems: "center", + justifyContent: "space-evenly", + filter: "brightness(0.74) blur(2px)" + }, + media: { + height: 140 + }, + arrow: { + "&:hover": { + transform: "scale(1.2,1.2)" + } + }, + "@keyframes myEffect": { + "0%": { + opacity: 1, - transform: "scale(.6,.6) ", - }, - "100%": { - opacity: 1, - transform: "scale(1,1) rotateY(0)", - }, - }, - "@keyframes myEffectRoot": { - "0%": { - opacity: 1, + transform: "scale(.6,.6) " + }, + "100%": { + opacity: 1, + transform: "scale(1,1) rotateY(0)" + } + }, + "@keyframes myEffectRoot": { + "0%": { + opacity: 1, - transform: "scale(.6,.6) rotateY(-100deg)", - }, - "100%": { - opacity: 1, - transform: "scale(1,1) rotateY(0)", - }, - }, + transform: "scale(.6,.6) rotateY(-100deg)" + }, + "100%": { + opacity: 1, + transform: "scale(1,1) rotateY(0)" + } + } })); export default useStyles; diff --git a/src/components/MyFeed/ExploreOrgs.jsx b/src/components/MyFeed/ExploreOrgs.jsx index 2db92f18..7b132e6b 100644 --- a/src/components/MyFeed/ExploreOrgs.jsx +++ b/src/components/MyFeed/ExploreOrgs.jsx @@ -19,132 +19,136 @@ import { CardHeader } from "@mui/material"; import PropTypes from "prop-types"; const ExploreOrgs = ({ - cardHeight = 450, - cardWidth = 345, - mediaHeight = 320, - mediaWidth = 320, - cardColor = "white", + cardHeight = 450, + cardWidth = 345, + mediaHeight = 320, + mediaWidth = 320, + cardColor = "white" }) => { - const useStyles = makeStyles({ - root: { - paddingBottom: 10, - }, + const useStyles = makeStyles({ + root: { + paddingBottom: 10 + }, - card: { - height: cardHeight, - maxWidth: cardWidth, - background: cardColor, - }, + card: { + height: cardHeight, + maxWidth: cardWidth, + background: cardColor + }, - media: { - height: mediaHeight, - margin: "auto", - }, - }); + media: { + height: mediaHeight, + margin: "auto" + } + }); - const classes = useStyles(); - const loading = useSelector(({ org }) => org.launched.loading); - const error = useSelector(({ org }) => org.launched.error); - const launchedOrgs = useSelector(({ org }) => org.launched.data); - const dispatch = useDispatch(); - const firestore = useFirestore(); + const classes = useStyles(); + const loading = useSelector(({ org }) => org.launched.loading); + const error = useSelector(({ org }) => org.launched.error); + const launchedOrgs = useSelector(({ org }) => org.launched.data); + const dispatch = useDispatch(); + const firestore = useFirestore(); - useEffect(() => { - getLaunchedOrgsData()(firestore, dispatch); - return () => { - clearOrgData()(dispatch); - }; - }, [firestore, dispatch]); + useEffect(() => { + getLaunchedOrgsData()(firestore, dispatch); + return () => { + clearOrgData()(dispatch); + }; + }, [firestore, dispatch]); - return ( - - {loading ? ( -
- - -
- ) : ( - - {error ? ( - - {error} - - ) : ( - <> - {launchedOrgs && - launchedOrgs - .map((a) => ({ sort: Math.random(), value: a })) - .sort((a, b) => a.sort - b.sort) - .map((a) => a.value) - .slice(0, 5) - .map((org) => ( - - - - - - - - {org.org_name} - - - {org.org_description} - - - - - - - ))} - - - - - - Don't worry there are many organization with -

- -

- - - - - - - )} - - )} - - ); + return ( + + {loading ? ( +
+ + +
+ ) : ( + + {error ? ( + + {error} + + ) : ( + <> + {launchedOrgs && + launchedOrgs + .map(a => ({ sort: Math.random(), value: a })) + .sort((a, b) => a.sort - b.sort) + .map(a => a.value) + .slice(0, 5) + .map(org => ( + + + + + + + + {org.org_name} + + + {org.org_description} + + + + + + + ))} + + + + + + Don't worry there are many organization with +

+ +

+ + + + + + + )} + + )} + + ); }; ExploreOrgs.propTypes = { - cardHeight: PropTypes.number, - cardWidth: PropTypes.number, - mediaHeight: PropTypes.number, - mediaWidth: PropTypes.number, - cardColor: PropTypes.string, + cardHeight: PropTypes.number, + cardWidth: PropTypes.number, + mediaHeight: PropTypes.number, + mediaWidth: PropTypes.number, + cardColor: PropTypes.string }; export default ExploreOrgs; diff --git a/src/components/MyFeed/index.jsx b/src/components/MyFeed/index.jsx index 6520ec75..b3917ce9 100644 --- a/src/components/MyFeed/index.jsx +++ b/src/components/MyFeed/index.jsx @@ -6,47 +6,49 @@ import PropTypes from "prop-types"; import Carousel from "./Carousel/index"; const MyFeed = ({ - heading = "Explore Codelabz", - title = " Explore top rated Organizations and find the Codelabz you are looking for", - backgroundcolor = "white", - textcolor = "black", + heading = "Explore Codelabz", + title = " Explore top rated Organizations and find the Codelabz you are looking for", + backgroundcolor = "white", + textcolor = "black" }) => { - return ( - - - - - {heading} - -

{title}

-
- -
- - - - ); + return ( + + + + + {heading} + +

{title}

+
+ +
+ + + + ); }; MyFeed.propTypes = { - heading: PropTypes.string, - title: PropTypes.string, - backgroundcolor: PropTypes.string, - textcolor: PropTypes.string, + heading: PropTypes.string, + title: PropTypes.string, + backgroundcolor: PropTypes.string, + textcolor: PropTypes.string }; export default MyFeed; diff --git a/src/components/NavBar/_old/MainNavbar/LeftMenu.jsx b/src/components/NavBar/_old/MainNavbar/LeftMenu.jsx index 467eaa3c..5119e51a 100644 --- a/src/components/NavBar/_old/MainNavbar/LeftMenu.jsx +++ b/src/components/NavBar/_old/MainNavbar/LeftMenu.jsx @@ -17,32 +17,33 @@ const useStyles = makeStyles(theme => ({ })); const LeftMenu = ({ mode }) => { - const permissions = useGetPermissions(); - const allowDashboard = useAllowDashboard(); - let { pathname: location } = useLocation(); + const permissions = useGetPermissions(); + const allowDashboard = useAllowDashboard(); + let { pathname: location } = useLocation(); - const classes = useStyles(); - return ( - - - Tutorials - - {allowDashboard && ( - - My CodeFeed - - )} - {allowDashboard && permissions.length > 0 && ( - - Organizations - - )} - - ); + const classes = useStyles(); + return ( + + + Tutorials + + {allowDashboard && ( + + My CodeFeed + + )} + {allowDashboard && permissions.length > 0 && ( + + Organizations + + )} + + ); }; export default LeftMenu; diff --git a/src/components/NavBar/_old/MainNavbar/index.jsx b/src/components/NavBar/_old/MainNavbar/index.jsx index 420d80d0..d26df6f2 100644 --- a/src/components/NavBar/_old/MainNavbar/index.jsx +++ b/src/components/NavBar/_old/MainNavbar/index.jsx @@ -11,98 +11,102 @@ import Button from "@mui/material/Button"; import Grid from "@mui/material/Grid"; function MainNavbar() { - const [visible, setVisible] = useState(false); - let { pathname: location } = useLocation(); + const [visible, setVisible] = useState(false); + let { pathname: location } = useLocation(); - const showDrawer = () => { - setVisible(!visible); - }; + const showDrawer = () => { + setVisible(!visible); + }; - useEffect(() => { - setVisible(false); - }, [location]); - const useStyles = makeStyles((theme) => ({ - drawer: { - width: 250, - flexShrink: 0, - }, - drawerPaper: { - width: 250, - }, - barsMenu: { - display: "none", - [theme.breakpoints.down(767)]: { - display: "inline-block", - position: "absolute", - right: "0", - top: "1.5rem", - }, - }, - navHeader: { - backgroundColor: "white", - borderBottom: "0", - padding: "15px 4px 0 24px", - }, - })); - const classes = useStyles(); - return ( - - + + ); } export default MainNavbar; diff --git a/src/components/NavBar/_old/MiniNavbar/index.jsx b/src/components/NavBar/_old/MiniNavbar/index.jsx index 1124479c..0422b7ed 100644 --- a/src/components/NavBar/_old/MiniNavbar/index.jsx +++ b/src/components/NavBar/_old/MiniNavbar/index.jsx @@ -10,71 +10,76 @@ import Button from "@mui/material/Button"; import Grid from "@mui/material/Grid"; const MiniNavbar = ({ type }) => { - const firebase = useFirebase(); - const authed = useAuthStatus(); - const dispatch = useDispatch(); + const firebase = useFirebase(); + const authed = useAuthStatus(); + const dispatch = useDispatch(); - return ( - - - -

- - - -

- - - {authed - ? [ - , - , - ] - : [ - - + return ( + + + +

+ + + +

+ + + {authed + ? [ + , + + ] + : [ + + - - , - ]} - - - - ); + + + ]} + + + + ); }; export default MiniNavbar; diff --git a/src/components/NavBar/new/MainNavbar/LeftMenu.jsx b/src/components/NavBar/new/MainNavbar/LeftMenu.jsx index 67c06702..7adf1023 100644 --- a/src/components/NavBar/new/MainNavbar/LeftMenu.jsx +++ b/src/components/NavBar/new/MainNavbar/LeftMenu.jsx @@ -23,79 +23,80 @@ const useStyles = makeStyles(theme => ({ })); const LeftMenu = ({ mode, onClick }) => { - const theme = useTheme(); - const matches = useMediaQuery(theme.breakpoints.down("sm")); + const theme = useTheme(); + const matches = useMediaQuery(theme.breakpoints.down("sm")); - const permissions = useGetPermissions(); - const allowDashboard = useAllowDashboard(); - let { pathname: location } = useLocation(); + const permissions = useGetPermissions(); + const allowDashboard = useAllowDashboard(); + let { pathname: location } = useLocation(); - const [anchorEl, setAnchorEl] = React.useState(null); + const [anchorEl, setAnchorEl] = React.useState(null); - const classes = useStyles(); + const classes = useStyles(); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; + const handleClick = event => { + setAnchorEl(event.currentTarget); + }; - const handleClose = () => { - setAnchorEl(null); - }; + const handleClose = () => { + setAnchorEl(null); + }; - if (matches) { - return ( - - - - - Tutorials - - - {allowDashboard && ( - - - My CodeFeed - - - )} - {allowDashboard && permissions.length > 0 && ( - - - Organizations - - - )} - - - ); - } + if (matches) { + return ( + + + + + Tutorials + + + {allowDashboard && ( + + + My CodeFeed + + + )} + {allowDashboard && permissions.length > 0 && ( + + + Organizations + + + )} + + + ); + } - return ( - - - - Tutorials - - {allowDashboard && ( - - My CodeFeed - - )} - {allowDashboard && permissions.length > 0 && ( - - Organizations - - )} - - - ); + return ( + + + + Tutorials + + {allowDashboard && ( + + My CodeFeed + + )} + {allowDashboard && permissions.length > 0 && ( + + Organizations + + )} + + + ); }; export default LeftMenu; diff --git a/src/components/NavBar/new/MainNavbar/index.jsx b/src/components/NavBar/new/MainNavbar/index.jsx index 12f985c4..2a41f64d 100644 --- a/src/components/NavBar/new/MainNavbar/index.jsx +++ b/src/components/NavBar/new/MainNavbar/index.jsx @@ -13,130 +13,137 @@ import CloseIcon from "@mui/icons-material/Close"; import SideBar from "../../../SideBar/index"; import useWindowSize from "../../../../helpers/customHooks/useWindowSize"; -const useStyles = makeStyles((theme) => ({ - input: { - marginLeft: theme.spacing(1), - color: "#3e5060", - letterSpacing: "0.5px", - flex: 1, - width: "92%", - [theme.breakpoints.down("md")]: { - width: "80%", - }, - }, - root: { - backgroundColor: theme.palette.grey[50], - padding: "2px", - border: "1px solid #ced4da", - borderRadius: "0.8rem", - }, - icon: { - padding: "2px", - color: theme.palette.primary.main, - }, - grid: { - width: "auto", - "& > *": {}, - [theme.breakpoints.down("sm")]: { - display: "none", - }, - }, - button: { - borderRadius: "10px", - }, - hamburger: { - [theme.breakpoints.up("md")]: { - display: "none", - }, - }, - drawer: { - width: 257, - }, +const useStyles = makeStyles(theme => ({ + input: { + marginLeft: theme.spacing(1), + color: "#3e5060", + letterSpacing: "0.5px", + flex: 1, + width: "92%", + [theme.breakpoints.down("md")]: { + width: "80%" + } + }, + root: { + backgroundColor: theme.palette.grey[50], + padding: "2px", + border: "1px solid #ced4da", + borderRadius: "0.8rem" + }, + icon: { + padding: "2px", + color: theme.palette.primary.main + }, + grid: { + width: "auto", + "& > *": {}, + [theme.breakpoints.down("sm")]: { + display: "none" + } + }, + button: { + borderRadius: "10px" + }, + hamburger: { + [theme.breakpoints.up("md")]: { + display: "none" + } + }, + drawer: { + width: 257 + } })); function MainNavbar() { - const classes = useStyles(); + const classes = useStyles(); - const history = useHistory(); - const windowSize = useWindowSize(); - const [openDrawer, setOpenDrawer] = useState(false); - const [openMenu, setOpen] = useState(false); - const toggleSlider = () => { - setOpen(!openMenu); - }; - const notification = () => {}; - return ( - - - - ); + const history = useHistory(); + const windowSize = useWindowSize(); + const [openDrawer, setOpenDrawer] = useState(false); + const [openMenu, setOpen] = useState(false); + const toggleSlider = () => { + setOpen(!openMenu); + }; + const notification = () => {}; + return ( + + + + ); } export default MainNavbar; diff --git a/src/components/NavBar/new/MiniNavbar/index.jsx b/src/components/NavBar/new/MiniNavbar/index.jsx index 96bf8c30..596e4e5b 100644 --- a/src/components/NavBar/new/MiniNavbar/index.jsx +++ b/src/components/NavBar/new/MiniNavbar/index.jsx @@ -8,7 +8,7 @@ import { } from "@mui/material"; import { makeStyles } from "@mui/styles"; import React, { useCallback, useEffect, useRef, useState } from "react"; -import { useLocation } from 'react-router-dom'; +import { useLocation } from "react-router-dom"; import Headroom from "react-headroom"; import BrandName from "../../../../helpers/brandName"; import SearchIcon from "@mui/icons-material/Search"; @@ -76,9 +76,9 @@ function MiniNavbar() { const windowSize = useWindowSize(); const location = useLocation(); - const routeName = location.pathname; - - const excludedRoutes = ['/login', '/signup'] + const routeName = location.pathname; + + const excludedRoutes = ["/login", "/signup"]; const toggleDrawer = useCallback(state => { setOpenDrawer(state); @@ -141,32 +141,33 @@ function MiniNavbar() { - {!excludedRoutes.includes(routeName) && + {!excludedRoutes.includes(routeName) && ( - - - - - "575" - ? "93.5%" - : "88.5%" - }} - className={classes.input} - placeholder="Search..." - /> - - } + + + + + "575" + ? "93.5%" + : "88.5%" + }} + className={classes.input} + placeholder="Search..." + /> + + + )} - - - - - - ); +
+
+ + +
+
+ + + ); }; export default EditOrgDetailsModal; diff --git a/src/components/Organization/OrgInfoCard/orgInfoCard.jsx b/src/components/Organization/OrgInfoCard/orgInfoCard.jsx index 7a4b61e6..6676c760 100644 --- a/src/components/Organization/OrgInfoCard/orgInfoCard.jsx +++ b/src/components/Organization/OrgInfoCard/orgInfoCard.jsx @@ -18,405 +18,421 @@ import LinkedInIcon from "@mui/icons-material/LinkedIn"; import { useDispatch, useSelector } from "react-redux"; import EditOrgDetailsModal from "./editOrgDetailsModal"; import { - clearEditGeneral, - unPublishOrganization, - uploadOrgProfileImage, + clearEditGeneral, + unPublishOrganization, + uploadOrgProfileImage } from "../../../store/actions"; import { useFirebase, useFirestore } from "react-redux-firebase"; import useStyles from "./styles"; const OrgInfoCard = () => { - const firebase = useFirebase(); - const dispatch = useDispatch(); - const firestore = useFirestore(); - const [currentOrgData, setCurrentOrgData] = useState({}); - const [orgEditModalVisible, setOrgEditModalVisible] = useState(false); - const [loading, setLoading] = useState(false); - const classes = useStyles(); - const [crop, setCrop] = useState({ unit: "%", width: 30, aspect: 16 / 16 }); - const [completedCrop, setCompletedCrop] = useState(null); - const [showImageDialog, setShowImageDialog] = useState(false); - const [upImg, setUpImg] = useState(); - const imgRef = useRef(null); - const previewCanvasRef = useRef(null); + const firebase = useFirebase(); + const dispatch = useDispatch(); + const firestore = useFirestore(); + const [currentOrgData, setCurrentOrgData] = useState({}); + const [orgEditModalVisible, setOrgEditModalVisible] = useState(false); + const [loading, setLoading] = useState(false); + const classes = useStyles(); + const [crop, setCrop] = useState({ unit: "%", width: 30, aspect: 16 / 16 }); + const [completedCrop, setCompletedCrop] = useState(null); + const [showImageDialog, setShowImageDialog] = useState(false); + const [upImg, setUpImg] = useState(); + const imgRef = useRef(null); + const previewCanvasRef = useRef(null); - const onSelectFile = (e) => { - if (e.target.files && e.target.files.length > 0) { - const reader = new FileReader(); - reader.addEventListener("load", () => setUpImg(reader.result)); - reader.readAsDataURL(e.target.files[0]); - } - }; - const onLoad = useCallback((img) => { - imgRef.current = img; - }, []); + const onSelectFile = e => { + if (e.target.files && e.target.files.length > 0) { + const reader = new FileReader(); + reader.addEventListener("load", () => setUpImg(reader.result)); + reader.readAsDataURL(e.target.files[0]); + } + }; + const onLoad = useCallback(img => { + imgRef.current = img; + }, []); - const base64StringToFile = (base64String, filename) => { - let arr = base64String.split(","), - mime = arr[0].match(/:(.*?);/)[1], - bstr = atob(arr[1]), - n = bstr.length, - u8arr = new Uint8Array(n); - while (n--) { - u8arr[n] = bstr.charCodeAt(n); - } - return new File([u8arr], filename, { type: mime }); - }; + const base64StringToFile = (base64String, filename) => { + let arr = base64String.split(","), + mime = arr[0].match(/:(.*?);/)[1], + bstr = atob(arr[1]), + n = bstr.length, + u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + return new File([u8arr], filename, { type: mime }); + }; - const saveImage = (canvas, crop) => { - if (!crop || !canvas) { - return; - } - setShowImageDialog(false); - uploadImage(base64StringToFile(canvas.toDataURL(), "newfile")); - }; + const saveImage = (canvas, crop) => { + if (!crop || !canvas) { + return; + } + setShowImageDialog(false); + uploadImage(base64StringToFile(canvas.toDataURL(), "newfile")); + }; - const OrgMenu = () => { - return ( - - + const OrgMenu = () => { + return ( + + - - - ); - }; + + + ); + }; - const DropdownMenu = () => { - return ; - }; + const DropdownMenu = () => { + return ; + }; - const loadingProps = useSelector( - ({ - org: { - general: { loading }, - }, - }) => loading - ); + const loadingProps = useSelector( + ({ + org: { + general: { loading } + } + }) => loading + ); - const current = useSelector( - ({ - org: { - general: { current }, - }, - }) => current - ); + const current = useSelector( + ({ + org: { + general: { current } + } + }) => current + ); - useEffect(() => { - setLoading(loadingProps); - }, [loadingProps]); + useEffect(() => { + setLoading(loadingProps); + }, [loadingProps]); - const orgs = useSelector( - ({ - profile: { - data: { organizations }, - }, - }) => organizations - ); + const orgs = useSelector( + ({ + profile: { + data: { organizations } + } + }) => organizations + ); - useEffect(() => { - let orgDetails = orgs.find((element) => { - return element.org_handle === current; - }); - setCurrentOrgData(orgDetails); - }, [current, orgs]); + useEffect(() => { + let orgDetails = orgs.find(element => { + return element.org_handle === current; + }); + setCurrentOrgData(orgDetails); + }, [current, orgs]); - const uploadImage = (file) => { - uploadOrgProfileImage( - file, - current, - orgs - )(firebase, dispatch).then(() => { - clearEditGeneral()(dispatch); - }); - return false; - }; + const uploadImage = file => { + uploadOrgProfileImage( + file, + current, + orgs + )(firebase, dispatch).then(() => { + clearEditGeneral()(dispatch); + }); + return false; + }; - const checkAvailable = (data) => { - return !!(data && data.length > 0); - }; + const checkAvailable = data => { + return !!(data && data.length > 0); + }; - const _unpublishOrganization = () => { - unPublishOrganization(current, currentOrgData.org_published, orgs)( - firebase, - firestore, - dispatch - ); - }; + const _unpublishOrganization = () => { + unPublishOrganization(current, currentOrgData.org_published, orgs)( + firebase, + firestore, + dispatch + ); + }; - if (currentOrgData) { - return ( - <> - - - - Organization Details - -
- {currentOrgData.permissions && - [2, 3].some((p) => currentOrgData.permissions.includes(p)) ? ( - - ) : null} -
- - - - - {currentOrgData.org_image - ? BasicImage(currentOrgData.org_image, "name") - : BasicImage(NoImage, "Not Available")} - {currentOrgData.permissions && - currentOrgData.permissions[0] >= 2 && ( - -
- -
- - )} - - - - {"Change Profile Picture"} - - - -
-
- - - - - - -
- setCrop(c)} - onComplete={(c) => setCompletedCrop(c)} - /> -
- - - - - - - - - - - - - - - -
-
- - - - - -

- - {currentOrgData.org_name} - -

- {checkAvailable(currentOrgData.org_description) && ( -

- {currentOrgData.org_description} -

- )} - {checkAvailable(currentOrgData.org_link_facebook) && ( -

- - {" "} - {currentOrgData.org_link_facebook} - -

- )} - {checkAvailable(currentOrgData.org_link_twitter) && ( -

- - {" "} - {currentOrgData.org_link_twitter} - -

- )} - {checkAvailable(currentOrgData.org_link_github) && ( -

- - {" "} - {currentOrgData.org_link_github} - -

- )} - {checkAvailable(currentOrgData.org_link_linkedin) && ( -

- - {" "} - {currentOrgData.org_link_linkedin} - -

- )} - {checkAvailable(currentOrgData.org_website) && ( -

- - {currentOrgData.org_website} - -

- )} - {checkAvailable(currentOrgData.org_country) && ( -

- - {currentOrgData.org_country} - -

- )} - - - - -
- setOrgEditModalVisible(e)} - /> -
- - - ); - } else { - return ( - - ); - } + if (currentOrgData) { + return ( + <> + + + + Organization Details + +
+ {currentOrgData.permissions && + [2, 3].some(p => currentOrgData.permissions.includes(p)) ? ( + + ) : null} +
+ + + + + {currentOrgData.org_image + ? BasicImage(currentOrgData.org_image, "name") + : BasicImage(NoImage, "Not Available")} + {currentOrgData.permissions && + currentOrgData.permissions[0] >= 2 && ( + +
+ +
+ + )} + + + + {"Change Profile Picture"} + + + +
+
+ + + + + + +
+ setCrop(c)} + onComplete={c => setCompletedCrop(c)} + /> +
+ + + + + + + + + + + + + + + +
+
+ + + + + +

+ + {currentOrgData.org_name} + +

+ {checkAvailable(currentOrgData.org_description) && ( +

+ {currentOrgData.org_description} +

+ )} + {checkAvailable(currentOrgData.org_link_facebook) && ( +

+ + {" "} + {currentOrgData.org_link_facebook} + +

+ )} + {checkAvailable(currentOrgData.org_link_twitter) && ( +

+ + {" "} + {currentOrgData.org_link_twitter} + +

+ )} + {checkAvailable(currentOrgData.org_link_github) && ( +

+ + {" "} + {currentOrgData.org_link_github} + +

+ )} + {checkAvailable(currentOrgData.org_link_linkedin) && ( +

+ + {" "} + {currentOrgData.org_link_linkedin} + +

+ )} + {checkAvailable(currentOrgData.org_website) && ( +

+ + {currentOrgData.org_website} + +

+ )} + {checkAvailable(currentOrgData.org_country) && ( +

+ + {currentOrgData.org_country} + +

+ )} + + + + +
+ setOrgEditModalVisible(e)} + /> +
+ + + ); + } else { + return ( + + ); + } }; export default OrgInfoCard; diff --git a/src/components/Organization/OrgInfoCard/styles.jsx b/src/components/Organization/OrgInfoCard/styles.jsx index 1f390fbf..a9b26bb0 100644 --- a/src/components/Organization/OrgInfoCard/styles.jsx +++ b/src/components/Organization/OrgInfoCard/styles.jsx @@ -1,15 +1,15 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - alignItems: "center", - flexFlow: "row", - padding: "2rem", - [theme.breakpoints.down(750)]: { - flexDirection: "column", - }, - }, +const useStyles = makeStyles(theme => ({ + root: { + display: "flex", + alignItems: "center", + flexFlow: "row", + padding: "2rem", + [theme.breakpoints.down(750)]: { + flexDirection: "column" + } + } })); export default useStyles; diff --git a/src/components/Organization/OrgSidebar/createOrgModal.jsx b/src/components/Organization/OrgSidebar/createOrgModal.jsx index 7203da4d..02eac573 100644 --- a/src/components/Organization/OrgSidebar/createOrgModal.jsx +++ b/src/components/Organization/OrgSidebar/createOrgModal.jsx @@ -9,156 +9,160 @@ import { useFirebase, useFirestore } from "react-redux-firebase"; import { useDispatch, useSelector } from "react-redux"; import CountryDropdown from "../../../helpers/countryDropdown"; -const CreateOrgModal = (props) => { - const firebase = useFirebase(); - const firestore = useFirestore(); - const dispatch = useDispatch(); - const [loading, setLoading] = useState(false); - const [visible, setVisible] = useState(false); - const [error, setError] = useState(false); - const [data, setData] = useState({ - org_name: "", - org_handle: "", - org_website: "", - org_country: "", - }); +const CreateOrgModal = props => { + const firebase = useFirebase(); + const firestore = useFirestore(); + const dispatch = useDispatch(); + const [loading, setLoading] = useState(false); + const [visible, setVisible] = useState(false); + const [error, setError] = useState(false); + const [data, setData] = useState({ + org_name: "", + org_handle: "", + org_website: "", + org_country: "" + }); - const handleChange = (e) => { - setData((prev) => ({ - ...prev, - [e.target?.name]: e.target?.value, - })); - }; - const handleCountry = (e) => { - setData((prev) => ({ - ...prev, - org_country: e, - })); - }; - const loadingProp = useSelector( - ({ - profile: { - edit: { loading }, - }, - }) => loading - ); - const errorProp = useSelector( - ({ - profile: { - edit: { error }, - }, - }) => error - ); + const handleChange = e => { + setData(prev => ({ + ...prev, + [e.target?.name]: e.target?.value + })); + }; + const handleCountry = e => { + setData(prev => ({ + ...prev, + org_country: e + })); + }; + const loadingProp = useSelector( + ({ + profile: { + edit: { loading } + } + }) => loading + ); + const errorProp = useSelector( + ({ + profile: { + edit: { error } + } + }) => error + ); - useEffect(() => { - setLoading(loadingProp); - }, [loadingProp]); + useEffect(() => { + setLoading(loadingProp); + }, [loadingProp]); - useEffect(() => { - setError(errorProp); - }, [errorProp]); + useEffect(() => { + setError(errorProp); + }, [errorProp]); - useEffect(() => { - if (loadingProp === false && errorProp === false) { - setVisible(false); - } - }, [loadingProp, errorProp]); + useEffect(() => { + if (loadingProp === false && errorProp === false) { + setVisible(false); + } + }, [loadingProp, errorProp]); - useEffect(() => { - if (props.show === true) { - setVisible(true); - } - }, [props.show]); + useEffect(() => { + if (props.show === true) { + setVisible(true); + } + }, [props.show]); - // Calls a function in the sidebar to set the modal state to visible false as well - useEffect(() => { - if (visible === false) { - props.closeCallback(); - } - }, [visible, props]); + // Calls a function in the sidebar to set the modal state to visible false as well + useEffect(() => { + if (visible === false) { + props.closeCallback(); + } + }, [visible, props]); - const handleCancel = () => { - setVisible(false); - }; - const onSubmit = async (e) => { - e.preventDefault(); - console.log("orgData", data); - setLoading(true); - await createOrganization(data)(firebase, firestore, dispatch); - }; + const handleCancel = () => { + setVisible(false); + }; + const onSubmit = async e => { + e.preventDefault(); + console.log("orgData", data); + setLoading(true); + await createOrganization(data)(firebase, firestore, dispatch); + }; - return ( - - {error && ( - - )} -
-
- handleChange(e)} - fullWidth - style={{ marginBottom: "1rem" }} - /> - handleChange(e)} - fullWidth - style={{ marginBottom: "1rem" }} - /> - + return ( + + {error && ( + + )} +
+ + handleChange(e)} + fullWidth + style={{ marginBottom: "1rem" }} + /> + handleChange(e)} + fullWidth + style={{ marginBottom: "1rem" }} + /> + - handleChange(e)} - fullWidth - style={{ marginBottom: "1rem" }} - /> -
- - -
- -
- - ); + handleChange(e)} + fullWidth + style={{ marginBottom: "1rem" }} + /> +
+ + +
+ +
+ + ); }; export default CreateOrgModal; diff --git a/src/components/Organization/OrgSidebar/orgIcons.jsx b/src/components/Organization/OrgSidebar/orgIcons.jsx index f244790c..bf714481 100644 --- a/src/components/Organization/OrgSidebar/orgIcons.jsx +++ b/src/components/Organization/OrgSidebar/orgIcons.jsx @@ -13,62 +13,65 @@ import Grid from "@mui/material/Grid"; * @param {object} data // pass the data to identify in the click event (required if click event is used) */ export const OrgIcons = ({ - active, - text, - icon, - image, - onClick, - data, - border, - style, - borderColor, - isDesktop, + active, + text, + icon, + image, + onClick, + data, + border, + style, + borderColor, + isDesktop }) => { - let tooltipProps = { - placement: "right", - title: data ? data.name : null, - color: data ? data.color : null, - }; - if (isDesktop === false) { - tooltipProps.visible = false; - } + let tooltipProps = { + placement: "right", + title: data ? data.name : null, + color: data ? data.color : null + }; + if (isDesktop === false) { + tooltipProps.visible = false; + } - return ( - - - - onClick(data) : null}> - -
- - {text ? avatarName(text) : ""} - -
- - {isDesktop === false && ( - - {data ? data.name : null} - - )} - - - - - ); + return ( + + + + onClick(data) : null} + > + +
+ + {text ? avatarName(text) : ""} + +
+ + {isDesktop === false && ( + + {data ? data.name : null} + + )} + + + + + ); }; diff --git a/src/components/Organization/OrgSidebar/orgSidebar.jsx b/src/components/Organization/OrgSidebar/orgSidebar.jsx index 51ca2c22..f6a84ede 100644 --- a/src/components/Organization/OrgSidebar/orgSidebar.jsx +++ b/src/components/Organization/OrgSidebar/orgSidebar.jsx @@ -10,32 +10,32 @@ import { useMediaQuery } from "react-responsive"; const OrgSidebar = ({ onOrgChange }) => { const isDesktop = useMediaQuery({ - query: "(min-device-width: 767px)", + query: "(min-device-width: 767px)" }); const dispatch = useDispatch(); const orgs = useSelector( ({ profile: { - data: { organizations }, - }, + data: { organizations } + } }) => organizations ); const current = useSelector( ({ org: { - general: { current }, - }, + general: { current } + } }) => current ); const [activeOrg, setActiveOrg] = useState(orgs[0]); // set the current active org here const [showModal, setShowModal] = useState(false); // set the current active org here - const handleClickEvent = (data) => { + const handleClickEvent = data => { onOrgChange(); - let orgDetails = orgs.find((element) => { + let orgDetails = orgs.find(element => { return element.org_handle === data.handle; }); setCurrentOrgUserPermissions( @@ -45,7 +45,7 @@ const OrgSidebar = ({ onOrgChange }) => { }; useEffect(() => { - let orgDetails = orgs.find((element) => { + let orgDetails = orgs.find(element => { return element.org_handle === current; }); setActiveOrg(orgDetails); @@ -88,7 +88,7 @@ const OrgSidebar = ({ onOrgChange }) => { /> {orgs && - orgs.map((org) => ( + orgs.map(org => ( { onClick={handleClickEvent} data={{ name: org.org_name, - handle: org.org_handle, + handle: org.org_handle }} active={false} isDesktop={isDesktop} diff --git a/src/components/Organization/OrgUsers/OrgDelete.jsx b/src/components/Organization/OrgUsers/OrgDelete.jsx index 74790c5d..650a0148 100644 --- a/src/components/Organization/OrgUsers/OrgDelete.jsx +++ b/src/components/Organization/OrgUsers/OrgDelete.jsx @@ -4,94 +4,97 @@ import { useState } from "react"; import OrgDeleteModal from "./OrgDeleteModal"; import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - border: `1px solid ${theme.palette.divider}`, - borderRadius: "10px", - }, - gridPadding: { - padding: theme.spacing(2), - }, - buttonDiv: { - [theme.breakpoints.down("md")]: { - justifyContent: "flex-start", - paddingTop: theme.spacing(2), - }, - [theme.breakpoints.up("md")]: { - justifyContent: "flex-end", - }, - }, - button: { - boxShadow: "none", - borderRadius: "10px", - border: 0, - backgroundColor: theme.palette.grey[100], - padding: `${theme.spacing(0.5)}px ${theme.spacing(2)}px`, - }, - heading: { - [theme.breakpoints.down("md")]: { - fontSize: theme.typography.subtitle1.fontSize, - }, - }, - body: { - [theme.breakpoints.down("md")]: { - fontSize: theme.typography.subtitle2.fontSize, - }, - }, +const useStyles = makeStyles(theme => ({ + root: { + border: `1px solid ${theme.palette.divider}`, + borderRadius: "10px" + }, + gridPadding: { + padding: theme.spacing(2) + }, + buttonDiv: { + [theme.breakpoints.down("md")]: { + justifyContent: "flex-start", + paddingTop: theme.spacing(2) + }, + [theme.breakpoints.up("md")]: { + justifyContent: "flex-end" + } + }, + button: { + boxShadow: "none", + borderRadius: "10px", + border: 0, + backgroundColor: theme.palette.grey[100], + padding: `${theme.spacing(0.5)}px ${theme.spacing(2)}px` + }, + heading: { + [theme.breakpoints.down("md")]: { + fontSize: theme.typography.subtitle1.fontSize + } + }, + body: { + [theme.breakpoints.down("md")]: { + fontSize: theme.typography.subtitle2.fontSize + } + } })); /** * @description Delete organization component */ function OrgDelete() { - const classes = useStyles(); + const classes = useStyles(); - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(false); - return ( - - - - - - - - Delete this organization ? - - - - - Once deleted, it will be gone forever. Please be certain. - - - - - - - - - - setOpen(false)} - aria-labelledby="org-delete-modal-title" - aria-describedby="org-delete-modal-description"> - - - - ); + return ( + + + + + + + + Delete this organization ? + + + + + Once deleted, it will be gone forever. Please be certain. + + + + + + + + + + setOpen(false)} + aria-labelledby="org-delete-modal-title" + aria-describedby="org-delete-modal-description" + > + + + + ); } export default OrgDelete; diff --git a/src/components/Organization/OrgUsers/OrgDeleteModal.jsx b/src/components/Organization/OrgUsers/OrgDeleteModal.jsx index 04147385..0ca80e1b 100644 --- a/src/components/Organization/OrgUsers/OrgDeleteModal.jsx +++ b/src/components/Organization/OrgUsers/OrgDeleteModal.jsx @@ -1,10 +1,10 @@ import { - Button, - Dialog, - DialogContent, - DialogTitle, - TextField, - Typography, + Button, + Dialog, + DialogContent, + DialogTitle, + TextField, + Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import React from "react"; @@ -15,84 +15,86 @@ import { useFirebase } from "react-redux-firebase"; import { useHistory } from "react-router-dom"; import { deleteOrganization } from "../../../store/actions/orgActions"; -const useStyles = makeStyles((theme) => ({ - root: { - width: "100%", - }, - input: { - marginTop: "15px", - }, - deleteButton: { - marginTop: "15px", - color: "white", - }, +const useStyles = makeStyles(theme => ({ + root: { + width: "100%" + }, + input: { + marginTop: "15px" + }, + deleteButton: { + marginTop: "15px", + color: "white" + } })); /** * @description Delete organization modal */ function OrgDeleteModal() { - const history = useHistory("/"); - const firebase = useFirebase(); - const dispatch = useDispatch(); + const history = useHistory("/"); + const firebase = useFirebase(); + const dispatch = useDispatch(); - const [deleteOrgInput, setDeleteOrgInput] = React.useState(""); + const [deleteOrgInput, setDeleteOrgInput] = React.useState(""); - const classes = useStyles(); - const CurrentOrg = useSelector( - ({ - profile: { - data: { organizations }, - }, - org: { - general: { current }, - }, - }) => organizations.find((element) => element.org_handle === current) - ); + const classes = useStyles(); + const CurrentOrg = useSelector( + ({ + profile: { + data: { organizations } + }, + org: { + general: { current } + } + }) => organizations.find(element => element.org_handle === current) + ); - const deleteOrganizationHandler = useCallback(async () => { - await deleteOrganization(CurrentOrg.org_handle)(firebase, dispatch); - history.push("/"); - }, [CurrentOrg.org_handle, dispatch, firebase, history]); + const deleteOrganizationHandler = useCallback(async () => { + await deleteOrganization(CurrentOrg.org_handle)(firebase, dispatch); + history.push("/"); + }, [CurrentOrg.org_handle, dispatch, firebase, history]); - return ( - - - Are you sure you want to delete {CurrentOrg?.org_name}? - + return ( + + + Are you sure you want to delete {CurrentOrg?.org_name}? + - - - This action cannot be undone. This will delete all - the data associated with this organization. - - - Please type {CurrentOrg?.org_handle} to confirm. - - setDeleteOrgInput(e.target.value)} - /> - - - - ); + + + This action cannot be undone. This will delete all + the data associated with this organization. + + + Please type {CurrentOrg?.org_handle} to confirm. + + setDeleteOrgInput(e.target.value)} + /> + + + + ); } export default OrgDeleteModal; diff --git a/src/components/Organization/OrgUsers/OrgUsers.jsx b/src/components/Organization/OrgUsers/OrgUsers.jsx index 76161518..5850eb1e 100644 --- a/src/components/Organization/OrgUsers/OrgUsers.jsx +++ b/src/components/Organization/OrgUsers/OrgUsers.jsx @@ -1,175 +1,176 @@ -import { - Avatar, - Button, - Grid, - Paper, - Typography, -} from "@mui/material"; +import { Avatar, Button, Grid, Paper, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import React from "react"; import AddIcon from "@mui/icons-material/Add"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -const useStyles = makeStyles((theme) => ({ - root: { - border: `1px solid ${theme.palette.divider}`, - borderRadius: "10px", - }, - gridPadding: { - padding: theme.spacing(2), - }, - button: { - boxShadow: "none", - borderRadius: "10px", - }, - heading: { - fontSize: theme.typography.pxToRem(17), - fontWeight: theme.typography.fontWeightMedium, - }, - body: { - fontSize: theme.typography.pxToRem(12), - }, - userCard: { - padding: theme.spacing(1), - "&:hover": { - backgroundColor: theme.palette.background.default, - }, - borderRadius: "10px", - }, - userList: { - marginTop: theme.spacing(2), - }, - userName: { - fontSize: theme.typography.pxToRem(14), - fontWeight: theme.typography.fontWeightMedium, - }, - userDesignation: { - fontSize: theme.typography.pxToRem(14), - paddingLeft: theme.spacing(0.5), - fontWeight: theme.typography.fontWeightLight, - }, - viewMore: { - borderTop: `1px solid ${theme.palette.divider}`, - padding: theme.spacing(1), - cursor: "pointer", - }, - buttonDiv: { - [theme.breakpoints.down("md")]: { - justifyContent: "flex-start", - paddingTop: theme.spacing(2), - }, - [theme.breakpoints.up("md")]: { - justifyContent: "flex-end", - }, - }, +const useStyles = makeStyles(theme => ({ + root: { + border: `1px solid ${theme.palette.divider}`, + borderRadius: "10px" + }, + gridPadding: { + padding: theme.spacing(2) + }, + button: { + boxShadow: "none", + borderRadius: "10px" + }, + heading: { + fontSize: theme.typography.pxToRem(17), + fontWeight: theme.typography.fontWeightMedium + }, + body: { + fontSize: theme.typography.pxToRem(12) + }, + userCard: { + padding: theme.spacing(1), + "&:hover": { + backgroundColor: theme.palette.background.default + }, + borderRadius: "10px" + }, + userList: { + marginTop: theme.spacing(2) + }, + userName: { + fontSize: theme.typography.pxToRem(14), + fontWeight: theme.typography.fontWeightMedium + }, + userDesignation: { + fontSize: theme.typography.pxToRem(14), + paddingLeft: theme.spacing(0.5), + fontWeight: theme.typography.fontWeightLight + }, + viewMore: { + borderTop: `1px solid ${theme.palette.divider}`, + padding: theme.spacing(1), + cursor: "pointer" + }, + buttonDiv: { + [theme.breakpoints.down("md")]: { + justifyContent: "flex-start", + paddingTop: theme.spacing(2) + }, + [theme.breakpoints.up("md")]: { + justifyContent: "flex-end" + } + } })); function Orgusers({ - Users, - title, - description, - AddUser, - isViewMore, - dataTestId, + Users, + title, + description, + AddUser, + isViewMore, + dataTestId }) { - const classes = useStyles(); - return ( - - - - - - - - {title} - - - - - {description} - - - - - - - - - {Users.map((user, index) => ( - - - - {user.avatar.type === "char" ? ( - {user.avatar.value} - ) : ( - - )} - - - - {user.name}, - - - {user.designation} - - - - - ))} - - - - - - View More - - - - - ); + const classes = useStyles(); + return ( + + + + + + + + {title} + + + + + {description} + + + + + + + + + {Users.map((user, index) => ( + + + + {user.avatar.type === "char" ? ( + {user.avatar.value} + ) : ( + + )} + + + + {user.name}, + + + {user.designation} + + + + + ))} + + + + + + View More + + + + + ); } export default Orgusers; diff --git a/src/components/Organization/OrgUsersCard/addOrgUserModal.jsx b/src/components/Organization/OrgUsersCard/addOrgUserModal.jsx index 34428f28..3a08fb46 100644 --- a/src/components/Organization/OrgUsersCard/addOrgUserModal.jsx +++ b/src/components/Organization/OrgUsersCard/addOrgUserModal.jsx @@ -10,165 +10,167 @@ import PersonIcon from "@mui/icons-material/Person"; import Autocomplete from "@mui/lab/Autocomplete"; import { addOrgUser, checkUserHandleExists } from "../../../store/actions"; import { - isEmpty, - isLoaded, - useFirebase, - useFirestore, + isEmpty, + isLoaded, + useFirebase, + useFirestore } from "react-redux-firebase"; import { useDispatch, useSelector } from "react-redux"; import _ from "lodash"; const AddOrgUserModal = ({ currentOrgHandle }) => { - const [users, setUsers] = useState([]); - const currentUser = useSelector( - ({ - firebase: { - profile: { handle }, - }, - }) => handle - ); - const currentOrgUsers = useSelector( - ({ - org: { - user: { data }, - }, - }) => data - ); + const [users, setUsers] = useState([]); + const currentUser = useSelector( + ({ + firebase: { + profile: { handle } + } + }) => handle + ); + const currentOrgUsers = useSelector( + ({ + org: { + user: { data } + } + }) => data + ); - const firebase = useFirebase(); + const firebase = useFirebase(); - useEffect(() => { - setUsers([]); - firebase.ref(`cl_user_handle/`).on("value", (snapshot) => { - snapshot.forEach((snap) => { - setUsers((prev) => [...prev, { title: snap.key, value: snap.key }]); - }); - }); - }, [firebase]); + useEffect(() => { + setUsers([]); + firebase.ref(`cl_user_handle/`).on("value", snapshot => { + snapshot.forEach(snap => { + setUsers(prev => [...prev, { title: snap.key, value: snap.key }]); + }); + }); + }, [firebase]); - const userProps = useSelector(({ org: { user } }) => user); - const [loading, setLoading] = useState(false); - const firestore = useFirestore(); - const dispatch = useDispatch(); - const [handle, setHandle] = useState(""); - const [handleValidateError, setHandleValidateError] = useState(false); - const [handleValidateErrorMessage, setHandleValidateErrorMessage] = - useState(""); - const [selected, setSelected] = useState("perm_0"); - const options = [ - { name: "Reviewer", icon: , value: "perm_0" }, - { name: "Editor", icon: , value: "perm_1" }, - { name: "Admin", icon: , value: "perm_2" }, - ]; + const userProps = useSelector(({ org: { user } }) => user); + const [loading, setLoading] = useState(false); + const firestore = useFirestore(); + const dispatch = useDispatch(); + const [handle, setHandle] = useState(""); + const [handleValidateError, setHandleValidateError] = useState(false); + const [handleValidateErrorMessage, setHandleValidateErrorMessage] = + useState(""); + const [selected, setSelected] = useState("perm_0"); + const options = [ + { name: "Reviewer", icon: , value: "perm_0" }, + { name: "Editor", icon: , value: "perm_1" }, + { name: "Admin", icon: , value: "perm_2" } + ]; - useEffect(() => { - if (!isLoaded(userProps) && isEmpty(userProps)) { - setLoading(true); - } - if (isLoaded(userProps) && !isEmpty(userProps)) { - setLoading(false); - } - if (isLoaded(userProps) && isEmpty(userProps)) { - setLoading(false); - } - }, [userProps]); + useEffect(() => { + if (!isLoaded(userProps) && isEmpty(userProps)) { + setLoading(true); + } + if (isLoaded(userProps) && !isEmpty(userProps)) { + setLoading(false); + } + if (isLoaded(userProps) && isEmpty(userProps)) { + setLoading(false); + } + }, [userProps]); - const onFinish = async () => { - const handleExists = await checkUserHandleExists(handle)( - firebase, - dispatch - ); + const onFinish = async () => { + const handleExists = await checkUserHandleExists(handle)( + firebase, + dispatch + ); - if (handle.length < 1) { - setHandleValidateError(true); - setHandleValidateErrorMessage(`Handle cannot be empty`); - return; - } - if (handleExists === false) { - setHandle(""); - setHandleValidateError(true); - setHandleValidateErrorMessage( - `The handle ${handle} is not a registered CodeLabz user` - ); - } else if (handle === currentUser) { - setHandle(""); - setHandleValidateError(true); - setHandleValidateErrorMessage(`You can't add yourself. Or can you? o.O`); - } else if ( - _.findIndex(currentOrgUsers, (user) => user.handle === handle) !== -1 - ) { - setHandle(""); - setHandleValidateError(true); - setHandleValidateErrorMessage( - `The user ${handle} is already in the organization ${currentOrgHandle}` - ); - } else { - await addOrgUser({ - org_handle: currentOrgHandle, - permissions: parseInt(selected.split("_")[1]), - handle: handle, - })(firestore, dispatch); - } - }; + if (handle.length < 1) { + setHandleValidateError(true); + setHandleValidateErrorMessage(`Handle cannot be empty`); + return; + } + if (handleExists === false) { + setHandle(""); + setHandleValidateError(true); + setHandleValidateErrorMessage( + `The handle ${handle} is not a registered CodeLabz user` + ); + } else if (handle === currentUser) { + setHandle(""); + setHandleValidateError(true); + setHandleValidateErrorMessage(`You can't add yourself. Or can you? o.O`); + } else if ( + _.findIndex(currentOrgUsers, user => user.handle === handle) !== -1 + ) { + setHandle(""); + setHandleValidateError(true); + setHandleValidateErrorMessage( + `The user ${handle} is already in the organization ${currentOrgHandle}` + ); + } else { + await addOrgUser({ + org_handle: currentOrgHandle, + permissions: parseInt(selected.split("_")[1]), + handle: handle + })(firestore, dispatch); + } + }; - const handlePermissionChange = (event) => { - setSelected(event.target.value); - }; + const handlePermissionChange = event => { + setSelected(event.target.value); + }; - return ( - - setHandle(e.target.innerHTML)} - helperText={handleValidateError ? handleValidateErrorMessage : null} - options={users} - getOptionLabel={(option) => option.title} - style={{ width: "100%" }} - renderInput={(params) => ( - - )} - /> - {console.log(users)} - -
- Select user role - -
- + return ( + + setHandle(e.target.innerHTML)} + helperText={handleValidateError ? handleValidateErrorMessage : null} + options={users} + getOptionLabel={option => option.title} + style={{ width: "100%" }} + renderInput={params => ( + + )} + /> + {console.log(users)} + +
+ Select user role + +
+ - - - ); + + + ); }; export default AddOrgUserModal; diff --git a/src/components/Organization/OrgUsersCard/orgUsersCard.jsx b/src/components/Organization/OrgUsersCard/orgUsersCard.jsx index 17eef5e5..fa24ffe1 100644 --- a/src/components/Organization/OrgUsersCard/orgUsersCard.jsx +++ b/src/components/Organization/OrgUsersCard/orgUsersCard.jsx @@ -35,10 +35,10 @@ import InputAdornment from "@mui/material/InputAdornment"; import { withStyles } from "@mui/styles"; import { useDispatch, useSelector } from "react-redux"; import { - addOrgUser, - getOrgUserData, - removeOrgUser, - searchFromIndex, + addOrgUser, + getOrgUserData, + removeOrgUser, + searchFromIndex } from "../../../store/actions"; import { useFirestore } from "react-redux-firebase"; import { Link } from "react-router-dom"; @@ -47,362 +47,375 @@ import AddOrgUserModal from "./addOrgUserModal"; import _ from "lodash"; const permissionLevelIcons = [ - , - , - , - , + , + , + , + ]; const permissionLevelTitles = ["Reviewer", "Editor", "Admin", "Owner"]; -const styles = (theme) => ({ - root: { - margin: 0, - padding: theme.spacing(2), - }, - closeButton: { - position: "absolute", - right: theme.spacing(1), - top: theme.spacing(1), - }, +const styles = theme => ({ + root: { + margin: 0, + padding: theme.spacing(2) + }, + closeButton: { + position: "absolute", + right: theme.spacing(1), + top: theme.spacing(1) + } }); -const DialogTitle = withStyles(styles)((props) => { - const { children, classes, onClose, ...other } = props; - return ( - - {children} - {onClose ? ( - - - - ) : null} - - ); +const DialogTitle = withStyles(styles)(props => { + const { children, classes, onClose, ...other } = props; + return ( + + {children} + {onClose ? ( + + + + ) : null} + + ); }); function Alert(props) { - return ; + return ; } const OrgUsersCard = () => { - const data = useSelector( - ({ - org: { - user: { data }, - }, - }) => data - ); - const currentUserHandle = useSelector( - ({ - firebase: { - profile: { handle }, - }, - }) => handle - ); - const currentUserPermission = useSelector( - ({ - org: { - general: { permissions }, - }, - }) => permissions - ); - const currentOrgHandle = useSelector( - ({ - org: { - general: { current }, - }, - }) => current - ); + const data = useSelector( + ({ + org: { + user: { data } + } + }) => data + ); + const currentUserHandle = useSelector( + ({ + firebase: { + profile: { handle } + } + }) => handle + ); + const currentUserPermission = useSelector( + ({ + org: { + general: { permissions } + } + }) => permissions + ); + const currentOrgHandle = useSelector( + ({ + org: { + general: { current } + } + }) => current + ); - const firestore = useFirestore(); - const dispatch = useDispatch(); - let userIsAdmin = [2, 3].some((e) => currentUserPermission.includes(e)); - const [anchorEl, setAnchorEl] = React.useState(null); - const [loading, setLoading] = useState(null); - const [error, setError] = useState(null); - const [dataSource, setDataSource] = useState([]); - const [opensnack, setOpenSnack] = React.useState(false); - const [open, setOpen] = React.useState(false); + const firestore = useFirestore(); + const dispatch = useDispatch(); + let userIsAdmin = [2, 3].some(e => currentUserPermission.includes(e)); + const [anchorEl, setAnchorEl] = React.useState(null); + const [loading, setLoading] = useState(null); + const [error, setError] = useState(null); + const [dataSource, setDataSource] = useState([]); + const [opensnack, setOpenSnack] = React.useState(false); + const [open, setOpen] = React.useState(false); - const handleClickOpen = () => { - setOpen(true); - }; + const handleClickOpen = () => { + setOpen(true); + }; - const handleCloseDialog = () => { - setOpen(false); - }; - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - const snackhandleClose = (event, reason) => { - if (reason === "clickaway") { - return; - } + const handleCloseDialog = () => { + setOpen(false); + }; + const handleClick = event => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + const snackhandleClose = (event, reason) => { + if (reason === "clickaway") { + return; + } - setOpenSnack(false); - }; + setOpenSnack(false); + }; - const userProps = useSelector(({ org: { user } }) => user); - const errorProps = useSelector( - ({ - org: { - user: { error }, - }, - }) => error - ); + const userProps = useSelector(({ org: { user } }) => user); + const errorProps = useSelector( + ({ + org: { + user: { error } + } + }) => error + ); - useEffect(() => { - getOrgUserData(currentOrgHandle)(firestore, dispatch); - }, [currentOrgHandle, firestore, dispatch]); + useEffect(() => { + getOrgUserData(currentOrgHandle)(firestore, dispatch); + }, [currentOrgHandle, firestore, dispatch]); - useEffect(() => { - setError(errorProps); - }, [errorProps]); + useEffect(() => { + setError(errorProps); + }, [errorProps]); - useEffect(() => { - if (!isLoaded(userProps) && isEmpty(userProps)) { - setLoading(true); - } - if (isLoaded(userProps) && !isEmpty(userProps)) { - setLoading(false); - } - if (isLoaded(userProps) && isEmpty(userProps)) { - setLoading(false); - } - }, [userProps]); + useEffect(() => { + if (!isLoaded(userProps) && isEmpty(userProps)) { + setLoading(true); + } + if (isLoaded(userProps) && !isEmpty(userProps)) { + setLoading(false); + } + if (isLoaded(userProps) && isEmpty(userProps)) { + setLoading(false); + } + }, [userProps]); - useEffect(() => { - if (isLoaded(userProps) && !isEmpty(userProps) && error === false) { - setOpenSnack(true); - setOpen(false); - } - }, [userProps, error]); + useEffect(() => { + if (isLoaded(userProps) && !isEmpty(userProps) && error === false) { + setOpenSnack(true); + setOpen(false); + } + }, [userProps, error]); - useEffect(() => { - setDataSource(data); - }, [data]); + useEffect(() => { + setDataSource(data); + }, [data]); - const options = [ - { name: "Reviewer", icon: , value: "perm_0" }, - { name: "Editor", icon: , value: "perm_1" }, - { name: "Admin", icon: , value: "perm_2" }, - { name: "Delete", icon: , value: "remove_user" }, - ]; + const options = [ + { name: "Reviewer", icon: , value: "perm_0" }, + { name: "Editor", icon: , value: "perm_1" }, + { name: "Admin", icon: , value: "perm_2" }, + { name: "Delete", icon: , value: "remove_user" } + ]; - const handlePermissionChange = (key, permission_level, handle) => { - console.log(handle); - if (key === "remove_user") { - removeOrgUser({ - org_handle: currentOrgHandle, - handle, - })(firestore, dispatch); - } else if (parseInt(key.split("_")[1]) !== permission_level[0]) { - addOrgUser({ - org_handle: currentOrgHandle, - handle, - permissions: parseInt(key.split("_")[1]), - })(firestore, dispatch); - } - setAnchorEl(null); - }; + const handlePermissionChange = (key, permission_level, handle) => { + console.log(handle); + if (key === "remove_user") { + removeOrgUser({ + org_handle: currentOrgHandle, + handle + })(firestore, dispatch); + } else if (parseInt(key.split("_")[1]) !== permission_level[0]) { + addOrgUser({ + org_handle: currentOrgHandle, + handle, + permissions: parseInt(key.split("_")[1]) + })(firestore, dispatch); + } + setAnchorEl(null); + }; - const handleOnSearch = ({ target: { value } }) => { - if (value === "") { - return setDataSource(data); - } - const result = searchFromIndex(value); - if (result.length === 0) { - return setDataSource([]); - } - if (result.length > 0) { - let tempArray = []; - result.forEach((item) => { - tempArray = [ - ...tempArray, - ..._.filter(data, (ref) => ref.handle === item.ref), - ]; - }); - return setDataSource(tempArray); - } - }; + const handleOnSearch = ({ target: { value } }) => { + if (value === "") { + return setDataSource(data); + } + const result = searchFromIndex(value); + if (result.length === 0) { + return setDataSource([]); + } + if (result.length > 0) { + let tempArray = []; + result.forEach(item => { + tempArray = [ + ...tempArray, + ..._.filter(data, ref => ref.handle === item.ref) + ]; + }); + return setDataSource(tempArray); + } + }; - return ( - <> - - currentUserPermission.includes(e)) && ( -
- + return ( + <> + + currentUserPermission.includes(e)) && ( +
+ - - - {`Add new user to ${currentOrgHandle}`} - + + + {`Add new user to ${currentOrgHandle}`} + - - - - -
- ) - } - />{" "} - - - - - Search users by name or handle - - - - - } - /> - - }> - {dataSource.map((item, i) => { - return ( -
- {" "} - - - - - {item.name} - } - secondary={`@${item.handle}`} - /> - {/* //owner can't change their permissions but can change anyone else's + + + + +
+ ) + } + />{" "} + + + + + Search users by name or handle + + + + + } + /> + + } + > + {dataSource.map((item, i) => { + return ( +
+ {" "} + + + + + {item.name} + } + secondary={`@${item.handle}`} + /> + {/* //owner can't change their permissions but can change anyone else's //admin can't change owner's and their own permissions but can change others' except owners //others can't change anyone's permissions */} - {item.permission_level[0] === 3 ? ( - - ) : item.handle === currentUserHandle ? ( - - ) : userIsAdmin ? ( - <> - {loading ? ( - - ) : ( - - )} + {item.permission_level[0] === 3 ? ( + + ) : item.handle === currentUserHandle ? ( + + ) : userIsAdmin ? ( + <> + {loading ? ( + + ) : ( + + )} - - {options.map((option, index) => ( -
- - handlePermissionChange( - option.value, - item.permission_level[0], - item.handle - ) - }> -
- {option.icon} -
- {option.name} -
-
- - {index === 2 ? : null} -
- ))} - - - ) : ( - - )} - -
- ); - })}{" "} - - - - - - - Changes Saved! - - - - ); + + {options.map((option, index) => ( +
+ + handlePermissionChange( + option.value, + item.permission_level[0], + item.handle + ) + } + > +
+ {option.icon} +
+ {option.name} +
+
+ + {index === 2 ? : null} +
+ ))} + + + ) : ( + + )} + +
+ ); + })}{" "} + + + + + + + Changes Saved! + + + + ); }; export default OrgUsersCard; diff --git a/src/components/Organization/OrganizationSocials/index.jsx b/src/components/Organization/OrganizationSocials/index.jsx index 61091c8a..73348027 100644 --- a/src/components/Organization/OrganizationSocials/index.jsx +++ b/src/components/Organization/OrganizationSocials/index.jsx @@ -10,60 +10,64 @@ import FacebookIcon from "@mui/icons-material/Facebook"; import useStyles from "./styles"; const OrganizationSocials = () => { - const classes = useStyles(); + const classes = useStyles(); - return ( - - - - - - Facebook - - - Organization Facebook Page - - - - - Github - - - Organization Github profile - - - - - - google - - Organization Google profile - - - - - Twitter - - - Organization Twitter account - - - - - - ); + return ( + + + + + + Facebook + + + Organization Facebook Page + + + + + Github + + + Organization Github profile + + + + + + google + + Organization Google profile + + + + + Twitter + + + Organization Twitter account + + + + + + ); }; export default OrganizationSocials; diff --git a/src/components/Organization/OrganizationSocials/styles.jsx b/src/components/Organization/OrganizationSocials/styles.jsx index 8d3265e4..f38ab5c0 100644 --- a/src/components/Organization/OrganizationSocials/styles.jsx +++ b/src/components/Organization/OrganizationSocials/styles.jsx @@ -1,91 +1,91 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - width: "50%", - borderRadius: 15, - boxShadow: "none", - border: "1px solid rgba(0, 0, 0, 0.1)", - "@media (max-width: 1200px)": { - width: "80%", - }, - "@media (max-width: 800px)": { - width: "100%", - }, - }, - content: { - padding: "15px 10px", - paddingBottom: "15px !important", - "@media (max-width: 600px)": { - padding: "15px 5px", - }, - }, - row: { - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, - link: { - display: "flex", - justifyContent: "center", - alignItems: "center", - backgroundColor: "#E8E8E8", - width: 285, - borderRadius: 7, - boxShadow: "none", - "@media (max-width: 600px)": { - width: 180, - }, - }, - button: { - height: 26, - "&:hover": { - transform: "scale(1.2)", - }, - marginLeft: -7, - marginRight: 8, - "@media (max-width: 600px)": { - marginLeft: -3, - marginRight: 5, - height: 16, - }, - }, - fb: { - fontSize: 31, - color: "#1877F2", - marginRight: 5, - "@media (max-width: 600px)": { - marginRight: 2, - fontSize: 22, - }, - }, - tw: { - color: "#03A9F4", - fontSize: 30, - marginLeft: 14, - marginRight: 5, - "@media (max-width: 600px)": { - marginLeft: 5, - marginRight: 3, - fontSize: 21, - }, - }, - git: { - fontSize: 26, - marginLeft: 0, - marginRight: 8, - "@media (max-width: 600px)": { - marginRight: 3, - fontSize: 18, - }, - }, - text: { - fontFamily: "Poppins", - color: "#000000B6", - "@media (max-width: 600px)": { - fontSize: 10, - }, - }, +const useStyles = makeStyles(theme => ({ + root: { + width: "50%", + borderRadius: 15, + boxShadow: "none", + border: "1px solid rgba(0, 0, 0, 0.1)", + "@media (max-width: 1200px)": { + width: "80%" + }, + "@media (max-width: 800px)": { + width: "100%" + } + }, + content: { + padding: "15px 10px", + paddingBottom: "15px !important", + "@media (max-width: 600px)": { + padding: "15px 5px" + } + }, + row: { + display: "flex", + justifyContent: "space-between", + alignItems: "center" + }, + link: { + display: "flex", + justifyContent: "center", + alignItems: "center", + backgroundColor: "#E8E8E8", + width: 285, + borderRadius: 7, + boxShadow: "none", + "@media (max-width: 600px)": { + width: 180 + } + }, + button: { + height: 26, + "&:hover": { + transform: "scale(1.2)" + }, + marginLeft: -7, + marginRight: 8, + "@media (max-width: 600px)": { + marginLeft: -3, + marginRight: 5, + height: 16 + } + }, + fb: { + fontSize: 31, + color: "#1877F2", + marginRight: 5, + "@media (max-width: 600px)": { + marginRight: 2, + fontSize: 22 + } + }, + tw: { + color: "#03A9F4", + fontSize: 30, + marginLeft: 14, + marginRight: 5, + "@media (max-width: 600px)": { + marginLeft: 5, + marginRight: 3, + fontSize: 21 + } + }, + git: { + fontSize: 26, + marginLeft: 0, + marginRight: 8, + "@media (max-width: 600px)": { + marginRight: 3, + fontSize: 18 + } + }, + text: { + fontFamily: "Poppins", + color: "#000000B6", + "@media (max-width: 600px)": { + fontSize: 10 + } + } })); export default useStyles; diff --git a/src/components/Organization/Orgsocial/index.jsx b/src/components/Organization/Orgsocial/index.jsx index 86056bb6..1f9e1d48 100644 --- a/src/components/Organization/Orgsocial/index.jsx +++ b/src/components/Organization/Orgsocial/index.jsx @@ -13,105 +13,109 @@ import { useDispatch, useSelector } from "react-redux"; import { useFirebase } from "react-redux-firebase"; import { Grid } from "@mui/material"; -const Orgsocial = (props) => { - console.log(props.toOpen); - const classes = useStyles(); +const Orgsocial = props => { + console.log(props.toOpen); + const classes = useStyles(); - const CurrentOrg = useSelector( - ({ - profile: { - data: { organizations }, - }, - org: { - general: { current }, - }, - }) => organizations.find((element) => element.org_handle === current) - ); + const CurrentOrg = useSelector( + ({ + profile: { + data: { organizations } + }, + org: { + general: { current } + } + }) => organizations.find(element => element.org_handle === current) + ); - const [OrgData, setOrgData] = useState(CurrentOrg); + const [OrgData, setOrgData] = useState(CurrentOrg); - const dispatch = useDispatch(); - const firebase = useFirebase(); + const dispatch = useDispatch(); + const firebase = useFirebase(); - const openSocialMedialLink = (url) => { - if (url) { - window.open(url, "_blank", "noopener,noreferrer"); - } - }; + const openSocialMedialLink = url => { + if (url) { + window.open(url, "_blank", "noopener,noreferrer"); + } + }; - return ( - - - - signInWithProviderID("facebook")(firebase, dispatch)} - onClick={() => - props.toOpen - ? openSocialMedialLink(OrgData.org_link_facebook) - : console.log("clicked") - } - data-testId="facebookButton"> - - Facebook - - - Organization's Facebook Page - - + return ( + + + + signInWithProviderID("facebook")(firebase, dispatch)} + onClick={() => + props.toOpen + ? openSocialMedialLink(OrgData.org_link_facebook) + : console.log("clicked") + } + data-testId="facebookButton" + > + + Facebook + + + Organization's Facebook Page + + - signInWithProviderID("github")(firebase, dispatch)} - onClick={() => - props.toOpen - ? openSocialMedialLink(OrgData.org_link_github) - : console.log("clicked") - } - data-testId="githubButton"> - - Github - - - Organization's Github Account - - - - - signInWithGoogle()(firebase, dispatch)} - onClick={() => - props.toOpen - ? openSocialMedialLink(OrgData.org_link_linkedin) - : console.log("clicked") - } - data-testId="googleButton"> - google - - Organization's Google Account - - - signInWithProviderID("twitter")(firebase, dispatch)} - onClick={() => - props.toOpen - ? openSocialMedialLink(OrgData.org_link_twitter) - : console.log("clicked") - } - data-testId="twitterButton"> - - Twitter - - - Organization's Twitter Account - - - - - - ); + signInWithProviderID("github")(firebase, dispatch)} + onClick={() => + props.toOpen + ? openSocialMedialLink(OrgData.org_link_github) + : console.log("clicked") + } + data-testId="githubButton" + > + + Github + + + Organization's Github Account + + + + + signInWithGoogle()(firebase, dispatch)} + onClick={() => + props.toOpen + ? openSocialMedialLink(OrgData.org_link_linkedin) + : console.log("clicked") + } + data-testId="googleButton" + > + google + + Organization's Google Account + + + signInWithProviderID("twitter")(firebase, dispatch)} + onClick={() => + props.toOpen + ? openSocialMedialLink(OrgData.org_link_twitter) + : console.log("clicked") + } + data-testId="twitterButton" + > + + Twitter + + + Organization's Twitter Account + + + + + + ); }; export default Orgsocial; diff --git a/src/components/Organization/Orgsocial/styles.jsx b/src/components/Organization/Orgsocial/styles.jsx index 0fa59ec6..71121118 100644 --- a/src/components/Organization/Orgsocial/styles.jsx +++ b/src/components/Organization/Orgsocial/styles.jsx @@ -1,108 +1,108 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - width: "auto", - borderRadius: 15, - boxShadow: "none", - border: "1px solid #e8e8e8", - padding: "10px 20px", - "@media (max-width: 960px)": { - width: "100%", - padding: 0, - }, - }, - input: { - padding: 10, - border: "1px solid #ccc", - borderRadius: "10px", - marginTop: "10px", - width: "50%", - }, - content: { - paddingBottom: "15px !important", - paddingTop: 15, - "@media (max-width: 100px)": { - padding: "15px 5px", - }, - }, - row: { - display: "flex", - alignItems: "center", - justifyContent: "center", - marginBottom: 15, - "@media (max-width: 500px)": { - flexDirection: "column", - justifyContent: "center", - margin: 0, - }, - }, - link: { - display: "flex", - border: "1px solid #ccc", - borderRadius: "10px", - padding: 5, - justifyContent: "center", - alignItems: "center", - width: "auto", - "&:hover": { - cursor: "pointer", - }, - marginRight: 19, - backgroundColor: "#D3D3D3", - "@media (max-width: 500px)": { - margin: "none", - marginBottom: 15, - }, - }, - button: { - height: 26, - "&:hover": { - transform: "scale(1.2)", - }, - marginLeft: 2, - marginRight: 23, - "@media (max-width: 500px)": { - marginLeft: 2, - marginRight: 10, - height: 20, - }, - }, - fb: { - fontSize: 30, - color: "#1877F2", - marginRight: 19, - "@media (max-width: 500px)": { - marginRight: 7, - fontSize: 24, - }, - }, - tw: { - color: "#03A9F4", - fontSize: 30, - marginLeft: -3, - marginRight: 18, - "@media (max-width: 500px)": { - marginRight: 6, - fontSize: 23, - }, - }, - git: { - fontSize: 30, - marginRight: 19, - "@media (max-width: 500px)": { - marginRight: 7, - fontSize: 19, - }, - }, - text: { - fontFamily: "Poppins", - color: "#000", - "@media (max-width: 500px)": { - fontSize: "4vmin", - marginRight: 19, - }, - }, +const useStyles = makeStyles(theme => ({ + root: { + width: "auto", + borderRadius: 15, + boxShadow: "none", + border: "1px solid #e8e8e8", + padding: "10px 20px", + "@media (max-width: 960px)": { + width: "100%", + padding: 0 + } + }, + input: { + padding: 10, + border: "1px solid #ccc", + borderRadius: "10px", + marginTop: "10px", + width: "50%" + }, + content: { + paddingBottom: "15px !important", + paddingTop: 15, + "@media (max-width: 100px)": { + padding: "15px 5px" + } + }, + row: { + display: "flex", + alignItems: "center", + justifyContent: "center", + marginBottom: 15, + "@media (max-width: 500px)": { + flexDirection: "column", + justifyContent: "center", + margin: 0 + } + }, + link: { + display: "flex", + border: "1px solid #ccc", + borderRadius: "10px", + padding: 5, + justifyContent: "center", + alignItems: "center", + width: "auto", + "&:hover": { + cursor: "pointer" + }, + marginRight: 19, + backgroundColor: "#D3D3D3", + "@media (max-width: 500px)": { + margin: "none", + marginBottom: 15 + } + }, + button: { + height: 26, + "&:hover": { + transform: "scale(1.2)" + }, + marginLeft: 2, + marginRight: 23, + "@media (max-width: 500px)": { + marginLeft: 2, + marginRight: 10, + height: 20 + } + }, + fb: { + fontSize: 30, + color: "#1877F2", + marginRight: 19, + "@media (max-width: 500px)": { + marginRight: 7, + fontSize: 24 + } + }, + tw: { + color: "#03A9F4", + fontSize: 30, + marginLeft: -3, + marginRight: 18, + "@media (max-width: 500px)": { + marginRight: 6, + fontSize: 23 + } + }, + git: { + fontSize: 30, + marginRight: 19, + "@media (max-width: 500px)": { + marginRight: 7, + fontSize: 19 + } + }, + text: { + fontFamily: "Poppins", + color: "#000", + "@media (max-width: 500px)": { + fontSize: "4vmin", + marginRight: 19 + } + } })); export default useStyles; diff --git a/src/components/Organization/ViewOrganization/About.jsx b/src/components/Organization/ViewOrganization/About.jsx index f0645f71..87a8dd78 100644 --- a/src/components/Organization/ViewOrganization/About.jsx +++ b/src/components/Organization/ViewOrganization/About.jsx @@ -5,167 +5,168 @@ import Orgusers from "../OrgUsers/OrgUsers"; import Orgsocial from "../Orgsocial/index"; import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - heading: { - fontWeight: 600, - }, - description: { - width: "100%", - marginTop: 10, - }, +const useStyles = makeStyles(theme => ({ + heading: { + fontWeight: 600 + }, + description: { + width: "100%", + marginTop: 10 + } })); const AdminUsers = [ - { - name: "Shahaab Manzar", - designation: "GSoC 22'", - avatar: { - type: "char", - value: "A", - }, - }, - { - name: "Sarfraz Alam", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, + { + name: "Shahaab Manzar", + designation: "GSoC 22'", + avatar: { + type: "char", + value: "A" + } + }, + { + name: "Sarfraz Alam", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + } ]; const ContributersUsers = [ - { - name: "Sarfraz Alam", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - { - name: "Jhanvi Thakkar", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - { - name: "Saksham Sharma", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, + { + name: "Sarfraz Alam", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Jhanvi Thakkar", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + } ]; const SubscribeUsers = [ - { - name: "Sarfraz Alam", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - { - name: "Jhanvi Thakkar", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - { - name: "Saksham Sharma", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - { - name: "Ayush Bansal", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, + { + name: "Sarfraz Alam", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Jhanvi Thakkar", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Ayush Bansal", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + } ]; function About() { - const classes = useStyles(); + const classes = useStyles(); - return ( - -
- - - - - - - - Description - - - - - - - - - Organization users - - - - - - - - - - - - - - Follow us on Social Media - - - - - - -
- - ); + return ( + +
+ + + + + + + + Description + + + + + + + + + Organization users + + + + + + + + + + + + + + Follow us on Social Media + + + + + + +
+ + ); } export default About; diff --git a/src/components/Organization/ViewOrganization/Feeds.jsx b/src/components/Organization/ViewOrganization/Feeds.jsx index bcbd3687..8d6dcbb7 100644 --- a/src/components/Organization/ViewOrganization/Feeds.jsx +++ b/src/components/Organization/ViewOrganization/Feeds.jsx @@ -9,65 +9,65 @@ import StarBorderIcon from "@mui/icons-material/StarBorder"; import EmojiEventsIcon from "@mui/icons-material/EmojiEvents"; import CardWithoutPicture from "../../Card/CardWithoutPicture"; -const useStyles = makeStyles((theme) => ({ - postCard: { - width: "100%", - }, +const useStyles = makeStyles(theme => ({ + postCard: { + width: "100%" + } })); function Feeds() { - const [List, setList] = useState(1); + const [List, setList] = useState(1); - const classes = useStyles(); + const classes = useStyles(); - const acitvitylist = [ - { - id: 1, - icon: LocalOfferIcon, - text: "Featured", - }, - { - id: 2, - icon: StarBorderIcon, - text: "New", - }, - { - id: 3, - icon: EmojiEventsIcon, - text: "Top", - }, - ]; - return ( - <> - - - { - setList(item.id); - }} - acitvitylist={acitvitylist} - /> - - - {userList.persons.map((person) => ( - - - - ))} - - - ); + const acitvitylist = [ + { + id: 1, + icon: LocalOfferIcon, + text: "Featured" + }, + { + id: 2, + icon: StarBorderIcon, + text: "New" + }, + { + id: 3, + icon: EmojiEventsIcon, + text: "Top" + } + ]; + return ( + <> + + + { + setList(item.id); + }} + acitvitylist={acitvitylist} + /> + + + {userList.persons.map(person => ( + + + + ))} + + + ); } export default Feeds; diff --git a/src/components/Organization/ViewOrganization/_old_index.jsx b/src/components/Organization/ViewOrganization/_old_index.jsx index 9b448cfe..d4000b7c 100644 --- a/src/components/Organization/ViewOrganization/_old_index.jsx +++ b/src/components/Organization/ViewOrganization/_old_index.jsx @@ -17,354 +17,370 @@ import { useDispatch, useSelector } from "react-redux"; import { useFirebase, useFirestore } from "react-redux-firebase"; import { useParams } from "react-router-dom"; import { - clearOrgData, - getOrgData, - addFollower, - removeFollower, + clearOrgData, + getOrgData, + addFollower, + removeFollower } from "../../../store/actions"; const ViewOrganization = () => { - const { handle } = useParams(); - const [people, setPeople] = useState([]); - const [orgFollowed, setOrgFollowed] = useState([]); - const firebase = useFirebase(); - const dispatch = useDispatch(); - const firestore = useFirestore(); - const db = firebase.firestore(); - const profileData = useSelector(({ firebase: { profile } }) => profile); + const { handle } = useParams(); + const [people, setPeople] = useState([]); + const [orgFollowed, setOrgFollowed] = useState([]); + const firebase = useFirebase(); + const dispatch = useDispatch(); + const firestore = useFirestore(); + const db = firebase.firestore(); + const profileData = useSelector(({ firebase: { profile } }) => profile); - const [imageLoading, setImageLoading] = useState(true); + const [imageLoading, setImageLoading] = useState(true); - useEffect(() => { - const unsubscribe = db - .collection("cl_org_general") - .doc(handle) - .onSnapshot((snap) => { - const data = snap.data(); - setPeople(data.followers); - }); + useEffect(() => { + const unsubscribe = db + .collection("cl_org_general") + .doc(handle) + .onSnapshot(snap => { + const data = snap.data(); + setPeople(data.followers); + }); - return () => unsubscribe(); - }, [db, handle]); + return () => unsubscribe(); + }, [db, handle]); - useEffect(() => { - const unsubscribe = db - .collection("cl_user") - .doc(profileData.uid) - .onSnapshot((snap) => { - const data = snap.data(); - setOrgFollowed(data.orgFollowed); - }); + useEffect(() => { + const unsubscribe = db + .collection("cl_user") + .doc(profileData.uid) + .onSnapshot(snap => { + const data = snap.data(); + setOrgFollowed(data.orgFollowed); + }); - return () => unsubscribe(); - }, [db, profileData.uid]); + return () => unsubscribe(); + }, [db, profileData.uid]); - const addfollower = (e, people, handle, orgFollowed) => { - e.preventDefault(); - addFollower( - profileData.handle, - people, - handle, - orgFollowed, - profileData.uid - )(firestore, dispatch); - }; - const removefollower = (e, val, people, handle, orgFollowed) => { - e.preventDefault(); - removeFollower( - val, - people, - handle, - orgFollowed, - profileData.uid - )(firestore, dispatch); - }; + const addfollower = (e, people, handle, orgFollowed) => { + e.preventDefault(); + addFollower( + profileData.handle, + people, + handle, + orgFollowed, + profileData.uid + )(firestore, dispatch); + }; + const removefollower = (e, val, people, handle, orgFollowed) => { + e.preventDefault(); + removeFollower( + val, + people, + handle, + orgFollowed, + profileData.uid + )(firestore, dispatch); + }; - const loading = useSelector( - ({ - org: { - data: { loading }, - }, - }) => loading - ); + const loading = useSelector( + ({ + org: { + data: { loading } + } + }) => loading + ); - const currentOrgData = useSelector( - ({ - org: { - data: { data }, - }, - }) => data - ); + const currentOrgData = useSelector( + ({ + org: { + data: { data } + } + }) => data + ); - const organizations = useSelector( - ({ - firebase: { - profile: { organizations }, - }, - }) => organizations - ); + const organizations = useSelector( + ({ + firebase: { + profile: { organizations } + } + }) => organizations + ); - // eslint-disable-next-line react-hooks/exhaustive-deps - useEffect(() => { - getOrgData(handle, organizations)(firebase, firestore, dispatch); - setImageLoading(true); - return () => { - clearOrgData()(dispatch); - }; - }, [handle, firebase, firestore, dispatch, organizations]); + // eslint-disable-next-line react-hooks/exhaustive-deps + useEffect(() => { + getOrgData(handle, organizations)(firebase, firestore, dispatch); + setImageLoading(true); + return () => { + clearOrgData()(dispatch); + }; + }, [handle, firebase, firestore, dispatch, organizations]); - const checkAvailable = (data) => { - return !!(data && data.length > 0); - }; + const checkAvailable = data => { + return !!(data && data.length > 0); + }; - return ( -
- {loading || !currentOrgData ? ( - Loading.. - ) : ( - - {currentOrgData && ( -
- - - - Organization Details - - - - - - - - {currentOrgData.org_image ? ( - <> - {currentOrgData.org_name} { - setImageLoading(false); - }} - /> - - ) : ( - {"Not - )} - + return ( +
+ {loading || !currentOrgData ? ( + Loading.. + ) : ( + + {currentOrgData && ( +
+ + + + Organization Details + + + + + + + + {currentOrgData.org_image ? ( + <> + {currentOrgData.org_name} { + setImageLoading(false); + }} + /> + + ) : ( + {"Not + )} + - -

- - {currentOrgData.org_name} - -

- {checkAvailable(currentOrgData.org_description) && ( -

- {currentOrgData.org_description} -

- )} - {checkAvailable(currentOrgData.org_link_facebook) && ( -

- -

- -

- )} - {checkAvailable(currentOrgData.org_link_twitter) && ( -

- -

- -

- )} - {checkAvailable(currentOrgData.org_link_github) && ( -

- -

- -

- )} - {checkAvailable(currentOrgData.org_link_linkedin) && ( -

- -

- -

- )} - {checkAvailable(currentOrgData.org_website) && ( -

- -

- -

- )} - {checkAvailable(currentOrgData.org_country) && ( -

- -

-
- {!people ? ( - - ) : !people.includes(profileData.handle) ? ( - - ) : ( - - )} -
- -

- )} - - - -
- )} - {currentOrgData === false && - "No organization with the provided handle"} - - )} -
- ); + +

+ + {currentOrgData.org_name} + +

+ {checkAvailable(currentOrgData.org_description) && ( +

+ {currentOrgData.org_description} +

+ )} + {checkAvailable(currentOrgData.org_link_facebook) && ( +

+ +

+ +

+ )} + {checkAvailable(currentOrgData.org_link_twitter) && ( +

+ +

+ +

+ )} + {checkAvailable(currentOrgData.org_link_github) && ( +

+ +

+ +

+ )} + {checkAvailable(currentOrgData.org_link_linkedin) && ( +

+ +

+ +

+ )} + {checkAvailable(currentOrgData.org_website) && ( +

+ +

+ +

+ )} + {checkAvailable(currentOrgData.org_country) && ( +

+ +

+
+ {!people ? ( + + ) : !people.includes(profileData.handle) ? ( + + ) : ( + + )} +
+ +

+ )} + + + +
+ )} + {currentOrgData === false && + "No organization with the provided handle"} + + )} +
+ ); }; export default ViewOrganization; diff --git a/src/components/Organization/index_old.jsx b/src/components/Organization/index_old.jsx index 92d621c9..8846a305 100644 --- a/src/components/Organization/index_old.jsx +++ b/src/components/Organization/index_old.jsx @@ -9,65 +9,68 @@ import Grid from "@mui/material/Grid"; import useStyles from "./styles"; const Organizations = () => { - window.scrollTo(0, 0); - const [drawerVisible, setDrawerVisible] = useState(false); - const classes = useStyles(); - const isDesktop = useMediaQuery({ - query: "(min-device-width: 767px)", - }); + window.scrollTo(0, 0); + const [drawerVisible, setDrawerVisible] = useState(false); + const classes = useStyles(); + const isDesktop = useMediaQuery({ + query: "(min-device-width: 767px)" + }); - return ( - - {isDesktop && ( -
- {}} /> -
- )} - {!isDesktop && ( - setDrawerVisible(false)}> - - - { - setDrawerVisible(false); - }} - /> - - - - )} + return ( + + {isDesktop && ( +
+ {}} /> +
+ )} + {!isDesktop && ( + setDrawerVisible(false)} + > + + + { + setDrawerVisible(false); + }} + /> + + + + )} - - {!isDesktop && ( - - - - - - )} - - - - - - - - - - - ); + + {!isDesktop && ( + + + + + + )} + + + + + + + + + + + ); }; export default Organizations; diff --git a/src/components/Organization/pages/Passwords.jsx b/src/components/Organization/pages/Passwords.jsx index 0918e422..6884281c 100644 --- a/src/components/Organization/pages/Passwords.jsx +++ b/src/components/Organization/pages/Passwords.jsx @@ -2,91 +2,92 @@ import React from "react"; import { Grid, Typography, InputBase, Button } from "@mui/material"; import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - border: `1px solid ${theme.palette.divider}`, - borderRadius: "10px", - marginTop: "15px", - display: "flex", - alignContent: "stretch", - justifyContent: "space-evenly", - width: "98%", - marginBottom: "20px", - [theme.breakpoints.between("xs", "sm")]: { - marginLeft: "10px", - }, - }, - input: { - padding: 10, - border: "1px solid #ccc", - borderRadius: "10px", - marginTop: "10px", - width: "50%", - "&:hover": { backgroundColor: "#F5F5F5" }, - [theme.breakpoints.between("xs", "sm")]: { - width: "100%", - }, - [theme.breakpoints.between("sm", "md")]: { - width: "70%", - }, - [theme.breakpoints.between("md", "lg")]: { - width: "35%", - }, - }, - button: { - border: "1px solid #ccc", - borderRadius: "10px", - padding: "10px", - }, - heading: { - fontSize: "1.5rem", - fontWeight: 100, - [theme.breakpoints.between("xs", "sm")]: { - textAlign: "center", - }, - }, - inputContainer: { - [theme.breakpoints.between("xs", "sm")]: { - textAlign: "center", - }, - }, +const useStyles = makeStyles(theme => ({ + root: { + border: `1px solid ${theme.palette.divider}`, + borderRadius: "10px", + marginTop: "15px", + display: "flex", + alignContent: "stretch", + justifyContent: "space-evenly", + width: "98%", + marginBottom: "20px", + [theme.breakpoints.between("xs", "sm")]: { + marginLeft: "10px" + } + }, + input: { + padding: 10, + border: "1px solid #ccc", + borderRadius: "10px", + marginTop: "10px", + width: "50%", + "&:hover": { backgroundColor: "#F5F5F5" }, + [theme.breakpoints.between("xs", "sm")]: { + width: "100%" + }, + [theme.breakpoints.between("sm", "md")]: { + width: "70%" + }, + [theme.breakpoints.between("md", "lg")]: { + width: "35%" + } + }, + button: { + border: "1px solid #ccc", + borderRadius: "10px", + padding: "10px" + }, + heading: { + fontSize: "1.5rem", + fontWeight: 100, + [theme.breakpoints.between("xs", "sm")]: { + textAlign: "center" + } + }, + inputContainer: { + [theme.breakpoints.between("xs", "sm")]: { + textAlign: "center" + } + } })); function Passwords() { - const classes = useStyles(); + const classes = useStyles(); - return ( - - - - Passwords - - - Old Password - - - - New Password - - - - Confirm new password - - - - - - - - ); + return ( + + + + Passwords + + + Old Password + + + + New Password + + + + Confirm new password + + + + + + + + ); } export default Passwords; diff --git a/src/components/Organization/pages/Socialmedia.jsx b/src/components/Organization/pages/Socialmedia.jsx index f1716754..161c3e8a 100644 --- a/src/components/Organization/pages/Socialmedia.jsx +++ b/src/components/Organization/pages/Socialmedia.jsx @@ -3,24 +3,24 @@ import { makeStyles } from "@mui/styles"; import React from "react"; import Orgsocial from "../Orgsocial"; -const useStyles = makeStyles((theme) => ({ - root: { - padding: 20, - }, - heading: { - fontWeight: 100, - fontSize: "1.6rem", - }, +const useStyles = makeStyles(theme => ({ + root: { + padding: 20 + }, + heading: { + fontWeight: 100, + fontSize: "1.6rem" + } })); function Socialmedia() { - const classes = useStyles(); - return ( - - - Social Media - - - - ); + const classes = useStyles(); + return ( + + + Social Media + + + + ); } export default Socialmedia; diff --git a/src/components/Organization/pages/Users.jsx b/src/components/Organization/pages/Users.jsx index eeef0f5b..999435f8 100644 --- a/src/components/Organization/pages/Users.jsx +++ b/src/components/Organization/pages/Users.jsx @@ -3,106 +3,107 @@ import { makeStyles } from "@mui/styles"; import React from "react"; import Orgusers from "../OrgUsers/OrgUsers"; -const useStyles = makeStyles((theme) => ({ - root: { - padding: 20, - }, - heading: { - fontWeight: 100, - fontSize: "1.6rem", - }, +const useStyles = makeStyles(theme => ({ + root: { + padding: 20 + }, + heading: { + fontWeight: 100, + fontSize: "1.6rem" + } })); function Users() { - const classes = useStyles(); + const classes = useStyles(); - const AdminUsers = [ - { - name: "Shahaab Manzar", - designation: "GSoC 22'", - avatar: { - type: "char", - value: "A", - }, - }, - { - name: "Sarfraz Alam", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - ]; + const AdminUsers = [ + { + name: "Shahaab Manzar", + designation: "GSoC 22'", + avatar: { + type: "char", + value: "A" + } + }, + { + name: "Sarfraz Alam", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + } + ]; - const ContributersUsers = [ - { - name: "Sarfraz Alam", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - { - name: "Jhanvi Thakkar", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - { - name: "Saksham Sharma", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - { - name: "Mehender boi", - designation: "GSoC 22'", - avatar: { - type: "image", - value: "https://i.pravatar.cc/300", - }, - }, - ]; + const ContributersUsers = [ + { + name: "Sarfraz Alam", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Jhanvi Thakkar", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Saksham Sharma", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + }, + { + name: "Mehender boi", + designation: "GSoC 22'", + avatar: { + type: "image", + value: "https://i.pravatar.cc/300" + } + } + ]; - return ( - - - - Users - - - - - - - - - - ); + return ( + + + + Users + + + + + + + + + + ); } export default Users; diff --git a/src/components/Organization/styles.jsx b/src/components/Organization/styles.jsx index 39bfb072..94008301 100644 --- a/src/components/Organization/styles.jsx +++ b/src/components/Organization/styles.jsx @@ -1,9 +1,9 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - padding: 25, - }, +const useStyles = makeStyles(theme => ({ + root: { + padding: 25 + } })); export default useStyles; diff --git a/src/components/Profile/ChangeProfile/ChangeProfile.jsx b/src/components/Profile/ChangeProfile/ChangeProfile.jsx index 3d8675ec..96889d07 100644 --- a/src/components/Profile/ChangeProfile/ChangeProfile.jsx +++ b/src/components/Profile/ChangeProfile/ChangeProfile.jsx @@ -1,21 +1,21 @@ import React, { useCallback, useEffect, useRef, useState } from "react"; import { - Grid, - Box, - Button, - Divider, - DialogTitle, - Dialog, - DialogContent, + Grid, + Box, + Button, + Divider, + DialogTitle, + Dialog, + DialogContent } from "@mui/material"; import { makeStyles } from "@mui/styles"; import ReactCrop from "react-image-crop"; -const useStyles = makeStyles((theme) => ({ - ProfilePhoto: { - boxShadow: "none", - borderColor: "white", - }, +const useStyles = makeStyles(theme => ({ + ProfilePhoto: { + boxShadow: "none", + borderColor: "white" + } })); /** @@ -26,192 +26,199 @@ const useStyles = makeStyles((theme) => ({ * @returns */ export default function ChangeProfile({ open, saveImage, onClose }) { - const classes = useStyles(); + const classes = useStyles(); - const [upImg, setUpImg] = useState(); - const [crop, setCrop] = useState({ unit: "%", width: 30, aspect: 16 / 16 }); - const imgRef = useRef(null); - const ReactCropRef = useRef(null); - const fileUploadRef = useRef(null); - const previewCanvasRef = useRef(null); - const [completedCrop, setCompletedCrop] = useState(null); + const [upImg, setUpImg] = useState(); + const [crop, setCrop] = useState({ unit: "%", width: 30, aspect: 16 / 16 }); + const imgRef = useRef(null); + const ReactCropRef = useRef(null); + const fileUploadRef = useRef(null); + const previewCanvasRef = useRef(null); + const [completedCrop, setCompletedCrop] = useState(null); - const onLoad = useCallback((img) => { - imgRef.current = img; - }, []); + const onLoad = useCallback(img => { + imgRef.current = img; + }, []); - const UpdateImage = useCallback( - function (canvas) { - previewCanvasRef.current.width = completedCrop?.width; - previewCanvasRef.current.height = completedCrop?.height; - canvas.clearRect( - 0, - 0, - previewCanvasRef.current.width, - previewCanvasRef.current.height - ); - const relativeX = - (completedCrop?.x * upImg.width) / ReactCropRef.current.imageRef.width; - const relativeY = - (completedCrop?.y * upImg.height) / - ReactCropRef.current.imageRef.height; - const relativeWidth = - ((completedCrop?.width + 10) * upImg.width) / - ReactCropRef.current.imageRef.width; - const relativeHeight = - ((completedCrop?.height + 10) * upImg.width) / - ReactCropRef.current.imageRef.height; - canvas.drawImage( - upImg, - relativeX, - relativeY, - relativeWidth, - relativeHeight, - 0, - 0, - completedCrop?.width, - completedCrop?.height - ); - }, - [ - completedCrop?.height, - completedCrop?.width, - completedCrop?.x, - completedCrop?.y, - upImg, - ] - ); + const UpdateImage = useCallback( + function (canvas) { + previewCanvasRef.current.width = completedCrop?.width; + previewCanvasRef.current.height = completedCrop?.height; + canvas.clearRect( + 0, + 0, + previewCanvasRef.current.width, + previewCanvasRef.current.height + ); + const relativeX = + (completedCrop?.x * upImg.width) / ReactCropRef.current.imageRef.width; + const relativeY = + (completedCrop?.y * upImg.height) / + ReactCropRef.current.imageRef.height; + const relativeWidth = + ((completedCrop?.width + 10) * upImg.width) / + ReactCropRef.current.imageRef.width; + const relativeHeight = + ((completedCrop?.height + 10) * upImg.width) / + ReactCropRef.current.imageRef.height; + canvas.drawImage( + upImg, + relativeX, + relativeY, + relativeWidth, + relativeHeight, + 0, + 0, + completedCrop?.width, + completedCrop?.height + ); + }, + [ + completedCrop?.height, + completedCrop?.width, + completedCrop?.x, + completedCrop?.y, + upImg + ] + ); - const onSelectFile = (e) => { - if (e.target.files && e.target.files.length > 0) { - const reader = new FileReader(); - reader.addEventListener("load", () => { - const image = new Image(); - image.src = reader.result; - image.onload = () => { - setUpImg(image); - }; - }); - reader.readAsDataURL(e.target.files[0]); - } - }; + const onSelectFile = e => { + if (e.target.files && e.target.files.length > 0) { + const reader = new FileReader(); + reader.addEventListener("load", () => { + const image = new Image(); + image.src = reader.result; + image.onload = () => { + setUpImg(image); + }; + }); + reader.readAsDataURL(e.target.files[0]); + } + }; - useEffect(() => { - if (upImg && previewCanvasRef) { - const context = previewCanvasRef.current.getContext("2d"); + useEffect(() => { + if (upImg && previewCanvasRef) { + const context = previewCanvasRef.current.getContext("2d"); - UpdateImage(context); - } - }, [completedCrop, upImg, UpdateImage]); + UpdateImage(context); + } + }, [completedCrop, upImg, UpdateImage]); - return ( - - - - {"Change Profile Picture"} - - - -
-
- - - - -
-
- - - setCrop(c)} - onComplete={(c) => setCompletedCrop(c)} - /> - - - - - + return ( + + + + {"Change Profile Picture"} + + + +
+
+ + + + +
+
+ + + setCrop(c)} + onComplete={c => setCompletedCrop(c)} + /> + + + + + - - - - - - - - - - - - -
-
- - - ); + + + + + + + + + + + + +
+
+ + + ); } diff --git a/src/components/Profile/ConnectSocials/styles.jsx b/src/components/Profile/ConnectSocials/styles.jsx index 4e6cdbda..90a5d476 100644 --- a/src/components/Profile/ConnectSocials/styles.jsx +++ b/src/components/Profile/ConnectSocials/styles.jsx @@ -1,106 +1,106 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - root: { - width: "95%", - borderRadius: 15, - boxShadow: "none", - border: "1px solid #e8e8e8", - padding: "10px 20px", - "@media (max-width: 960px)": { - width: "100%", - padding: 0, - }, - }, - content: { - paddingBottom: "15px !important", - paddingTop: 15, - "@media (max-width: 600px)": { - padding: "15px 5px", - }, - }, - row: { - display: "flex", - justifyContent: "space-around", - alignItems: "center", - }, - link: { - display: "flex", - justifyContent: "center", - alignItems: "center", - borderRadius: 5, - padding: "3px 0", - width: 245, - "&:hover": { - cursor: "pointer", - }, - }, - isLinked: { - opacity: "0.8", - cursor: "not-allowed", - }, - isLinkedImg: { - height: 18, - width: 18, - margin: "9px 0 0 5px", - color: "green", - }, - button: { - height: 26, - "&:hover": { - transform: "scale(1.2)", - }, - marginLeft: 2, - marginRight: 23, - "@media (max-width: 500px)": { - marginLeft: 2, - marginRight: 10, - height: 20, - }, - }, - fb: { - fontSize: 31, - color: "#1877F2", - marginRight: 19, - "&:hover": { - transform: "scale(1.2)", - }, - "@media (max-width: 500px)": { - marginRight: 7, - fontSize: 24, - }, - }, - tw: { - color: "#03A9F4", - fontSize: 30, - marginLeft: -3, - marginRight: 18, - "&:hover": { - transform: "scale(1.2)", - }, - "@media (max-width: 500px)": { - marginRight: 6, - fontSize: 23, - }, - }, - git: { - fontSize: 26, - marginRight: 19, - "&:hover": { - transform: "scale(1.2)", - }, - "@media (max-width: 500px)": { - marginRight: 7, - fontSize: 19, - }, - }, - text: { - fontFamily: "Poppins", - color: "#000", - "@media (max-width: 500px)": { - fontSize: 12, - }, - }, +const useStyles = makeStyles(theme => ({ + root: { + width: "95%", + borderRadius: 15, + boxShadow: "none", + border: "1px solid #e8e8e8", + padding: "10px 20px", + "@media (max-width: 960px)": { + width: "100%", + padding: 0 + } + }, + content: { + paddingBottom: "15px !important", + paddingTop: 15, + "@media (max-width: 600px)": { + padding: "15px 5px" + } + }, + row: { + display: "flex", + justifyContent: "space-around", + alignItems: "center" + }, + link: { + display: "flex", + justifyContent: "center", + alignItems: "center", + borderRadius: 5, + padding: "3px 0", + width: 245, + "&:hover": { + cursor: "pointer" + } + }, + isLinked: { + opacity: "0.8", + cursor: "not-allowed" + }, + isLinkedImg: { + height: 18, + width: 18, + margin: "9px 0 0 5px", + color: "green" + }, + button: { + height: 26, + "&:hover": { + transform: "scale(1.2)" + }, + marginLeft: 2, + marginRight: 23, + "@media (max-width: 500px)": { + marginLeft: 2, + marginRight: 10, + height: 20 + } + }, + fb: { + fontSize: 31, + color: "#1877F2", + marginRight: 19, + "&:hover": { + transform: "scale(1.2)" + }, + "@media (max-width: 500px)": { + marginRight: 7, + fontSize: 24 + } + }, + tw: { + color: "#03A9F4", + fontSize: 30, + marginLeft: -3, + marginRight: 18, + "&:hover": { + transform: "scale(1.2)" + }, + "@media (max-width: 500px)": { + marginRight: 6, + fontSize: 23 + } + }, + git: { + fontSize: 26, + marginRight: 19, + "&:hover": { + transform: "scale(1.2)" + }, + "@media (max-width: 500px)": { + marginRight: 7, + fontSize: 19 + } + }, + text: { + fontFamily: "Poppins", + color: "#000", + "@media (max-width: 500px)": { + fontSize: 12 + } + } })); export default useStyles; diff --git a/src/components/Profile/Organizations/styles.jsx b/src/components/Profile/Organizations/styles.jsx index 6571f177..02408772 100644 --- a/src/components/Profile/Organizations/styles.jsx +++ b/src/components/Profile/Organizations/styles.jsx @@ -1,120 +1,120 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - card: { - width: "95%", - padding: "10px 20px", - boxShadow: "none", - border: "1px solid #e8e8e8", - borderRadius: 15, - "@media (max-width: 960px)": { - width: "100%", - padding: "10px 0", - }, - }, - content: { - "@media (max-width: 380px)": { - padding: 10, - }, - }, - left: { - display: "flex", - justifyContent: "space-between", - alignItems: "stretch", - height: 135, - width: 210, - "@media (max-width: 380px)": { - width: 150, - }, - }, - googleIcon: { - height: 30, - width: 30, - "&:hover": { - transform: "scale(1.2)", - }, - "@media (max-width: 780px)": { - height: 27, - width: 27, - }, - }, - fb: { - fontSize: 42, - color: "#5269a4", - "@media (max-width: 780px)": { - width: "100%", - }, - }, - tw: { - color: "#03A9F4", - fontSize: 33, - "&:hover": { - transform: "scale(1.2)", - }, - "@media (max-width: 780px)": { - fontSize: 30, - }, - }, - git: { - fontSize: 30, - "&:hover": { - transform: "scale(1.2)", - }, - "@media (max-width: 780px)": { - fontSize: 28, - }, - }, - organizations: { - display: "flex", - flexDirection: "column", - justifyContent: "space-between", - "@media (max-width: 380px)": { - height: 130, - }, - }, - column: { - display: "flex", - flexDirection: "column", - justifyContent: "space-between", - }, - organization: { - fontSize: 17, - color: "#0969DA", - "@media (max-width: 380px)": { - fontSize: 13, - }, - }, - role: { - fontSize: 13, - color: "#767676", - "@media (max-width: 380px)": { - fontSize: 11, - }, - }, - right: { - display: "flex", - justifyContent: "space-between", - alignItems: "stretch", - height: 135, - width: 180, - "@media (max-width: 380px)": { - width: 140, - }, - }, - button: { - fontSize: 14, - flexBasis: 0, - margin: "0 5px", - padding: "3px 15px", - backgroundColor: "#F9F9F9", - borderRadius: 5, - textTransform: "none", - "@media (max-width: 380px)": { - fontSize: 11, - margin: "0 2px", - padding: "3px 0", - }, - }, +const useStyles = makeStyles(theme => ({ + card: { + width: "95%", + padding: "10px 20px", + boxShadow: "none", + border: "1px solid #e8e8e8", + borderRadius: 15, + "@media (max-width: 960px)": { + width: "100%", + padding: "10px 0" + } + }, + content: { + "@media (max-width: 380px)": { + padding: 10 + } + }, + left: { + display: "flex", + justifyContent: "space-between", + alignItems: "stretch", + height: 135, + width: 210, + "@media (max-width: 380px)": { + width: 150 + } + }, + googleIcon: { + height: 30, + width: 30, + "&:hover": { + transform: "scale(1.2)" + }, + "@media (max-width: 780px)": { + height: 27, + width: 27 + } + }, + fb: { + fontSize: 42, + color: "#5269a4", + "@media (max-width: 780px)": { + width: "100%" + } + }, + tw: { + color: "#03A9F4", + fontSize: 33, + "&:hover": { + transform: "scale(1.2)" + }, + "@media (max-width: 780px)": { + fontSize: 30 + } + }, + git: { + fontSize: 30, + "&:hover": { + transform: "scale(1.2)" + }, + "@media (max-width: 780px)": { + fontSize: 28 + } + }, + organizations: { + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + "@media (max-width: 380px)": { + height: 130 + } + }, + column: { + display: "flex", + flexDirection: "column", + justifyContent: "space-between" + }, + organization: { + fontSize: 17, + color: "#0969DA", + "@media (max-width: 380px)": { + fontSize: 13 + } + }, + role: { + fontSize: 13, + color: "#767676", + "@media (max-width: 380px)": { + fontSize: 11 + } + }, + right: { + display: "flex", + justifyContent: "space-between", + alignItems: "stretch", + height: 135, + width: 180, + "@media (max-width: 380px)": { + width: 140 + } + }, + button: { + fontSize: 14, + flexBasis: 0, + margin: "0 5px", + padding: "3px 15px", + backgroundColor: "#F9F9F9", + borderRadius: 5, + textTransform: "none", + "@media (max-width: 380px)": { + fontSize: 11, + margin: "0 2px", + padding: "3px 0" + } + } })); export default useStyles; diff --git a/src/components/Profile/ProfileInfoCard/editProfileDetailsModal.jsx b/src/components/Profile/ProfileInfoCard/editProfileDetailsModal.jsx index 6ce7e951..69861a3b 100644 --- a/src/components/Profile/ProfileInfoCard/editProfileDetailsModal.jsx +++ b/src/components/Profile/ProfileInfoCard/editProfileDetailsModal.jsx @@ -1,16 +1,16 @@ import React, { useState, useEffect, useCallback } from "react"; import countryList from "../../../helpers/countryList"; import { - validateName, - validateCountry, - validateOrgWebsite, - validateIsEmpty, + validateName, + validateCountry, + validateOrgWebsite, + validateIsEmpty } from "../../../helpers/validations"; import { useDispatch, useSelector } from "react-redux"; import { useFirebase, useFirestore } from "react-redux-firebase"; import { - updateUserProfile, - clearProfileEditError, + updateUserProfile, + clearProfileEditError } from "../../../store/actions"; import Button from "@mui/material/Button"; @@ -33,423 +33,426 @@ import LinkedInIcon from "@mui/icons-material/LinkedIn"; import GitHubIcon from "@mui/icons-material/GitHub"; const EditProfileDetailsModal = ({ profileData, modelCloseCallback }) => { - const firebase = useFirebase(); - const firestore = useFirestore(); - const dispatch = useDispatch(); - const [error, setError] = useState(null); - const [loading, setLoading] = useState(false); - const getData = (prop) => (Boolean(prop) ? prop : ""); + const firebase = useFirebase(); + const firestore = useFirestore(); + const dispatch = useDispatch(); + const [error, setError] = useState(null); + const [loading, setLoading] = useState(false); + const getData = prop => (Boolean(prop) ? prop : ""); - const [name, setName] = useState(getData(profileData.displayName)); - const [nameValidateError, setNameValidateError] = useState(false); - const [nameValidateErrorMessage, setNameValidateErrorMessage] = useState(""); - const [country, setCountry] = useState(getData(profileData.country)); - const [countryValidateError, setCountryValidateError] = useState(false); - const [website, setWebsite] = useState(getData(profileData.website)); - const [websiteValidateError, setWebsiteValidateError] = useState(false); - const [websiteValidateErrorMessage, setWebsiteValidateErrorMessage] = - useState(""); - const [description, setDescription] = useState( - getData(profileData.description) - ); - const [descriptionValidateError, setDescriptionValidateError] = - useState(false); - const [descriptionValidateErrorMessage, setDescriptionValidateErrorMessage] = - useState(""); - const [facebook, setFacebook] = useState(getData(profileData.link_facebook)); - const [facebookValidateError, setFacebookValidateError] = useState(false); - const [facebookValidateErrorMessage, setFacebookValidateErrorMessage] = - useState(""); - const [twitter, setTwitter] = useState(getData(profileData.link_twitter)); - const [twitterValidateError, setTwitterValidateError] = useState(false); - const [twitterValidateErrorMessage, setTwitterValidateErrorMessage] = - useState(""); - const [linkedin, setLinkedin] = useState(getData(profileData.link_linkedin)); - const [linkedinValidateError, setLinkedinValidateError] = useState(false); - const [linkedinValidateErrorMessage, setLinkedinValidateErrorMessage] = - useState(""); - const [github, setGithub] = useState(getData(profileData.link_github)); - const [githubValidateError, setGithubValidateError] = useState(false); - const [githubValidateErrorMessage, setGithubValidateErrorMessage] = - useState(""); + const [name, setName] = useState(getData(profileData.displayName)); + const [nameValidateError, setNameValidateError] = useState(false); + const [nameValidateErrorMessage, setNameValidateErrorMessage] = useState(""); + const [country, setCountry] = useState(getData(profileData.country)); + const [countryValidateError, setCountryValidateError] = useState(false); + const [website, setWebsite] = useState(getData(profileData.website)); + const [websiteValidateError, setWebsiteValidateError] = useState(false); + const [websiteValidateErrorMessage, setWebsiteValidateErrorMessage] = + useState(""); + const [description, setDescription] = useState( + getData(profileData.description) + ); + const [descriptionValidateError, setDescriptionValidateError] = + useState(false); + const [descriptionValidateErrorMessage, setDescriptionValidateErrorMessage] = + useState(""); + const [facebook, setFacebook] = useState(getData(profileData.link_facebook)); + const [facebookValidateError, setFacebookValidateError] = useState(false); + const [facebookValidateErrorMessage, setFacebookValidateErrorMessage] = + useState(""); + const [twitter, setTwitter] = useState(getData(profileData.link_twitter)); + const [twitterValidateError, setTwitterValidateError] = useState(false); + const [twitterValidateErrorMessage, setTwitterValidateErrorMessage] = + useState(""); + const [linkedin, setLinkedin] = useState(getData(profileData.link_linkedin)); + const [linkedinValidateError, setLinkedinValidateError] = useState(false); + const [linkedinValidateErrorMessage, setLinkedinValidateErrorMessage] = + useState(""); + const [github, setGithub] = useState(getData(profileData.link_github)); + const [githubValidateError, setGithubValidateError] = useState(false); + const [githubValidateErrorMessage, setGithubValidateErrorMessage] = + useState(""); - const children = []; - for (let i = 0; i < countryList.length; i++) { - children.push( - - {countryList[i].name} - - ); - } + const children = []; + for (let i = 0; i < countryList.length; i++) { + children.push( + + {countryList[i].name} + + ); + } - const loadingProps = useSelector( - ({ - profile: { - edit: { loading }, - }, - }) => loading - ); - const errorProps = useSelector( - ({ - profile: { - edit: { error }, - }, - }) => error - ); + const loadingProps = useSelector( + ({ + profile: { + edit: { loading } + } + }) => loading + ); + const errorProps = useSelector( + ({ + profile: { + edit: { error } + } + }) => error + ); - useEffect(() => { - setLoading(loadingProps); - }, [loadingProps]); + useEffect(() => { + setLoading(loadingProps); + }, [loadingProps]); - useEffect(() => { - setError(errorProps); - }, [errorProps]); + useEffect(() => { + setError(errorProps); + }, [errorProps]); - const closeModal = useCallback(() => { - modelCloseCallback(false); - clearProfileEditError()(dispatch); - }, [modelCloseCallback, dispatch]); + const closeModal = useCallback(() => { + modelCloseCallback(false); + clearProfileEditError()(dispatch); + }, [modelCloseCallback, dispatch]); - useEffect(() => { - if (loading === false && error === false) { - closeModal(); - } - }, [closeModal, loading, error]); + useEffect(() => { + if (loading === false && error === false) { + closeModal(); + } + }, [closeModal, loading, error]); - const validated = () => { - const countryValid = validateCountry(country, setCountryValidateError); - const orgWebsiteValid = validateOrgWebsite( - website, - setWebsiteValidateError, - setWebsiteValidateErrorMessage - ); - const nameValid = validateName( - name, - setNameValidateError, - setNameValidateErrorMessage, - "Please enter your name", - "Please enter a real name" - ); - const descriptionValid = validateIsEmpty( - description, - setDescriptionValidateError, - setDescriptionValidateErrorMessage, - "Please enter a description" - ); - const facebookValid = validateIsEmpty( - facebook, - setFacebookValidateError, - setFacebookValidateErrorMessage, - "Please enter a Facebook username" - ); - const twitterValid = validateIsEmpty( - twitter, - setTwitterValidateError, - setTwitterValidateErrorMessage, - "Please enter a Twitter username" - ); - const linkedinValid = validateIsEmpty( - linkedin, - setLinkedinValidateError, - setLinkedinValidateErrorMessage, - "Please enter a LinkedIn username" - ); - const githubValid = validateIsEmpty( - github, - setGithubValidateError, - setGithubValidateErrorMessage, - "Please enter a GitHub username" - ); - if ( - nameValid && - countryValid && - orgWebsiteValid && - descriptionValid && - facebookValid && - twitterValid && - githubValid && - linkedinValid - ) { - return true; - } else { - return false; - } - }; + const validated = () => { + const countryValid = validateCountry(country, setCountryValidateError); + const orgWebsiteValid = validateOrgWebsite( + website, + setWebsiteValidateError, + setWebsiteValidateErrorMessage + ); + const nameValid = validateName( + name, + setNameValidateError, + setNameValidateErrorMessage, + "Please enter your name", + "Please enter a real name" + ); + const descriptionValid = validateIsEmpty( + description, + setDescriptionValidateError, + setDescriptionValidateErrorMessage, + "Please enter a description" + ); + const facebookValid = validateIsEmpty( + facebook, + setFacebookValidateError, + setFacebookValidateErrorMessage, + "Please enter a Facebook username" + ); + const twitterValid = validateIsEmpty( + twitter, + setTwitterValidateError, + setTwitterValidateErrorMessage, + "Please enter a Twitter username" + ); + const linkedinValid = validateIsEmpty( + linkedin, + setLinkedinValidateError, + setLinkedinValidateErrorMessage, + "Please enter a LinkedIn username" + ); + const githubValid = validateIsEmpty( + github, + setGithubValidateError, + setGithubValidateErrorMessage, + "Please enter a GitHub username" + ); + if ( + nameValid && + countryValid && + orgWebsiteValid && + descriptionValid && + facebookValid && + twitterValid && + githubValid && + linkedinValid + ) { + return true; + } else { + return false; + } + }; - const onSubmit = () => { - if (validated()) { - updateUserProfile({ - displayName: name, - website, - link_facebook: facebook, - link_github: github, - link_linkedin: linkedin, - link_twitter: twitter, - description, - country, - })(firebase, firestore, dispatch); - } - }; + const onSubmit = () => { + if (validated()) { + updateUserProfile({ + displayName: name, + website, + link_facebook: facebook, + link_github: github, + link_linkedin: linkedin, + link_twitter: twitter, + description, + country + })(firebase, firestore, dispatch); + } + }; - const onChangeName = (name) => setName(name); - const onChangeCountry = (country) => setCountry(country); - const onChangeOrgWebsite = (website) => setWebsite(website); - const onChangeDescription = (description) => setDescription(description); - const onChangeFacebook = (facebook) => setFacebook(facebook); - const onChangeTwitter = (twitter) => setTwitter(twitter); - const onChangeLinkedin = (linkedin) => setLinkedin(linkedin); - const onChangeGithub = (github) => setGithub(github); + const onChangeName = name => setName(name); + const onChangeCountry = country => setCountry(country); + const onChangeOrgWebsite = website => setWebsite(website); + const onChangeDescription = description => setDescription(description); + const onChangeFacebook = facebook => setFacebook(facebook); + const onChangeTwitter = twitter => setTwitter(twitter); + const onChangeLinkedin = linkedin => setLinkedin(linkedin); + const onChangeGithub = github => setGithub(github); - return ( - - {error && ( - - - - {error} - - - - )} + return ( + + {error && ( + + + + {error} + + + + )} - + - - onChangeName(event.target.value)} - helperText={nameValidateError ? nameValidateErrorMessage : null} - fullWidth - autoComplete="handle" - required - style={{ marginBottom: "15px" }} - InputProps={{ - startAdornment: ( - - - - ), - }} - /> - + + onChangeName(event.target.value)} + helperText={nameValidateError ? nameValidateErrorMessage : null} + fullWidth + autoComplete="handle" + required + style={{ marginBottom: "15px" }} + InputProps={{ + startAdornment: ( + + + + ) + }} + /> + - - - Country - - - + + + Country + + + - - onChangeOrgWebsite(event.target.value)} - helperText={websiteValidateError ? websiteValidateErrorMessage : null} - fullWidth - autoComplete="orgWebsite" - required - style={{ marginBottom: "15px" }} - InputProps={{ - startAdornment: ( - - - - ), - }} - /> - + + onChangeOrgWebsite(event.target.value)} + helperText={websiteValidateError ? websiteValidateErrorMessage : null} + fullWidth + autoComplete="orgWebsite" + required + style={{ marginBottom: "15px" }} + InputProps={{ + startAdornment: ( + + + + ) + }} + /> + - - onChangeDescription(event.target.value)} - helperText={ - descriptionValidateError ? descriptionValidateErrorMessage : null - } - fullWidth - autoComplete="description" - required - style={{ marginBottom: "15px" }} - InputProps={{ - startAdornment: ( - - - - ), - }} - /> - + + onChangeDescription(event.target.value)} + helperText={ + descriptionValidateError ? descriptionValidateErrorMessage : null + } + fullWidth + autoComplete="description" + required + style={{ marginBottom: "15px" }} + InputProps={{ + startAdornment: ( + + + + ) + }} + /> + - - onChangeFacebook(event.target.value)} - helperText={ - facebookValidateError ? facebookValidateErrorMessage : null - } - fullWidth - autoComplete="handle" - required - style={{ marginBottom: "15px" }} - InputProps={{ - startAdornment: ( - - -

- facebook.com/ -

- - ), - }} - /> - + + onChangeFacebook(event.target.value)} + helperText={ + facebookValidateError ? facebookValidateErrorMessage : null + } + fullWidth + autoComplete="handle" + required + style={{ marginBottom: "15px" }} + InputProps={{ + startAdornment: ( + + +

+ facebook.com/ +

+ + ) + }} + /> + - - onChangeTwitter(event.target.value)} - helperText={twitterValidateError ? twitterValidateErrorMessage : null} - fullWidth - autoComplete="handle" - required - style={{ marginBottom: "15px" }} - InputProps={{ - startAdornment: ( - - -

- twitter.com/ -

- - ), - }} - /> - + + onChangeTwitter(event.target.value)} + helperText={twitterValidateError ? twitterValidateErrorMessage : null} + fullWidth + autoComplete="handle" + required + style={{ marginBottom: "15px" }} + InputProps={{ + startAdornment: ( + + +

+ twitter.com/ +

+ + ) + }} + /> + - - onChangeLinkedin(event.target.value)} - helperText={ - linkedinValidateError ? linkedinValidateErrorMessage : null - } - fullWidth - autoComplete="handle" - required - style={{ marginBottom: "15px" }} - InputProps={{ - startAdornment: ( - - -

- linkedin.com/in/ -

- - ), - }} - /> - + + onChangeLinkedin(event.target.value)} + helperText={ + linkedinValidateError ? linkedinValidateErrorMessage : null + } + fullWidth + autoComplete="handle" + required + style={{ marginBottom: "15px" }} + InputProps={{ + startAdornment: ( + + +

+ linkedin.com/in/ +

+ + ) + }} + /> + - - onChangeGithub(event.target.value)} - helperText={githubValidateError ? githubValidateErrorMessage : null} - fullWidth - data-testId="editProfileGithub" - autoComplete="handle" - required - style={{ marginBottom: "15px" }} - InputProps={{ - startAdornment: ( - - -

- github.com/ -

- - ), - }} - /> - + + onChangeGithub(event.target.value)} + helperText={githubValidateError ? githubValidateErrorMessage : null} + fullWidth + data-testId="editProfileGithub" + autoComplete="handle" + required + style={{ marginBottom: "15px" }} + InputProps={{ + startAdornment: ( + + +

+ github.com/ +

+ + ) + }} + /> + - + - - - - - - - - - - - - - - ); + + + + + + + + + + + + + + ); }; export default EditProfileDetailsModal; diff --git a/src/components/Profile/ProfileInfoCard/index.jsx b/src/components/Profile/ProfileInfoCard/index.jsx index c0f052f9..bf1cad0b 100644 --- a/src/components/Profile/ProfileInfoCard/index.jsx +++ b/src/components/Profile/ProfileInfoCard/index.jsx @@ -32,448 +32,470 @@ import { uploadProfileImage } from "../../../store/actions"; import { useFirebase } from "react-redux-firebase"; const ProfileInfoCard = () => { - const firebase = useFirebase(); - const dispatch = useDispatch(); + const firebase = useFirebase(); + const dispatch = useDispatch(); - const [upImg, setUpImg] = useState(); - const imgRef = useRef(null); - const previewCanvasRef = useRef(null); - const [crop, setCrop] = useState({ unit: "%", width: 30, aspect: 16 / 16 }); - const [completedCrop, setCompletedCrop] = useState(null); - const [showImageDialog, setShowImageDialog] = useState(false); - const [imageUploading, setImageUploading] = useState(false); - const [profileEditModalVisible, setProfileEditModalVisible] = useState(false); - const profileData = useSelector(({ firebase: { profile } }) => profile); - const [anchorEl, setAnchorEl] = useState(null); + const [upImg, setUpImg] = useState(); + const imgRef = useRef(null); + const previewCanvasRef = useRef(null); + const [crop, setCrop] = useState({ unit: "%", width: 30, aspect: 16 / 16 }); + const [completedCrop, setCompletedCrop] = useState(null); + const [showImageDialog, setShowImageDialog] = useState(false); + const [imageUploading, setImageUploading] = useState(false); + const [profileEditModalVisible, setProfileEditModalVisible] = useState(false); + const profileData = useSelector(({ firebase: { profile } }) => profile); + const [anchorEl, setAnchorEl] = useState(null); - const [facebookURI] = useState("https://www.facebook.com/"); - const [twitterURI] = useState("https://twitter.com/"); - const [githubURI] = useState("https://github.com/"); - const [linkedinURI] = useState("https://www.linkedin.com/in/"); - const [googleURI] = useState("https://www.google.com/search?q="); + const [facebookURI] = useState("https://www.facebook.com/"); + const [twitterURI] = useState("https://twitter.com/"); + const [githubURI] = useState("https://github.com/"); + const [linkedinURI] = useState("https://www.linkedin.com/in/"); + const [googleURI] = useState("https://www.google.com/search?q="); - const onSelectFile = (e) => { - if (e.target.files && e.target.files.length > 0) { - const reader = new FileReader(); - reader.addEventListener("load", () => setUpImg(reader.result)); - reader.readAsDataURL(e.target.files[0]); - } - }; + const onSelectFile = e => { + if (e.target.files && e.target.files.length > 0) { + const reader = new FileReader(); + reader.addEventListener("load", () => setUpImg(reader.result)); + reader.readAsDataURL(e.target.files[0]); + } + }; - const onLoad = useCallback((img) => { - imgRef.current = img; - }, []); + const onLoad = useCallback(img => { + imgRef.current = img; + }, []); - const base64StringToFile = (base64String, filename) => { - let arr = base64String.split(","), - mime = arr[0].match(/:(.*?);/)[1], - bstr = atob(arr[1]), - n = bstr.length, - u8arr = new Uint8Array(n); - while (n--) { - u8arr[n] = bstr.charCodeAt(n); - } - return new File([u8arr], filename, { type: mime }); - }; + const base64StringToFile = (base64String, filename) => { + let arr = base64String.split(","), + mime = arr[0].match(/:(.*?);/)[1], + bstr = atob(arr[1]), + n = bstr.length, + u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + return new File([u8arr], filename, { type: mime }); + }; - const saveImage = (canvas, crop) => { - if (!crop || !canvas) { - return; - } - setShowImageDialog(false); - uploadImage(base64StringToFile(canvas.toDataURL(), "newfile")); - }; + const saveImage = (canvas, crop) => { + if (!crop || !canvas) { + return; + } + setShowImageDialog(false); + uploadImage(base64StringToFile(canvas.toDataURL(), "newfile")); + }; - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; + const handleClick = event => { + setAnchorEl(event.currentTarget); + }; - const handleClose = () => { - setAnchorEl(null); - }; + const handleClose = () => { + setAnchorEl(null); + }; - const verified = useSelector( - ({ - firebase: { - auth: { emailVerified }, - }, - }) => emailVerified - ); + const verified = useSelector( + ({ + firebase: { + auth: { emailVerified } + } + }) => emailVerified + ); - const uploadImage = (file) => { - setImageUploading(true); - uploadProfileImage(file, profileData.handle)(firebase, dispatch).then( - () => { - setImageUploading(false); - } - ); - return false; - }; + const uploadImage = file => { + setImageUploading(true); + uploadProfileImage(file, profileData.handle)(firebase, dispatch).then( + () => { + setImageUploading(false); + } + ); + return false; + }; - const checkAvailable = (data) => { - return !!(data && data.length > 0); - }; + const checkAvailable = data => { + return !!(data && data.length > 0); + }; - useEffect(() => { - if (!completedCrop || !previewCanvasRef.current || !imgRef.current) { - return; - } - const image = imgRef.current; - const canvas = previewCanvasRef.current; - const crop = completedCrop; - const scaleX = image.naturalWidth / image.width; - const scaleY = image.naturalHeight / image.height; - const ctx = canvas.getContext("2d"); - const pixelRatio = window.devicePixelRatio; - canvas.width = crop.width * pixelRatio; - canvas.height = crop.height * pixelRatio; - ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); - ctx.imageSmoothingQuality = "high"; - ctx.drawImage( - image, - crop.x * scaleX, - crop.y * scaleY, - crop.width * scaleX, - crop.height * scaleY, - 0, - 0, - crop.width, - crop.height - ); - }, [completedCrop]); + useEffect(() => { + if (!completedCrop || !previewCanvasRef.current || !imgRef.current) { + return; + } + const image = imgRef.current; + const canvas = previewCanvasRef.current; + const crop = completedCrop; + const scaleX = image.naturalWidth / image.width; + const scaleY = image.naturalHeight / image.height; + const ctx = canvas.getContext("2d"); + const pixelRatio = window.devicePixelRatio; + canvas.width = crop.width * pixelRatio; + canvas.height = crop.height * pixelRatio; + ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); + ctx.imageSmoothingQuality = "high"; + ctx.drawImage( + image, + crop.x * scaleX, + crop.y * scaleY, + crop.width * scaleX, + crop.height * scaleY, + 0, + 0, + crop.width, + crop.height + ); + }, [completedCrop]); - return ( -
- - - - - - Profile Details - - - -
- - - setProfileEditModalVisible(true)}> - Edit Profile - - -
- - - - - - - - {profileData.photoURL && profileData.photoURL.length > 0 - ? BasicImage(profileData.photoURL, profileData.displayName) - : BasicImage(NoImage, "Not Available")} - - {imageUploading ? ( - - ) : ( - -
- -
- - )} + return ( +
+ + + + + + Profile Details + + + +
+ + + setProfileEditModalVisible(true)} + > + Edit Profile + + +
+ + + + + + + + {profileData.photoURL && profileData.photoURL.length > 0 + ? BasicImage(profileData.photoURL, profileData.displayName) + : BasicImage(NoImage, "Not Available")} + + {imageUploading ? ( + + ) : ( + +
+ +
+ + )} - - - - {"Change Profile Picture"} - - - -
-
- - - - - - -
- setCrop(c)} - onComplete={(c) => setCompletedCrop(c)} - /> -
- - - - - - - - - - - - - - - -
-
- - - - - - -

- - {profileData.displayName} - - {verified ? ( - } - label="Email Verified" - color="primary" - style={{ backgroundColor: "LimeGreen" }} - /> - ) : ( - } - label="Email not verified" - color="secondary" - /> - )} - - -

- - {checkAvailable(profileData.description) && ( -

{profileData.description}

- )} - + + + + {"Change Profile Picture"} + + + +
+
+ + + + + + +
+ setCrop(c)} + onComplete={c => setCompletedCrop(c)} + /> +
+ + + + + + + + + + + + + + + +
+
+ + + + + + +

+ + {profileData.displayName} + + {verified ? ( + } + label="Email Verified" + color="primary" + style={{ backgroundColor: "LimeGreen" }} + /> + ) : ( + } + label="Email not verified" + color="secondary" + /> + )} + + +

+ + {checkAvailable(profileData.description) && ( +

{profileData.description}

+ )} + - {checkAvailable(profileData.link_facebook) && ( -

- -

- -

- )} - {checkAvailable(profileData.link_twitter) && ( -

- -

- -

- )} - {checkAvailable(profileData.link_github) && ( -

- -

- -

- )} - {checkAvailable(profileData.link_linkedin) && ( -

- -

- -

- )} - {checkAvailable(profileData.website) && ( -

- -

- -

- )} - {checkAvailable(profileData.country) && ( -

- -

- -

- )} - - - - - - - - {"Edit Profile"} - - - - setProfileEditModalVisible(e)} - /> - - -
- ); + {checkAvailable(profileData.link_facebook) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.link_twitter) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.link_github) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.link_linkedin) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.website) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.country) && ( +

+ +

+ +

+ )} + + + + + + + + {"Edit Profile"} + + + + setProfileEditModalVisible(e)} + /> + + +
+ ); }; export default ProfileInfoCard; diff --git a/src/components/Profile/SocialIcons/SocialIcons.jsx b/src/components/Profile/SocialIcons/SocialIcons.jsx index 7e549bbf..e0b308c5 100644 --- a/src/components/Profile/SocialIcons/SocialIcons.jsx +++ b/src/components/Profile/SocialIcons/SocialIcons.jsx @@ -9,57 +9,60 @@ import GitHubIcon from "@mui/icons-material/GitHub"; import TwitterIcon from "@mui/icons-material/Twitter"; import LinkIcon from "@mui/icons-material/Link"; -const useStyles = makeStyles((theme) => ({ - root: { - width: "100%", - }, - icon: { - justifyContent: "space-around", - }, - facebookIcon: { - color: "#4267B2", - }, - twitterIcon: { - color: "#1DA1F2", - }, - linkedInIcon: { - color: "0077B5", - }, - blackIcon: { - color: "#212121", - }, +const useStyles = makeStyles(theme => ({ + root: { + width: "100%" + }, + icon: { + justifyContent: "space-around" + }, + facebookIcon: { + color: "#4267B2" + }, + twitterIcon: { + color: "#1DA1F2" + }, + linkedInIcon: { + color: "0077B5" + }, + blackIcon: { + color: "#212121" + } })); export default function SocialIcons(props) { - const classes = useStyles(); - return ( - - - - - - - - - - - - - - - - - - - - ); + const classes = useStyles(); + return ( + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/components/Profile/SwitchAccount/SwitchAccount.jsx b/src/components/Profile/SwitchAccount/SwitchAccount.jsx index 713baee0..11e0a149 100644 --- a/src/components/Profile/SwitchAccount/SwitchAccount.jsx +++ b/src/components/Profile/SwitchAccount/SwitchAccount.jsx @@ -16,144 +16,147 @@ import { useHistory } from "react-router-dom"; import { makeStyles } from "@mui/styles"; import { createTheme, responsiveFontSizes, ThemeProvider } from "@mui/material"; -const useStyles = makeStyles((theme) => ({ - root: { - width: "80%", - display: "flex", - justifyContent: "space-between", - alignItems: "center", - [theme.breakpoints.down("md")]: { - width: "95%", - }, - [theme.breakpoints.down("xs")]: { - width: "95%", - flexDirection: "column", - }, - }, - formControl: { - minWidth: 120, - }, - large: { - width: theme.spacing(7), - height: theme.spacing(7), - }, - details: { - display: "flex", - flexDirection: "row", - [theme.breakpoints.down("xs")]: { - flexDirection: "column", - alignItems: "center", - }, - }, - divDetails: { - display: "flex", - flexDirection: "row", - alignItems: "center", - [theme.breakpoints.down("xs")]: { - flexDirection: "column", - }, - }, - name: { - [theme.breakpoints.down("xs")]: { - textAlign: "center", - }, - }, - margin: { - marginLeft: "15px", - [theme.breakpoints.down("xs")]: { - marginLeft: "0px", - }, - }, - marginR: { - marginRight: "20px", - [theme.breakpoints.down("xs")]: { - marginRight: "0px", - }, - }, +const useStyles = makeStyles(theme => ({ + root: { + width: "80%", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + [theme.breakpoints.down("md")]: { + width: "95%" + }, + [theme.breakpoints.down("xs")]: { + width: "95%", + flexDirection: "column" + } + }, + formControl: { + minWidth: 120 + }, + large: { + width: theme.spacing(7), + height: theme.spacing(7) + }, + details: { + display: "flex", + flexDirection: "row", + [theme.breakpoints.down("xs")]: { + flexDirection: "column", + alignItems: "center" + } + }, + divDetails: { + display: "flex", + flexDirection: "row", + alignItems: "center", + [theme.breakpoints.down("xs")]: { + flexDirection: "column" + } + }, + name: { + [theme.breakpoints.down("xs")]: { + textAlign: "center" + } + }, + margin: { + marginLeft: "15px", + [theme.breakpoints.down("xs")]: { + marginLeft: "0px" + } + }, + marginR: { + marginRight: "20px", + [theme.breakpoints.down("xs")]: { + marginRight: "0px" + } + } })); export default function SwitchAccount({ - avatar, - name, - userOrgs, - buttonClick, - buttonText, + avatar, + name, + userOrgs, + buttonClick, + buttonText }) { - //Getting the details of all organizations submitted by current User - const organizations = useSelector( - ({ - profile: { - data: { organizations }, - }, - }) => organizations - ); - //This will be used to move on the organization page based upon the selection in dropdown - let history = useHistory(); + //Getting the details of all organizations submitted by current User + const organizations = useSelector( + ({ + profile: { + data: { organizations } + } + }) => organizations + ); + //This will be used to move on the organization page based upon the selection in dropdown + let history = useHistory(); - const classes = useStyles(); - let theme = createTheme(); - theme = responsiveFontSizes(theme); - const [organisation, setOrganisation] = useState(""); + const classes = useStyles(); + let theme = createTheme(); + theme = responsiveFontSizes(theme); + const [organisation, setOrganisation] = useState(""); - const handleChange = (event) => { - const name = event.target.name; - setOrganisation(event.target.value); - //This will take you to the selected organiztion home page - history.push(`/org/${event.target.value}`); - }; + const handleChange = event => { + const name = event.target.name; + setOrganisation(event.target.value); + //This will take you to the selected organiztion home page + history.push(`/org/${event.target.value}`); + }; - return ( - - - - - {avatar.type === "char" ? ( - {avatar.value} - ) : ( - - )} - -
- - {name} - -
- Personal account - - - + return ( + + + + + {avatar.type === "char" ? ( + {avatar.value} + ) : ( + + )} + +
+ + {name} + +
+ Personal account + + + -
- - - {/* dropdown options for switching organisations */} - - {userOrgs.map((org) => ( - - ))} - - -
-
-
- - - {buttonText && ( - - )} - - ); +
+ + + {/* dropdown options for switching organisations */} + + {userOrgs.map(org => ( + + ))} + + +
+
+
+ + + {buttonText && ( + + )} + + ); } diff --git a/src/components/Profile/ViewProfile/index.jsx b/src/components/Profile/ViewProfile/index.jsx index 81ae52df..42930a2a 100644 --- a/src/components/Profile/ViewProfile/index.jsx +++ b/src/components/Profile/ViewProfile/index.jsx @@ -2,10 +2,10 @@ import React, { useState, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useParams } from "react-router-dom"; import { - clearUserProfile, - getUserProfileData, - addUserFollower, - removeUserFollower, + clearUserProfile, + getUserProfileData, + addUserFollower, + removeUserFollower } from "../../../store/actions"; import { useFirebase, useFirestore } from "react-redux-firebase"; import { BasicImage, NoImage } from "../../../helpers/images"; @@ -26,323 +26,339 @@ import FlagIcon from "@mui/icons-material/Flag"; import Typography from "@mui/material/Typography"; const ProfileView = () => { - const { handle } = useParams(); - const firestore = useFirestore(); - const firebase = useFirebase(); - const dispatch = useDispatch(); - const [followers, setFollowers] = useState([]); - const [targetUserFollowing, setTargetUserFollowing] = useState(0); - const [following, setFollowing] = useState([]); - const db = firebase.firestore(); + const { handle } = useParams(); + const firestore = useFirestore(); + const firebase = useFirebase(); + const dispatch = useDispatch(); + const [followers, setFollowers] = useState([]); + const [targetUserFollowing, setTargetUserFollowing] = useState(0); + const [following, setFollowing] = useState([]); + const db = firebase.firestore(); - useEffect(() => { - getUserProfileData(handle)(firebase, firestore, dispatch); - return () => { - clearUserProfile()(dispatch); - }; - }, [firebase, firestore, dispatch, handle]); + useEffect(() => { + getUserProfileData(handle)(firebase, firestore, dispatch); + return () => { + clearUserProfile()(dispatch); + }; + }, [firebase, firestore, dispatch, handle]); - const profileData = useSelector( - ({ - profile: { - user: { data }, - }, - }) => data - ); - const currentProfileData = useSelector( - ({ firebase: { profile } }) => profile - ); - const loading = useSelector( - ({ - profile: { - user: { error }, - }, - }) => error - ); + const profileData = useSelector( + ({ + profile: { + user: { data } + } + }) => data + ); + const currentProfileData = useSelector( + ({ firebase: { profile } }) => profile + ); + const loading = useSelector( + ({ + profile: { + user: { error } + } + }) => error + ); - useEffect(() => { - const unsubscribe = db - .collection("cl_user") - .doc(profileData?.uid) - .onSnapshot((snap) => { - const data = snap.data(); - setFollowers(data?.followers); - }); + useEffect(() => { + const unsubscribe = db + .collection("cl_user") + .doc(profileData?.uid) + .onSnapshot(snap => { + const data = snap.data(); + setFollowers(data?.followers); + }); - return () => unsubscribe(); - }, [profileData, db]); + return () => unsubscribe(); + }, [profileData, db]); - useEffect(() => { - const unsubscribe = db - .collection("cl_user") - .doc(profileData?.uid) - .onSnapshot((snap) => { - const data = snap.data(); - setTargetUserFollowing(data?.following); - }); + useEffect(() => { + const unsubscribe = db + .collection("cl_user") + .doc(profileData?.uid) + .onSnapshot(snap => { + const data = snap.data(); + setTargetUserFollowing(data?.following); + }); - return () => unsubscribe(); - }, [profileData, db]); + return () => unsubscribe(); + }, [profileData, db]); - useEffect(() => { - const unsubscribe = db - .collection("cl_user") - .doc(currentProfileData?.uid) - .onSnapshot((snap) => { - const data = snap.data(); - setFollowing(data?.following); - }); + useEffect(() => { + const unsubscribe = db + .collection("cl_user") + .doc(currentProfileData?.uid) + .onSnapshot(snap => { + const data = snap.data(); + setFollowing(data?.following); + }); - return () => unsubscribe(); - }, [currentProfileData, db]); - const checkAvailable = (data) => { - return !!(data && data.length > 0); - }; + return () => unsubscribe(); + }, [currentProfileData, db]); + const checkAvailable = data => { + return !!(data && data.length > 0); + }; - if (loading || !profileData) { - return ( - - - - ); - } + if (loading || !profileData) { + return ( + + + + ); + } - const addFollower = (e) => { - e.preventDefault(); - addUserFollower( - currentProfileData, - followers, - following, - profileData, - firestore, - dispatch - ); - }; + const addFollower = e => { + e.preventDefault(); + addUserFollower( + currentProfileData, + followers, + following, + profileData, + firestore, + dispatch + ); + }; - const removeFollower = (e) => { - e.preventDefault(); - removeUserFollower( - followers, - currentProfileData, - following, - profileData, - firestore, - dispatch - ); - }; - return ( - - - {profileData && ( -
- - - - Profile Details - - - - - - - - {profileData.photoURL && profileData.photoURL.length > 0 - ? BasicImage(profileData.photoURL, profileData.displayName) - : BasicImage(NoImage, "Not Available")} - - -

- - {profileData.displayName} - -

- {checkAvailable(profileData.description) && ( -

{profileData.description}

- )} - {checkAvailable(profileData.link_facebook) && ( -

- -

- -

- )} - {checkAvailable(profileData.link_twitter) && ( -

- -

- -

- )} - {checkAvailable(profileData.link_github) && ( -

- -

- -

- )} - {checkAvailable(profileData.link_linkedin) && ( -

- -

- -

- )} - {checkAvailable(profileData.website) && ( -

- -

- -

- )} - {checkAvailable(profileData.country) && ( -

- -

- -

- )} + const removeFollower = e => { + e.preventDefault(); + removeUserFollower( + followers, + currentProfileData, + following, + profileData, + firestore, + dispatch + ); + }; + return ( + + + {profileData && ( +
+ + + + Profile Details + + + + + + + + {profileData.photoURL && profileData.photoURL.length > 0 + ? BasicImage(profileData.photoURL, profileData.displayName) + : BasicImage(NoImage, "Not Available")} + + +

+ + {profileData.displayName} + +

+ {checkAvailable(profileData.description) && ( +

{profileData.description}

+ )} + {checkAvailable(profileData.link_facebook) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.link_twitter) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.link_github) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.link_linkedin) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.website) && ( +

+ +

+ +

+ )} + {checkAvailable(profileData.country) && ( +

+ +

+ +

+ )} - - Followers : {followers ? followers.length : 0}{" "} - Following :{" "} - - {targetUserFollowing ? targetUserFollowing.length : 0} - - - {!following ? ( - - ) : !following.includes(profileData.handle) ? ( - - ) : ( - - )} - - - -
- )} - {profileData === false && "No profile with the provided handle"} - - - ); + + Followers : {followers ? followers.length : 0}{" "} + Following :{" "} + + {targetUserFollowing ? targetUserFollowing.length : 0} + + + {!following ? ( + + ) : !following.includes(profileData.handle) ? ( + + ) : ( + + )} + + + +
+ )} + {profileData === false && "No profile with the provided handle"} + + + ); }; export default ProfileView; diff --git a/src/components/Profile/index_old.jsx b/src/components/Profile/index_old.jsx index 799d594f..690e910b 100644 --- a/src/components/Profile/index_old.jsx +++ b/src/components/Profile/index_old.jsx @@ -4,17 +4,17 @@ import Box from "@mui/material/Box"; import Grid from "@mui/material/Grid"; const Profile = () => { - return ( - - - - - - - - - - ); + return ( + + + + + + + + + + ); }; export default Profile; diff --git a/src/components/ProfileBanner/Organization/styles.jsx b/src/components/ProfileBanner/Organization/styles.jsx index aa6e0b27..9ed71086 100644 --- a/src/components/ProfileBanner/Organization/styles.jsx +++ b/src/components/ProfileBanner/Organization/styles.jsx @@ -1,135 +1,135 @@ import { blue, red } from "@mui/material/colors"; import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - profileRightTop: { - backgroundColor: "transparent", - }, - profileCover: { - height: "100%", - }, +const useStyles = makeStyles(theme => ({ + profileRightTop: { + backgroundColor: "transparent" + }, + profileCover: { + height: "100%" + }, - profileCoverImg: { - zIndex: "-1000", - width: "100%", - height: "280px", - objectFit: "cover", - }, + profileCoverImg: { + zIndex: "-1000", + width: "100%", + height: "280px", + objectFit: "cover" + }, - profileUserImg: { - width: "10rem", - height: "10rem", - borderRadius: "50%", - objectFit: "cover", - border: "3px solid white", - }, + profileUserImg: { + width: "10rem", + height: "10rem", + borderRadius: "50%", + objectFit: "cover", + border: "3px solid white" + }, - profileInfo: { - position: "relative", - marginLeft: "3%", - marginTop: "-10%", - width: "95%", - padding: 0, - display: "flex", - flexDirection: "column", - alignItems: "left", - justifyContent: "center", - [theme.breakpoints.down("md")]: { - alignItems: "center", - }, - }, + profileInfo: { + position: "relative", + marginLeft: "3%", + marginTop: "-10%", + width: "95%", + padding: 0, + display: "flex", + flexDirection: "column", + alignItems: "left", + justifyContent: "center", + [theme.breakpoints.down("md")]: { + alignItems: "center" + } + }, - profileInfoName: { - fontStyle: "normal", - lineHeight: "59px", - color: "#000000", - fontWeight: "400", - fontSize: "50px", - marginTop: "0", - paddingTop: "0", - }, + profileInfoName: { + fontStyle: "normal", + lineHeight: "59px", + color: "#000000", + fontWeight: "400", + fontSize: "50px", + marginTop: "0", + paddingTop: "0" + }, - profileInfoStory: { - fontStyle: "normal", - lineHeight: "35px", - color: "#000000", - fontWeight: "400", - fontSize: "30px", - marginTop: "0", - paddingTop: "0", - }, + profileInfoStory: { + fontStyle: "normal", + lineHeight: "35px", + color: "#000000", + fontWeight: "400", + fontSize: "30px", + marginTop: "0", + paddingTop: "0" + }, - profileInfoDesc: { - display: "flex", - flexDirection: "row", - alignItems: "space-between", - justifyContent: "space-between", - width: "95%", - [theme.breakpoints.down("md")]: { - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - }, - }, - profileInfoData: { - lineHeight: "23px", - color: "#000000", - }, - profileSubscribeButton: { - width: "167px", - height: "48px", - minHeight: "2rem", - background: red[600], - borderRadius: "10px", - fontWeight: "500", - fontSize: "22px", - color: "#FFFFFF", - "&:hover": { - background: red[800], - }, - border: "none", - }, - profileEditButton: { - width: "167px", - height: "48px", - minHeight: "2rem", - paddingTop: "8px", - background: blue[600], - borderRadius: "10px", - fontWeight: "500", - fontSize: "22px", - color: "#FFFFFF", - "&:hover": { - background: blue[800], - }, - border: "none", - marginRight: "30px", - }, - moreDiv: { - minHeight: "2rem", - background: "none", - borderRadius: "10px", - border: "none", - marginRight: theme.spacing(2), - }, - moreButton: { - width: "50px", - height: "30px", - }, - profileInfoContainer: { - [theme.breakpoints.down("md")]: { - alignItems: "center", - textAlign: "center", - }, - }, - buttonContainer: { - [theme.breakpoints.down("md")]: { - marginTop: "2rem", - }, - textAlign: "center", - justifyContent: "center", - alignItems: "center", - }, + profileInfoDesc: { + display: "flex", + flexDirection: "row", + alignItems: "space-between", + justifyContent: "space-between", + width: "95%", + [theme.breakpoints.down("md")]: { + flexDirection: "column", + alignItems: "center", + justifyContent: "center" + } + }, + profileInfoData: { + lineHeight: "23px", + color: "#000000" + }, + profileSubscribeButton: { + width: "167px", + height: "48px", + minHeight: "2rem", + background: red[600], + borderRadius: "10px", + fontWeight: "500", + fontSize: "22px", + color: "#FFFFFF", + "&:hover": { + background: red[800] + }, + border: "none" + }, + profileEditButton: { + width: "167px", + height: "48px", + minHeight: "2rem", + paddingTop: "8px", + background: blue[600], + borderRadius: "10px", + fontWeight: "500", + fontSize: "22px", + color: "#FFFFFF", + "&:hover": { + background: blue[800] + }, + border: "none", + marginRight: "30px" + }, + moreDiv: { + minHeight: "2rem", + background: "none", + borderRadius: "10px", + border: "none", + marginRight: theme.spacing(2) + }, + moreButton: { + width: "50px", + height: "30px" + }, + profileInfoContainer: { + [theme.breakpoints.down("md")]: { + alignItems: "center", + textAlign: "center" + } + }, + buttonContainer: { + [theme.breakpoints.down("md")]: { + marginTop: "2rem" + }, + textAlign: "center", + justifyContent: "center", + alignItems: "center" + } })); export default useStyles; diff --git a/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx b/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx index 0fbe37b1..5e442525 100644 --- a/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx +++ b/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx @@ -9,119 +9,128 @@ import iconbuttonImage from "../../../../assets/images/Filled3dots.svg"; import { Link } from "react-router-dom"; export default function ProfileCardOne({ - profileImage, - name, - story, - followers, - following, + profileImage, + name, + story, + followers, + following }) { - const classes = useStyles(); - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - return ( - <> -
-
-
-
- Avatar -
-
- - - - {name} - - - - - {story} - - - - - - {followers} followers - - - - - {following} following - - - - - - - - - - - User Settings - - - - -
-
-
-
- - ); + const classes = useStyles(); + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + const handleClick = event => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + return ( + <> +
+
+
+
+ Avatar +
+
+ + + + {name} + + + + + {story} + + + + + + {followers} followers + + + + + {following} following + + + + + + + + + + + User Settings + + + + +
+
+
+
+ + ); } diff --git a/src/components/ProfileBanner/profile/ProfileCardOne/styles.jsx b/src/components/ProfileBanner/profile/ProfileCardOne/styles.jsx index 3ffbfcec..6acd9d1f 100644 --- a/src/components/ProfileBanner/profile/ProfileCardOne/styles.jsx +++ b/src/components/ProfileBanner/profile/ProfileCardOne/styles.jsx @@ -1,155 +1,155 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - profileCover: { - width: "fit-content", - height: "fit-content", - // minHeight: "20rem", - position: "relative", - }, +const useStyles = makeStyles(theme => ({ + profileCover: { + width: "fit-content", + height: "fit-content", + // minHeight: "20rem", + position: "relative" + }, - profileUserImg: { - width: "150px", - height: "150px", - borderRadius: "50%", - objectFit: "cover", - border: "3px solid white", - maxWidth: "fit-content", - }, - profileInfo: { - display: "flex", - flexDirection: "row", - alignItems: "space-between", - width: "100%", - position: "relative", - padding: "5%", - justifyContent: "center", - [theme.breakpoints.down(1000)]: { - flexWrap: "wrap", - }, - [theme.breakpoints.down(550)]: { - padding: "1%", - justifyContent: "flex-start", - }, - }, + profileUserImg: { + width: "150px", + height: "150px", + borderRadius: "50%", + objectFit: "cover", + border: "3px solid white", + maxWidth: "fit-content" + }, + profileInfo: { + display: "flex", + flexDirection: "row", + alignItems: "space-between", + width: "100%", + position: "relative", + padding: "5%", + justifyContent: "center", + [theme.breakpoints.down(1000)]: { + flexWrap: "wrap" + }, + [theme.breakpoints.down(550)]: { + padding: "1%", + justifyContent: "flex-start" + } + }, - profileInfoName: { - width: "25rem", - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "35px", - color: "#000000", - fontWeight: "500", - fontSize: "30px", - }, + profileInfoName: { + width: "25rem", + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "35px", + color: "#000000", + fontWeight: "500", + fontSize: "30px" + }, - profileInfoStory: { - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "1.2", - color: "#000000", - fontWeight: "400", - width: "24rem", - opacity: "0.9", - fontSize: "4vmin", - whiteSpace: "normal", - }, + profileInfoStory: { + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "1.2", + color: "#000000", + fontWeight: "400", + width: "24rem", + opacity: "0.9", + fontSize: "4vmin", + whiteSpace: "normal" + }, - profileInfoDesc: { - display: "flex", - flexDirection: "row", - alignItems: "space-between", - width: "100%", - }, - profileInfoData: { - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "22px", - fontSize: "19px", - color: "#878787", - fontWeight: "400", - }, - profileUserConnect: { - // width: "fit-content", - marginLeft: "2.5rem", - [theme.breakpoints.down(550)]: { - marginLeft: "0.5rem", - }, - }, - profileSubscribeButton: { - width: "127px", - height: "38px", - minHeight: "2rem", - background: "#03AAFA", - borderRadius: "10px", - fontFamily: "Roboto", - fontStyle: "normal", - fontWeight: "500", - fontSize: "22px", - lineHeight: "28px", - color: "#FFFFFF", - border: "none", - [theme.breakpoints.down(400)]: { - width: "80px", - fontSize: "18px", - }, - }, + profileInfoDesc: { + display: "flex", + flexDirection: "row", + alignItems: "space-between", + width: "100%" + }, + profileInfoData: { + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "22px", + fontSize: "19px", + color: "#878787", + fontWeight: "400" + }, + profileUserConnect: { + // width: "fit-content", + marginLeft: "2.5rem", + [theme.breakpoints.down(550)]: { + marginLeft: "0.5rem" + } + }, + profileSubscribeButton: { + width: "127px", + height: "38px", + minHeight: "2rem", + background: "#03AAFA", + borderRadius: "10px", + fontFamily: "Roboto", + fontStyle: "normal", + fontWeight: "500", + fontSize: "22px", + lineHeight: "28px", + color: "#FFFFFF", + border: "none", + [theme.breakpoints.down(400)]: { + width: "80px", + fontSize: "18px" + } + }, - profileShareButton: { - width: "fit-content", - marginLeft: "10px", - height: "38px", - minHeight: "2rem", - background: "#FFFFFF", - borderRadius: "10px", - fontFamily: "Roboto", - fontStyle: "normal", - fontWeight: "500", - fontSize: "22px", - lineHeight: "28px", - color: "#000", - border: "none", - [theme.breakpoints.down(400)]: { - width: "80px", - fontSize: "18px", - }, - }, + profileShareButton: { + width: "fit-content", + marginLeft: "10px", + height: "38px", + minHeight: "2rem", + background: "#FFFFFF", + borderRadius: "10px", + fontFamily: "Roboto", + fontStyle: "normal", + fontWeight: "500", + fontSize: "22px", + lineHeight: "28px", + color: "#000", + border: "none", + [theme.breakpoints.down(400)]: { + width: "80px", + fontSize: "18px" + } + }, - profileReportButton: { - width: "fit-content", - marginLeft: "10px", - height: "38px", - minHeight: "2rem", - background: "#FFFFFF", - borderRadius: "10px", - fontFamily: "Roboto", - fontStyle: "normal", - fontWeight: "500", - fontSize: "22px", - lineHeight: "28px", - color: "#000", - border: "none", - [theme.breakpoints.down(400)]: { - width: "90px", - fontSize: "18px", - }, - }, + profileReportButton: { + width: "fit-content", + marginLeft: "10px", + height: "38px", + minHeight: "2rem", + background: "#FFFFFF", + borderRadius: "10px", + fontFamily: "Roboto", + fontStyle: "normal", + fontWeight: "500", + fontSize: "22px", + lineHeight: "28px", + color: "#000", + border: "none", + [theme.breakpoints.down(400)]: { + width: "90px", + fontSize: "18px" + } + }, - profileIconButton: { - width: "fit-content", - marginLeft: "10px", - height: "38px", - minHeight: "2rem", - background: "#FFFFFF", - borderRadius: "10px", - fontFamily: "Roboto", - fontStyle: "normal", - fontWeight: "500", - fontSize: "22px", - lineHeight: "28px", - color: "#000", - border: "none", - }, + profileIconButton: { + width: "fit-content", + marginLeft: "10px", + height: "38px", + minHeight: "2rem", + background: "#FFFFFF", + borderRadius: "10px", + fontFamily: "Roboto", + fontStyle: "normal", + fontWeight: "500", + fontSize: "22px", + lineHeight: "28px", + color: "#000", + border: "none" + } })); export default useStyles; diff --git a/src/components/ProfileBanner/profile/ProfileCardThree/index.jsx b/src/components/ProfileBanner/profile/ProfileCardThree/index.jsx index c1d7e642..ae39fcc9 100644 --- a/src/components/ProfileBanner/profile/ProfileCardThree/index.jsx +++ b/src/components/ProfileBanner/profile/ProfileCardThree/index.jsx @@ -4,81 +4,87 @@ import Typography from "@mui/material/Typography"; import Grid from "@mui/material/Grid"; import Box from "@mui/material/Box"; export default function ProfileCardThree({ - profileImage, - name, - story, - work, - location, - joiningDate, + profileImage, + name, + story, + work, + location, + joiningDate }) { - const classes = useStyles(); - return ( - <> - -
-
- - - User Profile Avatar - - - - {name} - - - - - -
- - {story} - -
-
- - Work - - - {work} - -
-
- - Location - - - {location} - -
-
- - Joined - - - {joiningDate} - -
- -
-
- - - ); + const classes = useStyles(); + return ( + <> + +
+
+ + + User Profile Avatar + + + + {name} + + + + + +
+ + {story} + +
+
+ + Work + + + {work} + +
+
+ + Location + + + {location} + +
+
+ + Joined + + + {joiningDate} + +
+ +
+
+ + + ); } diff --git a/src/components/ProfileBanner/profile/ProfileCardThree/styles.jsx b/src/components/ProfileBanner/profile/ProfileCardThree/styles.jsx index 6420d25e..be66c5dc 100644 --- a/src/components/ProfileBanner/profile/ProfileCardThree/styles.jsx +++ b/src/components/ProfileBanner/profile/ProfileCardThree/styles.jsx @@ -1,87 +1,87 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - profileCover: { - width: "30vw", - height: "14px", - minHeight: "20px", - position: "relative", - background: "#000", - }, - profileInfo: { - position: "absolute", - left: "15px", - top: "10px", - width: "calc(100% -35px)", - padding: 0, - display: "flex", - flexDirection: "column", - alignItems: "left", - justifyContent: "center", - }, - profileUserImg: { - width: "60px", - height: "60px", - borderRadius: "50%", - objectFit: "cover", - border: "3px solid white", - }, +const useStyles = makeStyles(theme => ({ + profileCover: { + width: "30vw", + height: "14px", + minHeight: "20px", + position: "relative", + background: "#000" + }, + profileInfo: { + position: "absolute", + left: "15px", + top: "10px", + width: "calc(100% -35px)", + padding: 0, + display: "flex", + flexDirection: "column", + alignItems: "left", + justifyContent: "center" + }, + profileUserImg: { + width: "60px", + height: "60px", + borderRadius: "50%", + objectFit: "cover", + border: "3px solid white" + }, - profileInfoName: { - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "28px", - color: "#454545", - fontWeight: "700", - fontSize: "24px", - marginTop: "25px", - paddingTop: "0", - }, + profileInfoName: { + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "28px", + color: "#454545", + fontWeight: "700", + fontSize: "24px", + marginTop: "25px", + paddingTop: "0" + }, - profileSubscribeButton: { - width: "90%", - height: "3rem", - minHeight: "2rem", - background: "#03AAFA", - borderRadius: "10px", - fontFamily: "Roboto", - fontStyle: "normal", - fontWeight: "500", - fontSize: "22px", - lineHeight: "28px", - color: "#FFFFFF", - }, - profileInfoText: { - width: "95%", - marginTop: "1rem", - }, - profileInfoStory: { - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "23px", - color: "#292929", - fontWeight: "400", - fontSize: "19px", - marginTop: "0.5rem", - }, - profileInfoAboutTitle: { - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "19px", - color: "#454545", - fontWeight: "700", - fontSize: "16px", - }, - profileInfoAboutInfo: { - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "19px", - color: "#444444", - fontWeight: "400", - fontSize: "16px", - marginTop: "0.5rem", - paddingTop: "0", - }, + profileSubscribeButton: { + width: "90%", + height: "3rem", + minHeight: "2rem", + background: "#03AAFA", + borderRadius: "10px", + fontFamily: "Roboto", + fontStyle: "normal", + fontWeight: "500", + fontSize: "22px", + lineHeight: "28px", + color: "#FFFFFF" + }, + profileInfoText: { + width: "95%", + marginTop: "1rem" + }, + profileInfoStory: { + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "23px", + color: "#292929", + fontWeight: "400", + fontSize: "19px", + marginTop: "0.5rem" + }, + profileInfoAboutTitle: { + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "19px", + color: "#454545", + fontWeight: "700", + fontSize: "16px" + }, + profileInfoAboutInfo: { + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "19px", + color: "#444444", + fontWeight: "400", + fontSize: "16px", + marginTop: "0.5rem", + paddingTop: "0" + } })); export default useStyles; diff --git a/src/components/ProfileBanner/profile/ProfileCardTwo/index.jsx b/src/components/ProfileBanner/profile/ProfileCardTwo/index.jsx index 3bd410c3..b2de2829 100644 --- a/src/components/ProfileBanner/profile/ProfileCardTwo/index.jsx +++ b/src/components/ProfileBanner/profile/ProfileCardTwo/index.jsx @@ -5,56 +5,60 @@ import Grid from "@mui/material/Grid"; import dp from "../../../../assets/images/demoperson1.jpeg"; export default function ProfileCardTwo({ - profileImage, - name, - followers, - contributors, + profileImage, + name, + followers, + contributors }) { - const classes = useStyles(); - return ( - <> -
-
-
-
- -
-
- - {name} - - - Add Profile Credentials - - - - {contributors} Contributors - - - β€’ {followers} followers - - - - Write a description about yourself - -
-
-
-
- - ); + const classes = useStyles(); + return ( + <> +
+
+
+
+ +
+
+ + {name} + + + Add Profile Credentials + + + + {contributors} Contributors + + + β€’ {followers} followers + + + + Write a description about yourself + +
+
+
+
+ + ); } diff --git a/src/components/ProfileBanner/profile/ProfileCardTwo/styles.jsx b/src/components/ProfileBanner/profile/ProfileCardTwo/styles.jsx index be0c184c..ff8d40e8 100644 --- a/src/components/ProfileBanner/profile/ProfileCardTwo/styles.jsx +++ b/src/components/ProfileBanner/profile/ProfileCardTwo/styles.jsx @@ -1,59 +1,59 @@ import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles((theme) => ({ - profileCover: { - width: "fit-content", - height: "fit-content", - minHeight: "20rem", - position: "relative", - }, +const useStyles = makeStyles(theme => ({ + profileCover: { + width: "fit-content", + height: "fit-content", + minHeight: "20rem", + position: "relative" + }, - profileInfo: { - background: "#ffffff", - display: "flex", - flexDirection: "row", - alignItems: "space-between", - width: "100%", - position: "relative", - padding: "5%", - justifyContent: "center", - }, + profileInfo: { + background: "#ffffff", + display: "flex", + flexDirection: "row", + alignItems: "space-between", + width: "100%", + position: "relative", + padding: "5%", + justifyContent: "center" + }, - profileUserImg: { - width: "150px", - height: "150px", - borderRadius: "50%", - objectFit: "cover", - border: "3px solid white", - }, + profileUserImg: { + width: "150px", + height: "150px", + borderRadius: "50%", + objectFit: "cover", + border: "3px solid white" + }, - profileInfoName: { - width: "25rem", - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "35px", - color: "#000000", - fontWeight: "500", - fontSize: "30px", - }, + profileInfoName: { + width: "25rem", + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "35px", + color: "#000000", + fontWeight: "500", + fontSize: "30px" + }, - profileInfoStory: { - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "22px", - fontSize: "19px", - color: "#878787", - fontWeight: "400", - }, + profileInfoStory: { + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "22px", + fontSize: "19px", + color: "#878787", + fontWeight: "400" + }, - profileInfoData: { - fontFamily: "Roboto", - fontStyle: "normal", - lineHeight: "22px", - fontSize: "19px", - color: "#000000", - fontWeight: "400", - }, + profileInfoData: { + fontFamily: "Roboto", + fontStyle: "normal", + lineHeight: "22px", + fontSize: "19px", + color: "#000000", + fontWeight: "400" + } })); export default useStyles; diff --git a/src/components/Topbar/Activity/index.jsx b/src/components/Topbar/Activity/index.jsx index 07af1202..306e75ea 100644 --- a/src/components/Topbar/Activity/index.jsx +++ b/src/components/Topbar/Activity/index.jsx @@ -8,58 +8,58 @@ import { makeStyles } from "@mui/styles"; import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - justifyContent: "space-between", - flex: 1, - padding: "8px", - alignItems: "center", - }, +const useStyles = makeStyles(theme => ({ + root: { + display: "flex", + justifyContent: "space-between", + flex: 1, + padding: "8px", + alignItems: "center" + } })); function Activity() { - const classes = useStyles(); - const [List, setList] = useState(1); + const classes = useStyles(); + const [List, setList] = useState(1); - const acitvitylist = [ - { - id: 1, - icon: LocalOfferIcon, - text: "Featured", - }, - { - id: 2, - icon: StarBorderIcon, - text: "New", - }, - { - id: 3, - icon: EmojiEventsIcon, - text: "Top", - }, - ]; + const acitvitylist = [ + { + id: 1, + icon: LocalOfferIcon, + text: "Featured" + }, + { + id: 2, + icon: StarBorderIcon, + text: "New" + }, + { + id: 3, + icon: EmojiEventsIcon, + text: "Top" + } + ]; - return ( - - -
- - Activity - - - { - setList(item.id); - }} - acitvitylist={acitvitylist} - /> - -
- - - ); + return ( + + +
+ + Activity + + + { + setList(item.id); + }} + acitvitylist={acitvitylist} + /> + +
+ + + ); } export default Activity; diff --git a/src/components/Topbar/NewCodelabz/index.jsx b/src/components/Topbar/NewCodelabz/index.jsx index 74f350c5..5481e0cc 100644 --- a/src/components/Topbar/NewCodelabz/index.jsx +++ b/src/components/Topbar/NewCodelabz/index.jsx @@ -3,63 +3,65 @@ import { makeStyles } from "@mui/styles"; import React from "react"; import AddBoxRoundedIcon from "@mui/icons-material/AddBoxRounded"; -const useStyles = makeStyles((theme) => ({ - root: { - height: theme.spacing(8), - justifyContent: "flex-start", - alignItems: "center", - display: "flex", - cursor: "pointer", - margin: "0.5rem", - "&:hover": {}, - }, - flex: { - display: "flex", - flexDirection: "row", - }, - iconDiv: { - padding: theme.spacing(1), - }, - title: { - fontWeight: "normal", - fontSize: theme.spacing(2), - }, - description: { - fontSize: theme.spacing(1.5), - }, +const useStyles = makeStyles(theme => ({ + root: { + height: theme.spacing(8), + justifyContent: "flex-start", + alignItems: "center", + display: "flex", + cursor: "pointer", + margin: "0.5rem", + "&:hover": {} + }, + flex: { + display: "flex", + flexDirection: "row" + }, + iconDiv: { + padding: theme.spacing(1) + }, + title: { + fontWeight: "normal", + fontSize: theme.spacing(2) + }, + description: { + fontSize: theme.spacing(1.5) + } })); function NewCodelabz({ setVisibleModal }) { - const classes = useStyles(); + const classes = useStyles(); - return ( - - - - setVisibleModal(true)}> - - - - - New Codelabz - - - Share a tutorial - - - - - - ); + return ( + + + + setVisibleModal(true)} + > + + + + + New Codelabz + + + Share a tutorial + + + + + + ); } export default NewCodelabz; diff --git a/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/TutorialCard.jsx b/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/TutorialCard.jsx index 6a591bb5..6ba03913 100644 --- a/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/TutorialCard.jsx +++ b/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/TutorialCard.jsx @@ -12,55 +12,57 @@ import React from "react"; import { Link } from "react-router-dom"; const TutorialCard = ({ - tutorialData: { tutorial_id, title, summary, icon, owner }, - loading, + tutorialData: { tutorial_id, title, summary, icon, owner }, + loading }) => { - return ( - - - + return ( + + + - - - {title} - - - {title} - - {loading ? : null} - {loading ? : null} - {loading ? : null} - - - - - - - - - - - - - ); + + + {title} + + + {title} + + {loading ? : null} + {loading ? : null} + {loading ? : null} + + + + + + + + + + + + + ); }; export default TutorialCard; diff --git a/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/index.jsx b/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/index.jsx index 2476912c..e1e7aae4 100644 --- a/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/index.jsx +++ b/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/index.jsx @@ -13,59 +13,60 @@ import TutorialCard from "./TutorialCard"; * @constructor */ const BaseTutorialsComponent = ({ owner = "", ownerName = "", users = [] }) => { - let user = useSelector( - ({ - tutorials: { - data: { user }, - }, - }) => user - ); - const org = useSelector( - ({ - tutorials: { - data: { org }, - }, - }) => org - ); - if (!user) user = users; - if (user) { - const index = [...user, ...org]; + let user = useSelector( + ({ + tutorials: { + data: { user } + } + }) => user + ); + const org = useSelector( + ({ + tutorials: { + data: { org } + } + }) => org + ); + if (!user) user = users; + if (user) { + const index = [...user, ...org]; - const index_array = index.filter((e) => e.owner === owner); + const index_array = index.filter(e => e.owner === owner); - return ( -
- - {index_array.map((tutorial, index) => ( - - - - ))} - {index_array.length === 0 && ( - - )} - -
- ); - } else { - return ( - - - - - - ); - } + return ( +
+ + {index_array.map((tutorial, index) => ( + + + + ))} + {index_array.length === 0 && ( + + )} + +
+ ); + } else { + return ( + + + + + + ); + } }; export default BaseTutorialsComponent; diff --git a/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx b/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx index 73eaf26d..d415f218 100644 --- a/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx +++ b/src/components/Tutorials/MyTutorials/Search/SearchResultsComponent.jsx @@ -5,25 +5,25 @@ import React from "react"; import TutorialCard from "../BaseTutorialsComponent/TutorialCard"; const SearchResultsComponent = ({ results }) => { - return ( -
- - - - Search Results - - - {results.map((tutorial, index) => ( - - - - ))} - {results.length === 0 && "No CodeLabz with the given query"} + return ( +
+ + + + Search Results + + + {results.map((tutorial, index) => ( + + + + ))} + {results.length === 0 && "No CodeLabz with the given query"} - - -
- ); + + +
+ ); }; export default SearchResultsComponent; diff --git a/src/components/Tutorials/NewTutorial/index.jsx b/src/components/Tutorials/NewTutorial/index.jsx index ce779097..ac826889 100644 --- a/src/components/Tutorials/NewTutorial/index.jsx +++ b/src/components/Tutorials/NewTutorial/index.jsx @@ -18,7 +18,7 @@ import ImageIcon from "@mui/icons-material/Image"; import DescriptionIcon from "@mui/icons-material/Description"; import MovieIcon from "@mui/icons-material/Movie"; import Select from "react-select"; -import { common } from '@mui/material/colors'; +import { common } from "@mui/material/colors"; const useStyles = makeStyles(theme => ({ root: { @@ -123,7 +123,7 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => { ...formValue, created_by: userHandle, is_org: userHandle !== formValue.owner, - completed: false, + completed: false }; console.log(tutorialData); createTutorial(tutorialData)(firebase, firestore, dispatch, history); @@ -255,12 +255,12 @@ const NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => { onClick={e => onSubmit(e)} data-testid="newTutorialSubmit" sx={{ - bgcolor: '#03AAFA', - borderRadius: '30px', + bgcolor: "#03AAFA", + borderRadius: "30px", color: common.white, - '&:hover': { - bgcolor: '#03AAFA', - }, + "&:hover": { + bgcolor: "#03AAFA" + } }} disabled={ formValue.title === "" || diff --git a/src/components/Tutorials/index.jsx b/src/components/Tutorials/index.jsx index 45338b6e..89ac84e8 100644 --- a/src/components/Tutorials/index.jsx +++ b/src/components/Tutorials/index.jsx @@ -152,10 +152,10 @@ const ViewTutorial = () => { useEffect(() => { if (stepsData) { setTimeRemaining(TutorialTimeRemaining(stepsData, currentStep)); - getCurrentStepContentFromFirestore(tutorial_id, stepsData[currentStep].id)( - firestore, - dispatch - ); + getCurrentStepContentFromFirestore( + tutorial_id, + stepsData[currentStep].id + )(firestore, dispatch); } }, [tutorial_id, firebase, stepsData, currentStep, dispatch]); diff --git a/src/components/Tutorials/subComps/AddNewStep.jsx b/src/components/Tutorials/subComps/AddNewStep.jsx index aa4356c6..79cee322 100644 --- a/src/components/Tutorials/subComps/AddNewStep.jsx +++ b/src/components/Tutorials/subComps/AddNewStep.jsx @@ -9,153 +9,156 @@ import { useFirebase, useFirestore } from "react-redux-firebase"; import { useDispatch, useSelector } from "react-redux"; import { AppstoreAddOutlined } from "@ant-design/icons"; import { - addNewTutorialStep, - clearCreateTutorials, + addNewTutorialStep, + clearCreateTutorials } from "../../../store/actions"; const AddNewStepModal = ({ - viewModal, - viewCallback, - tutorial_id, - steps_length, - owner, + viewModal, + viewCallback, + tutorial_id, + steps_length, + owner }) => { - const firebase = useFirebase(); - const firestore = useFirestore(); - const dispatch = useDispatch(); - const [visible, setVisible] = useState(false); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(false); - const [title, setTitle] = useState(""); - const [time, setTime] = useState(0); + const firebase = useFirebase(); + const firestore = useFirestore(); + const dispatch = useDispatch(); + const [visible, setVisible] = useState(false); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(false); + const [title, setTitle] = useState(""); + const [time, setTime] = useState(0); - useEffect(() => { - clearCreateTutorials()(dispatch); - return () => { - clearCreateTutorials()(dispatch); - }; - }, [dispatch]); + useEffect(() => { + clearCreateTutorials()(dispatch); + return () => { + clearCreateTutorials()(dispatch); + }; + }, [dispatch]); - const loadingProp = useSelector( - ({ - tutorials: { - create: { loading }, - }, - }) => loading - ); - const errorProp = useSelector( - ({ - tutorials: { - create: { error }, - }, - }) => error - ); + const loadingProp = useSelector( + ({ + tutorials: { + create: { loading } + } + }) => loading + ); + const errorProp = useSelector( + ({ + tutorials: { + create: { error } + } + }) => error + ); - useEffect(() => { - setLoading(loadingProp); - }, [loadingProp]); + useEffect(() => { + setLoading(loadingProp); + }, [loadingProp]); - useEffect(() => { - setError(errorProp); - }, [errorProp]); + useEffect(() => { + setError(errorProp); + }, [errorProp]); - useEffect(() => { - setVisible(viewModal); - }, [viewModal]); + useEffect(() => { + setVisible(viewModal); + }, [viewModal]); - useEffect(() => { - if (loading === false && error === false) { - setVisible(false); - clearCreateTutorials()(dispatch); - } - }, [loading, error, dispatch]); + useEffect(() => { + if (loading === false && error === false) { + setVisible(false); + clearCreateTutorials()(dispatch); + } + }, [loading, error, dispatch]); - const onSubmit = (e) => { - e.preventDefault(); + const onSubmit = e => { + e.preventDefault(); - const formData = { - title, - time, - }; - const set_data = { - ...formData, - id: `${tutorial_id}_${new Date().getTime()}`, - tutorial_id, - owner, - }; - addNewTutorialStep(set_data)(firebase, firestore, dispatch); - }; + const formData = { + title, + time + }; + const set_data = { + ...formData, + id: `${tutorial_id}_${new Date().getTime()}`, + tutorial_id, + owner + }; + addNewTutorialStep(set_data)(firebase, firestore, dispatch); + }; - const handleCancel = () => { - setVisible(false); - }; + const handleCancel = () => { + setVisible(false); + }; - return ( - viewCallback()} - onOk={() => viewCallback()} - footer={false} - destroyOnClose={true} - maskClosable={false} - style={{ - display: "flex", - alignItems: "center", - justifyContent: "center", - }}> - - {error && ( - - )} -
- - } - onChange={(e) => setTitle(e.target.value)} - placeholder="Title of the Step" - autoComplete="title" - style={{ marginBottom: "2rem" }} - data-testid={"newStepTitleInput"} - /> - setTime(e.target.value)} - placeholder="Time (minutes)" - style={{ width: "100%" }} - data-testid={"newStepTimeInput"} - /> - - - -
- - ); + return ( + viewCallback()} + onOk={() => viewCallback()} + footer={false} + destroyOnClose={true} + maskClosable={false} + style={{ + display: "flex", + alignItems: "center", + justifyContent: "center" + }} + > + + {error && ( + + )} +
+ + } + onChange={e => setTitle(e.target.value)} + placeholder="Title of the Step" + autoComplete="title" + style={{ marginBottom: "2rem" }} + data-testid={"newStepTitleInput"} + /> + setTime(e.target.value)} + placeholder="Time (minutes)" + style={{ width: "100%" }} + data-testid={"newStepTimeInput"} + /> + + + +
+ + ); }; export default AddNewStepModal; diff --git a/src/components/Tutorials/subComps/ColorPickerModal.jsx b/src/components/Tutorials/subComps/ColorPickerModal.jsx index ed47a0a8..38538d87 100644 --- a/src/components/Tutorials/subComps/ColorPickerModal.jsx +++ b/src/components/Tutorials/subComps/ColorPickerModal.jsx @@ -8,99 +8,103 @@ import { useDispatch } from "react-redux"; import { setTutorialTheme } from "../../../store/actions"; const ColorPickerModal = ({ visible, visibleCallback, tutorial_id, owner }) => { - const [bgColor, setBgColor] = useState("#ffffff"); - const [textColor, setTextColor] = useState("#000000"); - const [loading, setLoading] = useState(false); - const firebase = useFirebase(); - const firestore = useFirestore(); - const dispatch = useDispatch(); + const [bgColor, setBgColor] = useState("#ffffff"); + const [textColor, setTextColor] = useState("#000000"); + const [loading, setLoading] = useState(false); + const firebase = useFirebase(); + const firestore = useFirestore(); + const dispatch = useDispatch(); - const handleOk = () => { - setLoading(true); - setTutorialTheme({ tutorial_id, owner, bgColor, textColor })( - firebase, - firestore, - dispatch - ).then(() => { - setLoading(false); - visibleCallback(false); - }); - }; + const handleOk = () => { + setLoading(true); + setTutorialTheme({ tutorial_id, owner, bgColor, textColor })( + firebase, + firestore, + dispatch + ).then(() => { + setLoading(false); + visibleCallback(false); + }); + }; - const handleCancel = () => { - visibleCallback(false); - }; + const handleCancel = () => { + visibleCallback(false); + }; - const updateTextColor = (color) => { - setTextColor(color.color); - }; + const updateTextColor = color => { + setTextColor(color.color); + }; - const updateBackgroundColor = (color) => { - setBgColor(color.color); - }; + const updateBackgroundColor = color => { + setBgColor(color.color); + }; - return ( -
- - - - -

Text Color

-
- -
- - -

Background Color

-
- -
- - + return ( +
+ + + + +

Text Color

+
+ +
+ + +

Background Color

+
+ +
+ + - - - Change the values above to see the preview - - - - -
- ); + + + Change the values above to see the preview + + + + +
+ ); }; export default ColorPickerModal; diff --git a/src/components/Tutorials/subComps/ControlButtons.jsx b/src/components/Tutorials/subComps/ControlButtons.jsx index 2c942ebc..19e0a697 100644 --- a/src/components/Tutorials/subComps/ControlButtons.jsx +++ b/src/components/Tutorials/subComps/ControlButtons.jsx @@ -24,7 +24,7 @@ const useStyles = makeStyles(theme => ({ "&:hover": { borderWidth: "2px" }, - minWidth: "fit-content", + minWidth: "fit-content" }, completeButton: { minWidth: "fit-content" diff --git a/src/components/Tutorials/subComps/EditControls.jsx b/src/components/Tutorials/subComps/EditControls.jsx index 73841d12..ecc5a751 100644 --- a/src/components/Tutorials/subComps/EditControls.jsx +++ b/src/components/Tutorials/subComps/EditControls.jsx @@ -44,15 +44,15 @@ const EditControls = ({ const [viewRemoveStepModal, setViewRemoveStepModal] = useState(false); const [viewColorPickerModal, setViewColorPickerModal] = useState(false); const DropdownMenu = () => { - const [anchorEl, setAnchorEl] = React.useState(null); + const [anchorEl, setAnchorEl] = React.useState(null); - const handleClick = event => { - setAnchorEl(event.currentTarget); - }; + const handleClick = event => { + setAnchorEl(event.currentTarget); + }; - const handleClose = () => { - setAnchorEl(null); - }; + const handleClose = () => { + setAnchorEl(null); + }; return ( <> @@ -104,8 +104,12 @@ const EditControls = ({ }; const handlePublishTutorial = () => { - publishUnpublishTutorial(owner, tutorial_id, isPublished)(firebase, firestore, dispatch); - } + publishUnpublishTutorial(owner, tutorial_id, isPublished)( + firebase, + firestore, + dispatch + ); + }; return ( <> @@ -225,7 +229,11 @@ const EditControls = ({ Preview mode )} - diff --git a/src/components/Tutorials/subComps/HtmlTextRenderer.jsx b/src/components/Tutorials/subComps/HtmlTextRenderer.jsx index a035c7f9..9668b2b5 100644 --- a/src/components/Tutorials/subComps/HtmlTextRenderer.jsx +++ b/src/components/Tutorials/subComps/HtmlTextRenderer.jsx @@ -2,7 +2,7 @@ import React from "react"; import DOMPurify from "dompurify"; const HtmlTextRenderer = ({ html = "

Html Text Renderer

" }) => { - // used to remove any sensitive tags like