├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_report.md ├── pull_request_template.md └── workflows │ └── node.js.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── Project_Board.md ├── README.md ├── REQUIREMENTS.md ├── Reviewers.md ├── SECURITY.md ├── STYLE_GUIDE.md ├── TASKS-UPDATES.md ├── frontend ├── .env.example ├── .gitignore ├── .prettierrc ├── .stylelintrc ├── README.md ├── cypress.json ├── cypress │ ├── fixtures │ │ └── example.json │ ├── integration │ │ └── sample_spec.js │ ├── plugins │ │ └── index.js │ └── support │ │ ├── commands.js │ │ └── index.js ├── package-lock.json ├── package.json ├── public │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon-precomposed.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── mstile-150x150.png │ ├── robots.txt │ └── safari-pinned-tab.svg └── src │ ├── App.js │ ├── __tests__ │ └── components │ │ └── CreatePost.test.js │ ├── actions │ ├── appActions.js │ ├── articleActions.js │ ├── authActions.js │ ├── local.js │ ├── notificationsActions.js │ ├── postActions.js │ └── userActions.js │ ├── assets │ ├── images │ │ ├── Dennis.jpg │ │ ├── forgotpwd-svg.svg │ │ ├── hero-dark.svg │ │ ├── hero-light.svg │ │ ├── mailbox.svg │ │ └── screenshot.PNG │ └── logo │ │ ├── dark-logo-login.png │ │ ├── dark-logo.png │ │ └── light-logo.png │ ├── common │ ├── AuthorBox.js │ ├── Avatar.js │ ├── Button.js │ ├── Card.js │ ├── Input.js │ ├── InputChoice.js │ ├── Loading.js │ ├── Message.js │ ├── Modal.js │ ├── ModalContentAction.js │ ├── Tag.js │ ├── TagInput.js │ ├── TextArea.js │ ├── VotingWidget.js │ └── index.js │ ├── components │ ├── ArticlesCard.js │ ├── Contributors.js │ ├── CreateMessageModal.js │ ├── CreatePost.js │ ├── DiscussionsCard.js │ ├── FeedCard.js │ ├── FollowButton.js │ ├── Header.js │ ├── LoginForm.js │ ├── Notification.js │ ├── Page.js │ ├── PostAction.js │ ├── PostCard.js │ ├── PostCardOptions.js │ ├── PostCardPlaceholder.js │ ├── ProfilePicCropperModal.js │ ├── RestoreScroll.js │ ├── SearchBox.js │ ├── SearchByArticlesList.js │ ├── SearchByInterestsList.js │ ├── SearchByPanel.js │ ├── SearchByPostsList.js │ ├── SearchBySkillsList.js │ ├── SearchByUsersList.js │ ├── SidebarNav.js │ ├── SignupForm.js │ ├── SkillList.js │ ├── SkillTags.js │ ├── TopicTags.js │ ├── UserCard.js │ ├── UserCardPlaceholder.js │ ├── UserSettingModalContent.js │ ├── UserSettingUpdateModal.js │ └── index.js │ ├── constants │ ├── appConstants.js │ ├── articleConstants.js │ ├── authConstants.js │ ├── localConstants.js │ ├── notificationsConstants.js │ ├── postConstants.js │ └── userConstants.js │ ├── data │ ├── articles.js │ ├── discussions.js │ ├── images │ │ ├── abhijit.png │ │ ├── cody.png │ │ ├── default.png │ │ ├── dennis.jpg │ │ ├── mani.png │ │ ├── mehdi.png │ │ ├── mohammad.png │ │ ├── peng.png │ │ ├── samthefam.png │ │ ├── shahriar.png │ │ ├── sulamita.png │ │ ├── ujjawal.png │ │ └── zach.png │ ├── index.js │ ├── interests.js │ ├── notifications.js │ ├── posts.js │ ├── skills.js │ └── users.js │ ├── hooks │ ├── index.js │ ├── useForm.js │ ├── useLocationBlocker.js │ └── useValidationForm.js │ ├── index.js │ ├── pages │ ├── ArticlePage.js │ ├── ArticlesPage.js │ ├── CreateArticlePage.js │ ├── CreateDiscussionPage.js │ ├── DeleteAccountPage.js │ ├── DiscussionPage.js │ ├── Error404Page.js │ ├── Error500Page.js │ ├── ForgotPasswordPage.js │ ├── HomePage.js │ ├── InboxPage.js │ ├── LoginSignupPage.js │ ├── LogoutConfirmation.js │ ├── NotificationsPage.js │ ├── ProfilePage.js │ ├── SearchPage.js │ ├── TagsPage.js │ ├── UserSettingsPage.js │ └── index.js │ ├── reducers │ ├── articleReducer.js │ ├── auth.js │ ├── index.js │ ├── local.js │ ├── notificationsReducer.js │ ├── postReducers.js │ ├── searchBarReducer.js │ └── userReducers.js │ ├── reportWebVitals.js │ ├── services │ ├── articlesService.js │ ├── authService.js │ ├── config.js │ ├── index.js │ ├── messageService.js │ ├── notificationsService.js │ ├── postsService.js │ └── usersService.js │ ├── setupTests.js │ ├── store.js │ ├── styles │ ├── App.css │ ├── common │ │ ├── _animation.css │ │ ├── _author-box.css │ │ ├── _avatar.css │ │ ├── _base.css │ │ ├── _button.css │ │ ├── _card.css │ │ ├── _form.css │ │ ├── _loading.css │ │ ├── _message.css │ │ ├── _page.css │ │ ├── _tag-input.css │ │ ├── _tag.css │ │ ├── _toastify.css │ │ ├── _typography.css │ │ ├── _utilities.css │ │ └── _variables.css │ ├── components │ │ ├── ArticlePage.css │ │ ├── CreateArticlePage.css │ │ ├── CreateDiscussionPage.css │ │ ├── CreatePost.css │ │ ├── DeleteAccountPage.css │ │ ├── DiscussionPage.css │ │ ├── Error404Page.css │ │ ├── Error500Page.css │ │ ├── Feed.css │ │ ├── ForgotPasswordPage.css │ │ ├── HeaderBar.css │ │ ├── HomePage.css │ │ ├── InboxPage.css │ │ ├── LoginOrSignUp.css │ │ ├── LogoutConfirmation.css │ │ ├── Modal.css │ │ ├── NotificationPage.css │ │ ├── NotificationTitle.css │ │ ├── PostCardOptions.css │ │ ├── PostCardPlaceholder.css │ │ ├── ProfilePage.css │ │ ├── SearchBox.css │ │ ├── SearchByPanel.css │ │ ├── SearchByUsersAndPostList.css │ │ ├── SearchPage.css │ │ ├── SidebarNav.css │ │ ├── UserCard.css │ │ └── UserSettingsPage.css │ └── index.css │ ├── uikit │ ├── index.html │ ├── scripts │ │ └── app.js │ └── styles │ │ ├── app.css │ │ └── modules │ │ ├── _codeblock.css │ │ └── _page.css │ └── utilities │ ├── PrivateRoute.js │ ├── RouteHandler.js │ ├── formatDate.js │ ├── getImageUrl.js │ └── index.js └── images ├── activate-project.gif ├── dark-logo.png ├── discussion-page-lightmode.PNG ├── login-page-darkmode.png ├── login-page-lightmode.PNG ├── mumble-ui-kit.png ├── profile-page-lightmode.PNG ├── project-board.gif ├── projects-icon.PNG ├── user-feed-darkmode.png └── user-feed-lightmode.png /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: "Use this template to report a bug you found in Mumble" 4 | title: '' 5 | labels: "bug" 6 | assignees: '' 7 | 8 | --- 9 | 10 | ### Preflight Checklist 11 | 12 | 13 | * [ ] I have searched the issue tracker for an issue that matches the one I want to file, without success. 14 | 15 | # 16 | 17 | ### Describe the bug 18 | 19 | A clear and concise description of what the bug is. 20 | 21 | # 22 | 23 | ### To Reproduce 24 | 25 | Steps to reproduce the behavior: 26 | 27 | 1. Go to '...' 28 | 2. Click on '....' 29 | 3. Scroll down to '....' 30 | 4. See error 31 | 32 | # 33 | 34 | ### Expected behavior 35 | 36 | A clear and concise description of what you expected to happen. 37 | 38 | # 39 | 40 | ### Add additional instructions and considerations for the assignee 41 | 42 | - [ ] Jupiter 43 | 44 | - [ ] Saturn 45 | 46 | - [ ] Neptune 47 | 48 | # 49 | 50 | ### Screenshots 51 | 52 | If applicable, add screenshots to help explain your problem. 53 | 54 | # 55 | 56 | ### Additional context 57 | 58 | Add any other context about the problem here (include commit numbers and branches if relevant) -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature/Enhancement request 3 | about: Suggest an idea for this project 4 | title: "" 5 | labels: feature, enhancement 6 | assignees: "" 7 | --- 8 | 9 | ### Is your feature request related to a problem? Please describe. 10 | 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | # 14 | 15 | ### Describe the solution you'd like 16 | 17 | A clear and concise description of what you want to happen. 18 | 19 | # 20 | 21 | ### Describe alternatives you've considered 22 | 23 | A clear and concise description of any alternative solutions or features you've considered. 24 | 25 | # 26 | 27 | ### Add additional instructions and considerations for the assignee 28 | 29 | - [ ] Jupiter 30 | 31 | - [ ] Saturn 32 | 33 | - [ ] Neptune 34 | 35 | # 36 | 37 | ### Additional context 38 | 39 | Add any other context such as screenshots, schematics, about the feature request here. -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ### Well detailed description of the change : 10 | 11 | 12 | 13 | I worked on the ..... 14 | 15 | # 16 | 17 | ### Context of the change : 18 | 19 | 20 | 21 | - Why is this change required ? 22 | 23 | 24 | 25 | - Does it solve a problem ? (please link the issue) 26 | 27 | # 28 | 29 | ### Type of change : 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | - [ ] Bug fix 39 | 40 | - [ ] New feature 41 | 42 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 43 | 44 | # 45 | 46 | ### Preview (Screenshots) : 47 | 48 | 49 | 50 | 51 | 52 |

If it is possible, please link screenshots of your changes preview ! 53 |

54 | 55 | # 56 | 57 | ### Checklist: 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | - [ ] I have read the **CONTRIBUTING** document. 66 | - [ ] My code follows the **STYLE_GUIDE** of this project 67 | - [ ] I have performed a self-review of my own code 68 | - [ ] I have commented my code, particularly in hard-to-understand areas 69 | - [ ] My changes generate no new warnings 70 | - [ ] I have added tests that prove my fix is effective or that my feature works 71 | - [ ] All new and existing tests passed. 72 | 73 | # 74 | 75 | ### Reviewers 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: [master] 9 | pull_request: 10 | branches: [master] 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | 16 | strategy: 17 | matrix: 18 | node-version: [14.x, 15.x] 19 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 20 | 21 | steps: 22 | - uses: actions/checkout@v2 23 | 24 | - name: Use Node.js ${{ matrix.node-version }} 25 | uses: actions/setup-node@v1 26 | with: 27 | node-version: ${{ matrix.node-version }} 28 | 29 | - name: Installing node dependencies 30 | run: npm ci 31 | working-directory: ./frontend 32 | 33 | - name: Running ESLint Linter 34 | run: npm run lint --if-present 35 | working-directory: ./frontend 36 | 37 | - name: Running Stylelint 38 | run: npm run stylelint --if-present 39 | working-directory: ./frontend 40 | 41 | - name: Running Prettier Code Formatter 42 | run: npm run format:check --if-present 43 | working-directory: ./frontend 44 | 45 | - name: Performing React build 46 | run: npm run build --if-present 47 | working-directory: ./frontend 48 | 49 | - name: Performing React tests if any defined 50 | run: npm test 51 | working-directory: ./frontend 52 | 53 | # - name: Cypress run 54 | # uses: cypress-io/github-action@v2 55 | # with: 56 | # working-directory: ./frontend 57 | # start: npm start 58 | -------------------------------------------------------------------------------- /Project_Board.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 |
4 | 5 | 6 |

7 | Project Board in MUMBLE 8 |

9 | 10 | ![Mumble Community](https://img.shields.io/discord/825371211399692308?label=Mumble%20Community&style=for-the-badge&logo=Discord) 11 | ![Mumble](https://img.shields.io/badge/Mumble-Live%20Demo-9cf?style=for-the-badge) 12 | ![Mumble UI Kit](https://img.shields.io/badge/Mumble-UI%20Kit-orange?style=for-the-badge) 13 | 14 |
15 | 16 | 17 | ### Project Board 18 | 19 | In our repository, there is a project board named Tasks - Mumble, it helps moderators to see how is the work going. 20 |
21 | 22 | *Preview :* 23 | 24 | 25 | 26 | 27 | # 28 | 29 | ### So please, while submitting a PR or Issue, make sure to : 30 | 31 |
32 | 33 | -------------------------------------------------------------------------------- /Reviewers.md: -------------------------------------------------------------------------------- 1 | # 2 | 3 |
4 | 5 |

Reviewers at Mumble Repository

6 | 7 | ![Mumble](https://img.shields.io/badge/Mumble-Live%20Demo-9cf?style=for-the-badge) 8 | ![Mumble UI Kit](https://img.shields.io/badge/Mumble-UI%20Kit-orange?style=for-the-badge) 9 | ![Mumble Community](https://img.shields.io/discord/825371211399692308?label=Mumble%20Community&style=for-the-badge&logo=Discord) 10 | 11 |
12 | 13 |
14 | 15 | After submitting your PR, please tag reviewer(s) in your PR message. You can tag anyone below for the following. 16 | 17 |
18 | 19 | - **Markdown, Documentation, Email templates:** 20 | 21 | [@Mehdi - MidouWebDev](https://github.com/MidouWebDev) 22 | 23 | # 24 | 25 | - **Frontend, Design :** 26 | 27 | --> *Choose two reviewers :* 28 | 29 | [@Dennis Ivy](https://github.com/divanov11) 30 | 31 | [@Shahriar Parvez](https://github.com/Mr-spShuvo) 32 | 33 | [@Cody Seibert](https://github.com/codyseibert) 34 | 35 | [@Mehdi - MidouWebDev](https://github.com/MidouWebDev) 36 | 37 | # 38 | 39 | ### Need Help ? 40 | 41 | Join us in **[the Discord Server](https://discord.gg/9Du4KUY3dE)** and tag the Mumble Repo-Managers in the correct channel. -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # 2 |
3 | 4 |

Security at Mumble

5 | 6 | ![Mumble Community](https://img.shields.io/discord/825371211399692308?label=Mumble%20Community&style=for-the-badge&logo=Discord) 7 | ![Mumble](https://img.shields.io/badge/Mumble-Live%20Demo-9cf?style=for-the-badge) 8 | ![Mumble UI Kit](https://img.shields.io/badge/Mumble-UI%20Kit-orange?style=for-the-badge) 9 | 10 |
11 | 12 | ### Reporting a Vulnerability : 13 | 14 | To report a security vulnerability, please : 15 |
16 | 17 | - DM the Mumble Bot in our Discord Server 18 | - Or tell us the problem at #security-vulnerabilities 19 | 20 |
21 | 22 | *You will receive a response from us *(Moderators and Git Repo Managers)* within 24 hours* 23 | 24 | # 25 | 26 | ### Join the Mumble Community : 27 | 28 | Join our Discord Server : 29 | -------------------------------------------------------------------------------- /TASKS-UPDATES.md: -------------------------------------------------------------------------------- 1 | # Status 2 | 3 | Note: I am uploading the code before I feel ready but I will be traveling all day tommarrow (4/1) and want everyone to have a chance to see it. Will be back at it in a day or two. Here are the area's that are incomplete at the moment. 4 | 5 | * Account settings page (src/pages/UserSettings.js) - I slapped this page together but I am open to a complete re-build. I think it looks terrible at the moment but if someone wants to keep the layout I am up for a complete re-build. 6 | * Responsiveness - I have not added any Responsiveness to the site yet but will get to that once all page layouts are complete -Asigned to:DENNIS 7 | * Discussions Page (src/pages/Discussion.js) - Page design is mostly complete but the code is clunky. Needed a re-build to clean things up and keep format 8 | * Post Comments - Need to create a comment component for posts and discussions. Layout is 30% of the way there but needs work 9 | * CSS - I have been working with a few people on the UI kit along with adding styling to the website. At some point we will need to go back through and separate all the CSS code and clean up the formatting 10 | 11 | 12 | # Pages & Components Needed: 13 | * Users Search page - Find all users on platform by name, username & interests 14 | * Topic search page - Search topics and add them to your list of interests 15 | * Article page 16 | * Header Bar - Asigned to:DENNIS 17 | * Notifications dropdown option 18 | 19 | # Action Plan 20 | 21 | At this point it looks like I'll need another day or two to to get the front end finished up. Once thats done I will spend a few days building out the database and API so we can start implementing both sides. 22 | -------------------------------------------------------------------------------- /frontend/.env.example: -------------------------------------------------------------------------------- 1 | # Rename this file to .env.example to .env and add corresponding values 👇 2 | 3 | REACT_APP_API_ENDPOINT= # 👈 set api url here -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | /cypress/videos 9 | # testing 10 | /coverage 11 | 12 | # production 13 | #/build 14 | 15 | # misc 16 | .DS_Store 17 | .env 18 | .env.local 19 | .env.development.local 20 | .env.test.local 21 | .env.production.local 22 | 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | yarn.lock 27 | -------------------------------------------------------------------------------- /frontend/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "endOfLine": "lf", 5 | "jsxBracketSameLine": false, 6 | "printWidth": 100, 7 | "semi": true, 8 | "singleQuote": true, 9 | "tabWidth": 2, 10 | "trailingComma": "all", 11 | "useTabs": false 12 | } 13 | -------------------------------------------------------------------------------- /frontend/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard" 3 | } -------------------------------------------------------------------------------- /frontend/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:3000" 3 | } 4 | -------------------------------------------------------------------------------- /frontend/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /frontend/cypress/integration/sample_spec.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | 3 | describe( 4 | 'Basic Navigation', 5 | { 6 | viewportWidth: 1400, 7 | viewportHeight: 700, 8 | }, 9 | () => { 10 | it('can navigate to the login page', () => { 11 | cy.visit('/login'); 12 | }); 13 | 14 | it('can load the dashboard', () => { 15 | cy.visit('/'); 16 | }); 17 | 18 | it('can navigate to the settings page via the profile dropdown', () => { 19 | cy.get('#nav-toggle-icon').click(); 20 | cy.get('#user-settings').click(); 21 | cy.url().should('include', '/settings'); 22 | }); 23 | }, 24 | ); 25 | -------------------------------------------------------------------------------- /frontend/cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | /// 2 | // *********************************************************** 3 | // This example plugins/index.js can be used to load plugins 4 | // 5 | // You can change the location of this file or turn off loading 6 | // the plugins file with the 'pluginsFile' configuration option. 7 | // 8 | // You can read more here: 9 | // https://on.cypress.io/plugins-guide 10 | // *********************************************************** 11 | 12 | // This function is called when a project is opened or re-opened (e.g. due to 13 | // the project's config changing) 14 | 15 | /** 16 | * @type {Cypress.PluginConfig} 17 | */ 18 | // eslint-disable-next-line no-unused-vars 19 | module.exports = (on, config) => { 20 | // `on` is used to hook into various events Cypress emits 21 | // `config` is the resolved Cypress config 22 | } 23 | -------------------------------------------------------------------------------- /frontend/cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add('login', (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /frontend/cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "proxy": "https://mumbleapi.herokuapp.com/", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@ckeditor/ckeditor5-build-classic": "^27.0.0", 8 | "@ckeditor/ckeditor5-react": "^3.0.2", 9 | "@testing-library/jest-dom": "^5.11.10", 10 | "@testing-library/react": "^11.2.5", 11 | "@testing-library/user-event": "^12.8.3", 12 | "axios": "^0.21.1", 13 | "classnames": "^2.3.1", 14 | "date-fns": "^2.19.0", 15 | "jwt-decode": "^3.1.2", 16 | "lodash": "^4.17.21", 17 | "prop-types": "^15.7.2", 18 | "react": "^17.0.2", 19 | "react-detect-click-outside": "^1.0.7", 20 | "react-dom": "^17.0.2", 21 | "react-error-boundary": "^3.1.1", 22 | "react-image-crop": "^8.6.6", 23 | "react-linkify": "^1.0.0-alpha", 24 | "react-placeholder": "^4.1.0", 25 | "react-redux": "^7.2.3", 26 | "react-router-dom": "^5.2.0", 27 | "react-scripts": "4.0.3", 28 | "react-toastify": "^7.0.3", 29 | "redux-devtools-extension": "^2.13.9", 30 | "redux-thunk": "^2.3.0", 31 | "web-vitals": "^1.1.1" 32 | }, 33 | "scripts": { 34 | "start": "react-scripts start", 35 | "start:local": "REACT_APP_API_ENDPOINT=http://127.0.0.1:8000 react-scripts start", 36 | "build": "react-scripts build", 37 | "test": "react-scripts test", 38 | "eject": "react-scripts eject", 39 | "lint": "eslint ./src", 40 | "cypress": "cypress run", 41 | "cypress:open": "cypress open", 42 | "format": "prettier --write \"src/**/*.(js|jsx|ts|tsx|css|scss)\"", 43 | "format:check": "prettier -c \"src/**/*.(js|jsx|ts|tsx|css|scss)\"", 44 | "stylelint": "stylelint \"src/**/*.css\"", 45 | "stylelint:fix": "stylelint \"src/**/*.css\" --fix" 46 | }, 47 | "eslintConfig": { 48 | "extends": [ 49 | "react-app", 50 | "react-app/jest", 51 | "plugin:react/recommended" 52 | ], 53 | "rules": { 54 | "react/prop-types": [ 55 | "off" 56 | ], 57 | "react/react-in-jsx-scope": [ 58 | "off" 59 | ] 60 | } 61 | }, 62 | "browserslist": { 63 | "production": [ 64 | ">0.2%", 65 | "not dead", 66 | "not op_mini all" 67 | ], 68 | "development": [ 69 | "last 1 chrome version", 70 | "last 1 firefox version", 71 | "last 1 safari version" 72 | ] 73 | }, 74 | "devDependencies": { 75 | "cypress": "^6.8.0", 76 | "eslint-plugin-react": "^7.23.1", 77 | "prettier": "^2.2.1", 78 | "stylelint": "^13.12.0", 79 | "stylelint-config-standard": "^21.0.0", 80 | "typescript": "^4.2.3" 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /frontend/public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /frontend/public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /frontend/public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/public/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /frontend/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/public/apple-touch-icon.png -------------------------------------------------------------------------------- /frontend/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /frontend/public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/public/favicon-16x16.png -------------------------------------------------------------------------------- /frontend/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/public/favicon-32x32.png -------------------------------------------------------------------------------- /frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/public/favicon.ico -------------------------------------------------------------------------------- /frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | Mumble 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /frontend/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Mumble", 3 | "name": "Mumble", 4 | "icons": [ 5 | { 6 | "src": "favicon-16x16.png", 7 | "sizes": "16x16", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "favicon-32x32.png", 12 | "sizes": "32x32", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "android-chrome-192x192.png", 17 | "type": "image/png", 18 | "sizes": "192x192" 19 | }, 20 | { 21 | "src": "android-chrome-512x512.png", 22 | "type": "image/png", 23 | "sizes": "512x512" 24 | } 25 | ], 26 | "start_url": ".", 27 | "display": "standalone", 28 | "theme_color": "#000000", 29 | "background_color": "#ffffff" 30 | } 31 | -------------------------------------------------------------------------------- /frontend/public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/public/mstile-150x150.png -------------------------------------------------------------------------------- /frontend/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /frontend/public/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 25 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /frontend/src/__tests__/components/CreatePost.test.js: -------------------------------------------------------------------------------- 1 | import { fireEvent, render, screen } from '@testing-library/react'; 2 | import { Provider } from 'react-redux'; 3 | import { BrowserRouter } from 'react-router-dom'; 4 | import CreatePost from '../../components/CreatePost'; 5 | import store from '../../store'; 6 | 7 | test('renders MUMBLE link', () => { 8 | render( 9 | 10 | 11 | 12 | 13 | , 14 | , 15 | ); 16 | const buttonElement = screen.getByText(/Mumble Now/); 17 | fireEvent( 18 | buttonElement, 19 | new MouseEvent('click', { 20 | bubbles: true, 21 | cancelable: true, 22 | }), 23 | ); 24 | const errorWarning = screen.getByText(/Post cannot be empty!/); 25 | expect(errorWarning).toBeInTheDocument(); 26 | }); 27 | -------------------------------------------------------------------------------- /frontend/src/actions/appActions.js: -------------------------------------------------------------------------------- 1 | import { SEARCH_BAR_TYPED } from '../constants/appConstants'; 2 | 3 | export const searchBarTyped = (keyword = '') => async (dispatch) => { 4 | dispatch({ type: SEARCH_BAR_TYPED, payload: keyword }); 5 | }; 6 | -------------------------------------------------------------------------------- /frontend/src/actions/articleActions.js: -------------------------------------------------------------------------------- 1 | import { 2 | ARTICLE_CREATE_REQUEST, 3 | ARTICLE_CREATE_SUCCESS, 4 | ARTICLE_CREATE_FAIL, 5 | ARTICLE_GET_FAIL, 6 | ARTICLE_GET_SUCCESS, 7 | ARTICLE_GET_REQUEST, 8 | ARTICLE_SEARCH_REQUEST, 9 | ARTICLE_SEARCH_SUCCESS, 10 | ARTICLE_SEARCH_FAIL, 11 | ARTICLE_SEARCH_RESET, 12 | } from '../constants/articleConstants'; 13 | import { ArticlesService } from '../services'; 14 | import { createActionPayload } from './postActions'; 15 | 16 | export const searchArticles = (keyword = '') => async (dispatch) => { 17 | try { 18 | dispatch({ type: ARTICLE_SEARCH_REQUEST }); 19 | 20 | const data = await ArticlesService.getArticlesByKeyword(keyword); 21 | 22 | dispatch({ 23 | type: ARTICLE_SEARCH_SUCCESS, 24 | payload: data, 25 | }); 26 | } catch (error) { 27 | dispatch(createActionPayload(ARTICLE_SEARCH_FAIL, error)); 28 | } 29 | }; 30 | 31 | export const createArticle = (articleData, history) => async (dispatch, getState) => { 32 | try { 33 | dispatch({ type: ARTICLE_CREATE_REQUEST }); 34 | 35 | // hard coding tags for now because backend api requires it 36 | const article = await ArticlesService.createArticle({ ...articleData, tags: '' }); 37 | 38 | dispatch({ 39 | type: ARTICLE_CREATE_SUCCESS, 40 | payload: article, 41 | }); 42 | 43 | history.push(`/article/${article.id}`); 44 | } catch (error) { 45 | dispatch(createActionPayload(ARTICLE_CREATE_FAIL, error)); 46 | } 47 | }; 48 | 49 | export const resetSearchArticles = () => async (dispatch) => { 50 | dispatch({ 51 | type: ARTICLE_SEARCH_RESET, 52 | }); 53 | }; 54 | 55 | export const getArticle = (articleId) => async (dispatch, getState) => { 56 | try { 57 | dispatch({ type: ARTICLE_GET_REQUEST }); 58 | 59 | const article = await ArticlesService.getArticle(articleId); 60 | 61 | dispatch({ 62 | type: ARTICLE_GET_SUCCESS, 63 | payload: article, 64 | }); 65 | } catch (error) { 66 | dispatch(createActionPayload(ARTICLE_GET_FAIL, error)); 67 | } 68 | }; 69 | -------------------------------------------------------------------------------- /frontend/src/actions/authActions.js: -------------------------------------------------------------------------------- 1 | import { 2 | LOGIN_REQUEST, 3 | LOGIN_SUCCESS, 4 | LOGIN_FAIL, 5 | LOGOUT_REQUEST, 6 | LOGOUT_SUCCESS, 7 | LOGOUT_FAIL, 8 | REGISTER_REQUEST, 9 | REGISTER_SUCCESS, 10 | REGISTER_FAIL, 11 | REFRESH_TOKEN_SUCCESS, 12 | } from '../constants/authConstants'; 13 | import authService from '../services/authService'; 14 | import { createActionPayload } from './postActions'; 15 | 16 | export const login = (loginCredentials) => async (dispatch) => { 17 | try { 18 | dispatch({ type: LOGIN_REQUEST }); 19 | 20 | const tokens = await authService.login(loginCredentials); 21 | 22 | dispatch({ 23 | type: LOGIN_SUCCESS, 24 | payload: tokens, 25 | }); 26 | } catch (error) { 27 | dispatch(createActionPayload(LOGIN_FAIL, error)); 28 | } 29 | }; 30 | 31 | export const logout = () => async (dispatch) => { 32 | try { 33 | dispatch({ type: LOGOUT_REQUEST }); 34 | dispatch({ type: LOGOUT_SUCCESS }); 35 | } catch (error) { 36 | dispatch(createActionPayload(LOGOUT_FAIL, error)); 37 | } 38 | }; 39 | 40 | export const register = (inputs) => async (dispatch) => { 41 | try { 42 | dispatch({ 43 | type: REGISTER_REQUEST, 44 | }); 45 | 46 | const data = await authService.register(inputs); 47 | 48 | dispatch({ 49 | type: REGISTER_SUCCESS, 50 | payload: data, 51 | }); 52 | 53 | dispatch({ 54 | type: LOGIN_SUCCESS, 55 | payload: data, 56 | }); 57 | } catch (error) { 58 | dispatch(createActionPayload(REGISTER_FAIL, error)); 59 | } 60 | }; 61 | 62 | export const refreshToken = () => async (dispatch, getState) => { 63 | try { 64 | const { auth } = getState(); 65 | 66 | let { access } = await authService.refreshToken(auth.refresh); 67 | 68 | dispatch({ 69 | type: REFRESH_TOKEN_SUCCESS, 70 | payload: { access }, 71 | }); 72 | } catch (error) { 73 | dispatch(logout()); 74 | } 75 | }; 76 | 77 | export const deleteAccount = () => async (dispatch, getState) => { 78 | try { 79 | await authService.deleteAccount(); 80 | dispatch(logout()); 81 | } catch (error) { 82 | dispatch(logout()); 83 | } 84 | }; 85 | -------------------------------------------------------------------------------- /frontend/src/actions/local.js: -------------------------------------------------------------------------------- 1 | import { MUMBLETHEME } from '../constants/localConstants'; 2 | 3 | // Toggle Sidebar 4 | export const toggleTheme = () => async (dispatch) => { 5 | dispatch({ 6 | type: MUMBLETHEME, 7 | }); 8 | }; 9 | -------------------------------------------------------------------------------- /frontend/src/actions/notificationsActions.js: -------------------------------------------------------------------------------- 1 | import { 2 | NOTIFICATIONS_REQUEST, 3 | NOTIFICATIONS_SUCCESS, 4 | NOTIFICATIONS_FAIL, 5 | READ_REQUEST, 6 | READ_SUCCESS, 7 | READ_FAIL, 8 | NOTIFICATIONS_UNREAD_REQUEST, 9 | NOTIFICATIONS_UNREAD_SUCCESS, 10 | NOTIFICATIONS_UNREAD_FAIL, 11 | } from '../constants/notificationsConstants'; 12 | import { NotificationsService } from '../services'; 13 | 14 | export const createActionPayload = (type, error) => ({ 15 | type: type, 16 | payload: 17 | error.response && error.response.data.detail ? error.response.data.detail : error.message, 18 | }); 19 | 20 | export const getNotifications = () => async (dispatch) => { 21 | try { 22 | dispatch({ type: NOTIFICATIONS_REQUEST }); 23 | 24 | const notifications = await NotificationsService.getNotifications(); 25 | dispatch({ 26 | type: NOTIFICATIONS_SUCCESS, 27 | payload: notifications, 28 | }); 29 | } catch (error) { 30 | dispatch(createActionPayload(NOTIFICATIONS_FAIL, error)); 31 | } 32 | }; 33 | 34 | export const getUnreadNotifications = () => async (dispatch) => { 35 | try { 36 | dispatch({ type: NOTIFICATIONS_UNREAD_REQUEST }); 37 | 38 | const unreadNotifications = await NotificationsService.getUnreadNotifications(); 39 | dispatch({ 40 | type: NOTIFICATIONS_UNREAD_SUCCESS, 41 | payload: unreadNotifications, 42 | }); 43 | } catch (error) { 44 | dispatch(createActionPayload(NOTIFICATIONS_UNREAD_FAIL, error)); 45 | } 46 | }; 47 | 48 | export const markAsRead = (notificationId) => async (dispatch) => { 49 | try { 50 | dispatch({ type: READ_REQUEST }); 51 | 52 | await NotificationsService.markAsRead(notificationId); 53 | dispatch({ 54 | type: READ_SUCCESS, 55 | }); 56 | 57 | dispatch(getUnreadNotifications()); 58 | } catch (error) { 59 | dispatch(createActionPayload(READ_FAIL, error)); 60 | } 61 | }; 62 | -------------------------------------------------------------------------------- /frontend/src/assets/images/Dennis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/src/assets/images/Dennis.jpg -------------------------------------------------------------------------------- /frontend/src/assets/images/screenshot.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/src/assets/images/screenshot.PNG -------------------------------------------------------------------------------- /frontend/src/assets/logo/dark-logo-login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/src/assets/logo/dark-logo-login.png -------------------------------------------------------------------------------- /frontend/src/assets/logo/dark-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/src/assets/logo/dark-logo.png -------------------------------------------------------------------------------- /frontend/src/assets/logo/light-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divanov11/Mumble/f96a5852da73dd13e6ff8babfbd0710568ed81c2/frontend/src/assets/logo/light-logo.png -------------------------------------------------------------------------------- /frontend/src/common/AuthorBox.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import PropTypes from 'prop-types'; 4 | import classNames from 'classnames'; 5 | 6 | import Avatar from './Avatar'; 7 | 8 | const AuthorBox = ({ 9 | avatarSrc = '', 10 | className = '', 11 | handle = '', 12 | name = '', 13 | size = 'sm', 14 | url = '', 15 | ...others 16 | }) => { 17 | return ( 18 | 23 | 24 |
25 |

{name}

26 | {handle && @{handle}} 27 |
28 | 29 | ); 30 | }; 31 | 32 | AuthorBox.propTypes = { 33 | avatarSrc: PropTypes.string, 34 | className: PropTypes.string, 35 | handle: PropTypes.string, 36 | name: PropTypes.string.isRequired, 37 | size: PropTypes.oneOf(['sm', 'md', 'lg']), 38 | url: PropTypes.string.isRequired, 39 | }; 40 | 41 | export default AuthorBox; 42 | -------------------------------------------------------------------------------- /frontend/src/common/Avatar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const Avatar = ({ 6 | alt = 'User Avatar', 7 | className = '', 8 | size = 'md', 9 | src = 'https://randomuser.me/api/portraits/men/52.jpg', 10 | ...others 11 | }) => { 12 | return ( 13 | {alt} 19 | ); 20 | }; 21 | 22 | Avatar.propTypes = { 23 | alt: PropTypes.string, 24 | className: PropTypes.string, 25 | size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']), 26 | src: PropTypes.string, 27 | }; 28 | 29 | export default Avatar; 30 | -------------------------------------------------------------------------------- /frontend/src/common/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const Button = ({ 6 | children, 7 | className = '', 8 | color = '', 9 | iconName = '', 10 | iconStyle = 'fas', 11 | link = false, 12 | outline = false, 13 | size = '', 14 | text = '', 15 | loading = false, 16 | ...others 17 | }) => { 18 | return ( 19 | 42 | ); 43 | }; 44 | 45 | Button.propTypes = { 46 | className: PropTypes.string, 47 | color: PropTypes.oneOf(['main', 'sub', 'warning']), 48 | iconName: PropTypes.string, 49 | iconStyle: PropTypes.string, 50 | link: PropTypes.bool, 51 | outline: PropTypes.bool, 52 | size: PropTypes.oneOf(['sm', 'md', 'lg']), 53 | text: PropTypes.string, 54 | }; 55 | 56 | export default Button; 57 | -------------------------------------------------------------------------------- /frontend/src/common/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const Card = ({ cardStyle = '', className = '', children, ...others }) => { 6 | return ( 7 |
13 |
{children}
14 |
15 | ); 16 | }; 17 | 18 | Card.propTypes = { 19 | cardStyle: PropTypes.string, 20 | className: PropTypes.string, 21 | }; 22 | 23 | export default Card; 24 | -------------------------------------------------------------------------------- /frontend/src/common/Input.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const Input = ({ 6 | className = '', 7 | error = '', 8 | hideLabel = false, 9 | label = '', 10 | name, 11 | placeholder = '', 12 | type = 'text', 13 | value = '', 14 | ...others 15 | }) => { 16 | return ( 17 |
18 | 24 | 33 | {error && {error}} 34 |
35 | ); 36 | }; 37 | 38 | Input.propTypes = { 39 | className: PropTypes.string, 40 | error: PropTypes.string, 41 | hideLabel: PropTypes.bool, 42 | label: PropTypes.string.isRequired, 43 | name: PropTypes.string.isRequired, 44 | placeholder: PropTypes.string, 45 | type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'time']), 46 | value: PropTypes.string, 47 | }; 48 | 49 | export default Input; 50 | -------------------------------------------------------------------------------- /frontend/src/common/InputChoice.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | 5 | const Input = ({ 6 | className = '', 7 | error, 8 | hideLabel = false, 9 | label = '', 10 | name, 11 | options = [], 12 | type = 'radio', 13 | ...others 14 | }) => { 15 | return ( 16 |
17 |

{label}:

18 | {options.map((option) => ( 19 | 20 | 28 | 29 | 30 | ))} 31 | {error && {error}} 32 |
33 | ); 34 | }; 35 | 36 | Input.propTypes = { 37 | className: PropTypes.string, 38 | error: PropTypes.string, 39 | hideLabel: PropTypes.bool, 40 | label: PropTypes.string.isRequired, 41 | name: PropTypes.string.isRequired, 42 | options: PropTypes.arrayOf( 43 | PropTypes.shape({ 44 | title: PropTypes.string.isRequired, 45 | value: PropTypes.string.isRequired, 46 | }), 47 | ).isRequired, 48 | type: PropTypes.oneOf(['checkbox', 'radio']), 49 | }; 50 | 51 | export default Input; 52 | -------------------------------------------------------------------------------- /frontend/src/common/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import logo from '../assets/logo/dark-logo-login.png'; 4 | 5 | const Loading = () => ( 6 |
7 |
8 | Mumble Logo 9 |
10 |
11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | ); 19 | 20 | export default Loading; 21 | -------------------------------------------------------------------------------- /frontend/src/common/Message.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Message = ({ onClose, variant, dismissible, children }) => { 4 | return ( 5 |
6 | {children} 7 | {dismissible &&
✕
} 8 |
9 | ); 10 | }; 11 | 12 | export default Message; 13 | -------------------------------------------------------------------------------- /frontend/src/common/Modal.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDom from 'react-dom'; 3 | import { useEffect, useRef } from 'react'; 4 | 5 | import '../styles/components/Modal.css'; 6 | 7 | // TODO: Make it universal and modular 8 | 9 | const Modal = ({ heading, children, active, setActive }) => { 10 | const modalRef = useRef(); 11 | 12 | const closeModal = () => { 13 | setActive(false); 14 | }; 15 | 16 | const MODAL_TRANSITION_TIME = 200; 17 | 18 | const fadeIn = (el) => { 19 | el.style.display = 'flex'; 20 | setTimeout(() => { 21 | el.style.opacity = '1'; 22 | }, 30); 23 | }; 24 | 25 | const fadeOut = (el) => { 26 | el.style.opacity = '0'; 27 | setTimeout(() => { 28 | el.style.display = 'none'; 29 | }, MODAL_TRANSITION_TIME); 30 | }; 31 | 32 | useEffect(() => { 33 | const modalEl = modalRef.current; 34 | active ? fadeIn(modalEl) : fadeOut(modalEl); 35 | }, [active]); 36 | 37 | return ReactDom.createPortal( 38 |
39 |
40 |
41 |

{heading}

42 |
43 |