[
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\ngithub: [Mayank0255]\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.md",
    "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"[BUG]: Write a descriptive title\"\nlabels: bug\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Additional context**\nAdd any other context about the problem here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/features-request-for-backend-or-frontend.md",
    "content": "---\nname: Features Request for Backend or Frontend\nabout: Suggest an idea for the project\ntitle: \"[Backend/Frontend]: Write a descriptive idea title\"\nlabels: enhancement, feature\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/proposal.md",
    "content": "---\nname: Proposal\nabout: Propose a non-trivial change\ntitle: \"[Proposal]: Write a descriptive title here\"\nlabels: ''\nassignees: ''\n\n---\n\n## Proposal\n\n(A clear and concise description of what the proposal is.)\n"
  },
  {
    "path": ".github/workflows/deploy-on-release.yml",
    "content": "name: \"Deploy\"\n\non:\n  release:\n    types:\n      - published\n  push:\n    branches:\n      - dev\n  workflow_dispatch:\n\njobs:\n  vercel:\n    runs-on: ubuntu-latest\n    name: \"Deploy Front-End\"\n\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v1\n        with:\n          node-version: \"14\"\n          registry-url: https://registry.npmjs.org/\n\n      - name: \"Deploy to Vercel\"\n        run: |\n          prodRun=\"\"\n          if [[ ${GITHUB_REF} == \"refs/heads/main\" ]]; then\n            prodRun=\"--prod\"\n          fi\n\n          npx vercel --token ${VERCEL_TOKEN} $prodRun\n        env:\n          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}\n          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}\n          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}\n"
  },
  {
    "path": ".gitignore",
    "content": "/node_modules\n/.idea\n/.vscode\n/client/node_modules\n.env\npackage-lock.json\n/client/package-lock.json\nyarn.lock\n.vercel\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at mayank2aggarwal@gmail.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing to Stackoverflow Clone\nWe love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:\n\n- Reporting a bug\n- Discussing the current state of the code\n- Submitting a fix\n- Proposing new features\n- Becoming a maintainer\n\n## Our Development Process\nWe use GitHub to sync code to and from our internal repository. We'll use GitHub\nto track issues and feature requests, as well as accept pull requests.\n\n## Pull Requests\nWe actively welcome your pull requests.\n\n1. Fork the repo and create your branch from `master`.\n2. If you've added code that should be tested, then state about it in the PR description.\n3. If you've changed APIs, update the documentation (in the readme file at the moment).\n4. The PR title should begin with _<action>(<issue_number>): _ e.g. - \"feat(#12): \", \"chore(#12): \", \"fix(#12): \", \"refactor(#12):\" and \"test(#12):\"\n5. Make sure your code satisfies the coding conventions used in the rest of the project.\n\n## Issues\nWe use GitHub issues to track public bugs. Please ensure your description is\nclear and has sufficient instructions to be able to reproduce the issue.\n\n## License\nBy contributing, you agree that your contributions will be licensed under its MIT License.\n\n## References\nThis document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/a9316a723f9e918afde44dea68b5f9f39b7d9b00/CONTRIBUTING.md)\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 Mayank Aggarwal\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "https://user-images.githubusercontent.com/43780137/158059050-481ffa30-e415-4156-aea7-072c817f2ae2.mp4\n\n[![Version](https://img.shields.io/static/v1?label=version&message=2.0.0&color=blue)](https://shields.io/)\n[![NPM](https://img.shields.io/static/v1?label=npm&message=6.8.5&color=blue)](https://shields.io/)\n[![NODE](https://img.shields.io/static/v1?label=node&message=10.12.8&color=success)](https://shields.io/)\n[![MYSQL](https://img.shields.io/static/v1?label=mysql&message=8.0.10&color=blueviolet)](https://shields.io/)\n[![License](https://img.shields.io/badge/license-MIT-green.svg)](https://shields.io/)\n\n### [🌐 Website](https://stackoverflow-clone-client.vercel.app)  |  [📹 Demo Video](https://www.youtube.com/watch?v=bUAAgfGOfYg)\n\n### API Hosted On\n- __[stackoverflow-clone-api.onrender.com](https://stackoverflow-clone-api.onrender.com) (Primary)__\n- __[stackoverflow-clone-backend.herokuapp.com](https://stackoverflow-clone-backend.herokuapp.com)__\n\nAs the name suggests, this project is a clone of a famous Q/A website for professional and enthusiast programmers built solely by me using a completely different stack.\n\nThis repo consists of the Frontend code of the project, the backend code is in __[Stackoverflow-Clone-Backend](https://github.com/Mayank0255/Stackoverflow-Clone-Backend)__\n\n## My Tech Stack (MERN)\n\n#### Front-end\n\n- Front-end Framework: `React.js (with Redux)`\n- Styling: `SASS` and `BOOTSTRAP`\n\n#### Back-end\n\n- For handling index requests: `Node.js with Express.js Framework`\n- As Database: `MySQL with Sequelize`\n- API tested using: `POSTMAN`\n\n## Guidelines to setup\n\nThere are two ways to setup the project: manually or using the Dockerfile. Read below for more details:\n\n### Manual Setup\n\n1. Open your local CLI -\n\n   ```\n   mkdir Stackoverflow-Clone\n   cd Stackoverflow-Clone\n   ```\n\n2. Setup the backend code -\n   \n   __NOTE:__ For Frontend Developers, if they dont want to setup the Backend Code, they can skip the Step 2, and make sure they follow the optional step mentioned in Step 4\n\n   - Create a `.env` file and the format should be as given in `.env.example`.\n   - Clone the code & install the modules-\n\n     ```\n     git clone https://github.com/Mayank0255/Stackoverflow-Clone-Backend.git\n     cd Stackoverflow-Clone-Backend\n\n     npm install\n     ```\n\n   - Open your MySQL Client -\n\n     ```\n     CREATE DATABASE stack_overflow;\n     ```\n     NOTE: Don't forget to keep the database name same in the `.env` and here.\n\n   - Run the index `npm start`.\n\n3. Open a new CLI terminal and goto the root `Stackoverflow-Clone` folder you created in the first step.\n4. Setup the Frontend code -\n\n   - Clone the code & install the modules-\n\n     ```\n     git clone https://github.com/Mayank0255/Stackoverflow-Clone-Frontend.git\n     cd Stackoverflow-Clone-Frontend\n\n     npm install\n     ```\n\n   - Run the client index `npm start`.\n   \n   __OPTIONAL (Recommended For Frontend Developers):__ Can just change the path [here](https://github.com/Mayank0255/Stackoverflow-Clone-Frontend/blob/53b64c37981c618802547cd17483525532de83f0/src/config/index.js#L6) to this `https://stackoverflow-clone-backend.herokuapp.com`\n   Now, it will hit PROD\n\nLet me know if you are interested and would want me to assign it to you\n\n### Docker Setup\n\nThe back-end has support for Docker. So if you want to run the back-end in a container, you need do:\n\n- Setup environment variables in `.env` file. Note when you use Docker setup and run the database in localhost (host machine), you need to setup the environment variables for use correct IP of MySQL Database. Please, read [here](https://docs.docker.com/compose/environment-variables/) and [here](https://docs.docker.com/desktop/windows/networking/) for more details.\n\n- Build the Docker image:\n  ```\n  docker build -t stackoverflowclone .\n  ```\n- Run the container. For example, if you want to run the container in a new terminal, you can do:\n  ```\n  docker run -d -p 5000:5000 stackoverflowclone\n  ```\n\nThe default port of api is 5000. After running the container, you can access the api by typing:\n\n    http://localhost:5000/api/<endpoint that you request - see next section>\n\n_Follow the steps properly (manual or Docker) and you are good to go._\n\n## Contributing\n\n- Go to `Contributing.md`\n\n## DEMO\n\n#### VIDEO - [Watch the video](https://www.youtube.com/watch?v=bUAAgfGOfYg)\n\n_Video Last Updated on 7th March, 2022_\n\n#### IMAGES\n\n<img src=\"/demo/images/1.png\" width=340px /><img src=\"/demo/images/2.png\" width=340px />\n<img src=\"/demo/images/3.png\" width=340px /><img src=\"/demo/images/4.png\" width=340px />\n<img src=\"/demo/images/5.png\" width=340px /><img src=\"/demo/images/6.png\" width=340px />\n<img src=\"/demo/images/7.png\" width=340px /><img src=\"/demo/images/8.png\" width=340px />\n<img src=\"/demo/images/9.png\" width=340px /><img src=\"/demo/images/10.png\" width=340px />\n<img src=\"/demo/images/11.png\" width=340px /><img src=\"/demo/images/12.png\" width=340px />\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"client\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@emotion/react\": \"^11.8.1\",\n    \"@emotion/styled\": \"^11.8.1\",\n    \"@mui/icons-material\": \"^5.5.0\",\n    \"@mui/material\": \"^5.5.0\",\n    \"@stackoverflow/stacks-icons\": \"^2.25.1\",\n    \"@testing-library/jest-dom\": \"^5.16.1\",\n    \"@testing-library/react\": \"^12.1.2\",\n    \"@testing-library/user-event\": \"^13.5.0\",\n    \"axios\": \"^0.24.0\",\n    \"bad-words\": \"^3.0.4\",\n    \"feather-icons\": \"^4.28.0\",\n    \"moment\": \"^2.29.4\",\n    \"prop-types\": \"^15.8.0\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-helmet\": \"^6.1.0\",\n    \"react-logger\": \"^1.1.0\",\n    \"react-redux\": \"^7.2.6\",\n    \"react-router-dom\": \"^5.3.0\",\n    \"react-router-redux\": \"^4.0.8\",\n    \"react-rte\": \"^0.16.4\",\n    \"react-scripts\": \"^5.0.0\",\n    \"redux\": \"^4.1.2\",\n    \"redux-devtools-extension\": \"^2.13.9\",\n    \"redux-persist\": \"^6.0.0\",\n    \"redux-thunk\": \"^2.4.1\",\n    \"reselect\": \"^4.1.5\",\n    \"sass\": \"^1.45.2\",\n    \"styled-system\": \"^5.1.5\",\n    \"uuid\": \"^8.3.2\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": \"react-app\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "public/index.html",
    "content": "<!DOCTYPE html>\n<html lang='en'>\n  <head>\n    <meta charset='utf-8' />\n    <link rel='icon' href='%PUBLIC_URL%/LogoGlyphMd.svg' />\n    <meta name='viewport' content='width=device-width, initial-scale=1' />\n    <meta name='theme-color' content='#000000' />\n    <meta\n      name='description'\n      content='Web site created using create-react-app'\n    />\n\n    <title>CLONE Stack Overflow - Where Developers Learn, Share, & Build Careers</title>\n    <link rel='stylesheet' type='text/css' href='https://cdn.sstatic.net/Shared/stacks.css?v=0ee8a05683e7'>\n    <link rel='stylesheet' type='text/css' href='https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=c5fdf309f06b'>\n    <link\n      rel=\"stylesheet\"\n      href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\n    />\n  </head>\n  <body class='theme-dark'>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id='root'></div>\n    <script src='https://unpkg.com/@stackoverflow/stacks-icons'></script>\n    <script src='https://code.jquery.com/jquery-3.2.1.slim.min.js' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' crossorigin='anonymous'></script>\n    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' crossorigin='anonymous'></script>\n    <script>\n      let pageX = $(document).width();\n      let pageY = $(document).height();\n      let mouseY=0;\n      let mouseX=0;\n\n      $(document).mousemove(function( event ) {\n        mouseY = event.pageY;\n        const yAxis = (pageY / 2 - mouseY) / pageY * 300;\n        mouseX = event.pageX / -pageX;\n        const xAxis = -mouseX * 100 - 100;\n\n        $('.box__ghost-eyes')\n                .css({ 'transform': 'translate('+ xAxis +'%,-'+ yAxis +'%)' });\n      });\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "public/manifest.json",
    "content": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n"
  },
  {
    "path": "public/robots.txt",
    "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
  },
  {
    "path": "src/App.css",
    "content": ":root {\n    --yellow-200: #675c37;\n    --yellow-050: #464236;\n}\n\n*{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Liberation Sans\",sans-serif !important;\n    transition: all 300ms ease-in-out;\n}\n\nbody {\n    background-color: #2d2d2d !important;\n    padding-top: 0 !important;\n}\n\na {\n    text-decoration: none !important;\n}\n\nbutton {\n    margin: 3px;\n}"
  },
  {
    "path": "src/App.js",
    "content": "import React, {useEffect} from 'react';\nimport {Provider} from 'react-redux';\nimport {Switch} from 'react-router-dom';\n\nimport store from './redux/store';\nimport setAuthToken from './redux/auth/auth.utils';\nimport {loadUser} from './redux/auth/auth.actions';\n\nimport Header from './components/organisms/Header/Header.component';\nimport Alert from './components/Alert/Alert.component';\nimport HomePage from './modules/HomePage/HomePage.component';\nimport QuestionsPage from './modules/QuestionsPage/QuestionsPage.component';\nimport AllTagsPage from './modules/AllTagsPage/AllTagsPage.component';\nimport AllUsersPage from './modules/AllUsersPage/AllUsersPage.component';\nimport Register from './modules/Register/Register.component';\nimport Login from './modules/Login/Login.component';\nimport Post from './modules/Post/Post.component';\nimport PostForm from './modules/PostForm/PostForm.component';\nimport TagPage from './modules/TagPage/TagPage.component';\nimport ProfilePage from './modules/ProfilePage/ProfilePage.component';\nimport NotFound from './modules/NotFound/NotFound.component';\n\nimport { BaseRoute, LayoutRoute } from './Router';\n\nimport './App.css';\n\nif (localStorage.token) {\n  setAuthToken(localStorage.token);\n}\n\nconst App = () => {\n  useEffect(() => {\n    store.dispatch(loadUser());\n  }, []);\n\n  return (\n    <Provider store={store}>\n      <div className='App'>\n        <Header />\n        <Alert />\n        <Switch>\n          <LayoutRoute\n            exact\n            path='/'\n            title='CLONE Stack Overflow - Where Developers Learn, Share, & Build Careers'\n          >\n            <HomePage/>\n          </LayoutRoute>\n          <LayoutRoute\n            exact\n            path='/questions'\n            title='All Questions - CLONE Stack Overflow'\n          >\n            <QuestionsPage/>\n          </LayoutRoute>\n          <LayoutRoute\n            exact\n            path='/tags'\n            title='Tags - CLONE Stack Overflow'\n          >\n            <AllTagsPage/>\n          </LayoutRoute>\n          <LayoutRoute\n            exact\n            path='/users'\n            title='Users - CLONE Stack Overflow'\n          >\n            <AllUsersPage/>\n          </LayoutRoute>\n          <BaseRoute\n            exact\n            path='/register'\n            title='Sign Up - CLONE Stack Overflow'\n          >\n            <Register/>\n          </BaseRoute>\n          <BaseRoute\n            exact\n            path='/login'\n            title='Log In - CLONE Stack Overflow'\n          >\n            <Login/>\n          </BaseRoute>\n          <LayoutRoute\n            exact\n            path='/questions/:id'\n            title='Users - CLONE Stack Overflow'\n          >\n            <Post/>\n          </LayoutRoute>\n          <LayoutRoute\n            exact\n            path='/users/:id'\n            title='Users - CLONE Stack Overflow'\n          >\n            <ProfilePage/>\n          </LayoutRoute>\n          <LayoutRoute\n            exact\n            path='/tags/:tagname'\n            title='Users - CLONE Stack Overflow'\n          >\n            <TagPage/>\n          </LayoutRoute>\n          <BaseRoute\n            exact\n            path='/add/question'\n            title='Ask a Question - CLONE Stack Overflow'\n          >\n            <PostForm/>\n          </BaseRoute>\n          <BaseRoute\n            path='*'\n            title='Error 404'\n          >\n            <NotFound/>\n          </BaseRoute>\n        </Switch>\n      </div>\n    </Provider>\n  );\n};\n\nexport default App;\n"
  },
  {
    "path": "src/Router.jsx",
    "content": "import React from 'react';\nimport { Route } from 'react-router-dom';\n\nimport LayoutWrapper from './components/organisms/LayoutWrapper/LayoutWrapper.component';\n\nimport usePageTitle from './hooks/usePageTitle';\n\nexport const LayoutRoute = ({ title, children, ...props }) => {\n  usePageTitle(title);\n\n  return (\n    <Route {...props}>\n      <LayoutWrapper>\n        {children}\n      </LayoutWrapper>\n    </Route>\n  )\n}\n\nexport const BaseRoute = ({ title, children, ...props }) => {\n  usePageTitle(title);\n\n  return (\n    <Route {...props}>\n      {children}\n    </Route>\n  )\n}\n"
  },
  {
    "path": "src/api/answersApi.js",
    "content": "import axios from 'axios';\n\nimport {\n  allAnswersData as _allAnswersData,\n  createSingleAnswer as _createSingleAnswer,\n  deleteSingleAnswer as _deleteSingleAnswer\n} from './urls';\n\nexport const allAnswersData = (id) => {\n  return axios.get(_allAnswersData.replace('{id}', id));\n}\n\nexport const createSingleAnswer = (postId, formData) => {\n  const config_headers = {\n    headers: {\n      \"Content-Type\": \"application/json\",\n    },\n  };\n\n  return axios.post(_createSingleAnswer.replace('{postId}', postId), formData, config_headers);\n}\n\nexport const deleteSingleAnswer = (AnswerId) => {\n  return axios.delete(_deleteSingleAnswer.replace('{AnswerId}', AnswerId));\n}"
  },
  {
    "path": "src/api/authApi.js",
    "content": "import axios from 'axios';\n\nimport {loadUserData as _loadUserData, registerUser as _registerUser, loginUser as _loginUser} from './urls';\n\nexport const loadUserData = () => {\n  return axios.get(_loadUserData);\n};\n\nexport const registerUser = (username, password) => {\n  const config_headers = {\n    headers: {\n      'Content-Type': 'application/json',\n      Accept: \"application/json\",\n    },\n  };\n\n  const body = JSON.stringify({ username, password });\n\n  return axios.post(_registerUser, body, config_headers);\n};\n\nexport const loginUser = (username, password) => {\n  const config_headers = {\n    headers: {\n      'Content-Type': 'application/json',\n      Accept: \"application/json\",\n    },\n  };\n\n  const body = JSON.stringify({username, password});\n\n  return axios.post(_loginUser, body, config_headers);\n};"
  },
  {
    "path": "src/api/commentsApi.js",
    "content": "import axios from 'axios';\n\nimport {\n  allCommentsData as _allCommentsData,\n  createSingleComment as _createSingleComment,\n  deleteSingleComment as _deleteSingleComment\n} from './urls';\n\nexport const allCommentsData = (id) => {\n  return axios.get(_allCommentsData.replace('{id}', id));\n}\n\nexport const createSingleComment = (postId, formData) => {\n  const config_headers = {\n    headers: {\n      \"Content-Type\": \"application/json\",\n    },\n  };\n\n  return axios.post(_createSingleComment.replace('{postId}', postId), formData, config_headers);\n}\n\nexport const deleteSingleComment = (CommentId) => {\n  return axios.delete(_deleteSingleComment.replace('{CommentId}', CommentId));\n}"
  },
  {
    "path": "src/api/postsApis.js",
    "content": "import axios from 'axios';\n\nimport {\n  allPostsData as _allPostsData,\n  singlePostData as _singlePostData,\n  allTagPostsData as _allTagPostsData,\n  createSinglePost as _createSinglePost,\n  deleteSinglePost as _deleteSinglePost\n} from './urls';\n\nexport const allPostsData = () => {\n  return axios.get(_allPostsData);\n}\n\nexport const singlePostData = (id) => {\n  return axios.get(_singlePostData.replace('{id}', id));\n}\n\nexport const allTagPostsData = (tagName) => {\n  return axios.get(_allTagPostsData.replace('{tagName}', tagName));\n}\n\nexport const createSinglePost = (formData) => {\n  const config_headers = {\n    headers: {\n      \"Content-Type\": \"application/json\",\n    },\n  };\n\n  return axios.post(_createSinglePost, formData, config_headers);\n}\n\nexport const deleteSinglePost = (id) => {\n  return axios.delete(_deleteSinglePost.replace('{id}', id));\n}"
  },
  {
    "path": "src/api/tagsApi.js",
    "content": "import axios from 'axios';\n\nimport { allTagsData as _allTagsData, singleTagData as _singleTagData } from './urls';\n\nexport const allTagsData = () => {\n  return axios.get(_allTagsData);\n}\n\nexport const singleTagData = (tagName) => {\n  return axios.get(_singleTagData.replace('{tagName}', tagName));\n}"
  },
  {
    "path": "src/api/urls.js",
    "content": "import config from \"../config\";\n\n// Users\nexport const usersData = config.BASE_URL + '/api/users';\nexport const profileData = config.BASE_URL + '/api/users/{id}';\n\n// Auth\nexport const loadUserData = config.BASE_URL + '/api/auth';\nexport const registerUser = config.BASE_URL + '/api/users';\nexport const loginUser = config.BASE_URL + '/api/auth';\n\n// Posts\nexport const allPostsData = config.BASE_URL + '/api/posts';\nexport const singlePostData = config.BASE_URL + '/api/posts/{id}';\nexport const allTagPostsData = config.BASE_URL + '/api/posts/tag/{tagName}';\nexport const createSinglePost = config.BASE_URL + '/api/posts';\nexport const deleteSinglePost = config.BASE_URL + '/api/posts/{id}';\n\n// Answers\nexport const allAnswersData = config.BASE_URL + '/api/posts/answers/{id}';\nexport const createSingleAnswer = config.BASE_URL + '/api/posts/answers/{postId}';\nexport const deleteSingleAnswer = config.BASE_URL + '/api/posts/answers/{AnswerId}';\n\n// Comments\nexport const allCommentsData = config.BASE_URL + '/api/posts/comments/{id}';\nexport const createSingleComment = config.BASE_URL + '/api/posts/comments/{postId}';\nexport const deleteSingleComment = config.BASE_URL + '/api/posts/comments/{CommentId}';\n\n// Tags\nexport const allTagsData = config.BASE_URL + '/api/tags';\nexport const singleTagData = config.BASE_URL + '/api/tags/{tagName}';"
  },
  {
    "path": "src/api/usersApi.js",
    "content": "import axios from 'axios';\n\nimport {usersData as _usersData, profileData as _profileData} from './urls';\n\nexport const usersData = () => {\n  return axios.get(_usersData);\n};\n\nexport const profileData = (id) => {\n  return axios.get(_profileData.replace('{id}', id));\n};"
  },
  {
    "path": "src/components/Alert/Alert.component.jsx",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport {connect} from 'react-redux';\n\nimport './Alert.styles.scss';\n\nconst Alert = ({ alerts }) => {\n  return alerts.length > 0 &&\n    alerts.map((alert, index) => {\n      if (alert.alertType === 'success') {\n        return (\n          <aside key={index} className=\"alert s-notice s-notice__success s-notice__important\" role=\"alert\">\n            {alert.msg}\n          </aside>\n        )\n      } else {\n        return (\n          <aside key={index} className=\"alert s-notice s-notice__danger s-notice__important\" role=\"alert\">\n            {alert.msg}\n          </aside>\n        )\n      }\n    }\n  )\n}\n\nAlert.propTypes = {\n  alerts: PropTypes.array.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  alerts: state.alert,\n});\n\nexport default connect(mapStateToProps)(Alert);\n"
  },
  {
    "path": "src/components/Alert/Alert.styles.scss",
    "content": ".alert {\n  top: 75px;\n  z-index: 10;\n  position: fixed;\n  width: 70%;\n  max-width: 1000px;\n  min-width: 320px;\n  left: 50%;\n  transform: translateX(-50%);\n}"
  },
  {
    "path": "src/components/PageTitle/PageTitle.component.jsx",
    "content": "import React from 'react';\nimport Helmet from 'react-helmet';\n\nconst PageTitle = ({title}) => {\n  let defaultTitle =\n    'CLONE Stack Overflow - Where Developers Learn, Share, & Build Careers';\n\n  return (\n    <Helmet>\n      <title>{title ? title : defaultTitle}</title>\n    </Helmet>\n  );\n};\n\nexport default PageTitle;\n"
  },
  {
    "path": "src/components/atoms/box.atom.jsx",
    "content": "import styled from '@emotion/styled';\nimport {\n  space,\n  color,\n  layout,\n  flexbox,\n  position,\n  typography,\n  border,\n  background,\n} from 'styled-system';\n\nexport const Box = styled.div`\n  box-sizing: border-box;\n  min-width: 0;\n  ${space}\n  ${color}\n  ${layout}\n  ${flexbox}\n  ${position}\n  ${typography}\n  ${border}\n  ${background}\n`;\n\nexport const FlexBox = styled(Box)`\n  display: flex;\n`;\n\nexport const FlexBoxColumn = styled(Box)`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const GapFlexBox = styled(FlexBox)`\n  gap: ${({ gap = \"0\" }) => gap};\n`;\n\nexport const GapFlexBoxColumn = styled(FlexBoxColumn)`\n  gap: ${({ gap = \"0\" }) => gap};\n`;"
  },
  {
    "path": "src/components/molecules/BaseButton/BaseButton.component.jsx",
    "content": "import React, {Fragment} from 'react';\n\nconst BaseButton = ({text, selected, onClick}) => {\n  return (\n    <Fragment>\n      <button\n        className={`s-btn s-btn__filled ${\n          selected === text ? 'is-selected' : ''\n        }`}\n        style={{margin: '0'}}\n        onClick={onClick}\n      >\n        {text}\n      </button>\n    </Fragment>\n  );\n};\n\nexport default BaseButton;\n"
  },
  {
    "path": "src/components/molecules/ButtonGroup/ButtonGroup.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport BaseButton from '../BaseButton/BaseButton.component';\n\nconst ButtonGroup = ({buttons, selected, setSelected}) => {\n  return (\n    <Fragment>\n      <div className='grid--cell'>\n        <div className=' grid s-btn-group js-filter-btn'>\n          {buttons.map((button, index) => (\n            <BaseButton\n              key={index}\n              text={button}\n              selected={selected}\n              onClick={() => setSelected(button)}\n            />\n          ))}\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nexport default ButtonGroup;\n"
  },
  {
    "path": "src/components/molecules/LinkButton/LinkButton.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport {Link} from 'react-router-dom';\n\nconst LinkButton = ({text, link, type, handleClick, marginTop}) => {\n  return (\n    <Fragment>\n      <Link onClick={handleClick} to={link}>\n        <button className={`s-btn ${type}`} style={{marginTop}}>\n          {text}\n        </button>\n      </Link>\n    </Fragment>\n  );\n};\n\nexport default LinkButton;\n"
  },
  {
    "path": "src/components/molecules/PostItem/PostItem.component.jsx",
    "content": "import React from \"react\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router-dom\";\n\nimport censorBadWords from \"../../../utils/censorBadWords\";\n\nimport htmlSubstring from \"../../../utils/htmlSubstring\";\nimport injectEllipsis from \"../../../utils/injectEllipsis\";\n\nimport UserCard from \"../UserCard/UserCard.component\";\nimport TagBadge from \"../TagBadge/TagBadge.component\";\n\nimport \"./PostItem.styles.scss\";\n\nconst PostItem = ({\n  post: {\n    id,\n    title,\n    body,\n    username,\n    gravatar,\n    user_id,\n    answer_count,\n    comment_count,\n    views,\n    created_at,\n    tags,\n  },\n}) => {\n  const answerVoteUp = (\n    <div className=\"vote answer\">\n      <span className=\"vote-count\">{answer_count}</span>\n      <div className=\"count-text\">answers</div>\n    </div>\n  );\n\n  const answerVoteDown = (\n    <div className=\"vote\">\n      <span className=\"vote-count\">{answer_count}</span>\n      <div className=\"count-text\">answers</div>\n    </div>\n  );\n\n  return (\n    <div className=\"posts\">\n      <div className=\"stats-container fc-black-500\">\n        <div className=\"stats\">\n          <div className=\"vote\">\n            <span className=\"vote-count\">{comment_count}</span>\n            <div className=\"count-text\">comments</div>\n          </div>\n          {answer_count > 0 ? answerVoteUp : answerVoteDown}\n          <div className=\"vote\">\n            <span className=\"vote-count\">{tags.length}</span>\n            <div className=\"count-text\">tags</div>\n          </div>\n          <div className=\"vote\">\n            <div className=\"count-text\">{views} views</div>\n          </div>\n        </div>\n      </div>\n      <div className=\"summary\">\n        <h3>\n          <Link to={`/questions/${id}`}>{censorBadWords(title)}</Link>\n        </h3>\n        <div\n          className=\"brief\"\n          dangerouslySetInnerHTML={{\n            __html: injectEllipsis(censorBadWords(htmlSubstring(body, 200))),\n          }}\n        ></div>\n        <div className=\"profile-tags\">\n          {tags.map((tag, index) => (\n            <TagBadge key={index} tag_name={tag.tagname} size={\"s-tag\"} />\n          ))}\n        </div>\n        <UserCard\n          created_at={created_at}\n          user_id={user_id}\n          gravatar={gravatar}\n          username={username}\n          float={\"right\"}\n          backgroundColor={\"transparent\"}\n        />\n      </div>\n    </div>\n  );\n};\n\nPostItem.propTypes = {\n  post: PropTypes.object.isRequired,\n};\n\nexport default connect(null)(PostItem);\n"
  },
  {
    "path": "src/components/molecules/PostItem/PostItem.styles.scss",
    "content": ".posts {\n  padding: 12px 8px 12px 8px;\n  width: 100%;\n  box-sizing: border-box;\n  display: flex;\n  border-bottom: 1px solid #4a4e51;\n\n  .profile-tags {\n    display: flex;\n  }\n\n  .stats {\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 0;\n    flex-wrap: wrap;\n    align-items: flex-end;\n  }\n\n  .stats-container {\n    width: 58px;\n    color: #6a737c;\n    margin-left: 20px;\n    font-size: 11px;\n  }\n    .vote {\n      padding: 0;\n      margin-bottom: 8px;\n      text-align: center;\n      display: flex;\n\n      .vote-count {\n        font-size: 14px;\n        margin-right: 2px;\n      }\n\n      .count-text {\n        font-size: 12px;\n      }\n    }\n\n    \n    .answer {\n      border: 2px solid #63b47c;\n      background-color: #63b47c;\n      color: white;\n      border-radius: 3px;\n      padding: 4px;\n\n      .vote-count {\n        color: white;\n        font-size: 12px;\n        padding: 1px;\n      }\n      .count-text{\n        color: white;\n        font-size: 12px;\n        padding: 1px;\n      }\n    }\n\n\n    .vote {\n      padding: 0;\n      margin-bottom: 8px;\n      text-align: center;\n      display: flex;\n\n      .vote-count {\n        font-size: 12px;\n        margin-right: 2px;\n      }\n\n      .count-text {\n        font-size: 12px;\n      }\n\n      .views {\n        .count-text {\n          font-size: 12px;\n          color: #ffa600;\n        }\n      }\n\n    }\n\n    .summary {\n      margin-left: 30px;\n      width: 600px;\n\n      h3 {\n        font-weight: 400;\n        font-size: 15px;\n        line-height: 1.4;\n        margin-bottom: 7.5px;\n\n        a {\n          color: #0077cc;\n          line-height: 1.3;\n          margin-bottom: 1.2em;\n          font-size: 16px;\n          text-decoration: none;\n\n          &:hover {\n            color: #0095ff;\n          }\n        }\n      }\n\n      .brief {\n        padding: 0 0 5px 0;\n        margin: 0;\n        font-family: Arial, serif;\n        font-size: 13px;\n      }\n\n      .question-user {\n        width: 200px;\n        line-height: 18px;\n        float: right;\n\n        .user-info {\n          color: #848d95;\n          padding: 5px 6px 7px 7px;\n\n          .user-action-time {\n            margin-bottom: 2px;\n            margin-top: 1px;\n            font-size: 12px;\n          }\n\n          .user-gravatar {\n            float: left;\n            width: 32px;\n            height: 32px;\n            border-radius: 1px;\n\n            .logo-wrapper {\n              padding: 0;\n              overflow: hidden;\n\n              img {\n                width: 32px;\n                height: 32px;\n              }\n            }\n          }\n\n          .user-details {\n            margin-left: 40px;\n            float: none;\n            line-height: 17px;\n            width: 80%;\n\n            a {\n              color: #0077cc;\n              font-size: 12px;\n              text-decoration: none;\n\n              &:hover {\n                color: #0095ff;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n@media (max-width: 420px) {\n  .owner .user-block .user-profile .user-profile-link {\n    font-size: 11px;\n  }\n}"
  },
  {
    "path": "src/components/molecules/SearchBox/SearchBox.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport {ReactComponent as Search} from '../../../assets/Search.svg';\n\nconst SearchBox = ({\n  placeholder,\n  value,\n  name,\n  handleSubmit,\n  handleChange,\n  pt,\n  px,\n  width,\n}) => {\n  return (\n    <Fragment>\n      <form\n        id='search'\n        onSubmit={handleSubmit}\n        className={`grid--cell fl-grow1 searchbar ${pt} ${px} js-searchbar`}\n        autoComplete='off'\n      >\n        <div className='ps-relative search-frame' style={{width}}>\n          <input\n            className='s-input s-input__search h100 search-box'\n            autoComplete='off'\n            type='text'\n            name={name}\n            maxLength='35'\n            placeholder={placeholder}\n            onChange={handleChange}\n            value={value}\n          />\n          <Search />\n        </div>\n      </form>\n    </Fragment>\n  );\n};\n\nexport default SearchBox;\n"
  },
  {
    "path": "src/components/molecules/SearchBox/SearchBox.styles.scss",
    "content": ".search-frame {\n  width: 220px;\n  //float: right;\n}\n\n.search-box:focus {\n  border-color: #2b5f8a;\n  box-shadow: 0 0 0 4px #378ad326;\n  color: #fff;\n  outline: 0;\n}"
  },
  {
    "path": "src/components/molecules/Spinner/Spinner.component.jsx",
    "content": "import React from 'react';\n\nimport {ReactComponent as PageSpinner} from '../../../assets/PageSpinner.svg';\nimport {ReactComponent as ComponentSpinner} from '../../../assets/three-dots.svg';\n\nimport './Spinner.styles.scss';\n\nconst Spinner = ({type, width, height}) => {\n  return (\n    <div className='spinner' style={{width: `${width}`, height: `${height}`}}>\n      {type === 'page' ? <PageSpinner /> : <ComponentSpinner />}\n    </div>\n  );\n};\n\nexport default Spinner;\n"
  },
  {
    "path": "src/components/molecules/Spinner/Spinner.styles.scss",
    "content": ".spinner {\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"
  },
  {
    "path": "src/components/molecules/TagBadge/TagBadge.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport {Link} from 'react-router-dom';\n\nimport './TagBadge.styles.scss';\n\nconst TagBadge = ({tag_name, size, display, link, href}) => {\n  return (\n    <Fragment>\n      <div className='tags-badge' style={{ display }}>\n          {href === true ? (\n            <Link className={`${size}`} to={link ? link : `/tags/${tag_name}`}>\n              {tag_name}\n            </Link>\n          ) : (\n            <Link className={`${size}`} to={link ? link : `/tags/${tag_name}`}>\n              {tag_name}\n            </Link>\n          )}\n        </div>\n    </Fragment>\n  );\n};\n\nexport default TagBadge;\n"
  },
  {
    "path": "src/components/molecules/TagBadge/TagBadge.styles.scss",
    "content": ".tags-badge {\n  color: #242729;\n  line-height: 18px;\n  margin-right: 4px;\n}"
  },
  {
    "path": "src/components/molecules/UserCard/UserCard.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport moment from 'moment';\nimport {Link} from 'react-router-dom';\n\nimport './UserCard.styles.scss';\n\nconst UserCard = ({\n  created_at,\n  user_id,\n  gravatar,\n  username,\n  dateType,\n  float,\n  backgroundColor,\n}) => {\n  return (\n    <Fragment>\n      <div\n        className='owner'\n        style={{float: float, backgroundColor: backgroundColor}}\n      >\n        <div className='user-block fc-black-500'>\n          <div className='action-time'>\n            {dateType ? dateType : 'asked'} {moment(created_at).fromNow(true)}{' '}\n            ago\n          </div>\n          <div className='user-logo'>\n            <Link className='user-link' to={`/users/${user_id}`}>\n              <div className='logo-wrapper'>\n                <img\n                  alt='user_logo'\n                  src={gravatar}\n                />\n              </div>\n            </Link>\n          </div>\n          <div className='user-profile'>\n            <Link\n              className='user-profile-link fc-blue-600'\n              to={`/users/${user_id}`}\n            >\n              {username}\n            </Link>\n          </div>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nexport default UserCard;\n"
  },
  {
    "path": "src/components/molecules/UserCard/UserCard.styles.scss",
    "content": ".owner {\n  margin-top: 4px;\n  margin-bottom: 4px;\n  border-radius: 3px;\n  background-color: #3e4a52;\n  text-align: left;\n  vertical-align: top;\n  width: 200px;\n\n  .user-block {\n    box-sizing: border-box;\n    padding: 5px 6px 0 7px;\n    color: #6a737c;\n\n    .action-time {\n      margin-top: 1px;\n      margin-bottom: 4px;\n      font-size: 12px;\n      white-space: nowrap;\n    }\n\n    .user-logo {\n      float: left;\n      width: 32px;\n      height: 32px;\n      border-radius: 1px;\n      margin-bottom: 6px;\n\n      .user-link {\n        color: #0077cc;\n        text-decoration: none;\n        cursor: pointer;\n\n        .logo-wrapper {\n          width: 32px;\n          height: 32px;\n          padding: 0;\n          overflow: hidden;\n\n          img {\n            width: 32px;\n            height: 32px;\n            border-radius: 3px !important;\n          }\n        }\n      }\n    }\n\n    .user-profile {\n      margin-left: 8px;\n      width: calc(100% - 40px);\n      float: left;\n      line-height: 17px;\n      word-wrap: break-word;\n\n      .user-profile-link {\n        color: #0077cc;\n        text-decoration: none;\n        cursor: pointer;\n        font-size: 14px;\n\n        &:hover {\n          color:#0095ff;\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "src/components/organisms/AuthForm/AuthForm.component.jsx",
    "content": "import React, {Fragment, useState} from 'react';\nimport {Link} from 'react-router-dom';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\nimport {login} from '../../../redux/auth/auth.actions';\nimport {register} from '../../../redux/auth/auth.actions';\n\nimport {ReactComponent as Logo} from '../../../assets/LogoGlyphMd.svg';\nimport {ReactComponent as ExternalLink} from '../../../assets/ExternalLink.svg';\n\nimport './AuthForm.styles.scss';\n\nconst AuthForm = ({register, login, action}) => {\n  const [formData, setFormData] = useState({\n    username: '',\n    password: '',\n  });\n\n  const {username, password} = formData;\n\n  const onChange = (e) =>\n    setFormData({...formData, [e.target.name]: e.target.value});\n\n  const onSubmit = async (e) => {\n    e.preventDefault();\n    if (action === 'Sign up') {\n      register({username, password});\n    } else {\n      login({username, password});\n    }\n  };\n\n  const signUpLink = (\n    <Fragment>\n      Already have an account?{' '}\n      <Link to='/login' name='login'>\n        Log in\n      </Link>\n    </Fragment>\n  );\n\n  const logInLink = (\n    <Fragment>\n      Don't have an account?{' '}\n      <Link to='/register' name='register'>\n        Sign up\n      </Link>\n    </Fragment>\n  );\n\n  return (\n    <Fragment>\n      <div>\n        <div className='icon-holder'>\n          <Logo className='icon' />\n        </div>\n        <div className='form-container'>\n          <form className='login-form' onSubmit={(e) => onSubmit(e)}>\n            <div>\n              <label className='form-label s-label fc-black-600'>\n                Username\n              </label>\n              <input\n                className='form-input s-input'\n                type='text'\n                name='username'\n                value={username}\n                onChange={(e) => onChange(e)}\n                id='username'\n                required\n              />\n            </div>\n            <div>\n              <label className='form-label s-label fc-black-600'>\n                Password\n              </label>\n              <input\n                className='form-input s-input'\n                type='password'\n                name='password'\n                value={password}\n                onChange={(e) => onChange(e)}\n                id='password'\n                required\n              />\n            </div>\n            <div className='grid gs4 gsy fd-column js-auth-item '>\n              <button\n                className='s-btn s-btn__primary'\n                id='submit-button'\n                name='submit-button'\n              >\n                {action}\n              </button>\n            </div>\n          </form>\n          <div className='fs-caption license fc-black-500'>\n            By clicking “{action}”, you agree to our{' '}\n            <Link\n              to='https://stackoverflow.com/legal/terms-of-service/public'\n              className='-link'\n            >\n              terms of service\n            </Link>\n            ,{' '}\n            <Link\n              to='https://stackoverflow.com/legal/privacy-policy'\n              name='privacy'\n              className='-link'\n            >\n              privacy policy\n            </Link>{' '}\n            and{' '}\n            <Link\n              to='https://stackoverflow.com/legal/cookie-policy'\n              className='-link'\n            >\n              cookie policy\n            </Link>\n            <input type='hidden' name='legalLinksShown' value='1' />\n          </div>\n        </div>\n        <div className='redirects fc-black-500'>\n          {action === 'Sign up' ? signUpLink : logInLink}\n          <div>\n            Are you an employer?{' '}\n            <Link\n              to='https://careers.stackoverflow.com/employer/login'\n              name='talent'\n            >\n              Sign up on Talent{' '}\n              <ExternalLink/>\n            </Link>\n          </div>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nAuthForm.propTypes = {\n  register: PropTypes.func.isRequired,\n  login: PropTypes.func.isRequired,\n  isAuthenticated: PropTypes.bool,\n};\n\nconst mapStateToProps = (state) => ({\n  isAuthenticated: state.auth.isAuthenticated,\n});\n\nexport default connect(mapStateToProps, {login, register})(AuthForm);\n"
  },
  {
    "path": "src/components/organisms/AuthForm/AuthForm.styles.scss",
    "content": ".form-container  {\n  width: 320px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.05), 0 20px 48px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.1);\n  padding: 24px;\n  margin-left: auto;\n  margin-right: auto;\n  margin-bottom: 24px;\n  background-color: #2d2d2d;\n  border-radius: 7px;\n  box-sizing: inherit;\n  display: block;\n\n  div {\n    margin: 6px 0;\n\n    button {\n      margin: 5px 0 3px 0;\n      width: 100%;\n    }\n  }\n\n  .fs-caption {\n    color:#6a737c;\n    font-size: 12px;\n  }\n\n  .license {\n    margin-top: 32px;\n  }\n  .form-label {\n    font-weight: 600;\n  }\n}\n\n.icon-holder {\n  text-align: center;\n  margin-bottom: 15px;\n\n  .icon {\n    width: 45px;\n    height: 45px;\n  }\n}\n\n.redirects {\n  padding: 16px 16px 0 16px;\n  text-align: center;\n  font-size: 13px;\n  margin-bottom: 24px;\n}"
  },
  {
    "path": "src/components/organisms/Footer/Footer.component.jsx",
    "content": "import React, { Fragment } from \"react\";\n\nimport {ReactComponent as GitHub} from \"../../../assets/GitHub.svg\";\nimport {ReactComponent as Database} from \"../../../assets/Database.svg\";\n\nimport './Footer.styles.scss';\n\nconst Footer = () => {\n  return <Fragment>\n    <div className='footer'>\n      <div className=\"socials\">\n        <div className=\"social-item\">\n          <a\n            href='https://github.com/Mayank0255/Stackoverflow-Clone-Frontend'\n            target='_blank'\n            rel=\"noreferrer\"\n          >\n            <GitHub/>\n          </a>\n          <p><strong>Frontend</strong></p>\n        </div>\n        <div className=\"social-item\">\n          <a\n            href='https://github.com/Mayank0255/Stackoverflow-Clone-Backend'\n            target='_blank'\n            rel=\"noreferrer\"\n          >\n            <Database/>\n          </a>\n          <p><strong>Backend</strong></p>\n        </div>\n      </div>\n    </div>\n  </Fragment>\n};\n\nexport default Footer;"
  },
  {
    "path": "src/components/organisms/Footer/Footer.styles.scss",
    "content": ".footer {\n  height: 300px;\n  display: flex;\n  justify-content: center;\n  padding-top: 32px;\n  background-color: #232629;\n\n  .socials {\n    display: flex;\n    justify-content: space-between;\n    width: 120px;\n\n    .social-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n  }\n}"
  },
  {
    "path": "src/components/organisms/Header/Header.component.jsx",
    "content": "import React, {Fragment, useState} from 'react';\nimport {Link, useHistory} from 'react-router-dom';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { logout } from '../../../redux/auth/auth.actions';\n\nimport {ReactComponent as Search} from '../../../assets/Search.svg';\nimport {ReactComponent as Logo} from '../../../assets/LogoMd.svg';\nimport {ReactComponent as SmallLogo} from '../../../assets/LogoGlyphMd.svg';\nimport Spinner from '../../molecules/Spinner/Spinner.component';\nimport LinkButton from '../../molecules/LinkButton/LinkButton.component';\nimport MobileSideBar from '../../organisms/MobileSideBar/MobileSideBar.component';\n\nimport './Header.styles.scss';\n\nconst Header = ({auth: {isAuthenticated, loading, user}, logout}) => {\n  let history = useHistory();\n  const [searchState, setSearchState] = useState(false);\n\n  const authLinks = (\n    <div className='btns'>\n      {loading || user === null ? (\n        <Spinner width='50px' height='50px' />\n      ) : (\n        <Link to={`/users/${user.id}`} title={user.username}>\n          <img\n            alt='user-logo'\n            className='logo'\n            src={user.gravatar}\n          />\n        </Link>\n      )}\n      <LinkButton\n        text={'Log out'}\n        link={'/login'}\n        type={'s-btn__filled'}\n        handleClick={logout}\n      />\n    </div>\n  );\n\n  const authTabs = (\n    <div className='s-navigation'>\n      <Link to='/' className='s-navigation--item is-selected'>\n        Products\n      </Link>\n    </div>\n  );\n\n  const guestTabs = (\n    <div className='s-navigation'>\n      <Link to='/' className='s-navigation--item is-selected'>\n        Products\n      </Link>\n      <Link to='/' className='s-navigation--item not-selected'>\n        Customers\n      </Link>\n      <Link to='/' className='s-navigation--item not-selected'>\n        Use cases\n      </Link>\n    </div>\n  );\n\n  const guestLinks = (\n    <div className='btns'>\n      <LinkButton text={'Log in'} link={'/login'} type={'s-btn__primary'} />\n      <LinkButton text={'Sign up'} link={'/register'} type={'s-btn__filled'} />\n    </div>\n  );\n\n  const SearchBar = () => {\n    return (\n      <form\n        onSubmit={() => history.push('/questions')}\n        className='small-search-form'\n        autoComplete='off'\n      >\n          <input\n            className='small-search'\n            autoComplete='off'\n            type='text'\n            name='search'\n            maxLength='35'\n            placeholder='Search...'\n          />\n          <Search className=\"small-search-icon\" />\n      </form>\n    );\n  }\n\n\n  return loading ? (\n    ''\n  ) : (\n    <Fragment>\n      <nav className='navbar fixed-top navbar-expand-lg navbar-light bs-md'>\n        <div className=\"hamburger\">\n          <MobileSideBar hasOverlay />\n        </div>\n        <div className='header-brand-div'>\n          <Link className='navbar-brand' to='/'>\n            <Logo className='full-logo' />\n            <SmallLogo className='glyph-logo' />\n          </Link>\n          {!loading && (\n            <Fragment>{isAuthenticated ? authTabs : guestTabs}</Fragment>\n          )}\n        </div>\n        \n          <form\n            id='search'\n            onSubmit={() => history.push('/questions')}\n            className={`grid--cell fl-grow1 searchbar px12 js-searchbar`}\n            autoComplete='off'\n          >\n            <div className='ps-relative search-frame'>\n              <input\n                className='s-input s-input__search h100 search-box'\n                autoComplete='off'\n                type='text'\n                name='search'\n                maxLength='35'\n                placeholder='Search...'\n              />\n              <Search />\n            </div>\n          </form>\n          <div className=\"header-search-div\">\n          <Search className=\"search-icon\" onClick={() => setSearchState(!searchState)} />\n          {!loading && (\n            <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>\n          )}\n        </div>\n      </nav>\n      {searchState && <SearchBar />}\n    </Fragment>\n  );\n};\n\nHeader.propTypes = {\n  logout: PropTypes.func.isRequired,\n  auth: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  auth: state.auth,\n});\n\nexport default connect(mapStateToProps, {logout})(Header);\n"
  },
  {
    "path": "src/components/organisms/Header/Header.styles.scss",
    "content": ".navbar {\n  height: 63px;\n  border-top: 3px solid #f48024;\n  padding: 3px 3px 0 0;\n  box-shadow: 5px 2px rgba(0,0,0,0.1);\n  z-index: 1000;\n  background-color: #3d3d3d;\n  display: flex;\n  justify-content: space-between;\n}\n\n.fixed-top {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n}\n\n.s-navigation {\n  padding: 2px 2px;\n}\n\n.s-navigation .not-selected {\n  color: #c4c8cc;\n\n  &:hover {\n    background-color: #404345;\n    color: #f2f2f3;\n    text-decoration: none;\n    outline: none;\n  }\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.navbar-brand {\n  margin-left: 90px;\n  padding-left: 16px;\n  padding-right: 16px;\n  margin-right: 0;\n\n  &:hover {\n    background-color: #404345;\n  }\n}\n\n.btns {\n  margin-right: 140px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  .logo {\n    width: 32px;\n    border-radius: 3px;\n    margin-right: 9px;\n  }\n}\n\n.btn-sm {\n  padding: 5px 10px;\n}\n\n.btn-outline-primary {\n  background-color: #e1ecf4;\n  color: #39739d;\n  border-color: #7aa7c7;\n}\n\n.btn-outline-primary:hover {\n  color: #2c5777;\n  background-color: #b3d3ea;\n  border-color: #7aa7c7;\n}\n\n.bar-items {\n  font-size: 14px;\n  color:  rgba(0, 0, 0, 0.6);\n  margin: 0 10px;\n}\n\n.px12  {\n  padding-left: 12px !important;\n  padding-right: 12px !important;\n}\n\n.header-brand-div {\n  display: flex;\n  align-items: center;\n}\n\n.header-search-div {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center\n}\n\n.glyph-logo {\n  display: none;\n}\n\n.search-icon {\n  display: none;\n  filter: invert(1);\n\n  &:hover {\n    cursor: pointer;\n  }\n}\n\n.small-search {\n  width: 98vw;\n  position: fixed;\n  top: 69px;\n  left: 5px;\n  border-radius: 8px;\n}\n\n.small-search-form {\n  position: fixed;\n  display: flex;\n  z-index: 1000;\n  padding: 2rem;\n  justify-content: center;\n  align-items: center;\n  width: 100vw;\n  background-color: #00000042;\n  box-shadow: 2px 2px 8px 3px gray;\n}\n\n.small-search-icon {\n  position: fixed;\n  top: 80px;\n  right: 5%;\n}\n\n.s-input__search{\n  margin-top: 10px;\n}\n.s-input-icon {\n  margin-top: -2px;\n}\n\n// Side Navbar\n\n.hamburger {\n  display: none;\n}\n\n///////////////\n\n@media(max-width: 1280px) {\n  .navbar-brand {\n    margin-left: 60px;\n  }\n}\n\n@media(max-width: 1200px) {\n  .btns {\n    margin-right: 30px;\n  }\n}\n\n@media (max-width:986px) {\n  .navbar-brand {\n    margin-left: 20px ;\n  }\n  .btns {\n    margin-right: 20px;\n  }\n}\n\n@media (max-width: 877px){\n  .navbar-brand {\n    margin-left: 0;\n  }\n  .header-brand-div {\n    justify-content: flex-start;\n    padding: 0 1.5rem;\n  }\n  .header-search-div {\n    justify-content: space-around;\n  }\n  .searchbar {\n      display: none;\n    }\n    .search-icon {\n      display: block;\n      margin-right: 1rem;\n      position: absolute;\n      left: 77%;\n      top: 30%;\n    }\n\n  .btns {\n    margin-right: 20px;\n  }\n  .s-input__search {\n    max-width: 250px;\n  }\n}\n\n\n@media (max-width: 715px) {\n  .glyph-logo {\n    display: block;\n  }\n  .full-logo {\n    display: none;\n  }\n  .search-icon {\n    display: block;\n    position: relative;\n    left: 15%;\n    top: 30%;\n  }\n}\n\n@media (max-width: 560px) {\n  .glyph-logo {\n    display: block;\n  }\n  .full-logo {\n    display: none;\n  }\n  .s-navigation .s-navigation--item {\n    display: none;\n\n    &:first-of-type {\n      display: inline;\n    }\n  }\n  .search-icon {\n    display: block;\n    position: relative;\n    left: 5%;\n    top: 30%;\n  }\n  .hamburger {\n    display: block;\n    padding-top: 6px;\n  }\n  .header-search-div, .header-brand-div {\n    transform: scale(0.8);\n  }\n}\n\n@media (max-width: 420px) {\n  .glyph-logo{\n    display: none;\n  }\n  .s-navigation .s-navigation--item {\n    &:first-of-type {\n      margin-left: -4.7rem;\n    }\n  }\n  .search-icon {\n    display: block;\n    position: relative;\n    left: 5%;\n    top: 30%;\n  }\n}\n\n@media (max-width: 390px) {\n  .navbar {\n    padding: 0;\n  }\n}\n\n@media (max-width: 345px) {\n  .glyph-logo {\n    display: none;\n  }\n}"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/LayoutWrapper.component.jsx",
    "content": "import React, {Fragment} from 'react';\n\nimport SideBar from './SideBar/SideBar.component';\nimport RightSideBar from './RightSideBar/RightSideBar.component';\nimport Footer from \"../Footer/Footer.component\";\n\nconst LayoutWrapper = ({ children }) => {\n  return (\n    <Fragment>\n      <div className='page'>\n        <SideBar />\n        <div id='content'>\n          {children}\n          <RightSideBar />\n        </div>\n      </div>\n      <Footer/>\n    </Fragment>\n  );\n};\n\nexport default LayoutWrapper;\n"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/RightSideBar/RightSideBar.component.jsx",
    "content": "import React, {Fragment} from 'react';\n\nimport SideBarWidget from './SideBarWidget/SideBarWidget.component';\nimport TagsWidget from './TagsWidget/TagsWidget.component';\n\nimport './RightSideBar.styles.scss';\n\nconst RightSideBar = () => {\n  return (\n    <Fragment>\n      <div id='sidebar' className='side-bar'>\n        <SideBarWidget />\n        <TagsWidget />\n      </div>\n    </Fragment>\n  );\n};\n\nexport default RightSideBar;\n"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/RightSideBar/RightSideBar.styles.scss",
    "content": ".side-bar {\n  float: right;\n  width: 300px;\n  margin: 0 0 15px;\n  padding-left: 5px;\n  height: 100%;\n}\n\n@media(max-width: 1100px) {\n  .side-bar {\n    float: none;\n    clear: both;\n    display: none;\n  }\n}"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidget.component.jsx",
    "content": "import React, {Fragment} from 'react';\n\nimport { SideBarWidgetData } from \"./SideBarWidgetData\";\n\nimport './SideBarWidget.styles.scss';\n\nconst SideBarWidget = () => {\n  return (\n    <Fragment>\n      <div className=\"s-sidebarwidget s-sidebarwidget__yellow s-anchors s-anchors__grayscale mb16\" data-tracker=\"cb=1\">\n        <ul className=\"d-block p0 m0\">\n          {SideBarWidgetData.map(({ type, title, icon, link }, index) => {\n            if (type === 'header') {\n              return <WidgetHeader\n                key={index}\n                title={title}\n              />\n            } else {\n              return <WidgetItem\n                key={index}\n                icon={icon}\n                title={title}\n                link={link}\n              />\n            }\n          })}\n        </ul>\n      </div>\n    </Fragment>\n  );\n};\n\nconst WidgetHeader = ({ title }) => (\n  <div className=\"s-sidebarwidget--header s-sidebarwidget__small-bold-text fc-light d:fc-black-900 bb bbw1\">\n    {title}\n  </div>\n)\n\nconst WidgetItem = ({ icon, title, link }) => (\n  <li className=\"s-sidebarwidget--item d-flex px16\">\n    <div className=\"flex--item1 fl-shrink0\">\n      {icon}\n    </div>\n    <div className=\"flex--item wmn0 ow-break-word\">\n      <a\n        href={link}\n        className=\"js-gps-track\"\n        data-ga={`[&quot;community bulletin board&quot;,&quot;The Overflow Blog&quot;,&quot;${link}&quot;,null,null]`}\n        data-gps-track=\"communitybulletin.click({ priority: 1, position: 0 })\">{title}</a>\n    </div>\n  </li>\n)\n\nexport default SideBarWidget;\n"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidget.styles.scss",
    "content": ".s-sidebarwidget__yellow {\n  color: #f2f2f3 !important;\n  margin-top: 24px;\n}"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidgetData.js",
    "content": "import React from \"react\";\n\nimport { ReactComponent as EditLogo } from \"../../../../../assets/Edit.svg\";\n\nexport const SideBarWidgetData = [\n  {\n    type: 'header',\n    title: 'The Overflow Blog'\n  },\n  {\n    type: 'item',\n    title: 'Celebrating the Stack Exchange sites that turned ten years old in Q1 2022',\n    icon: <EditLogo/>,\n    link: 'https://stackoverflow.blog/2022/03/16/celebrating-the-stack-exchange-site-that-turned-ten-years-old-in-q1-2022'\n  },\n  {\n    type: 'item',\n    title: 'New data: What makes developers happy at work',\n    icon: <EditLogo/>,\n    link: 'https://stackoverflow.blog/2022/03/17/new-data-what-makes-developers-happy-at-work'\n  },\n  {\n    type: 'header',\n    title: 'Featured on Meta'\n  },\n  {\n    type: 'item',\n    title: 'What goes into site sponsorships on SE?',\n    icon: <div className=\"favicon favicon-stackexchangemeta\" title=\"Meta Stack Exchange\"/>,\n    link: 'https://meta.stackexchange.com/questions/376530/what-goes-into-site-sponsorships-on-se'\n  },\n  {\n    type: 'item',\n    title: 'Stack Exchange Q&amp;A access will not be restricted in Russia',\n    icon: <div className=\"favicon favicon-stackexchangemeta\" title=\"Meta Stack Exchange\"/>,\n    link: 'https://meta.stackexchange.com/questions/376743/stack-exchange-qa-access-will-not-be-restricted-in-russia'\n  },\n  {\n    type: 'item',\n    title: 'Announcing an A/B test for a Trending sort option',\n    icon: <div className=\"favicon favicon-stackoverflowmeta\" title=\"Meta Stack Overflow\"/>,\n    link: 'https://meta.stackoverflow.com/questions/416486/announcing-an-a-b-test-for-a-trending-sort-option'\n  },\n  {\n    type: 'item',\n    title: 'New User Experience: Deep Dive into our Research on the Staging Ground – How...',\n    icon: <div className=\"favicon favicon-stackoverflowmeta\" title=\"Meta Stack Overflow\"/>,\n    link: 'https://meta.stackoverflow.com/questions/416652/new-user-experience-deep-dive-into-our-research-on-the-staging-ground-how-do'\n  },\n  {\n    type: 'header',\n    title: 'Hot Meta Posts'\n  },\n  {\n    type: 'item',\n    title: 'Changing initializer-list tag wiki',\n    icon: <span className=\"fc-black-500\" title=\"Question score (upvotes - downvotes)\">16</span>,\n    link: 'https://meta.stackoverflow.com/questions/416623/changing-initializer-list-tag-wiki'\n  },\n  {\n    type: 'item',\n    title: 'What is the true intention in the \"How to reference material written by...',\n    icon: <span className=\"fc-black-500\" title=\"Question score (upvotes - downvotes)\">10</span>,\n    link: 'https://meta.stackoverflow.com/questions/416665/what-is-the-true-intention-in-the-how-to-reference-material-written-by-others'\n  },\n]"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/RightSideBar/TagsWidget/TagsWidget.component.jsx",
    "content": "import React, {useEffect, Fragment} from 'react';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\nimport {Link} from 'react-router-dom';\n\nimport {getTags} from '../../../../../redux/tags/tags.actions';\nimport TagsWidgetItem from \"./TagsWidgetItem.component\";\n\nimport './TagsWidget.styles.scss';\n\nconst TagsWidget = ({getTags, tag: {tags, loading}}) => {\n  useEffect(() => {\n    getTags();\n  }, [getTags]);\n\n  const numList = [\n    'One',\n    'Two',\n    'Three',\n    'Four',\n    'Five',\n    'Six',\n    'Seven',\n    'Eight',\n    'Nine',\n    'Ten',\n  ];\n\n  return loading || tags.length === 0 ? (\n    ''\n  ) : (\n    <Fragment>\n      <div className='side-bar-tags'>\n        <h4 className='tag-headline'>Top {numList[tags.length - 1]} Tags</h4>\n        {tags.slice(0, 10).map((tag, index) => (\n          <TagsWidgetItem key={index} tagname={tag.tagname} posts_count={tag.posts_count}/>\n        ))}\n        <Link className='show-tags' to='/tags'>\n          show more tags\n        </Link>\n      </div>\n    </Fragment>\n  );\n};\n\nTagsWidget.propTypes = {\n  getTags: PropTypes.func.isRequired,\n  tag: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  tag: state.tag,\n});\n\nexport default connect(mapStateToProps, {getTags})(TagsWidget);\n"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/RightSideBar/TagsWidget/TagsWidget.styles.scss",
    "content": ".side-bar-tags {\n  word-wrap: break-word;\n  margin-bottom: 20px;\n  color: #242729;\n  margin-top: 24px;\n\n  .tag-headline {\n    color: #3c4146;\n    font-size: 18px;\n    font-weight: 400;\n    margin-bottom: 18px;\n    margin-top: 0;\n  }\n}\n\n.show-tags {\n  display: block;\n  margin: 5px 0;\n  color: #0077cc;\n  text-decoration: none;\n  cursor: pointer;\n  font-size: 13px;\n}"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/RightSideBar/TagsWidget/TagsWidgetItem.component.jsx",
    "content": "import React, {Fragment} from \"react\";\n\nimport TagBadge from \"../../../../molecules/TagBadge/TagBadge.component\";\n\nimport './TagsWidgetItem.styles.scss';\n\nconst TagsWidgetItem = ({ tagname, posts_count }) => {\n  return <Fragment>\n    <div className='tag-content'>\n      <TagBadge\n        tag_name={tagname}\n        size={'s-tag s-tag__md'}\n        display={'inline'}\n        href={true}\n      />\n      &nbsp;\n      <span className='tag-mult'>\n        <span>&times;</span>\n        &nbsp;\n        <span>{posts_count}</span>\n      </span>\n    </div>\n  </Fragment>\n}\n\nexport default TagsWidgetItem;"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/RightSideBar/TagsWidget/TagsWidgetItem.styles.scss",
    "content": ".tag-content {\n  box-sizing: inherit;\n  margin-bottom: 8px;\n\n  .tag-mult {\n    margin-right: 4px;\n    color: #848d95;\n\n    span {\n      font-size: 11px;\n      color: #6a737c;\n    }\n  }\n}"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/SideBar/SideBar.component.jsx",
    "content": "import React from 'react';\n\nimport SideBarItem from \"./SideBarItem.component\";\nimport { SideBarData } from \"./SideBarData\";\n\nimport './SideBar.styles.scss';\n\nconst SideBar = () => (\n  <div className='side-bar-container'>\n    <div className='side-bar-tabs'>\n      <SideBarItem isHome={true} link='/' text='Home'/>\n\n      <div className='public-tabs'>\n        <p className='title fc-light'>PUBLIC</p>\n        {SideBarData.map(({ link, icon, text}, index) => (\n          <SideBarItem\n            key={index}\n            link={link}\n            icon={icon}\n            text={text}\n          />\n        ))}\n      </div>\n      <div className='teams-tabs'>\n        <p className='title fc-light'>TEAMS</p>\n      </div>\n    </div>\n  </div>\n);\n\nexport default SideBar;\n"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/SideBar/SideBar.styles.scss",
    "content": ".side-bar-container {\n  width: 17%;\n  min-width: 206px;\n  flex-shrink: 0;\n  z-index: 1;\n  box-shadow: 0 0 0 rgba(12,13,14,0.05);\n  transition: box-shadow ease-in-out .1s,transform ease-in-out .1s;\n  position: relative !important;\n  background-color: #3d3d3d;\n\n  .side-bar-tabs {\n    float: right;\n    margin-top:25px;\n\n    .public-tabs {\n      margin-bottom: 12px;\n    }\n\n    .nav-link {\n      text-decoration: none;\n      color: #c4c8cc;\n\n      li {\n        font-size: 13px;\n\n        .menu-list-icon {\n          min-width: 21px !important;\n        }\n\n        .menu-list-text {\n          margin: 0 !important;\n        }\n      }\n    }\n\n    .home-link {\n      li {\n        border-right: 3px;\n        margin-bottom: 12px;\n      }\n    }\n\n    .icon-link {\n      li {\n        border-right: 3px solid transparent;\n        width: 160px;\n\n        .menu-list-btn {\n          padding-left: 8px;\n        }\n      }\n    }\n\n    .title {\n      font-size: 12px;\n      padding-left: 8px;\n      margin-bottom: 5px;\n    }\n\n    .active {\n      li {\n        font-weight: bold;\n        background: #2d2d2d;\n        color: #f2f2f3;\n        border-right: 3px solid #f48024;\n      }\n\n      .menu-list-text > span {\n        font-weight: 700;\n      }\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .side-bar-container {\n    display: none;\n  }\n}\n"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/SideBar/SideBarData.js",
    "content": "import { ReactComponent as GlobalIcon } from '../../../../assets/Globe.svg';\n\nexport const SideBarData = [\n  {\n    link: '/questions',\n    icon: <GlobalIcon className='icon' />,\n    text: 'Questions',\n  },\n  {\n    link: '/tags',\n    text: 'Tags',\n  },\n  {\n    link: '/users',\n    text: 'Users',\n  },\n  {\n    link: '/jobs',\n    text: 'Jobs',\n  }\n]"
  },
  {
    "path": "src/components/organisms/LayoutWrapper/SideBar/SideBarItem.component.jsx",
    "content": "import React, { Fragment } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nimport { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';\n\nimport './SideBar.styles.scss';\n\nconst SideBarItem = ({ link, icon, text, isHome }) => {\n  return (\n    <Fragment>\n      {isHome ?\n        <HomeItem\n          link={link}\n          text={text}\n        /> :\n        <DefaultItem\n          link={link}\n          icon={icon}\n          text={text}\n        />\n      }\n    </Fragment>\n  )\n};\n\nconst HomeItem = ({ link, text }) => (\n  <NavLink\n    exact\n    activeClassName='active'\n    className='home-link nav-link'\n    to={link}\n  >\n    <ListItem disablePadding>\n      <ListItemButton style={{ paddingLeft: '8px' }}>\n        <ListItemText className='menu-list-text' primary={text} />\n      </ListItemButton>\n    </ListItem>\n  </NavLink>\n)\n\nconst DefaultItem = ({ link, icon, text }) => (\n  <NavLink\n    activeClassName='active'\n    className='icon-link nav-link'\n    to={link}\n  >\n    <ListItem disablePadding>\n      <ListItemButton className='menu-list-btn'>\n        <ListItemIcon className='menu-list-icon'>\n          {icon}\n        </ListItemIcon>\n        <ListItemText className='menu-list-text' primary={text}/>\n      </ListItemButton>\n    </ListItem>\n  </NavLink>\n)\n\nSideBarItem.defaultProps = {\n  isHome: false,\n};\n\nexport default SideBarItem;\n"
  },
  {
    "path": "src/components/organisms/MarkdownEditor/MarkdownEditor.component.jsx",
    "content": "import React, {useState, forwardRef, useImperativeHandle} from 'react';\nimport RichTextEditor from 'react-rte';\n\nimport './MarkdownEditor.styles.scss';\n\nconst MarkdownEditor = forwardRef((props, ref) => {\n  const [value, setValue] = useState(RichTextEditor.createEmptyValue());\n\n  useImperativeHandle(ref, () => ({\n    cleanEditorState() {\n      setValue(RichTextEditor.createEmptyValue());\n    },\n  }));\n\n  const onChange = (newValue) => {\n    setValue(newValue);\n    if (props.onChange) {\n      // Send the changes up to the parent component as an HTML string.\n      // This is here to demonstrate using `.toString()` but in a real app it\n      // would be better to avoid generating a string on each change.\n      props.onChange(newValue.toString('html'));\n    }\n  };\n\n  // The toolbarConfig object allows you to specify custom buttons, reorder buttons and to add custom css classes.\n  // Supported inline styles: https://github.com/facebook/draft-js/blob/master/docs/Advanced-Topics-Inline-Styles.md\n  // Supported block types: https://github.com/facebook/draft-js/blob/master/docs/Advanced-Topics-Custom-Block-Render.md#draft-default-block-render-map\n  const toolbarConfig = {\n    // Optionally specify the groups to display (displayed in the order listed).\n    display: [\n      'INLINE_STYLE_BUTTONS',\n      'BLOCK_TYPE_BUTTONS',\n      'LINK_BUTTONS',\n      // 'BLOCK_TYPE_DROPDOWN',\n      // 'HISTORY_BUTTONS',\n    ],\n    INLINE_STYLE_BUTTONS: [\n      {label: 'Bold', style: 'BOLD', className: 'button-format'},\n      {label: 'Italic', style: 'ITALIC', className: 'button-format'},\n      {label: 'Underline', style: 'UNDERLINE', className: 'button-format'},\n      // {label: 'Monospace', style: 'CODE', className: 'button-format'},\n    ],\n    // BLOCK_TYPE_DROPDOWN: [\n    //   {label: 'Normal', style: 'unstyled'},\n    //   {label: 'Heading Large', style: 'header-one'},\n    //   {label: 'Heading Medium', style: 'header-two'},\n    //   {label: 'Heading Small', style: 'header-three'},\n    // ],\n    BLOCK_TYPE_BUTTONS: [\n      {label: 'UL', style: 'unordered-list-item', className: 'button-format'},\n      {label: 'OL', style: 'ordered-list-item', className: 'button-format'},\n      {label: 'Blockquote', style: 'blockquote', className: 'button-format'},\n      {\n        label: 'Code Block',\n        style: 'code-block',\n        className: 'button-format code-block',\n      },\n    ],\n  };\n  return (\n    <RichTextEditor\n      className='rich-text-editor-root'\n      toolbarClassName='rich-text-editor-toolbar'\n      editorClassName='rich-text-editor-editor'\n      toolbarConfig={toolbarConfig}\n      value={value}\n      onChange={onChange}\n    />\n  );\n});\n\nexport default MarkdownEditor;\n"
  },
  {
    "path": "src/components/organisms/MarkdownEditor/MarkdownEditor.styles.scss",
    "content": ".rich-text-editor-root {\n  background-color: transparent !important;\n  border: none !important;\n  font-family: inherit !important;\n  font-size: inherit !important;\n\n  .rich-text-editor-toolbar {\n    border-bottom: 1px solid var(--black-200);\n    button {\n      width: 32px;\n    }\n    button.button-format {\n      background: var(--white);\n      span {\n        filter: invert(100%);\n        -webkit-filter: invert(100%);\n      }\n    }\n    button.button-format.code-block {\n      // code-block has not default icon in react-rte, so we gotta implement it on our own\n      span {\n        display: inline-block;\n        width: 22px;\n        height: 22px;\n        background-position: 50%;\n        background-repeat: no-repeat;\n        background-size: 18px;\n        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9Ijk0LjUwNHB4IiBoZWlnaHQ9Ijk0LjUwNHB4IiB2aWV3Qm94PSIwIDAgOTQuNTA0IDk0LjUwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTQuNTA0IDk0LjUwNDsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik05My45MTgsNDUuODMzTDY5Ljc5OSwyMS43MTRjLTAuNzUtMC43NS0yLjA3Ny0wLjc1LTIuODI3LDBsLTUuMjI5LDUuMjI5Yy0wLjc4MSwwLjc4MS0wLjc4MSwyLjA0NywwLDIuODI4DQoJCQlsMTcuNDc3LDE3LjQ3NUw2MS43NDQsNjQuNzI0Yy0wLjc4MSwwLjc4MS0wLjc4MSwyLjA0NywwLDIuODI4bDUuMjI5LDUuMjI5YzAuMzc1LDAuMzc1LDAuODg0LDAuNTg3LDEuNDE0LDAuNTg3DQoJCQljMC41MjksMCwxLjAzOS0wLjIxMiwxLjQxNC0wLjU4N2wyNC4xMTctMjQuMTE4Qzk0LjY5OSw0Ny44ODEsOTQuNjk5LDQ2LjYxNCw5My45MTgsNDUuODMzeiIvPg0KCQk8cGF0aCBkPSJNMzIuNzU5LDY0LjcyNEwxNS4yODUsNDcuMjQ4bDE3LjQ3Ny0xNy40NzVjMC4zNzUtMC4zNzUsMC41ODYtMC44ODMsMC41ODYtMS40MTRjMC0wLjUzLTAuMjEtMS4wMzktMC41ODYtMS40MTQNCgkJCWwtNS4yMjktNS4yMjljLTAuMzc1LTAuMzc1LTAuODg0LTAuNTg2LTEuNDE0LTAuNTg2Yy0wLjUzLDAtMS4wMzksMC4yMTEtMS40MTQsMC41ODZMMC41ODUsNDUuODMzDQoJCQljLTAuNzgxLDAuNzgxLTAuNzgxLDIuMDQ3LDAsMi44MjlMMjQuNzA0LDcyLjc4YzAuMzc1LDAuMzc1LDAuODg0LDAuNTg3LDEuNDE0LDAuNTg3YzAuNTMsMCwxLjAzOS0wLjIxMiwxLjQxNC0wLjU4N2w1LjIyOS01LjIyOQ0KCQkJQzMzLjU0Miw2Ni43NzEsMzMuNTQyLDY1LjUwNSwzMi43NTksNjQuNzI0eiIvPg0KCQk8cGF0aCBkPSJNNjAuOTY3LDEzLjZjLTAuMjU0LTAuNDY2LTAuNjgyLTAuODEyLTEuMTktMC45NjJsLTQuMjM5LTEuMjUxYy0xLjA1OC0wLjMxNC0yLjE3MiwwLjI5My0yLjQ4NCwxLjM1MkwzMy4zNzUsNzkuMzgyDQoJCQljLTAuMTUsMC41MDktMC4wOTIsMS4wNTYsMC4xNjEsMS41MjFjMC4yNTMsMC40NjcsMC42ODIsMC44MTIsMS4xOSwwLjk2M2w0LjIzOSwxLjI1MWMwLjE4OSwwLjA1NiwwLjM4LDAuMDgzLDAuNTY3LDAuMDgzDQoJCQljMC44NjMsMCwxLjY2LTAuNTY0LDEuOTE3LTEuNDM1bDE5LjY3OS02Ni42NDRDNjEuMjc4LDE0LjYxMiw2MS4yMjEsMTQuMDY1LDYwLjk2NywxMy42eiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K');\n      }\n    }\n    button[title='Link'],\n    button[title='Remove Link'] {\n      span {\n        filter: invert(0%);\n        -webkit-filter: invert(0%);\n      }\n    }\n    button[title='Link']:disabled,\n    button[title='Remove Link']:disabled {\n      span {\n        filter: invert(100%);\n        -webkit-filter: invert(100%);\n      }\n    }\n  }\n\n  .rich-text-editor-editor {\n    height: 300px;\n    .DraftEditor-root {\n      pre {\n        padding: 5px;\n        background-color: var(--black-100);\n        color: var(--black-800);\n      }\n\n      blockquote {\n        color: var(--black-800);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/components/organisms/MobileSideBar/MobileSideBar.component.jsx",
    "content": "import React, { useState } from \"react\";\nimport { NavLink } from \"react-router-dom\";\n\nimport { ReactComponent as Hamburger } from \"../../../assets/LogoGlyphMd.svg\";\nimport { ReactComponent as Stack } from \"../../../assets/LogoMd.svg\";\nimport { ReactComponent as GlobalIcon } from \"../../../assets/Globe.svg\";\n\nimport \"./MobileSideBar.styles.scss\";\n\nconst SidebarUI = ({ isOpen, ...rest }) => {\n\tconst classes = [\"Sidebar\", isOpen ? \"is-open\" : \"\"];\n\n\treturn (\n\t\t<div aria-hidden={!isOpen} className={classes.join(\" \")} {...rest} />\n\t);\n};\n\nSidebarUI.Overlay = (props) => <div className=\"SidebarOverlay\" {...props} />;\n\nSidebarUI.Content = ({ width = \"20rem\", isRight = false, ...rest }) => {\n\tconst classes = [\"SidebarContent\", isRight ? \"is-right\" : \"\"];\n\tconst style = {\n\t\twidth,\n\t\theight: \"100%\",\n\t\ttop: 0,\n\t\tright: isRight ? `-${width}` : \"auto\",\n\t\tleft: !isRight ? `-${width}` : \"auto\",\n\t};\n\n\treturn <div className={classes.join(\" \")} style={style} {...rest} />;\n};\n\nconst MobileSideBar = (props) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\n\tfunction openSidebar(isOp = true) {\n\t\tsetIsOpen(isOp);\n\t}\n\n\tconst { hasOverlay, isRight } = props;\n\n\treturn (\n\t\t<SidebarUI isOpen={isOpen}>\n\t\t\t<Hamburger onClick={openSidebar} className=\"ham\" />\n\n\t\t\t<SidebarUI.Content\n\t\t\t\tisRight={isRight}\n\t\t\t\tonClick={() => openSidebar(false)}\n\t\t\t>\n\t\t\t\t<div className=\"content-logo\">\n\t\t\t\t\t<Stack />\n\t\t\t\t</div>\n\t\t\t\t<div className=\"content-inner\">\n\t\t\t\t\t<div className=\"side-bar-tabs\">\n\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\texact\n\t\t\t\t\t\t\tactiveClassName=\"active\"\n\t\t\t\t\t\t\tclassName=\"home-link\"\n\t\t\t\t\t\t\tto=\"/\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p>Home</p>\n\t\t\t\t\t\t</NavLink>\n\n\t\t\t\t\t\t<div className=\"public-tabs\">\n\t\t\t\t\t\t\t<p className=\"title fc-light\">PUBLIC</p>\n\t\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\t\tactiveClassName=\"active\"\n\t\t\t\t\t\t\t\tclassName=\"icon-link\"\n\t\t\t\t\t\t\t\tto=\"/questions\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t<GlobalIcon className=\"icon\" />\n\t\t\t\t\t\t\t\t\tStack Overflow\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\t\tactiveClassName=\"active\"\n\t\t\t\t\t\t\t\tclassName=\"link\"\n\t\t\t\t\t\t\t\tto=\"/tags\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p>Tags</p>\n\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\t\tactiveClassName=\"active\"\n\t\t\t\t\t\t\t\tclassName=\"link\"\n\t\t\t\t\t\t\t\tto=\"/users\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p>Users</p>\n\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t\t<NavLink\n\t\t\t\t\t\t\t\tactiveClassName=\"active\"\n\t\t\t\t\t\t\t\tclassName=\"link\"\n\t\t\t\t\t\t\t\tto=\"/jobs\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p>Jobs</p>\n\t\t\t\t\t\t\t</NavLink>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"teams-tabs\">\n\t\t\t\t\t\t\t<p className=\"title fc-light\">TEAMS</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</SidebarUI.Content>\n\t\t\t{hasOverlay ? (\n\t\t\t\t<SidebarUI.Overlay onClick={() => openSidebar(false)} />\n\t\t\t) : false}\n\t\t</SidebarUI>\n\t);\n};\n\nexport default MobileSideBar;\n"
  },
  {
    "path": "src/components/organisms/MobileSideBar/MobileSideBar.styles.scss",
    "content": ".Sidebar {\n\tz-index: 9999;\n\t.SidebarOverlay {\n\t\tposition: fixed;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\topacity: 0;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tz-index: 99;\n\t\tbackground-color: black;\n\t\ttransition: opacity 300ms ease-in-out, width 0ms 300ms, height 0ms 300ms;\n\t}\n\n\t.SidebarContent {\n\t\tposition: fixed;\n\t\tz-index: 100;\n\t\ttransition: 300ms ease-in-out;\n\t\ttransition-property: left, right, top, bottom;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tscroll-behavior: smooth;\n\t\tbackground-color: #333;\n\t}\n\n\t&.is-open {\n\t\t.SidebarOverlay {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\topacity: 0.25;\n\t\t\ttransition: opacity 300ms ease-in-out, width 0ms, height 0ms;\n\t\t}\n\n\t\t.SidebarContent {\n\t\t\tleft: 0 !important;\n\n\t\t\t&.is-right {\n\t\t\t\tleft: auto !important;\n\t\t\t\tright: 0 !important;\n\t\t\t}\n\t\t}\n\t}\n\t.ham {\n\t\tmargin-left: 1rem;\n\t\t&:hover {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t.content-logo {\n\t\tpadding: 1rem 2rem;\n\t\tbackground-color: #4d4d4d;\n\t\tbox-shadow: 2px -2px 8px 3px black;\n\t}\n\n\t.content-inner {\n\t\tpadding: 2rem 0;\n\t\tfilter: contrast(1.4);\n\t\t.side-bar-tabs {\n\t\t\tfloat: right;\n\t\t\tmargin-top: 25px;\n\n\t\t\t.home-link {\n\t\t\t\ttext-decoration: none;\n\t\t\t\tcolor: #c2c3c5;\n\n\t\t\t\tp {\n\t\t\t\t\tpadding: 5px 5px 5px 5px;\n\t\t\t\t\tborder-right: 3px;\n\t\t\t\t\tfont-size: 13px;\n\t\t\t\t}\n\t\t\t\t&:hover {\n\t\t\t\t\tcolor: #cbcbd1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.icon-link {\n\t\t\t\ttext-decoration: none;\n\t\t\t\tcolor: #c4c8cc;\n\n\t\t\t\tp {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tpadding: 5px 30px 5px 10px;\n\t\t\t\t\tmargin-bottom: 5px;\n\t\t\t\t\tborder-right: 3px solid transparent;\n\t\t\t\t\twidth: 160px;\n\t\t\t\t\tfont-size: 13px;\n\t\t\t\t}\n\t\t\t\t.icon {\n\t\t\t\t\tmargin-right: 5px;\n\t\t\t\t}\n\t\t\t\t&:hover {\n\t\t\t\t\tcolor: #f2f2f3;\n\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: #f2f2f3;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.link {\n\t\t\t\ttext-decoration: none;\n\t\t\t\tcolor: #c4c8cc;\n\n\t\t\t\tp {\n\t\t\t\t\tpadding: 5px 45px 5px 20px;\n\t\t\t\t\tmargin-bottom: 5px;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tfont-size: 13px;\n\t\t\t\t}\n\t\t\t\t&:hover {\n\t\t\t\t\tcolor: #f2f2f3;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.title {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tmargin-bottom: 5px;\n\t\t\t}\n\n\t\t\t.icon {\n\t\t\t\twidth: 16px;\n\t\t\t\tcolor: grey;\n\t\t\t}\n\n\t\t\t.active {\n\t\t\t\tcolor: #f2f2f3;\n\n\t\t\t\tp {\n\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\tbackground: #5a5a5a;\n\t\t\t\t\tcolor: #f2f2f3;\n\t\t\t\t\tborder-right: 3px solid #f48024;\n\t\t\t\t}\n\t\t\t\t.icon {\n\t\t\t\t\tcolor: #f2f2f3;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.side-s-navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: space-around;\n\t\talign-items: center;\n\t\t.side-s-navigation--item {\n\t\t\tpadding: 0.8rem;\n\t\t\tborder-radius: 1.3rem;\n\t\t\tmargin: 0.5rem 0;\n\t\t\tfont-size: 1.2rem;\n\t\t}\n\t\t.is-selected {\n\t\t\tbackground-color: #f48225;\n\t\t\tcolor: #0c0c0c;\n\t\t}\n\t}\n\n\t.side-s-navigation .not-selected {\n\t\tcolor: #c4c8cc;\n\n\t\t&:hover {\n\t\t\tbackground-color: #404345;\n\t\t\tcolor: #f2f2f3;\n\t\t\ttext-decoration: none;\n\t\t\toutline: none;\n\t\t}\n\t}\n}\n"
  },
  {
    "path": "src/components/organisms/Pagination/Pagination.component.jsx",
    "content": "import React, { Fragment } from \"react\";\nimport { Pagination as MuiPagination, PaginationItem } from \"@mui/material\";\n\nconst Pagination = ({\n  page,\n  itemList,\n  itemsPerPage,\n  handlePaginationChange,\n}) => {\n  return (\n    <Fragment>\n      <MuiPagination\n        variant=\"outlined\"\n        shape=\"rounded\"\n        page={page}\n        count={Math.ceil(itemList.length/itemsPerPage)}\n        onChange={handlePaginationChange}\n        style={{ float: 'right', margin: '0 13px 16px 0' }}\n        renderItem={(item) => (\n          <PaginationItem {...item} sx={{ color: '#cfd2d6', border: '1px solid #4c4f52' }}/>\n        )}\n      />\n    </Fragment>\n  );\n}\n\nexport default Pagination;\n"
  },
  {
    "path": "src/config/index.js",
    "content": "const config = {\n  BASE_URL: process.env.REACT_APP_API_URL,\n};\n\nif (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {\n  config.BASE_URL = process.env.REACT_APP_API_URL;\n}\n\nexport default config;"
  },
  {
    "path": "src/hooks/usePageTitle.jsx",
    "content": "import { useEffect } from 'react';\n\nconst usePageTitle = (title, prevailOnUnmount = false) => {\n  useEffect(() => {\n    document.title = title;\n  }, [title])\n};\n\nexport default usePageTitle;\n"
  },
  {
    "path": "src/index.js",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {BrowserRouter} from 'react-router-dom';\n\nimport App from './App';\n\nReactDOM.render(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n"
  },
  {
    "path": "src/modules/AllTagsPage/AllTagsPage.component.jsx",
    "content": "import React, {useEffect, Fragment, useState} from 'react';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\nimport {getTags} from '../../redux/tags/tags.actions';\nimport handleSorting from '../../utils/handleSorting';\n\nimport TagPanel from './TagPanel/TagPanel.component';\nimport Spinner from '../../components/molecules/Spinner/Spinner.component';\nimport SearchBox from '../../components/molecules/SearchBox/SearchBox.component';\nimport ButtonGroup from '../../components/molecules/ButtonGroup/ButtonGroup.component';\nimport Pagination from \"../../components/organisms/Pagination/Pagination.component\";\n\nimport './AllTagsPage.styles.scss';\n\nconst itemsPerPage = 12;\n\nconst AllTagsPage = ({getTags, tag: {tags, loading}}) => {\n  useEffect(() => {\n    getTags();\n  }, [getTags]);\n\n  const [page, setPage] = useState(1);\n  const [fetchSearch, setSearch] = useState('');\n  const [sortType, setSortType] = useState('Popular');\n\n  const handleChange = (e) => {\n    e.preventDefault();\n    setSearch(e.target.value);\n    setPage(1)\n  };\n\n  const handlePaginationChange = (e, value) => setPage(value);\n\n  return loading || tags === null ? (\n    <Spinner type='page' width='75px' height='200px' />\n  ) : (\n    <Fragment>\n      <div id='mainbar' className='tags-page fc-black-800'>\n        <h1 className='headline'>Tags</h1>\n        <p className='fs-body'>\n          A tag is a keyword or label that categorizes your question with other,\n          similar questions. Using the right tags makes it easier for others to\n          find and answer your question.\n        </p>\n        <div className='headline-count'>\n          <span>{new Intl.NumberFormat('en-IN').format(tags.length)} tags</span>\n        </div>\n        <div className='tags-box pl16 pr16 pb16'>\n          <SearchBox\n            placeholder={'filter by tag name'}\n            handleChange={handleChange}\n            width={'200px'}\n          />\n          <ButtonGroup\n            buttons={['Popular', 'Name', 'New']}\n            selected={sortType}\n            setSelected={setSortType}\n          />\n        </div>\n        <div className='user-browser'>\n          <div className='grid-layout'>\n            {tags\n              .filter((tag) =>\n                tag.tagname.toLowerCase().includes(fetchSearch.toLowerCase())\n              )\n              ?.sort(handleSorting(sortType))\n              .slice((page - 1) * itemsPerPage, (page - 1) * itemsPerPage + itemsPerPage)\n              .map((tag, index) => (\n                <TagPanel key={index} tag={tag} />\n              ))}\n          </div>\n        </div>\n        <Pagination\n          page={page}\n          itemList={tags.filter((tag) => tag.tagname.toLowerCase().includes(fetchSearch.toLowerCase()))}\n          itemsPerPage={itemsPerPage}\n          handlePaginationChange={handlePaginationChange}\n        />\n      </div>\n    </Fragment>\n  );\n};\n\nAllTagsPage.propTypes = {\n  getTags: PropTypes.func.isRequired,\n  tag: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  tag: state.tag,\n});\n\nexport default connect(mapStateToProps, {getTags})(AllTagsPage);\n"
  },
  {
    "path": "src/modules/AllTagsPage/AllTagsPage.styles.scss",
    "content": "#mainbar {\n  height: 100%;\n}\n\n.tags-page {\n  display: inline-block;\n  width: 60%;\n  margin-left: 20%;\n  padding: 24px 0;\n\n  .headline {\n    font-size: 28px;\n    margin-bottom: 16px;\n    line-height: 1.3;\n    font-weight: 400;\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n\n  .fs-body {\n    padding-left: 16px;\n    padding-right: 1rem;\n    width: auto;\n    font-size: 15px;\n    font-weight: 400;\n  }\n\n  .headline-count {\n    margin-bottom: 12px;\n    display: flex;\n    padding-left: 16px;\n    padding-right: 1rem;\n\n    span {\n      font-size: 17px;\n      margin-right: 1rem;\n    }\n  }\n\n  .tags-box {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    align-items: space-between;\n  }\n\n  .user-browser {\n    float: none;\n    clear: both;\n    width: auto;\n    padding: 0 16px 16px 16px;\n\n    .grid-layout {\n      display: grid;\n      grid-gap: 12px;\n      grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));\n    }\n  }\n}\n\n.Mui-selected {\n  color: #000 !important;\n  font-weight: 500 !important;\n  border-color: transparent !important;\n  background-color: #f48225 !important;\n}\n\n@media(max-width: 1100px) {\n  .side-bar {\n    display: none;\n  }\n  .tags-page {\n    width: 80%;\n  }\n  #content {\n    max-width: none;\n    margin-right: 10px;\n  }\n}\n\n@media (max-width: 500px) {\n  #mainbar.tags-page {\n    .tags-box {\n      display: flex;\n      align-items: space-between;\n    }\n    .s-input {\n      margin-bottom: 1rem;\n    }\n  }\n}\n"
  },
  {
    "path": "src/modules/AllTagsPage/TagPanel/TagPanel.component.jsx",
    "content": "import React from 'react';\nimport moment from 'moment';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\nimport TagBadge from '../../../components/molecules/TagBadge/TagBadge.component';\n\nconst TagPanel = ({tag: {tagname, description, created_at, posts_count}}) => {\n  return (\n    <div className=\"grid--item s-card js-tag-cell d-flex fd-column\">\n      <div className=\"d-flex jc-space-between ai-center mb12\">\n        <TagBadge tag_name={tagname} size={'s-tag'} float={'left'} />\n      </div>\n\n      <div className=\"flex--item fc-medium mb12 v-truncate4\">\n        {description}\n      </div>\n\n      <div className=\"mt-auto d-flex jc-space-between fs-caption fc-black-400\">\n        <div className=\"flex--item\">{posts_count} {posts_count === 1 ? 'question' : 'questions'}</div>\n        <div className=\"flex--item s-anchors s-anchors__inherit\">\n          added {moment(created_at).fromNow(false)}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nTagPanel.propTypes = {\n  tag: PropTypes.object.isRequired,\n};\n\nexport default connect(null)(TagPanel);\n"
  },
  {
    "path": "src/modules/AllUsersPage/AllUsersPage.component.jsx",
    "content": "import React, { Fragment, useEffect, useState } from \"react\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport { getUsers } from \"../../redux/users/users.actions\";\nimport handleSorting from \"../../utils/handleSorting\";\n\nimport UserPanel from \"./UserPanel/UserPanel.component\";\nimport Spinner from \"../../components/molecules/Spinner/Spinner.component\";\nimport SearchBox from \"../../components/molecules/SearchBox/SearchBox.component\";\nimport ButtonGroup from \"../../components/molecules/ButtonGroup/ButtonGroup.component\";\nimport Pagination from \"../../components/organisms/Pagination/Pagination.component\";\n\nimport \"./AllUsersPage.styles.scss\";\n\nconst itemsPerPage = 18;\n\nconst AllUsersPage = ({ getUsers, user: { users, loading } }) => {\n  useEffect(() => {\n    getUsers();\n  }, [getUsers]);\n\n  const [page, setPage] = useState(1);\n  const [fetchSearch, setSearch] = useState(\"\");\n  const [sortType, setSortType] = useState(\"Popular\");\n\n  const handlePaginationChange = (e, value) => setPage(value);\n\n  const handleChange = (e) => {\n    e.preventDefault();\n    setSearch(e.target.value);\n    setPage(1);\n  };\n\n  return loading || users === null ? (\n    <Spinner type=\"page\" width=\"75px\" height=\"200px\" />\n  ) : (\n    <Fragment>\n      <div id=\"mainbar\" className=\"users-page fc-black-800\">\n        <h1 className=\"headline\">Users</h1>\n        <div className=\"headline-count\">\n          <span>\n            {new Intl.NumberFormat(\"en-IN\").format(users.length)} users\n          </span>\n        </div>\n        <div className=\"users-box pl16 pr16 pb16\">\n          <SearchBox\n            placeholder={\"filter by user\"}\n            handleChange={handleChange}\n            width={\"200px\"}\n          />\n          <ButtonGroup\n            buttons={[\"Popular\", \"Name\", \"Active\", \"New Users\"]}\n            selected={sortType}\n            setSelected={setSortType}\n          />\n        </div>\n        <div className=\"user-browser\">\n          <div className=\"grid-layout\">\n            {users\n              .filter((user) =>\n                user.username.toLowerCase().includes(fetchSearch.toLowerCase())\n              )\n              ?.sort(handleSorting(sortType, \"users\"))\n              .slice(\n                (page - 1) * itemsPerPage,\n                (page - 1) * itemsPerPage + itemsPerPage\n              )\n              .map((user, index) => (\n                <UserPanel key={index} user={user} />\n              ))}\n          </div>\n        </div>\n        <Pagination\n          page={page}\n          itemList={users.filter((user) =>\n            user.username.toLowerCase().includes(fetchSearch.toLowerCase())\n          )}\n          itemsPerPage={itemsPerPage}\n          handlePaginationChange={handlePaginationChange}\n        />\n      </div>\n    </Fragment>\n  );\n};\n\nAllUsersPage.propTypes = {\n  getUsers: PropTypes.func.isRequired,\n  user: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  user: state.user,\n});\n\nexport default connect(mapStateToProps, { getUsers })(AllUsersPage);\n"
  },
  {
    "path": "src/modules/AllUsersPage/AllUsersPage.styles.scss",
    "content": ".users-page {\n  width: calc(100% - 300px - 24px);\n  padding: 24px 0 24px 0;\n  float: left;\n  margin: 0;\n\n  .headline {\n    font-size: 28px;\n    margin-bottom: 24px;\n    line-height: 1.3;\n    font-weight: 400;\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n\n  .headline-count {\n    margin-bottom: 12px;\n    display: flex;\n    padding-left: 16px;\n    padding-right: 16px;\n\n    span {\n      font-size: 17px;\n      margin-right: 12px;\n    }\n  }\n\n  .users-box {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    align-items: space-around;\n  }\n\n  .user-browser {\n    float: none;\n    clear: both;\n    width: auto;\n    padding: 0 16px 16px 16px;\n\n    .grid-layout {\n      display: grid;\n      grid-gap: 12px;\n      grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));\n    }\n  }\n}\n\n@media (max-width: 520px) {\n  .users-box {\n    .s-input {\n      margin-bottom: 1rem;\n    }\n  }\n}"
  },
  {
    "path": "src/modules/AllUsersPage/UserPanel/UserPanel.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport moment from 'moment';\nimport {connect} from 'react-redux';\nimport {Link} from 'react-router-dom';\nimport PropTypes from 'prop-types';\n\nimport './UserPanel.styles.scss';\n\nconst UserPanel = ({\n  user: {id, username, created_at, posts_count, tags_count, views, gravatar},\n}) => {\n  return (\n    <Fragment>\n      <div className='user-panel-info s-card bs-sm h:bs-md fc-black-500'>\n        <div className='user-gravatar'>\n          <Link to={`/users/${id}`}>\n            <div className='logo-wrapper'>\n              <img\n                alt='user-logo'\n                src={gravatar}\n              />\n            </div>\n          </Link>\n        </div>\n        <div className='user-details'>\n          <Link className='fc-blue-600' to={`/users/${id}`}>\n            {username}\n          </Link>\n          <span className='item'>\n            <span className='count'>\n              {posts_count}{' '}\n              <span className='count-info'>\n                {posts_count === 1 ? 'QUESTION' : 'QUESTIONS'}\n              </span>\n            </span>\n          </span>\n          <span className='item'>\n            <span className='count'>\n              {tags_count}{' '}\n              <span className='count-info'>\n                {posts_count === 1 ? 'TAG' : 'TAGS'}\n              </span>\n            </span>\n          </span>\n          <span className='item user-time' style={{paddingTop: '1px'}}>\n            <span className='count'>\n              {views}{' '}\n              <span className='count-info'>\n                {views === 1 ? 'PROFILE VIEW' : 'PROFILE VIEWS'}\n              </span>\n            </span>\n            <span className='count' style={{fontWeight: '400'}}>\n              {moment(created_at).fromNow(false)}\n            </span>\n          </span>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nUserPanel.propTypes = {\n  user: PropTypes.object.isRequired,\n};\n\nexport default connect(null)(UserPanel);\n"
  },
  {
    "path": "src/modules/AllUsersPage/UserPanel/UserPanel.styles.scss",
    "content": ".user-panel-info {\n  padding: 6px 7px 8px 8px;\n  border: 1px solid #4a4e51;\n  border-radius: 3px;\n  background-color: #2d2d2d;\n  box-sizing: border-box;\n  color: #6a737c;\n  display: flex;\n  align-items: center;\n\n  &:hover {\n    border-color: #697075;\n  }\n\n  .user-gravatar {\n    float: left;\n    width: 48px;\n    height: 48px;\n\n    a {\n      color: #0077cc;\n      text-decoration: none;\n\n      &:hover {\n        color: #0095ff;\n        text-decoration: none;\n      }\n\n      .logo-wrapper {\n        width: 48px;\n        height: 48px;\n        border-radius: 2px;\n        overflow: hidden;\n        padding: 0;\n\n        img {\n          width: 48px;\n          height: 48px;\n          margin: 0 auto;\n        }\n      }\n    }\n  }\n\n  .user-details {\n    margin-left: 9px;\n    width: calc(100% - 64px);\n    line-height: 1.3;\n    float: left;\n\n    a {\n      color: #0077cc;\n      text-decoration: none;\n      display: inline-block;\n      font-size: 14px;\n\n      &:hover {\n        color: #0095ff;\n        text-decoration: none;\n      }\n    }\n\n    .item {\n      margin-right: 2px;\n      display: block;\n    }\n\n    .user-time {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .count {\n      font-size: 11px;\n      font-weight: 700;\n    }\n\n    .count-info {\n      font-size: 10px;\n      font-weight: 500;\n    }\n  }\n}"
  },
  {
    "path": "src/modules/HomePage/HomePage.component.jsx",
    "content": "import React, {Fragment, useEffect, useState} from 'react';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport {getPosts} from '../../redux/posts/posts.actions';\nimport LinkButton from '../../components/molecules/LinkButton/LinkButton.component';\nimport PostItem from '../../components/molecules/PostItem/PostItem.component';\nimport Spinner from '../../components/molecules/Spinner/Spinner.component';\nimport handleSorting from \"../../utils/handleSorting\";\nimport Pagination from \"../../components/organisms/Pagination/Pagination.component\";\nimport ButtonGroup from '../../components/molecules/ButtonGroup/ButtonGroup.component';\nimport handleFilter from '../../utils/handleFilter'\n\nimport './HomePage.styles.scss';\n\nconst itemsPerPage = 10;\n\nconst HomePage = ({getPosts, post: {posts, loading}}) => {\n  useEffect(() => {\n    getPosts();\n  }, [getPosts]);\n\n  const [page, setPage] = useState(1);\n  const [sortType, setSortType] = useState('Month')\n\n  const handlePaginationChange = (e, value) => setPage(value);\n  \n  return loading || posts === null ? (\n    <Spinner type='page' width='75px' height='200px' />\n  ) : (\n    <Fragment>\n      <div id='mainbar' className='homepage fc-black-800'>\n        <div className='questions-grid'>\n          <h3 className='questions-headline'>Top Questions</h3>\n          <div className='questions-btn'>\n            <LinkButton\n              text={'Ask Question'}\n              link={'/add/question'}\n              type={'s-btn__primary'}\n            />\n          </div>\n        </div>\n        <div className='questions-tabs'>\n        <span>\n            {new Intl.NumberFormat('en-IN').format(posts.length)} questions\n          </span>\n          <div className=\"btns-filter\">\n            <ButtonGroup\n              buttons={['Today', 'Week', 'Month', 'Year']}\n              selected={sortType}\n              setSelected={setSortType}\n            />\n          </div>\n        </div>\n        <div className=\"questions\">\n          <div className=\"postQues\">\n            {posts\n              .sort(handleSorting(sortType))\n              .filter(handleFilter(sortType))\n              .slice((page - 1) * itemsPerPage, (page - 1) * itemsPerPage + itemsPerPage)\n              .map((post, index) => (\n                <PostItem key={index} post={post} />\n              ))}\n          </div>\n        </div>\n        <Pagination\n          page={page}\n          itemList={posts\n            .sort(handleSorting(sortType))\n            .filter(handleFilter(sortType))}\n          itemsPerPage={itemsPerPage}\n          handlePaginationChange={handlePaginationChange}\n        />\n      </div>\n    </Fragment>\n  );\n};\n\nHomePage.propTypes = {\n  getPosts: PropTypes.func.isRequired,\n  post: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  post: state.post,\n});\n\nexport default connect(mapStateToProps, { getPosts })(HomePage);\n"
  },
  {
    "path": "src/modules/HomePage/HomePage.styles.scss",
    "content": ".page {\n  width: 100%;\n  background: none;\n  display: flex;\n  justify-content: space-between;\n  margin: 64px auto 0 auto;\n}\n\n.postQues .brief {\n  display: none;\n}\n\n.btns-filter {\n  margin: 3% 0% 3% 0%;\n}\n\n#content {\n  max-width: none;\n  width: 100vw;\n  padding: 0;\n  margin-right: 60px;\n}\n\n#mainbar {\n  padding-top: 14px;\n}\n\n.homepage {\n  width: 100;\n  padding: 24px 0 24px 0;\n  float: left;\n  margin: 0;\n\n  .questions-grid {\n    display: flex;\n    padding-left: 24px;\n\n    .questions-headline {\n      margin-bottom: 24px;\n      flex: 1 auto;\n      font-size: 28px;\n      font-weight: 400;\n    }\n  }\n\n  .questions-tabs {\n    margin-bottom: 12px;\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    padding-left: 24px;\n    padding-right: 16px;\n    align-items: center;\n\n    span {\n      font-size: 17px;\n      margin-right: 12px;\n    }\n  }\n\n  .questions {\n    clear: both;\n    width: auto;\n    margin-bottom: 20px;\n    border-top: 1px solid #4a4e51;\n  }\n}\n\n@media (max-width: 1100px) {\n  #content {\n    max-width: none;\n    width: calc(100vw - 220px);\n  }\n\n  #mainbar {\n    width: calc(100vw - 220px);\n    margin: 0;\n  \n    .questions-grid {\n      width: 100%;\n    }\n  }\n\n  .questions-tabs {\n    span {\n      font-size: 15px;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  #content {\n    max-width: none;\n    width: 99%;\n  }\n\n  #mainbar {\n    width: 99%;\n    margin: 0;\n  \n    .questions-grid {\n      width: 100%;\n    }\n  }\n\n  .homepage .questions-tabs span {\n      font-size: 13px;\n    }\n}\n\n@media (min-width: 1350px) {\n  #content {\n    max-width: none;\n    margin-right: 11.5vw;\n  }\n}"
  },
  {
    "path": "src/modules/Login/Login.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport {Redirect} from 'react-router-dom';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport AuthForm from '../../components/organisms/AuthForm/AuthForm.component';\nimport Footer from \"../../components/organisms/Footer/Footer.component\";\n\nconst Login = ({isAuthenticated}) => {\n  if (isAuthenticated) {\n    return <Redirect to='/' />;\n  }\n\n  return (\n    <Fragment>\n      <div className='auth-page'>\n        <div className='register-content'>\n          <div className='register-grid'>\n            <AuthForm action={'Log in'} />\n          </div>\n        </div>\n      </div>\n      <Footer/>\n    </Fragment>\n  );\n};\n\nLogin.propTypes = {\n  isAuthenticated: PropTypes.bool,\n};\n\nconst mapStateToProps = (state) => ({\n  isAuthenticated: state.auth.isAuthenticated,\n});\n\nexport default connect(mapStateToProps, null)(Login);\n"
  },
  {
    "path": "src/modules/NotFound/NotFound.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport {Link} from 'react-router-dom';\n\nimport './NotFound.styles.scss';\n\nconst NotFound = () => {\n  return (\n    <Fragment>\n      <div className='page'>\n        <div className='box'>\n          <div className='box__ghost'>\n            <div className='symbol' />\n            <div className='symbol' />\n            <div className='symbol' />\n            <div className='symbol' />\n            <div className='symbol' />\n            <div className='symbol' />\n\n            <div className='box__ghost-container'>\n              <div className='box__ghost-eyes'>\n                <div className='box__eye-left' />\n                <div className='box__eye-right' />\n              </div>\n              <div className='box__ghost-bottom'>\n                <div />\n                <div />\n                <div />\n                <div />\n                <div />\n              </div>\n            </div>\n            <div className='box__ghost-shadow' />\n          </div>\n          <div className='box__description'>\n            <div className='box__description-container'>\n              <div className='box__description-title fc-black-800'>Whoops!</div>\n              <div className='box__description-text fc-black-500'>\n                It seems like we couldn't find the page you were looking for\n              </div>\n            </div>\n            <Link to='/' className='box__button'>\n              Back to home page\n            </Link>\n          </div>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nexport default NotFound;\n"
  },
  {
    "path": "src/modules/NotFound/NotFound.styles.scss",
    "content": "@import url(https://fonts.googleapis.com/css?family=Ubuntu);\n//variables\n$purple: #28254C;\n$l-purple: #332F63;\n$t-purple: #8C8AA7;\n$pink: #FF5E65;\n$white: #fff;\n\nhtml, body {\n  min-width: auto;\n}\n* {\n  box-sizing: border-box;\n}\n\n.box {\n  width: 350px;\n  height: 100%;\n  max-height: 600px;\n  min-height: 450px;\n  border-radius: 20px;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  padding: 30px 50px;\n\n  .box__ghost {\n    padding: 15px 25px 25px;\n    position: absolute;\n    left: 50%;\n    top: 30%;\n    transform: translate(-50%, -30%);\n\n    .symbol{\n      &:nth-child(1) {\n        opacity: .2;\n        animation: shine 4s ease-in-out 3s infinite;\n\n        &:before, &:after {\n          content: '';\n          width: 12px;\n          height: 4px;\n          background: $white;\n          position: absolute;\n          border-radius: 5px;\n          bottom: 65px;\n          left: 0;\n        }\n        &:before {\n          transform: rotate(45deg);\n        }\n        &:after {\n          transform: rotate(-45deg);\n        }\n      }\n      &:nth-child(2) {\n        position: absolute;\n        left: -5px;\n        top: 30px;\n        height: 18px;\n        width: 18px;\n        border: 4px solid;\n        border-radius: 50%;\n        border-color: $white;\n        opacity: .2;\n        animation: shine 4s ease-in-out 1.3s infinite;\n      }\n      &:nth-child(3) {\n        opacity: .2;\n        animation: shine 3s ease-in-out .5s infinite;\n\n        &:before, &:after {\n          content: '';\n          width: 12px;\n          height: 4px;\n          background: $white;\n          position: absolute;\n          border-radius: 5px;\n          top: 5px;\n          left: 40px;\n        }\n        &:before {\n          transform: rotate(90deg);\n        }\n        &:after {\n          transform: rotate(180deg);\n        }\n      }\n      &:nth-child(4) {\n        opacity: .2;\n        animation: shine 6s ease-in-out 1.6s infinite;\n\n        &:before, &:after {\n          content: '';\n          width: 15px;\n          height: 4px;\n          background: $white;\n          position: absolute;\n          border-radius: 5px;\n          top: 10px;\n          right: 30px;\n        }\n        &:before {\n          transform: rotate(45deg);\n        }\n        &:after {\n          transform: rotate(-45deg);\n        }\n      }\n      &:nth-child(5) {\n        position: absolute;\n        right: 5px;\n        top: 40px;\n        height: 12px;\n        width: 12px;\n        border: 3px solid;\n        border-radius: 50%;\n        border-color: $white;\n        opacity: .2;\n        animation: shine 1.7s ease-in-out 7s infinite;\n      }\n      &:nth-child(6) {\n        opacity: .2;\n        animation: shine 2s ease-in-out 6s infinite;\n\n        &:before, &:after {\n          content: '';\n          width: 15px;\n          height: 4px;\n          background: $white;\n          position: absolute;\n          border-radius: 5px;\n          bottom: 65px;\n          right: -5px;\n        }\n        &:before {\n          transform: rotate(90deg);\n        }\n        &:after {\n          transform: rotate(180deg);\n        }\n      }\n    }\n\n    .box__ghost-container {\n      background: $white;\n      width: 100px;\n      height: 100px;\n      border-radius: 100px 100px 0 0;\n      position: relative;\n      margin: 0 auto;\n      animation: upndown 3s ease-in-out infinite;\n\n      .box__ghost-eyes {\n        position: absolute;\n        left: 50%;\n        top: 45%;\n        //transform: translate(-50%, -45%);\n        height: 12px;\n        width: 70px;\n\n        .box__eye-left {\n          width: 12px;\n          height: 12px;\n          background: #2d2d2d;\n          border-radius: 50%;\n          margin: 0 10px;\n          position: absolute;\n          left: 0;\n        }\n        .box__eye-right {\n          width: 12px;\n          height: 12px;\n          background: #2d2d2d;\n          border-radius: 50%;\n          margin: 0 10px;\n          position: absolute;\n          right: 0;\n        }\n      }\n\n      .box__ghost-bottom {\n        display:flex;\n        position: absolute;\n        top:100%;\n        left:0;\n        right:0;\n\n        div {\n          flex-grow:1;\n          position: relative;\n          top:-10px;\n          height:20px;\n          border-radius:100%;\n          background-color: $white;\n\n          &:nth-child(2n) {\n            top: -12px;\n            margin: 0 -0px;\n            border-top: 15px solid #2d2d2d;\n            background: transparent;\n          }\n        }\n      }\n    }\n\n    .box__ghost-shadow {\n      height: 20px;\n      box-shadow: 0 50px 15px 5px #454545aa;\n      border-radius: 50%;\n      margin: 0 auto;\n      animation: smallnbig 3s ease-in-out infinite;\n    }\n  }\n\n  .box__description {\n    position: absolute;\n    bottom: 30px;\n    left: 50%;\n    transform: translateX(-50%);\n\n    .box__description-container {\n      color: $white;\n      text-align: center;\n      width: 200px;\n      font-size: 16px;\n      margin: 0 auto;\n\n      .box__description-title {\n        font-size: 24px;\n        letter-spacing: .5px;\n      }\n\n      .box__description-text {\n        color: $t-purple;\n        line-height: 20px;\n        margin-top: 20px;\n      }\n    }\n\n    .box__button {\n      display: block;\n      position: relative;\n      background: #f48024;\n      border: 1px solid transparent;\n      border-radius: 50px;\n      height: 50px;\n      text-align: center;\n      text-decoration: none;\n      color: $white;\n      line-height: 50px;\n      font-size: 18px;\n      padding: 0 70px;\n      white-space: nowrap;\n      margin-top: 25px;\n      transition: background .5s ease;\n      overflow: hidden;\n      //-webkit-mask-image: -webkit-radial-gradient(white, black);\n\n      &:before {\n        content: '';\n        position: absolute;\n        width: 20px;\n        height: 100px;\n        background: $white;\n        bottom: -25px;\n        left: 0;\n        border: 2px solid $white;\n        transform: translateX(-50px) rotate(45deg);\n        transition: transform .5s ease;\n      }\n\n      &:hover {\n        background: #cc7525;\n      }\n    }\n  }\n}\n\n//keyframes\n@keyframes upndown {\n  0% {transform: translateY(5px);}\n  50% {transform: translateY(15px);}\n  100% {transform: translateY(5px);}\n}\n@keyframes smallnbig {\n  0% {width: 90px;}\n  50% {width: 100px;}\n  100% {width: 90px;}\n}\n@keyframes shine {\n  0% {opacity: .2;}\n  25% {opacity: .1;}\n  50% {opacity: .2;}\n  100% {opacity: .2;}\n}\n"
  },
  {
    "path": "src/modules/Post/AnswerSection/AnswerForm/AnswerForm.component.jsx",
    "content": "import React, {Fragment, useState, useRef} from 'react';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\nimport {addAnswer} from '../../../../redux/answers/answers.actions';\n\n\nimport LinkButton from '../../../../components/molecules/LinkButton/LinkButton.component';\nimport MarkdownEditor from '../../../../components/organisms/MarkdownEditor/MarkdownEditor.component';\n\nimport './AnswerForm.styles.scss';\n\nconst AnswerForm = ({addAnswer, auth, post: {post}}) => {\n  const [formData, setFormData] = useState({\n    text: '',\n  });\n\n  const markdownEditorRef = useRef(null);\n\n  const {text} = formData;\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    addAnswer(post.id, {text});\n    setFormData({\n      text: '',\n    });\n    markdownEditorRef.current.cleanEditorState();\n  };\n\n  const updateConvertedContent = (htmlConvertedContent) => {\n    setFormData({...formData, text: htmlConvertedContent});\n  };\n\n  return (\n    <Fragment>\n      {!auth.loading && auth.isAuthenticated ? (\n        <Fragment>\n          <form className='answer-form' onSubmit={(e) => handleSubmit(e)}>\n            <div className='answer-grid'>\n              <label className=' fc-black-800'>Your Answer</label>\n              <div className='s-textarea rich-text-editor-container'>\n                <MarkdownEditor\n                  ref={markdownEditorRef}\n                  onChange={updateConvertedContent}\n                />\n              </div>\n              <button className='s-btn s-btn__primary'>Post Your Answer</button>\n            </div>\n          </form>\n        </Fragment>\n      ) : (\n        <Fragment>\n          <LinkButton\n            text={'You need to login to add an answer'}\n            link={'/login'}\n            type={'s-btn__outlined'}\n            marginTop={'12px'}\n          />\n        </Fragment>\n      )}\n    </Fragment>\n  );\n};\n\nAnswerForm.propTypes = {\n  auth: PropTypes.object.isRequired,\n  addAnswer: PropTypes.func.isRequired,\n  post: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  auth: state.auth,\n  post: state.post,\n});\n\nexport default connect(mapStateToProps, {addAnswer})(AnswerForm);\n"
  },
  {
    "path": "src/modules/Post/AnswerSection/AnswerForm/AnswerForm.styles.scss",
    "content": ".answer-grid {\n  margin-bottom: 16px;\n  display: flex;\n  flex: 1 auto !important;\n  flex-direction: column;\n  color: #242729;\n\n  label {\n    margin-bottom: 16px;\n    margin-top: 16px;\n    display: block;\n    padding: 0 2px;\n    color: #0c0d0e;\n    font-family: inherit;\n    font-size: 18px;\n    font-weight: 500;\n    cursor: pointer;\n  }\n\n  button {\n    margin: 12px 0 8px 0;\n    width: 150px;\n    font-size: 14px;\n  }\n\n  .s-textarea.rich-text-editor-container {\n    padding: 0;\n    .rich-text-editor-toolbar {\n      padding: 0;\n    }\n  }\n}\n"
  },
  {
    "path": "src/modules/Post/AnswerSection/AnswerItem/AnswerItem.component.jsx",
    "content": "import React, { Fragment } from \"react\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router-dom\";\nimport { deleteAnswer } from \"../../../../redux/answers/answers.actions\";\n\nimport { ReactComponent as UpVote } from \"../../../../assets/ArrowUpLg.svg\";\nimport { ReactComponent as DownVote } from \"../../../../assets/ArrowDownLg.svg\";\nimport UserCard from \"../../../../components/molecules/UserCard/UserCard.component\";\n\nimport \"./AnswerItem.styles.scss\";\nimport censorBadWords from \"../../../../utils/censorBadWords\";\n\nconst AnswerItem = ({\n  deleteAnswer,\n  answer: { body, user_id, gravatar, id, created_at, username },\n  post: { post },\n  auth,\n}) => {\n  return (\n    <Fragment>\n      <div className=\"answer-layout\">\n        <div className=\"vote-cell\">\n          <div className=\"vote-container\">\n            <button\n              className=\"vote-up\"\n              title=\"This answer is useful (click again to undo)\"\n            >\n              <UpVote className=\"icon\" />\n            </button>\n            <div className=\"vote-count fc-black-500\">0</div>\n            <button\n              className=\"vote-down\"\n              title=\"This answer is not useful (click again to undo)\"\n            >\n              <DownVote className=\"icon\" />\n            </button>\n          </div>\n        </div>\n        <div className=\"answer-item\">\n          <div\n            className=\"answer-content fc-black-800\"\n            dangerouslySetInnerHTML={{ __html: censorBadWords(body) }}\n          ></div>\n          <div className=\"answer-actions\">\n            <div className=\"action-btns\">\n              <div className=\"answer-menu\">\n                <Link\n                  className=\"answer-links\"\n                  title=\"short permalink to this question\"\n                  to=\"/\"\n                >\n                  share\n                </Link>\n                <Link\n                  className=\"answer-links\"\n                  title=\"Follow this question to receive notifications\"\n                  to=\"/\"\n                >\n                  follow\n                </Link>\n                {!auth.loading &&\n                  auth.isAuthenticated &&\n                  user_id === auth.user.id && (\n                    <Link\n                      className=\"s-link s-link__danger\"\n                      style={{ paddingLeft: \"4px\" }}\n                      title=\"Delete the answer\"\n                      onClick={(e) => deleteAnswer(id)}\n                      to={`/questions/${post.id}`}\n                    >\n                      delete\n                    </Link>\n                  )}\n              </div>\n            </div>\n            <UserCard\n              created_at={created_at}\n              user_id={user_id}\n              gravatar={gravatar}\n              username={username}\n              dateType={\"answered\"}\n              backgroundColor={\"transparent\"}\n            />\n          </div>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nAnswerItem.propTypes = {\n  auth: PropTypes.object.isRequired,\n  post: PropTypes.object.isRequired,\n  answer: PropTypes.object.isRequired,\n  deleteAnswer: PropTypes.func.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  auth: state.auth,\n  post: state.post,\n});\n\nexport default connect(mapStateToProps, { deleteAnswer })(AnswerItem);\n"
  },
  {
    "path": "src/modules/Post/AnswerSection/AnswerItem/AnswerItem.styles.scss",
    "content": ".answer-layout {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n\n  .vote-cell {\n    width: auto;\n    padding-right: 16px;\n    vertical-align: top;\n    grid-column: 1;\n    font-size: 13px;\n\n    .vote-container {\n      margin: -2px;\n      display: flex;\n      align-items: stretch;\n      flex-direction: column;\n      color: #bbc0c4 !important;\n\n      button {\n        padding: 0;\n        border: none;\n        outline: none;\n        font: unset;\n        border-radius: 0;\n        background: none;\n        box-shadow: none;\n        text-align: center;\n        text-decoration: none;\n      }\n      .vote-count {\n        font-size: 21px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color:#6a737c;\n      }\n\n    }\n  }\n\n  .answer-item {\n    padding-right: 16px;\n    grid-column: 2;\n    width: auto;\n    min-width: 0;\n    font-size: 13px;\n\n    .answer-content {\n      width: 100%;\n      font-size: 15px;\n      margin-bottom: 5px;\n      font-family: Arial,\"Helvetica Neue\",Helvetica,sans-serif;\n\n      p {\n        clear: both;\n        margin-bottom: 15px;\n        margin-top: 0;\n        display: block;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n      }\n    }\n\n    .answer-actions {\n      margin-bottom: 0 !important;\n      margin-top: -4px;\n      display: flex;\n      align-items: flex-start;\n      justify-content: flex-end !important;\n      flex-wrap: wrap !important;\n\n      .action-btns {\n        flex: 1 1 100px;\n        margin: 4px 16px 4px 0;\n        color: #242729;\n\n        .answer-menu {\n          padding-top: 2px;\n\n          .s-link .s-link__danger {\n            padding: 0 4px 2px;\n          }\n\n          .answer-links {\n            padding: 0 4px 2px;\n            color: #848d95;\n            text-decoration: none;\n\n            &:hover {\n              color: #cfd2d6;\n              text-decoration: none;\n            }\n          }\n        }\n      }\n\n      .answer-owner {\n        margin-top: 4px;\n        margin-bottom: 4px;\n        text-align: left;\n        vertical-align: top;\n        width: 200px;\n        flex: 0 auto !important;\n\n        .answer-user {\n          box-sizing: border-box;\n          padding: 5px 6px 7px 7px;\n          color: #6a737c;\n          font-size: 13px;\n\n          .answer-user-time {\n            margin-top: 1px;\n            margin-bottom: 4px;\n            font-size: 12px;\n            white-space: nowrap;\n          }\n\n          .answer-logo {\n            float: left;\n            width: 32px;\n            height: 32px;\n            border-radius: 1px;\n\n            img {\n              width: 32px;\n              height: 32px;\n            }\n          }\n\n          .answer-details {\n            margin-left: 8px;\n            width: calc(100% - 40px);\n            float: left;\n\n            .answer-user-profile-link {\n              color: #0077cc;\n              text-decoration: none;\n              cursor: pointer;\n              font-size: 13px;\n\n              &:hover {\n                color: #0095ff;\n                text-decoration: none;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "src/modules/Post/AnswerSection/AnswerSection.component.jsx",
    "content": "import React, {Fragment, useState, useEffect} from 'react';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\nimport {getAnswers} from '../../../redux/answers/answers.actions';\nimport handleSorting from '../../../utils/handleSorting';\n\nimport AnswerItem from './AnswerItem/AnswerItem.component';\nimport Spinner from '../../../components/molecules/Spinner/Spinner.component';\nimport AnswerForm from './AnswerForm/AnswerForm.component';\nimport ButtonGroup from '../../../components/molecules/ButtonGroup/ButtonGroup.component';\n\nimport './AnswerSection.styles.scss';\n\nconst AnswerSection = ({getAnswers, answer, post: {post}}) => {\n  useEffect(() => {\n    getAnswers(post.id);\n    // eslint-disable-next-line\n  }, [getAnswers]);\n\n  const [sortType, setSortType] = useState('Newest');\n\n  return (\n    <Fragment>\n      <div className='answer'>\n        <div className='answer-header fc-black-800'>\n          <div className='answer-sub-header'>\n            <div className='answer-headline'>\n              <h2>Answers</h2>\n            </div>\n            <ButtonGroup\n              buttons={['Newest', 'Oldest']}\n              selected={sortType}\n              setSelected={setSortType}\n            />\n          </div>\n        </div>\n        {answer.loading === null ? (\n          <Spinner width='25px' height='25px' />\n        ) : (\n          answer.answers?.sort(handleSorting(sortType)).map((answer, index) => (\n            <div key={index} className='answers'>\n              <AnswerItem answer={answer}/>\n            </div>\n          ))\n        )}\n        <div className='add-answer'>\n          <AnswerForm/>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nAnswerSection.propTypes = {\n  getAnswers: PropTypes.func.isRequired,\n  answer: PropTypes.object.isRequired,\n  post: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  answer: state.answer,\n  post: state.post,\n});\n\nexport default connect(mapStateToProps, {getAnswers})(AnswerSection);\n"
  },
  {
    "path": "src/modules/Post/AnswerSection/AnswerSection.styles.scss",
    "content": ".answer {\n  width: auto;\n  float: none;\n  padding-top: 10px;\n  clear: both;\n  color: #242729;\n\n  .answer-header {\n    width: 100%;\n    margin-top: 10px;\n    color: #242729;\n\n    .answer-sub-header {\n      margin-bottom: 8px !important;\n      display: flex;\n      align-items: center;\n\n      .answer-headline {\n        flex: 1 auto !important;\n\n        h2 {\n          font-weight: 400;\n          margin-bottom: 0;\n          font-size: 18px;\n        }\n      }\n    }\n  }\n\n  .answers {\n    border-bottom: 1px solid #4a4e51;\n    width: 100%;\n    padding-bottom: 16px;\n    padding-top: 16px;\n    color: #242729;\n  }\n}"
  },
  {
    "path": "src/modules/Post/Post.component.jsx",
    "content": "import React, { useEffect, Fragment } from \"react\";\nimport moment from \"moment\";\nimport { useParams } from \"react-router-dom\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport { getPost } from \"../../redux/posts/posts.actions\";\n\nimport LinkButton from \"../../components/molecules/LinkButton/LinkButton.component\";\nimport Spinner from \"../../components/molecules/Spinner/Spinner.component\";\nimport AnswerSection from \"./AnswerSection/AnswerSection.component\";\nimport QuestionSection from \"./QuestionSection/QuestionSection.component\";\n\nimport \"./Post.styles.scss\";\nimport censorBadWords from \"../../utils/censorBadWords\";\n\nconst Post = ({ getPost, post: { post, loading } }) => {\n  const { id } = useParams();\n\n  useEffect(() => {\n    getPost(id);\n    // eslint-disable-next-line\n  }, [getPost]);\n\n  return loading || post === null ? (\n    <Spinner type=\"page\" width=\"75px\" height=\"200px\" />\n  ) : (\n    <Fragment>\n      <div id=\"mainbar\" className=\"post\">\n        <div className=\"question-header fc-black-800 pl24\">\n          <h1>{censorBadWords(post.title)}</h1>\n          <div>\n            <LinkButton\n              text={\"Ask Question\"}\n              link={\"/add/question\"}\n              type={\"s-btn__primary\"}\n            />\n          </div>\n        </div>\n        <div className=\"question-date fc-black-800 pl24\">\n          <div className=\"grid-cell\">\n            <span className=\"fc-light\">Asked</span>\n            <time dateTime={moment(post.created_at).fromNow(true)}>\n              {moment(post.created_at).fromNow(true)} ago\n            </time>\n          </div>\n        </div>\n        <div className=\"question-main pl24 pt16\">\n          <QuestionSection />\n          <AnswerSection />\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nPost.propTypes = {\n  getPost: PropTypes.func.isRequired,\n  post: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  post: state.post,\n});\n\nexport default connect(mapStateToProps, { getPost })(Post);\n"
  },
  {
    "path": "src/modules/Post/Post.styles.scss",
    "content": ".page {\n  width: 100%;\n  background: none;\n  display: flex;\n  justify-content: space-between;\n  margin: 64px auto 0 auto;\n}\n\n#content {\n  max-width: none;\n  padding: 0;\n}\n\n#mainbar {\n  padding-top: 14px;\n}\n\n.post {\n  width: calc(100% - 300px - 24px);\n  padding: 24px 0 24px 0;\n  float: left;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n\n  .question-header {\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: space-between;\n    color: #242729;\n\n    h1 {\n      width: 80%;\n      margin-bottom: 8px;\n      font-size: 27px;\n      font-weight: 400;\n      font-family: Arial,\"Helvetica Neue\",Helvetica,sans-serif;\n      flex: 1 auto !important;\n      line-height: 1.3;\n    }\n\n    div {\n      margin-left: 12px;\n      color: #242729;\n\n      .ask-button {\n        color:#fff;\n        background-color: #0095ff;\n        box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4);\n        position: relative;\n        display: inline-block;\n        padding: .8em;\n        border: 1px solid transparent;\n        border-radius: 3px;\n        outline: none;\n        font-family: inherit;\n        font-size: 13px;\n        font-weight: normal;\n        line-height: 1.15384615;\n        text-align: center;\n        text-decoration: none;\n        cursor: pointer;\n        white-space: nowrap !important;\n\n        &:hover {\n          background-color: #0077cc;\n        }\n      }\n    }\n  }\n\n  .question-date {\n    padding-bottom: 8px;\n    margin-bottom: 16px;\n    display: flex;\n    flex-wrap: wrap;\n\n    .grid-cell {\n      white-space: nowrap;\n      margin-bottom: 8px;\n      margin-right: 16px;\n      box-sizing: inherit;\n      font-size: 13px;\n\n      span {\n        color: #6a737c;\n        margin-right: 4px !important;\n      }\n    }\n  }\n\n  .question-main {\n    float: none;\n    clear: both;\n    width: auto;\n    margin-bottom: 20px;\n    border-top: 1px solid #4a4e51;\n  }\n}\n\n.fc-blue-600:hover {\n  color: #378ad3 !important;\n}\n\n@media(max-width: 1100px) {\n  .post {\n    width: 80%;\n  }\n}"
  },
  {
    "path": "src/modules/Post/QuestionSection/CommentCell/CommentCell.component.jsx",
    "content": "import React, { useEffect, Fragment, useState } from \"react\";\nimport moment from \"moment\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router-dom\";\nimport {\n  getComments,\n  deleteComment,\n  addComment,\n} from \"../../../../redux/comments/comments.actions\";\n\nimport Spinner from \"../../../../components/molecules/Spinner/Spinner.component\";\nimport TagBadge from \"../../../../components/molecules/TagBadge/TagBadge.component\";\nimport LinkButton from \"../../../../components/molecules/LinkButton/LinkButton.component\";\n\nimport \"./CommentCell.styles.scss\";\nimport censorBadWords from \"../../../../utils/censorBadWords\";\n\nconst CommentCell = ({\n  deleteComment,\n  addComment,\n  getComments,\n  auth,\n  comment,\n  post: { post },\n}) => {\n  useEffect(() => {\n    getComments(post.id);\n    // eslint-disable-next-line\n  }, [getComments]);\n\n  const [formData, setFormData] = useState({\n    body: \"\",\n  });\n\n  const { body } = formData;\n\n  const handleChange = (e) =>\n    setFormData({ ...formData, [e.target.name]: e.target.value });\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    addComment(post.id, { body });\n    setFormData({\n      body: \"\",\n    });\n  };\n\n  return (\n    <Fragment>\n      <div className=\"comments-cell\">\n        <div className=\"comments\">\n          <ul className=\"comments-list\">\n            {comment.loading === null ? (\n              <Spinner width=\"25px\" height=\"25px\" />\n            ) : (\n              comment.comments.map((comment, index) => (\n                <li key={index} className=\"comments-item\">\n                  <div className=\"comment-text fc-black-800\">\n                    <div className=\"comment-body\">\n                      <span className=\"body\">\n                        {censorBadWords(comment.body)}\n                      </span>\n                      &nbsp;&ndash;&nbsp;\n                      <TagBadge\n                        tag_name={comment.username}\n                        size={\"s-tag\"}\n                        link={`/users/${comment.user_id}`}\n                        display={\"inline\"}\n                      />\n                      <span\n                        title={moment(comment.created_at).fromNow(true)}\n                        style={{ color: \"#959ca3 !important\" }}\n                        className=\"date fs-body1\"\n                      >\n                        {moment(comment.created_at).fromNow(true)} ago\n                      </span>\n                    </div>\n                    {!auth.loading &&\n                      auth.isAuthenticated &&\n                      comment.user_id === auth.user.id && (\n                        <Link\n                          className=\"s-tag s-tag__moderator\"\n                          style={{ marginTop: \"4px\" }}\n                          title=\"Delete the comment\"\n                          onClick={(e) => deleteComment(comment.id)}\n                          to={`/questions/${post.id}`}\n                        >\n                          delete\n                        </Link>\n                      )}\n                  </div>\n                </li>\n              ))\n            )}\n          </ul>\n        </div>\n        <div className=\"add-comment\">\n          {!auth.loading && auth.isAuthenticated ? (\n            <Fragment>\n              <form className=\"comment-form\" onSubmit={(e) => handleSubmit(e)}>\n                <div>\n                  <input\n                    className=\"title-input s-input\"\n                    type=\"text\"\n                    name=\"body\"\n                    value={body}\n                    onChange={(e) => handleChange(e)}\n                    id=\"title\"\n                    placeholder=\"Leave a comment\"\n                  />\n                </div>\n              </form>\n            </Fragment>\n          ) : (\n            <Fragment>\n              <LinkButton\n                text={\"You need to login to add a comment\"}\n                link={\"/login\"}\n              />\n            </Fragment>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nCommentCell.propTypes = {\n  auth: PropTypes.object.isRequired,\n  post: PropTypes.object.isRequired,\n  addComment: PropTypes.func.isRequired,\n  deleteComment: PropTypes.func.isRequired,\n  getComments: PropTypes.func.isRequired,\n  comment: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  auth: state.auth,\n  post: state.post,\n  comment: state.comment,\n});\n\nexport default connect(mapStateToProps, {\n  deleteComment,\n  getComments,\n  addComment,\n})(CommentCell);\n"
  },
  {
    "path": "src/modules/Post/QuestionSection/CommentCell/CommentCell.styles.scss",
    "content": ".comments-cell {\n  padding-right: 16px;\n  grid-column: 2;\n  width: auto;\n  min-width: 0;\n\n  .comments {\n    width: 100%;\n    -webkit-tap-highlight-color: rgba(255,255,255,0);\n    padding-bottom: 10px;\n    margin-top: 12px !important;\n    border-top: 1px solid #4a4e51;\n    display: block;\n\n    .comments-list {\n      list-style-type: none;\n      margin: 0;\n      padding: 0;\n      display: block;\n\n      .comments-item {\n        display: contents;\n        font-size: 13px;\n        color: rgb(36, 39, 41);\n\n        .comment-text {\n          min-width: 0;\n          flex-basis: 0;\n          padding: 6px;\n          border-bottom: 1px solid #4a4e51;\n          flex-grow: 1;\n          font-size: 13px;\n          line-height: 1.3;\n          vertical-align: text-top;\n\n          .comment-body {\n            line-height: 1.7;\n            word-wrap: break-word;\n\n            .body {\n              font-family: Arial,\"Helvetica Neue\",Helvetica,sans-serif;\n            }\n\n            .date {\n              color: #9199a1;\n              margin-left: 5px;\n            }\n          }\n\n          .comment-links {\n            padding: 0 4px 2px;\n            color: #848d95;\n            text-decoration: none;\n            background-color: transparent;\n\n            &:hover {\n              color: #3c4146;\n              text-decoration: none;\n            }\n          }\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "src/modules/Post/QuestionSection/PostCell/PostCell.component.jsx",
    "content": "import React, { Fragment } from \"react\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router-dom\";\nimport { deletePost } from \"../../../../redux/posts/posts.actions\";\n\nimport TagBadge from \"../../../../components/molecules/TagBadge/TagBadge.component\";\nimport UserCard from \"../../../../components/molecules/UserCard/UserCard.component\";\n\nimport \"./PostCell.styles.scss\";\nimport censorBadWords from \"../../../../utils/censorBadWords\";\n\nconst PostCell = ({\n  deletePost,\n  auth,\n  post: {\n    post: { id, post_body, tags, gravatar, user_id, username, created_at },\n  },\n}) => {\n  return (\n    <Fragment>\n      <div className=\"post-cell\">\n        <div\n          className=\"post-text fc-black-800\"\n          dangerouslySetInnerHTML={{ __html: censorBadWords(post_body) }}\n        ></div>\n        <div className=\"post-tags fc-black-800\">\n          {tags.map((tag, index) => (\n            <TagBadge\n              key={index}\n              tag_name={tag.tagname}\n              size={\"s-tag\"}\n              float={\"left\"}\n            />\n          ))}\n        </div>\n        <div className=\"post-actions fc-black-800\">\n          <div className=\"post-actions-extended\">\n            <div className=\"post-btns\">\n              <div className=\"post-menu\">\n                <Link\n                  className=\"post-links\"\n                  title=\"short permalink to this question\"\n                  to=\"/\"\n                >\n                  share\n                </Link>\n                <Link\n                  className=\"post-links\"\n                  title=\"Follow this question to receive notifications\"\n                  to=\"/\"\n                >\n                  follow\n                </Link>\n                {!auth.loading &&\n                  auth.isAuthenticated &&\n                  user_id === auth.user.id && (\n                    <Link\n                      className=\"s-link s-link__danger\"\n                      style={{ paddingLeft: \"4px\" }}\n                      title=\"Delete the post\"\n                      onClick={(e) => deletePost(id)}\n                      to=\"/questions\"\n                    >\n                      delete\n                    </Link>\n                  )}\n              </div>\n            </div>\n            <UserCard\n              created_at={created_at}\n              user_id={user_id}\n              gravatar={gravatar}\n              username={username}\n            />\n          </div>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nPostCell.propTypes = {\n  post: PropTypes.object.isRequired,\n  auth: PropTypes.object.isRequired,\n  deletePost: PropTypes.func.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  post: state.post,\n  auth: state.auth,\n});\n\nexport default connect(mapStateToProps, { deletePost })(PostCell);\n"
  },
  {
    "path": "src/modules/Post/QuestionSection/PostCell/PostCell.styles.scss",
    "content": ".post-cell {\n  display: flex;\n  flex-direction: column;\n  vertical-align: top;\n  padding-right: 16px;\n  grid-column: 2;\n  width: auto;\n  min-width: 0;\n\n  pre {\n    color: var(--black-800);\n  }\n\n  .post-text {\n    width: 100%;\n    margin-bottom: 5px;\n    font-size: 15px;\n    line-height: 1.3;\n    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;\n    color: #242729;\n  }\n\n  .post-tags {\n    margin-bottom: 10px;\n    clear: both;\n\n    .tag-cell {\n      display: block;\n    }\n  }\n\n  .post-actions {\n    margin-bottom: 0;\n\n    .post-actions-extended {\n      padding-top: 4px;\n      margin-top: 16px;\n      display: flex;\n      align-items: flex-start;\n      flex-wrap: wrap;\n\n      .post-btns {\n        flex: 1 1 100px;\n        margin-top: 4px;\n        margin-bottom: 4px;\n        margin-right: 16px !important;\n\n        .post-menu {\n          padding-top: 2px;\n\n          .post-links {\n            padding: 0 4px 2px 4px;\n            color: #848d95;\n            cursor: pointer;\n            text-decoration: none;\n            font-size: 13px;\n\n            &:hover {\n              color: #cfd2d6;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "src/modules/Post/QuestionSection/QuestionSection.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport CommentCell from './CommentCell/CommentCell.component';\nimport VoteCell from './VoteCell/VoteCell.component';\nimport PostCell from './PostCell/PostCell.component';\n\nimport './QuestionSection.styles.scss';\n\nconst QuestionSection = ({\n  post: {\n    post: {answer_count, comment_count, tags},\n  },\n}) => {\n  return (\n    <Fragment>\n      <div className='question'>\n        <div className='post-layout'>\n          <VoteCell\n            answerCount={answer_count}\n            commentCount={comment_count}\n            tagCount={tags ? tags.length : 0}\n          />\n          <PostCell/>\n          <CommentCell/>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nQuestionSection.propTypes = {\n  post: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  post: state.post,\n});\n\nexport default connect(mapStateToProps, null)(QuestionSection);\n"
  },
  {
    "path": "src/modules/Post/QuestionSection/QuestionSection.styles.scss",
    "content": ".question {\n  .post-layout {\n    display: grid;\n    grid-template-columns: max-content 1fr;\n    color: #242729;\n  }\n}"
  },
  {
    "path": "src/modules/Post/QuestionSection/VoteCell/VoteCell.component.jsx",
    "content": "import React, {Fragment} from 'react';\n\nimport './VoteCell.styles.scss';\n\nconst VoteCell = ({answerCount, commentCount, tagCount}) => {\n  return (\n    <Fragment>\n      <div className='vote-cell fc-black-800'>\n        <div className='stats'>\n          <div className='vote'>\n            <span className='vote-count'>{answerCount}</span>\n            <div className='count-text'>answers</div>\n          </div>\n          <div className='vote'>\n            <span className='vote-count'>{commentCount}</span>\n            <div className='count-text'>comments</div>\n          </div>\n          <div className='vote'>\n            <span className='vote-count'>{tagCount}</span>\n            <div className='count-text'>tags</div>\n          </div>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nexport default VoteCell;\n"
  },
  {
    "path": "src/modules/Post/QuestionSection/VoteCell/VoteCell.styles.scss",
    "content": ".vote-cell {\n  width: auto;\n  padding-right: 16px;\n  vertical-align: top;\n  grid-column: 1;\n  grid-column-start: 1;\n  grid-column-end: auto;\n  color:#6a737c;\n\n  .vote  {\n    padding: 0;\n    margin-bottom: 8px;\n    text-align: center;\n\n    .vote-count {\n      font-size: 20px;\n    }\n\n    .count-text {\n      font-size: 12px;\n    }\n  }\n}"
  },
  {
    "path": "src/modules/PostForm/AskForm/AskForm.component.jsx",
    "content": "import React, { Fragment, useState, useEffect, useRef } from \"react\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport { addPost } from \"../../../redux/posts/posts.actions\";\nimport MarkdownEditor from \"../../../components/organisms/MarkdownEditor/MarkdownEditor.component\";\nimport { badWordsFilter } from \"../../../utils/censorBadWords\";\n\nimport \"./AskForm.styles.scss\";\n\nconst AskForm = ({ addPost }) => {\n  const [formData, setFormData] = useState({\n    title: \"\",\n    body: \"\",\n    tagname: \"\",\n  });\n\n  const [formErrors, setFormErrors] = useState({});\n\n  useEffect(() => {\n    setFormErrors({});\n  }, [formData]);\n\n  const markdownEditorRef = useRef(null);\n\n  const { title, body, tagname } = formData;\n\n  const onChange = (e) =>\n    setFormData({ ...formData, [e.target.name]: e.target.value });\n\n  const validateFormData = () => {\n    const errors = [];\n\n    const tags = formData.tagname\n      .split(\",\")\n      .filter(Boolean)\n      .map((tag) => tag.trim());\n\n    tags.forEach((tag) => {\n      if (tag.length > 25) {\n        errors.push({\n          tagname: `A tag name can't be longer than 25 characters.`,\n        });\n      } else if (/[^a-zA-Z]/.test(tag)) {\n        errors.push({\n          tagname: `${tag} tag must contain English alphabets only (no spaces).`,\n        });\n      }\n    });\n\n    if (badWordsFilter.isProfane(formData.tagname)) {\n      errors.push({ tagname: \"Inappropriate words are not allowed.\" });\n    }\n\n    errors\n      .reverse()\n      .forEach((err) => setFormErrors((prev) => ({ ...prev, ...err })));\n\n    return errors;\n  };\n\n  const onSubmit = async (e) => {\n    e.preventDefault();\n\n    const errors = validateFormData();\n\n    // if there are errors, don't submit\n    if (errors.length > 0) return;\n\n    addPost({ title, body, tagname });\n\n    setFormData({\n      title: \"\",\n      body: \"\",\n      tagname: \"\",\n    });\n    markdownEditorRef.current.cleanEditorState();\n  };\n\n  const updateConvertedContent = (htmlConvertedContent) => {\n    setFormData({ ...formData, body: htmlConvertedContent });\n  };\n\n  return (\n    <Fragment>\n      <form onSubmit={(e) => onSubmit(e)}>\n        <div className=\"question-form p16 s-card\">\n          <div className=\"question-layout\">\n            <div className=\"title-grid\">\n              <label className=\"form-label s-label\">\n                Title\n                <p className=\"title-desc fw-normal fs-caption\">\n                  Be specific and imagine you’re asking a question to another\n                  person\n                </p>\n              </label>\n              <input\n                className=\"title-input s-input\"\n                type=\"text\"\n                name=\"title\"\n                value={title}\n                onChange={(e) => onChange(e)}\n                id=\"title\"\n                placeholder=\"e.g. Is there an R function for finding the index of an element in a vector?\"\n                required\n              />\n            </div>\n            <div className=\"body-grid\">\n              <label className=\"form-label s-label fc-black-800\">\n                Body\n                <p className=\"body-desc fw-normal fs-caption fc-black-800\">\n                  Include all the information someone would need to answer your\n                  question\n                </p>\n              </label>\n              <div className=\"s-textarea rich-text-editor-container\">\n                <MarkdownEditor\n                  ref={markdownEditorRef}\n                  onChange={updateConvertedContent}\n                />\n              </div>\n            </div>\n            <div className=\"tag-grid\">\n              <label className=\"form-label s-label\">\n                Tag Name\n                <p className=\"tag-desc fw-normal fs-caption\">\n                  Add up to 5 tags to describe what your question is about\n                </p>\n              </label>\n              <input\n                className=\"tag-input s-input\"\n                type=\"text\"\n                name=\"tagname\"\n                value={tagname}\n                onChange={(e) => onChange(e)}\n                id=\"tagname\"\n                placeholder=\"e.g. (ajax, django, string)\"\n                required\n              />\n              <p className=\"fc-error fw-bold ml8 mt4\">{formErrors.tagname}</p>\n            </div>\n          </div>\n        </div>\n        <div className=\"post-button mt32\">\n          <button\n            className=\"s-btn s-btn__primary\"\n            id=\"submit-button\"\n            name=\"submit-button\"\n          >\n            Post your question\n          </button>\n        </div>\n      </form>\n    </Fragment>\n  );\n};\n\nAskForm.propTypes = {\n  addPost: PropTypes.func.isRequired,\n};\n\nexport default connect(null, { addPost })(AskForm);\n"
  },
  {
    "path": "src/modules/PostForm/AskForm/AskForm.styles.scss",
    "content": ".post-form {\n  min-width: 0 !important;\n  flex: 1 auto !important;\n  color: #242729;\n  width: 100%;\n  padding: 0 !important;\n\n  .question-form {\n    color: #242729;\n\n    .post-button {\n      margin-top: 32px !important;\n\n      button {\n        margin: 0 2px 0 2px;\n        color: #fff;\n        background-color: #0095ff;\n        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);\n        padding: 0.8em;\n        border: 1px solid transparent;\n        border-radius: 3px;\n        outline: none;\n        font-family: inherit;\n        font-size: 13px;\n        font-weight: normal;\n        line-height: 1.15384615;\n        text-align: center;\n        text-decoration: none;\n        cursor: pointer;\n\n        &:hover {\n          color: #fff;\n          background-color: #0077cc;\n          text-decoration: none;\n        }\n      }\n    }\n\n    .question-layout {\n      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05),\n        0 20px 48px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.1);\n      padding: 16px !important;\n      background-color: #fff !important;\n      border-color: #d6d9dc !important;\n      border-radius: 3px !important;\n      border-style: solid !important;\n      border-width: 1px !important;\n\n      .title-grid {\n        margin-bottom: 16px;\n        display: flex;\n        flex: 1 auto !important;\n        flex-direction: column;\n        color: #242729;\n\n        label {\n          margin-bottom: 4px;\n          display: block;\n          padding: 0 2px;\n          color: #0c0d0e;\n          font-family: inherit;\n          font-size: 15px;\n          font-weight: 700;\n          cursor: pointer;\n\n          .title-desc {\n            font-weight: normal;\n            padding: 0;\n            margin: 0;\n            margin-top: 2px !important;\n            color: #3c4146;\n            font-size: 12px;\n            clear: both;\n          }\n        }\n        .title-input {\n          flex: 1 auto !important;\n          font-size: 13px;\n          -webkit-appearance: none;\n          width: 100%;\n          margin: 0;\n          padding: 0.6em 0.7em;\n          border: 1px solid #bbc0c4;\n          border-radius: 3px;\n          background-color: #fff;\n          color: #0c0d0e;\n          line-height: 1.15384615;\n\n          &::placeholder {\n            opacity: 0.6;\n          }\n        }\n      }\n\n      .tag-grid {\n        margin-bottom: 16px;\n        display: flex;\n        flex: 1 auto !important;\n        flex-direction: column;\n        color: #242729;\n\n        label {\n          margin-bottom: 4px;\n          display: block;\n          padding: 0 2px;\n          color: #0c0d0e;\n          font-family: inherit;\n          font-size: 15px;\n          font-weight: 700;\n          cursor: pointer;\n\n          .tag-desc {\n            font-weight: normal;\n            padding: 0;\n            margin: 0;\n            margin-top: 2px !important;\n            color: #3c4146;\n            font-size: 12px;\n            clear: both;\n          }\n        }\n        .tag-input {\n          flex: 1 auto !important;\n          font-size: 13px;\n          -webkit-appearance: none;\n          width: 100%;\n          margin: 0;\n          padding: 0.6em 0.7em;\n          border: 1px solid #bbc0c4;\n          border-radius: 3px;\n          background-color: #fff;\n          color: #0c0d0e;\n          line-height: 1.15384615;\n\n          &::placeholder {\n            opacity: 0.6;\n          }\n        }\n      }\n    }\n  }\n}\n\n.body-grid {\n  margin-top: 16px;\n  margin-bottom: 16px;\n  display: flex;\n  flex: 1 auto !important;\n  flex-direction: column;\n  color: #242729;\n\n  label {\n    margin-bottom: 4px;\n    display: block;\n    padding: 0 2px;\n    color: #0c0d0e;\n    font-family: inherit;\n    font-size: 15px;\n    font-weight: 700;\n    cursor: pointer;\n\n    .body-desc {\n      font-weight: normal;\n      padding: 0;\n      margin: 0;\n      margin-top: 2px !important;\n      color: #3c4146;\n      font-size: 12px;\n      clear: both;\n    }\n  }\n  .s-textarea.rich-text-editor-container {\n    padding: 0;\n  }\n  .body-input {\n    flex: 1 auto !important;\n    font-size: 13px;\n    -webkit-appearance: none;\n    width: 100%;\n    margin: 0;\n    padding: 0.6em 0.7em;\n    border: 1px solid #bbc0c4;\n    border-radius: 3px;\n    background-color: #fff;\n    color: #0c0d0e;\n    line-height: 1.15384615;\n\n    &::placeholder {\n      opacity: 0.6;\n    }\n  }\n}\n"
  },
  {
    "path": "src/modules/PostForm/AskWidget/AskWidget.component.jsx",
    "content": "import React, {Fragment} from 'react';\n\nimport './AskWidget.styles.scss';\n\nconst AskWidget = () => {\n  return (\n    <Fragment>\n      <div className='widget'>\n        <div className='s-sidebarwidget--header'>\n          Step 1: Draft your question\n        </div>\n        <div className='widget-content fc-black-800'>\n          <div className='summary'>\n            <p className='sec1'>\n              The community is here to help you with specific coding, algorithm,\n              or language problems.\n            </p>\n            <p className='sec2'>Avoid asking opinion-based questions.</p>\n          </div>\n          <ol className='step-section'>\n            <li className='step'>\n              <button>\n                <div className='step-cell'>\n                  <div>\n                    <img\n                      src='https://cdn.sstatic.net/Img/list-1.svg?v=e8dd475ba207'\n                      width='16'\n                      height='16'\n                      alt='1.'\n                    />\n                  </div>\n                  <span>Summarize the problem</span>\n                </div>\n              </button>\n              <div className='inst'>\n                <div className='inst-content'>\n                  <ul>\n                    <li>\n                      <p>Include details about your goal</p>\n                    </li>\n                    <li>\n                      <p>Describe expected and actual results</p>\n                    </li>\n                    <li>\n                      <p className='except'>Include any error messages</p>\n                    </li>\n                  </ul>\n                </div>\n              </div>\n            </li>\n            <li className='step'>\n              <button>\n                <div className='step-cell'>\n                  <div>\n                    <img\n                      src='https://cdn.sstatic.net/Img/list-2.svg?v=9382fc2c3631'\n                      width='16'\n                      height='16'\n                      alt='2.'\n                    />\n                  </div>\n                  <span>Summarize the problem</span>\n                </div>\n              </button>\n              <div className='inst'>\n                <div className='inst-content'>\n                  <p className='step2'>\n                    Show what you’ve tried and tell us what you found (on this\n                    site or elsewhere) and why it didn’t meet your needs. You\n                    can get better answers when you provide research.\n                  </p>\n                </div>\n              </div>\n            </li>\n            <li\n              style={{\n                borderBottomRightRadius: '3px',\n                borderBottomLeftRadius: '3px',\n              }}\n              className='step except-step'\n            >\n              <button>\n                <div className='step-cell'>\n                  <div>\n                    <img\n                      src='https://cdn.sstatic.net/Img/list-3.svg?v=323a95564232'\n                      width='16'\n                      height='16'\n                      alt='3.'\n                    />\n                  </div>\n                  <span>Summarize the problem</span>\n                </div>\n              </button>\n              <div className='inst'>\n                <div className='inst-content'>\n                  <p className='step3'>\n                    When appropriate, share the minimum amount of code others\n                    need to reproduce your problem (also called a minimum,\n                    reproducible example)\n                  </p>\n                </div>\n              </div>\n            </li>\n          </ol>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nexport default AskWidget;\n"
  },
  {
    "path": "src/modules/PostForm/AskWidget/AskWidget.styles.scss",
    "content": ".widget {\n  margin-bottom: 24px;\n  position: relative;\n  border-radius: 3px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.05), 0 20px 48px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.1);\n  font-size: 13px;\n  background-color: #fff;\n  color: #242729;\n\n  .widget-header {\n    padding: 12px 15px;\n    background: #fafafb;\n    color: #6a737c;\n    border-top: 1px solid #e4e6e8;\n    font-size: 15px;\n    font-weight: normal;\n    border-top-right-radius: 3px;\n    border-top-left-radius: 3px;\n  }\n\n  .widget-content {\n    display: block !important;\n    background-color: #2d2d2d !important;\n    padding: 16px 15px 0 15px;\n    border-top: 1px solid #404345;\n    color: #242729;\n    border-bottom-right-radius: 3px;\n    border-bottom-left-radius: 3px;\n\n    .summary {\n      margin-bottom: 16px;\n\n      .sec1 {\n        margin-bottom: 13px;\n      }\n      .sec2 {\n        margin-bottom: 13px;\n      }\n    }\n\n    .step-section {\n      margin-left: -16px;\n      margin-right: -16px;\n      margin-bottom: 0;\n      border-radius: 3px;\n\n      .step {\n        border-bottom: 1px solid #404345;\n        list-style: none;\n\n        button {\n          display: flex;\n          width: 100% !important;\n          cursor: pointer;\n          padding: 12px 16px 12px 16px;\n          border: none;\n          outline: none;\n          font: unset;\n          border-radius: 0;\n          color: unset;\n          background: none;\n          box-shadow: none;\n\n          .step-cell {\n            display: flex;\n            flex: 1 auto;\n            align-items: center;\n\n            div {\n              word-spacing: normal;\n\n              img {\n                width: 16px;\n                height: 16px;\n              }\n            }\n\n            span {\n              font-weight: 700 !important;\n              margin-left: 12px !important;\n              cursor: pointer;\n            }\n          }\n        }\n\n        .inst {\n          margin-left: 16px !important;\n          margin-right: 16px !important;\n          display: flex;\n          align-items: flex-start;\n\n          .inst-content {\n            padding-left: 4px !important;\n            padding-bottom: 12px !important;\n            margin-left: 16px;\n            margin-bottom: 0;\n\n            .step2, .step3 {\n              margin-left: 12px !important;\n            }\n\n            ul {\n              margin-left: 24px !important;\n              margin-bottom: 0;\n              list-style-type: disc;\n\n              p {\n                clear: both;\n                margin-bottom: 13px;\n                margin-top: 0;\n              }\n\n              .except {\n                margin-bottom: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "src/modules/PostForm/PostForm.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport {connect} from 'react-redux';\nimport {Redirect} from 'react-router-dom';\nimport PropTypes from 'prop-types';\n\nimport Spinner from '../../components/molecules/Spinner/Spinner.component';\nimport AskWidget from './AskWidget/AskWidget.component';\nimport AskForm from './AskForm/AskForm.component';\nimport Footer from \"../../components/organisms/Footer/Footer.component\";\n\nimport './PostForm.styles.scss';\n\nconst PostForm = ({auth: {isAuthenticated, loading}}) => {\n  if (!isAuthenticated) {\n    return <Redirect to='/login' />;\n  }\n\n  return loading === null ? (\n    <Spinner type='page' width='75px' height='200px' />\n  ) : (\n    <Fragment>\n      <div className='post-form-container'>\n        <div className='post-form-content'>\n          <div className='post-form-header'>\n            <div className='post-form-headline fc-black-800'>\n              Ask a public question\n            </div>\n          </div>\n          <div className='post-form-section'>\n            <div className='postform' style={{width: '100%'}}>\n              <AskForm />\n            </div>\n            <aside>\n              <div className='right-panel'>\n                <AskWidget />\n              </div>\n            </aside>\n          </div>\n        </div>\n      </div>\n      <Footer/>\n    </Fragment>\n  );\n};\n\nPostForm.propTypes = {\n  auth: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  auth: state.auth,\n});\n\nexport default connect(mapStateToProps, null)(PostForm);\n"
  },
  {
    "path": "src/modules/PostForm/PostForm.styles.scss",
    "content": ".post-form-container {\n  width: 100%;\n  height: calc(100vh - 64px);\n  max-width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: 64px 0 0 0;\n  background-color: #3d3d3d;\n  position: relative;\n  flex: 1 0 auto;\n  color: #242729;\n\n  .post-form-content {\n    min-height: 750px;\n    overflow: visible;\n    width: 100%;\n    margin: 0;\n    background-color: transparent;\n    padding-top: 0;\n    padding-left: 24px;\n    padding-right: 24px;\n\n    .post-form-header {\n      height: 130px;\n      background-image: url(\"https://cdn.sstatic.net/img/ask/background.svg?v=2e9a8205b368\");\n      background-repeat: no-repeat;\n      background-position: right bottom !important;\n      padding-top: 24px !important;\n      padding-bottom: 24px !important;\n      padding-left: 4px;\n      display: flex;\n      align-items: center;\n\n      .post-form-headline {\n        font-size: 27px;\n        color: #242729;\n      }\n    }\n\n    .post-form-section {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      color: #242729;\n\n      aside {\n        flex-shrink: 0;\n        color: #242729;\n\n        .right-panel {\n          width: 300px;\n          margin-left: 24px;\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "src/modules/ProfilePage/ExternalUserDetails/ExternalUserDetails.component.jsx",
    "content": "import React from \"react\";\nimport {Link} from \"react-router-dom\";\n\nimport {ReactComponent as StackExchangeLogo} from \"../../../assets/StackExchange.svg\";\nimport {ReactComponent as Logo} from \"../../../assets/LogoGlyphMd.svg\";\n\nimport './ExternalUserDetails.styles.scss';\n\nconst ExternalUserDetails = () => (\n  <div className='grid-cell1'>\n    <div className='cell-layout'>\n      <div className='community'>\n        <h3 className='bc-black-3'>\n          <span className='icon'>\n            <StackExchangeLogo/>\n          </span>\n          <span className='text fw-bold fc-dark bc-black-3'>\n            Communities\n          </span>\n        </h3>\n        <ul>\n          <li className='item'>\n            <Link to='/'>\n              <span>\n                <Logo className='logo' />\n              </span>\n              <span className='fc-blue-600 fs-body2'>\n                Stack Overflow\n              </span>\n            </Link>\n          </li>\n        </ul>\n      </div>\n      <div className='user-posts'>\n        <h3 className='fw-bold fc-dark bc-black-3'>\n          Top network posts\n        </h3>\n        <p className='fc-light'>\n          We respect a laser-like focus on one topic.\n        </p>\n      </div>\n    </div>\n  </div>\n)\n\nexport default ExternalUserDetails;"
  },
  {
    "path": "src/modules/ProfilePage/ExternalUserDetails/ExternalUserDetails.styles.scss",
    "content": ".grid-cell1 {\n  margin: 12px;\n  width: 100%;\n  max-width: 210px;\n\n  .cell-layout {\n    display: flex;\n    flex-direction: column;\n\n    .community {\n      margin: 16px 0 16px 0;\n\n      h3 {\n        padding-bottom: 6px !important;\n        border-bottom: 1px solid #d6d9dc;\n        font-size: 15px;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n\n        .icon {\n          margin: 2px;\n        }\n\n        .text {\n          margin: 2px;\n        }\n      }\n\n      ul {\n        list-style: none;\n        padding: 0;\n        margin-top: 8px;\n        display: flex;\n        flex-direction: column;\n\n        .item {\n          margin: 8px 0 8px 0;\n\n          a {\n            font-size: 13px;\n            margin-left: -2px;\n            margin-right: -2px;\n            display: flex;\n            align-items: center;\n            color: #0077cc;\n            text-decoration: none;\n            cursor: pointer;\n\n            &:hover {\n              color: #0095ff;\n              text-decoration: none;\n            }\n\n            span {\n              margin: 0 2px 0 2px;\n            }\n\n            .logo {\n              width: 18px;\n              height: 18px;\n            }\n          }\n        }\n      }\n    }\n\n    .user-posts {\n      margin: 16px 0 16px 0;\n\n      h3 {\n        font-weight: 700;\n        color: #0c0d0e;\n        padding-bottom: 8px;\n        border-bottom: 1px solid #d6d9dc;\n        font-size: 15px;\n        margin-bottom: 15px;\n      }\n      p {\n        color: #6a737c;\n        font-size: 12px;\n        padding-right: 16px;\n        margin-bottom: 12px;\n      }\n    }\n  }\n}"
  },
  {
    "path": "src/modules/ProfilePage/ProfilePage.component.jsx",
    "content": "import React, {useEffect, Fragment} from 'react';\nimport { connect } from 'react-redux';\nimport { Link, useParams } from \"react-router-dom\";\nimport PropTypes from 'prop-types';\nimport { getProfile } from '../../redux/users/users.actions';\n\nimport UserSection from \"./UserSection/UserSection.component\";\nimport Spinner from '../../components/molecules/Spinner/Spinner.component';\nimport ExternalUserDetails from \"./ExternalUserDetails/ExternalUserDetails.component\";\nimport UserActivity from \"./UserActivity/UserActivity.component\";\n\nimport './ProfilePage.styles.scss';\n\nconst ProfilePage = ({getProfile, user: {user, loading}}) => {\n  const { id } = useParams();\n\n  useEffect(() => {\n    getProfile(id);\n    // eslint-disable-next-line\n  }, [getProfile]);\n\n  return loading || user === null ? (\n    <Spinner type='page' width='75px' height='200px' />\n  ) : (\n    <Fragment>\n      <div id='mainbar' className='user-main-bar pl24 pt24'>\n        <div className='user-card'>\n          <div className='grid--cell s-navigation mb16'>\n            <Link\n              to='#'\n              className='s-navigation--item is-selected'\n              data-shortcut='P'\n            >\n              Profile\n            </Link>\n            <Link to='#' className='s-navigation--item' data-shortcut='A'>\n              Activity\n            </Link>\n          </div>\n          <UserSection user={user}/>\n        </div>\n        <div className='row-grid'>\n          <ExternalUserDetails/>\n          <UserActivity/>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nProfilePage.propTypes = {\n  getProfile: PropTypes.func.isRequired,\n  user: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  user: state.user,\n});\n\nexport default connect(mapStateToProps, {getProfile})(ProfilePage);\n"
  },
  {
    "path": "src/modules/ProfilePage/ProfilePage.styles.scss",
    "content": ".page {\n  display: flex;\n}\n\n.user-main-bar {\n  width: calc(100% - 300px - 24px);\n  padding: 24px 0 24px 0;\n  float: left;\n  margin: 0;\n\n  .user-card {\n    box-sizing: border-box;\n    display: block;\n    color: #242729;\n  }\n\n  .row-grid {\n    padding-bottom: 30px;\n    box-sizing: border-box;\n    width: 100%;\n    margin: -12px;\n    display: flex;\n  }\n}"
  },
  {
    "path": "src/modules/ProfilePage/UserActivity/UserActivity.component.jsx",
    "content": "import React from \"react\";\n\nimport TagBadge from \"../../../components/molecules/TagBadge/TagBadge.component\";\n\nimport './UserActivity.styles.scss';\n\nconst UserActivity = () => (\n  <div className='grid-cell2'>\n    <div className='top-tags'>\n      <h3 className='fw-bold fc-dark bc-black-3'>Top Tags</h3>\n      <div className='top-tags-sec'>\n        <div className='top-tags-cells'>\n          <div className='top-cell'>\n            <div className='tag-cell bg-black-025'>\n              <TagBadge\n                tag_name={'java'}\n                size={'s-tag s-tag__lg'}\n                float={'left'}\n              />\n              <div className='score'>\n                <div className='score-txt'>\n                  <div className='score-tab'>\n                    <span className='txt fc-light'>Posts</span>\n                    <span className='number fc-black-800'>2</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className='top-tags-cells'>\n          <div className='top-cell'>\n            <div className='tag-cell bg-black-025'>\n              <TagBadge\n                tag_name={'node.js'}\n                size={'s-tag s-tag__md'}\n                float={'left'}\n              />\n              <div className='score'>\n                <div className='score-txt'>\n                  <div className='score-tab'>\n                    <span className='txt fc-light'>Posts</span>\n                    <span className='number fc-black-800'>1</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div className='top-tags-cells'>\n          <div className='top-cell'>\n            <div className='tag-cell bg-black-025'>\n              <TagBadge\n                tag_name={'react'}\n                size={'s-tag s-tag__md'}\n                float={'left'}\n              />\n              <div className='score'>\n                <div className='score-txt'>\n                  <div className='score-tab'>\n                    <span className='txt fc-light'>Posts</span>\n                    <span className='number fc-black-800'>0</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n)\n\nexport default UserActivity;"
  },
  {
    "path": "src/modules/ProfilePage/UserActivity/UserActivity.styles.scss",
    "content": ".grid-cell2 {\n  margin: 12px;\n  flex: 1 auto !important;\n  color: #242729;\n\n  .top-tags {\n    margin-top: 17px;\n    margin-bottom: 48px !important;\n\n    h3 {\n      font-weight: 700;\n      color: #0c0d0e;\n      padding-bottom: 8px !important;\n      border-bottom: 1px solid #d6d9dc;\n      font-size: 15px;\n      margin-bottom: 15px;\n    }\n\n    .top-tags-sec {\n      margin: -4px 0 -4px 0;\n      display: flex;\n      flex-direction: column;\n\n      .top-tags-cells {\n        margin: 4px;\n\n        .top-cell {\n          margin: -4px;\n          display: flex;\n\n          .tag-cell {\n            margin: 4px;\n            padding: 8px;\n            display: flex;\n            flex: 1 auto;\n            background-color: #fafafb;\n            border-radius: 3px;\n            color: #242729;\n          }\n\n          .score {\n            display: flex;\n            justify-content: flex-end;\n            flex: 1 auto;\n\n            .score-txt {\n              display: flex;\n\n              .score-tab {\n                margin: 0 8px 0 8px;\n                height: 100%;\n                font-size: 11px;\n                display: flex;\n                align-items: center;\n                color: #9199a1;\n\n                .txt {\n                  text-transform: uppercase;\n                  font-weight: 700;\n                  margin-right: 6px;\n                }\n\n                .number {\n                  color: #3c4146;\n                  font-size: 15px;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "src/modules/ProfilePage/UserSection/AvatarCard/AvatarCard.component.jsx",
    "content": "import React from \"react\";\nimport {Link} from \"react-router-dom\";\n\nimport './AvatarCard.styles.scss';\n\nconst AvatarCard = ({ id, gravatar, views }) => (\n  <div className='img-card'>\n    <div className='avatar-card'>\n      <div className='avatar'>\n        <Link className='avatar-link' to={`/users/${id}`}>\n          <div className='logo-wrapper'>\n            <img\n              src={gravatar}\n              alt='user-logo'\n            />\n          </div>\n        </Link>\n      </div>\n      <div className='title'>\n        <div className='grid fc-black-800'>\n          {views}\n          &nbsp;\n          <span className='fc-light'>PROFILE VIEWS</span>\n        </div>\n      </div>\n    </div>\n  </div>\n)\n\nexport default AvatarCard;"
  },
  {
    "path": "src/modules/ProfilePage/UserSection/AvatarCard/AvatarCard.styles.scss",
    "content": ".img-card {\n  box-sizing: border-box;\n  margin: 12px;\n  width: 210px;\n  overflow: hidden;\n\n  .avatar-card {\n    box-shadow: inset 0 10em 0 #3d3d3d !important;\n    text-align: center;\n    padding: 12px !important;\n    margin-bottom: 16px;\n    border: 1px solid #4a4e51 !important;\n    border-radius: 3px;\n    background-color: #2d2d2d;\n\n    .avatar {\n      width: 164px;\n      height: 164px;\n      overflow: hidden !important;\n      margin-left: auto;\n      margin-right: auto;\n      margin-top: 16px;\n      color: #242729;\n\n      .avatar-link {\n\n\n        .logo-wrapper {\n          border-radius: 3px;\n          width: 164px;\n          height: 164px;\n\n          img {\n            width: 164px;\n            height: 164px;\n            border-radius: 3px;\n          }\n        }\n      }\n    }\n\n    .title {\n      font-weight: 400;\n      margin-top: 12px !important;\n      margin-bottom: 12px !important;\n\n      .grid {\n        color: #0c0d0e;\n        font-size: 21px;\n        display: flex;\n        margin: -4px;\n        justify-content: center !important;\n        align-items: center !important;\n\n        span {\n          color: #6a737c;\n          font-size: 11px;\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "src/modules/ProfilePage/UserSection/ContentCard/ContentCard.component.jsx",
    "content": "import React from \"react\";\nimport moment from \"moment\";\n\nimport './ContentCard.styles.scss';\n\nconst ContentCard = ({ username, answers_count, posts_count, comments_count, tags_count, created_at }) => (\n  <div className='content-card'>\n    <div className='content-grid'>\n      <div className='info-cell'>\n        <div className='info'>\n          <div className='details'>\n            <h2>{username}</h2>\n          </div>\n          <div className='date'>\n            <p>\n              user created &nbsp;-&nbsp;\n              {moment(created_at).fromNow(false)}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div className='stats-cell'>\n        <div className='count-sec'>\n          <div className='counts'>\n            <div className='cells'>\n              <div className='column-grid'>\n                <div className='head fc-black-700'>\n                  {answers_count}\n                </div>\n                <div className='foot fc-black-500'>answers</div>\n              </div>\n            </div>\n            <div className='cells'>\n              <div className='column-grid'>\n                <div className='head fc-black-700'>\n                  {posts_count}\n                </div>\n                <div className='foot fc-black-500'>questions</div>\n              </div>\n            </div>\n            <div className='cells'>\n              <div className='column-grid'>\n                <div className='head fc-black-700'>\n                  {comments_count}\n                </div>\n                <div className='foot fc-black-500'>comments</div>\n              </div>\n            </div>\n            <div className='cells'>\n              <div className='column-grid'>\n                <div className='head fc-black-700'>\n                  {tags_count}\n                </div>\n                <div className='foot fc-black-500'>tags</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n)\n\nexport default ContentCard;"
  },
  {
    "path": "src/modules/ProfilePage/UserSection/ContentCard/ContentCard.styles.scss",
    "content": ".content-card {\n  box-sizing: border-box;\n  margin: 12px;\n  flex: 1 auto !important;\n\n  .content-grid {\n    margin: -8px;\n    display: flex;\n    flex-direction: column;\n\n    .info-cell {\n      margin: 8px;\n      //height: 278px;\n      padding-right: 16px !important;\n      flex: 1 auto;\n      color: #242729;\n\n      .info {\n        display: flex;\n        flex-direction: column !important;\n\n        .details {\n          margin-top: 4px;\n          margin-bottom: 4px;\n\n          h2 {\n            word-break: break-all !important;\n            color: #e7e8eb !important;\n            font-size: 27px;\n            display: flex;\n            align-items: center;\n            flex-wrap: wrap;\n          }\n        }\n\n        .date {\n          margin-top: 16px;\n          margin-bottom: 4px;\n          color: #acb2b8 !important;\n          font-size: 15px;\n        }\n      }\n    }\n\n    .stats-cell {\n      margin: 8px;\n      padding-right: 24px !important;\n\n      .count-sec {\n        color: #3c4146 !important;\n        margin-bottom: 16px !important;\n\n        .counts {\n          margin: -6px;\n          display: flex;\n\n          .cells {\n            margin: 6px;\n\n            .column-grid {\n              display: flex;\n              flex-direction: column;\n\n              .head {\n                font-weight: 700 !important;\n                font-size: 17px;\n                text-align: center;\n              }\n              .foot {\n                font-size: 13px;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "src/modules/ProfilePage/UserSection/UserSection.component.jsx",
    "content": "import React from \"react\";\n\nimport AvatarCard from \"./AvatarCard/AvatarCard.component\";\nimport ContentCard from \"./ContentCard/ContentCard.component\";\n\nimport './UserSection.styles.scss';\n\nconst UserSection = ({ user }) => (\n  <div className='grid'>\n    <AvatarCard\n      id={user.id}\n      gravatar={user.gravatar}\n      views={user.views}\n    />\n    <ContentCard\n      username={user.username}\n      answers_count={user.answers_count}\n      posts_count={user.posts_count}\n      comments_count={user.comments_count}\n      tags_count={user.tags_count}\n      created_at={user.created_at}\n    />\n  </div>\n)\n\nexport default UserSection;"
  },
  {
    "path": "src/modules/ProfilePage/UserSection/UserSection.styles.scss",
    "content": ".grid {\n  box-sizing: border-box;\n  margin: -12px;\n  display: flex;\n  color: #242729;\n}"
  },
  {
    "path": "src/modules/QuestionsPage/QuestionsPage.component.jsx",
    "content": "import React, {Fragment, useEffect, useState} from 'react';\nimport {useLocation} from 'react-router-dom';\nimport {connect} from 'react-redux';\nimport PropTypes from 'prop-types';\nimport {getPosts} from '../../redux/posts/posts.actions';\nimport handleSorting from '../../utils/handleSorting';\n\nimport LinkButton from '../../components/molecules/LinkButton/LinkButton.component';\nimport PostItem from '../../components/molecules/PostItem/PostItem.component';\nimport Spinner from '../../components/molecules/Spinner/Spinner.component';\nimport ButtonGroup from '../../components/molecules/ButtonGroup/ButtonGroup.component';\nimport SearchBox from '../../components/molecules/SearchBox/SearchBox.component';\nimport Pagination from \"../../components/organisms/Pagination/Pagination.component\";\n\nimport './QuestionsPage.styles.scss';\n\nconst itemsPerPage = 10;\n\nconst QuestionsPage = ({getPosts, post: {posts, loading}}) => {\n  useEffect(() => {\n    getPosts();\n  }, [getPosts]);\n\n  const [page, setPage] = useState(1);\n  const [sortType, setSortType] = useState('Newest');\n\n  let searchQuery = new URLSearchParams(useLocation().search).get('search');\n\n  const handlePaginationChange = (e, value) => setPage(value);\n\n  return loading || posts === null ? (\n    <Spinner type='page' width='75px' height='200px' />\n  ) : (\n    <Fragment>\n      <div id='mainbar' className='questions-page fc-black-800'>\n        <div className='questions-grid'>\n          <h3 className='questions-headline'>\n            {searchQuery ? 'Search Results' : 'All Questions'}\n          </h3>\n          <div className='questions-btn'>\n            <LinkButton\n              text={'Ask Question'}\n              link={'/add/question'}\n              type={'s-btn__primary'}\n            />\n          </div>\n        </div>\n        {searchQuery ? (\n          <div className='search-questions'>\n            <span style={{color: '#acb2b8', fontSize: '12px'}}>\n              Results for {searchQuery}\n            </span>\n            <SearchBox placeholder={'Search...'} name={'search'} pt={'mt8'} />\n          </div>\n        ) : (\n          ''\n        )}\n        <div className='questions-tabs'>\n          <span>\n            {new Intl.NumberFormat('en-IN').format(posts.length)} questions\n          </span>\n          <ButtonGroup\n            buttons={['Newest', 'Top', 'Views', 'Oldest']}\n            selected={sortType}\n            setSelected={setSortType}\n          />\n        </div>\n        <div className='questions'>\n          {posts\n            .filter((post) => post.title.toLowerCase().includes(searchQuery ? searchQuery : ''))\n            ?.sort(handleSorting(sortType))\n            .slice((page - 1) * itemsPerPage, (page - 1) * itemsPerPage + itemsPerPage)\n            .map((post, index) => (\n              <PostItem key={index} post={post} />\n            ))}\n        </div>\n        <Pagination\n          page={page}\n          itemList={posts.filter((post) => post.title.toLowerCase().includes(searchQuery ? searchQuery : ''))}\n          itemsPerPage={itemsPerPage}\n          handlePaginationChange={handlePaginationChange}\n        />\n      </div>\n    </Fragment>\n  );\n};\n\nQuestionsPage.propTypes = {\n  getPosts: PropTypes.func.isRequired,\n  post: PropTypes.object.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  post: state.post,\n});\n\nexport default connect(mapStateToProps, {getPosts})(QuestionsPage);\n"
  },
  {
    "path": "src/modules/QuestionsPage/QuestionsPage.styles.scss",
    "content": ".page {\n  display: flex;\n}\n\n.questions-page {\n  padding: 24px 0 24px 0;\n  float: left;\n  margin: 0;\n\n  .questions-grid {\n    display: flex;\n    padding-left: 24px;\n\n    .questions-headline {\n      margin-bottom: 24px;\n      flex: 1 auto;\n      font-size: 28px;\n      font-weight: 400;\n    }\n  }\n\n  .search-questions {\n    padding-left: 24px;\n    padding-bottom: 16px;\n    padding-right: 2px;\n  }\n\n  .questions-tabs {\n    margin-bottom: 12px;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    padding-left: 24px;\n    padding-right: 3px;\n\n    span {\n      font-size: 17px;\n      margin-right: 12px;\n      margin-bottom: 1rem;\n    }\n  }\n\n  .questions {\n    float: none;\n    clear: both;\n    width: auto;\n    margin-bottom: 20px;\n    border-top: 1px solid #4a4e51;\n  }\n\n}\n\n@media(max-width: 1100px) {\n  .questions-page {\n    width: 80%;\n  }\n}\n"
  },
  {
    "path": "src/modules/Register/Caption/Caption.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport {Link} from 'react-router-dom';\n\nimport {ReactComponent as QuoteLogo} from '../../../assets/Quote.svg';\nimport {ReactComponent as VoteLogo} from '../../../assets/Vote.svg';\nimport {ReactComponent as TagsLogo} from '../../../assets/Tags.svg';\nimport {ReactComponent as TrophyLogo} from '../../../assets/Trophy.svg';\n\nimport './Caption.styles.scss';\n\nconst Caption = () => {\n  return (\n    <Fragment>\n      <div className='caption fc-black-600'>\n        <h3>Join the Stack Overflow community</h3>\n        <div className='caption-item'>\n          <div className='grid-icon'>\n            <QuoteLogo/>\n          </div>\n          <div className='grid-cell'>Get unstuck — ask a question</div>\n        </div>\n        <div className='caption-item'>\n          <div className='grid-icon'>\n            <VoteLogo/>\n          </div>\n          <div className='grid--cell'>\n            Unlock new privileges like voting and commenting\n          </div>\n        </div>\n        <div className='caption-item'>\n          <div className='grid-icon'>\n            <TagsLogo/>\n          </div>\n          <div className='grid-cell'>\n            Save your favorite tags, filters, and jobs\n          </div>\n        </div>\n        <div className='caption-item'>\n          <div className='grid-icon'>\n            <TrophyLogo/>\n          </div>\n          <div className='grid-cell'>Earn reputation and badges</div>\n        </div>\n        <div className='caption-item fc-black-600'>\n          <div>\n            Use the power of Stack Overflow inside your organization.\n            <br />\n            Try a{' '}\n            <Link to='https://stackoverflow.com/teams?utm_source=so-owned&utm_medium=product&utm_campaign=public-sign-up&utm_content=teams'>\n              free trial of Stack Overflow for Teams\n            </Link>\n            .\n          </div>\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nexport default Caption;\n"
  },
  {
    "path": "src/modules/Register/Caption/Caption.styles.scss",
    "content": ".caption  {\n  margin-right: 48px;\n  margin-bottom: 0px;\n  width: 400px;\n  display: flex;\n  flex-direction: column;\n\n  h3 {\n    margin-bottom: 32px;\n  }\n\n  .caption-item {\n    display: flex;\n    margin-bottom: 24px;\n\n    .grid-icon {\n      margin-right: 8px;\n\n      .svg-icon {\n        color:#0095ff;\n      }\n    }\n  }\n  .fs-light {\n    color:#6a737c;\n    font-size: 13px;\n    box-sizing: inherit;\n  }\n}\n\n@media (max-width: 799px ) {\n  .caption  {\n    width: 100%;\n    justify-content: center;\n    align-items: center;\n    overflow-x: auto;\n    min-width: 400px;\n    margin-right: 0;\n  }\n  h3 {\n    font-size: 1.6rem;\n  }\n}"
  },
  {
    "path": "src/modules/Register/Register.component.jsx",
    "content": "import React, {Fragment} from 'react';\nimport {connect} from 'react-redux';\nimport {Redirect} from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport {setAlert} from '../../redux/alert/alert.actions';\n\nimport Caption from './Caption/Caption.component';\nimport AuthForm from '../../components/organisms/AuthForm/AuthForm.component';\nimport Footer from \"../../components/organisms/Footer/Footer.component\";\n\nimport './Register.styles.scss';\n\nconst Register = ({isAuthenticated}) => {\n  if (isAuthenticated) {\n    return <Redirect to='/' />;\n  }\n\n  return (\n    <Fragment>\n      <div className='auth-page'>\n        <div className='register-content'>\n          <div className='register-grid'>\n            <Caption />\n            <AuthForm action={'Sign up'} />\n          </div>\n        </div>\n      </div>\n      <Footer/>\n    </Fragment>\n  );\n};\n\nRegister.propTypes = {\n  setAlert: PropTypes.func.isRequired,\n  isAuthenticated: PropTypes.bool,\n};\n\nconst mapStateToProps = (state) => ({\n  isAuthenticated: state.auth.isAuthenticated,\n});\n\nexport default connect(mapStateToProps, {setAlert})(Register);\n"
  },
  {
    "path": "src/modules/Register/Register.styles.scss",
    "content": ".auth-page {\n  height: 100vh;\n  width: 100%;\n  background-color: #3d3d3d;\n}\n\n.register-content {\n  background-color: transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 90.7vh;\n}\n\n.register-grid  {\n  display: flex;\n  align-items: center;\n  box-sizing: inherit;\n}\n\n@media (max-width: 799px) {\n  .register-grid {\n    flex-direction: column;\n    padding: 7rem 0;\n  }\n  .register-content {\n    height: auto;\n    margin: auto 0;\n  }\n}"
  },
  {
    "path": "src/modules/TagPage/TagPage.component.jsx",
    "content": "import React, {useEffect, Fragment, useState} from 'react';\nimport {connect} from 'react-redux';\nimport {Redirect, useParams} from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport {getTagPosts} from '../../redux/posts/posts.actions';\nimport {getTag} from '../../redux/tags/tags.actions';\nimport handleSorting from '../../utils/handleSorting';\n\nimport LinkButton from '../../components/molecules/LinkButton/LinkButton.component';\nimport PostItem from '../../components/molecules/PostItem/PostItem.component';\nimport Spinner from '../../components/molecules/Spinner/Spinner.component';\nimport ButtonGroup from '../../components/molecules/ButtonGroup/ButtonGroup.component';\n\nimport './TagPage.styles.scss';\n\nconst TagPage = ({getTag, getTagPosts, tag, post: {posts, loading}}) => {\n  const { tagname } = useParams();\n\n  useEffect(() => {\n    getTagPosts(tagname);\n    getTag(tagname);\n    // eslint-disable-next-line\n  }, [getTag, getTagPosts]);\n\n  const [sortType, setSortType] = useState('Newest');\n\n  if (tag.redirect) {\n    return <Redirect to='/tags' />;\n  }\n\n  return tag.tag === null || tag.loading || loading ? (\n    <Spinner type='page' width='75px' height='200px' />\n  ) : (\n    <Fragment>\n      <div id='mainbar' className='questions-page fc-black-800'>\n        <div className='questions-grid'>\n          <h3 className='questions-headline'>\n            Questions tagged [{tag.tag.tagname}]\n          </h3>\n          <div className='questions-btn'>\n            <LinkButton\n              text={'Ask Question'}\n              link={'/add/question'}\n              type={'s-btn__primary'}\n            />\n          </div>\n        </div>\n        <p\n          className='fs-body'\n          dangerouslySetInnerHTML={{__html: tag.tag.description}}\n        />\n        <div className='questions-tabs'>\n          <span>\n            {new Intl.NumberFormat('en-IN').format(tag.tag.posts_count)}{' '}\n            {tag.tag.posts_count === 1 ? 'question' : 'questions'}\n          </span>\n          <ButtonGroup\n            buttons={['Newest', 'Top', 'Views', 'Oldest']}\n            selected={sortType}\n            setSelected={setSortType}\n          />\n        </div>\n        <div className='questions'>\n          {tag.tag.posts_count === 0 ? (\n            <h4 style={{margin: '30px 30px'}}>\n              There are no questions from this tag\n            </h4>\n          ) : (\n            posts\n              ?.sort(handleSorting(sortType))\n              .map((post, index) => <PostItem key={index} post={post} />)\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n};\n\nTagPage.propTypes = {\n  getTag: PropTypes.func.isRequired,\n  getTagPosts: PropTypes.func.isRequired,\n  post: PropTypes.object.isRequired,\n  tag: PropTypes.func.isRequired,\n};\n\nconst mapStateToProps = (state) => ({\n  post: state.post,\n  tag: state.tag,\n});\n\nexport default connect(mapStateToProps, {getTagPosts, getTag})(TagPage);\n"
  },
  {
    "path": "src/modules/TagPage/TagPage.styles.scss",
    "content": ".fs-body {\n  padding-left: 24px;\n  padding-right: 24px;\n  width: 54rem;\n  font-size: 13px;\n  font-weight: 400;\n}"
  },
  {
    "path": "src/redux/alert/alert.actions.js",
    "content": "import {v4 as uuidv4} from 'uuid';\nimport {SET_ALERT, REMOVE_ALERT} from './alert.types';\n\nexport const setAlert = (msg, alertType, timeout = 5000) => (dispatch) => {\n  const id = uuidv4();\n  dispatch({\n    type: SET_ALERT,\n    payload: {msg, alertType, id},\n  });\n\n  setTimeout(() => dispatch({type: REMOVE_ALERT, payload: id}), timeout);\n};\n"
  },
  {
    "path": "src/redux/alert/alert.reducer.js",
    "content": "import {SET_ALERT, REMOVE_ALERT} from './alert.types';\n\nconst InitialState = [];\n\nexport default function alert(state = InitialState, action) {\n  switch (action.type) {\n    case SET_ALERT:\n      return [...state, action.payload];\n    case REMOVE_ALERT:\n      return state.filter((alert) => alert.id !== action.payload);\n    default:\n      return state;\n  }\n}\n"
  },
  {
    "path": "src/redux/alert/alert.types.js",
    "content": "export const SET_ALERT = 'SET_ALERT';\nexport const REMOVE_ALERT = 'REMOVE_ALERT';\n"
  },
  {
    "path": "src/redux/answers/answers.actions.js",
    "content": "import { setAlert } from \"../alert/alert.actions\";\nimport {\n  GET_ANSWERS,\n  ANSWER_ERROR,\n  ADD_ANSWER,\n  DELETE_ANSWER,\n} from \"./answers.types\";\nimport { allAnswersData, createSingleAnswer, deleteSingleAnswer } from \"../../api/answersApi\";\n\nexport const getAnswers = (id) => async (dispatch) => {\n  try {\n    const res = await allAnswersData(id);\n\n    dispatch({\n      type: GET_ANSWERS,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch({\n      type: ANSWER_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n\n// Add Answer\nexport const addAnswer = (postId, formData) => async (dispatch) => {\n  try {\n    const res = await createSingleAnswer(postId, formData);\n\n    dispatch({\n      type: ADD_ANSWER,\n      payload: res.data.data,\n    });\n\n    dispatch(setAlert(res.data.message, \"success\"));\n\n    dispatch(getAnswers(postId));\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, \"danger\"));\n\n    dispatch({\n      type: ANSWER_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n\n// Delete Answer\nexport const deleteAnswer = (AnswerId) => async (dispatch) => {\n  try {\n    const res = await deleteSingleAnswer(AnswerId);\n\n    dispatch({\n      type: DELETE_ANSWER,\n      payload: AnswerId,\n    });\n\n    dispatch(setAlert(res.data.message, \"success\"));\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, \"danger\"));\n\n    dispatch({\n      type: ANSWER_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n"
  },
  {
    "path": "src/redux/answers/answers.reducer.js",
    "content": "import {\n  GET_ANSWERS,\n  ANSWER_ERROR,\n  ADD_ANSWER,\n  DELETE_ANSWER,\n} from './answers.types';\n\nconst initialState = {\n  answers: [],\n  loading: true,\n  error: {},\n};\n\nexport default function answers(state = initialState, action) {\n  switch (action.type) {\n    case GET_ANSWERS:\n      return {\n        ...state,\n        answers: action.payload,\n        loading: false,\n      };\n    case ADD_ANSWER:\n      return {\n        ...state,\n        answers: [...state.answers, action.payload],\n        loading: false,\n      };\n    case DELETE_ANSWER:\n      return {\n        ...state,\n        answers: state.answers.filter((answer) => answer.id !== action.payload),\n        loading: false,\n      };\n    case ANSWER_ERROR:\n      return {\n        ...state,\n        error: action.payload,\n        loading: false,\n      };\n    default:\n      return state;\n  }\n}\n"
  },
  {
    "path": "src/redux/answers/answers.types.js",
    "content": "export const GET_ANSWERS = 'GET_ANSWERS';\nexport const ANSWER_ERROR = 'ANSWER_ERROR';\nexport const DELETE_ANSWER = 'DELETE_ANSWER';\nexport const ADD_ANSWER = 'ADD_ANSWER';\n"
  },
  {
    "path": "src/redux/auth/auth.actions.js",
    "content": "import { loadUserData, registerUser, loginUser } from '../../api/authApi'\nimport setAuthToken from './auth.utils';\nimport {setAlert} from '../alert/alert.actions';\nimport {\n  REGISTER_SUCCESS,\n  REGISTER_FAIL,\n  USER_LOADED,\n  AUTH_ERROR,\n  LOGIN_SUCCESS,\n  LOGIN_FAIL,\n  LOGOUT,\n} from './auth.types';\n\n// Load User\nexport const loadUser = () => async (dispatch) => {\n  if (localStorage.token) {\n    setAuthToken(localStorage.token);\n  }\n  try {\n    const res = await loadUserData();\n\n    dispatch({\n      type: USER_LOADED,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch({\n      type: AUTH_ERROR,\n    });\n  }\n};\n\n// Register User\nexport const register = ({ username, password }) => async (dispatch) => {\n  try {\n    const res = await registerUser(username, password);\n\n    dispatch({\n      type: REGISTER_SUCCESS,\n      payload: res.data.data,\n    });\n\n    dispatch(setAlert(res.data.message, 'success'));\n\n    dispatch(loadUser());\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, 'danger'));\n\n    dispatch({\n      type: REGISTER_FAIL,\n    });\n  }\n};\n\n// Login User\nexport const login = ({username, password}) => async (dispatch) => {\n  try {\n    const res = await loginUser(username, password);\n\n    dispatch({\n      type: LOGIN_SUCCESS,\n      payload: res.data.data,\n    });\n\n    dispatch(setAlert(res.data.message, 'success'));\n\n    dispatch(loadUser());\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, 'danger'));\n\n    dispatch({\n      type: LOGIN_FAIL,\n    });\n  }\n};\n\n//LOGOUT\nexport const logout = () => (dispatch) => {\n  dispatch(setAlert('User has logged out', 'success'));\n  localStorage.removeItem('token');\n\n  dispatch({type: LOGOUT});\n};\n"
  },
  {
    "path": "src/redux/auth/auth.reducer.js",
    "content": "import {\n  REGISTER_SUCCESS,\n  REGISTER_FAIL,\n  USER_LOADED,\n  AUTH_ERROR,\n  LOGIN_SUCCESS,\n  LOGIN_FAIL,\n  LOGOUT,\n} from './auth.types';\n\nconst initialState = {\n  token: localStorage.getItem('token'),\n  isAuthenticated: null,\n  loading: true,\n  user: null,\n};\n\nexport default function auth(state = initialState, action) {\n  switch (action.type) {\n    case USER_LOADED:\n      return {\n        ...state,\n        user: action.payload,\n        isAuthenticated: true,\n        loading: false,\n      };\n\n    case REGISTER_SUCCESS:\n    case LOGIN_SUCCESS:\n      localStorage.setItem('token', action.payload.token);\n      return {\n        ...state,\n        ...action.payload,\n        isAuthenticated: true,\n        loading: false,\n      };\n    case REGISTER_FAIL:\n    case AUTH_ERROR:\n    case LOGIN_FAIL:\n    case LOGOUT:\n      localStorage.removeItem('token');\n      return {\n        ...state,\n        token: null,\n        isAuthenticated: false,\n        loading: false,\n      };\n    default:\n      return state;\n  }\n}\n"
  },
  {
    "path": "src/redux/auth/auth.types.js",
    "content": "export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';\nexport const REGISTER_FAIL = 'REGISTER_FAIL';\nexport const USER_LOADED = 'USER_LOADED';\nexport const AUTH_ERROR = 'AUTH_ERROR';\nexport const LOGIN_SUCCESS = 'LOGIN_SUCCESS';\nexport const LOGIN_FAIL = 'LOGIN_FAIL';\nexport const LOGOUT = 'LOGOUT';"
  },
  {
    "path": "src/redux/auth/auth.utils.js",
    "content": "import axios from 'axios';\n\nconst setAuthToken = (token) => {\n  if (token) {\n    axios.defaults.headers.common['x-auth-token'] = token;\n  } else {\n    delete axios.defaults.headers.common['x-auth-token'];\n  }\n};\n\nexport default setAuthToken;\n"
  },
  {
    "path": "src/redux/comments/comments.actions.js",
    "content": "import { setAlert } from \"../alert/alert.actions\";\nimport {\n  GET_COMMENTS,\n  COMMENT_ERROR,\n  ADD_COMMENT,\n  DELETE_COMMENT,\n} from \"./comments.types\";\nimport { allCommentsData, createSingleComment, deleteSingleComment } from \"../../api/commentsApi\";\n\nexport const getComments = (id) => async (dispatch) => {\n  try {\n    const res = await allCommentsData(id);\n\n    dispatch({\n      type: GET_COMMENTS,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch({\n      type: COMMENT_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n\n// Add COMMENT\nexport const addComment = (postId, formData) => async (dispatch) => {\n  try {\n    const res = await createSingleComment(postId, formData);\n\n    dispatch({\n      type: ADD_COMMENT,\n      payload: res.data.data,\n    });\n\n    dispatch(setAlert(res.data.message, \"success\"));\n\n    dispatch(getComments(postId));\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, \"danger\"));\n\n    dispatch({\n      type: COMMENT_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n\n// Delete Comment\nexport const deleteComment = (CommentId) => async (dispatch) => {\n  try {\n    const res = await deleteSingleComment(CommentId);\n\n    dispatch({\n      type: DELETE_COMMENT,\n      payload: CommentId,\n    });\n\n    dispatch(setAlert(res.data.message, \"success\"));\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, \"danger\"));\n\n    dispatch({\n      type: COMMENT_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n"
  },
  {
    "path": "src/redux/comments/comments.reducer.js",
    "content": "import {\n  GET_COMMENTS,\n  COMMENT_ERROR,\n  ADD_COMMENT,\n  DELETE_COMMENT,\n} from './comments.types';\n\nconst initialState = {\n  comments: [],\n  loading: true,\n  error: {},\n};\n\nexport default function comments(state = initialState, action) {\n  switch (action.type) {\n    case GET_COMMENTS:\n      return {\n        ...state,\n        comments: action.payload,\n        loading: false,\n      };\n    case ADD_COMMENT:\n      return {\n        ...state,\n        comments: [action.payload, ...state.comments],\n        loading: false,\n      };\n    case DELETE_COMMENT:\n      return {\n        ...state,\n        comments: state.comments.filter(\n          (answer) => answer.id !== action.payload\n        ),\n        loading: false,\n      };\n    case COMMENT_ERROR:\n      return {\n        ...state,\n        error: action.payload,\n        loading: false,\n      };\n    default:\n      return state;\n  }\n}\n"
  },
  {
    "path": "src/redux/comments/comments.types.js",
    "content": "export const GET_COMMENTS = 'GET_COMMENTS';\nexport const COMMENT_ERROR = 'COMMENT_ERROR';\nexport const DELETE_COMMENT = 'DELETE_COMMENT';\nexport const ADD_COMMENT = 'ADD_COMMENT';\n"
  },
  {
    "path": "src/redux/posts/posts.actions.js",
    "content": "import { setAlert } from \"../alert/alert.actions\";\nimport {\n  GET_POSTS,\n  GET_POST,\n  GET_TAG_POSTS,\n  POST_ERROR,\n  DELETE_POST,\n  ADD_POST,\n} from \"./posts.types\";\nimport {\n  allPostsData,\n  singlePostData,\n  allTagPostsData,\n  createSinglePost,\n  deleteSinglePost\n} from \"../../api/postsApis\";\n\n// Get posts\nexport const getPosts = () => async (dispatch) => {\n  try {\n    const res = await allPostsData();\n\n    dispatch({\n      type: GET_POSTS,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, \"danger\"));\n\n    dispatch({\n      type: POST_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n\n// Get post\nexport const getPost = (id) => async (dispatch) => {\n  try {\n    const res = await singlePostData(id);\n\n    dispatch({\n      type: GET_POST,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, \"danger\"));\n\n    dispatch({\n      type: POST_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n\n//GET TAG POSTS\nexport const getTagPosts = (tagName) => async (dispatch) => {\n  try {\n    const res = await allTagPostsData(tagName);\n\n    dispatch({\n      type: GET_TAG_POSTS,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, \"danger\"));\n\n    dispatch({\n      type: POST_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n\n// Add post\nexport const addPost = (formData) => async (dispatch) => {\n  try {\n    const res = await createSinglePost(formData);\n\n    dispatch({\n      type: ADD_POST,\n      payload: res.data.data,\n    });\n\n    dispatch(setAlert(res.data.message, \"success\"));\n\n    dispatch(getPosts());\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, \"danger\"));\n\n    dispatch({\n      type: POST_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n\n// Delete post\nexport const deletePost = (id) => async (dispatch) => {\n  try {\n    const res = await deleteSinglePost(id);\n\n    dispatch({\n      type: DELETE_POST,\n      payload: id,\n    });\n\n    dispatch(setAlert(res.data.message, \"success\"));\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, \"danger\"));\n\n    dispatch({\n      type: POST_ERROR,\n      payload: { msg: err.response.statusText, status: err.response.status },\n    });\n  }\n};\n"
  },
  {
    "path": "src/redux/posts/posts.reducer.js",
    "content": "import {\n  GET_POSTS,\n  GET_POST,\n  GET_TAG_POSTS,\n  POST_ERROR,\n  DELETE_POST,\n  ADD_POST,\n} from './posts.types';\n\nconst initialState = {\n  posts: [],\n  post: null,\n  loading: true,\n  error: {},\n};\n\nexport default function posts(state = initialState, action) {\n  switch (action.type) {\n    case GET_POSTS:\n    case GET_TAG_POSTS:\n      return {\n        ...state,\n        posts: action.payload,\n        loading: false,\n      };\n    case GET_POST:\n      return {\n        ...state,\n        post: action.payload,\n        loading: false,\n      };\n    case ADD_POST:\n      return {\n        ...state,\n        posts: [action.payload, ...state.posts],\n        loading: false,\n      };\n    case DELETE_POST:\n      return {\n        ...state,\n        posts: state.posts.filter((post) => post.id !== action.payload),\n        loading: false,\n      };\n    case POST_ERROR:\n      return {\n        ...state,\n        error: action.payload,\n        loading: false,\n      };\n    default:\n      return state;\n  }\n}\n"
  },
  {
    "path": "src/redux/posts/posts.types.js",
    "content": "export const GET_POSTS = 'GET_POSTS';\nexport const GET_POST = 'GET_POST';\nexport const GET_TAG_POSTS = 'GET_TAG_POSTS';\nexport const POST_ERROR = 'POST_ERROR';\nexport const DELETE_POST = 'DELETE_POST';\nexport const ADD_POST = 'ADD_POST';\n"
  },
  {
    "path": "src/redux/root-reducer.js",
    "content": "import {combineReducers} from 'redux';\nimport alert from './alert/alert.reducer';\nimport auth from './auth/auth.reducer';\nimport post from './posts/posts.reducer';\nimport user from './users/users.reducer';\nimport tag from './tags/tags.reducer';\nimport answer from './answers/answers.reducer';\nimport comment from './comments/comments.reducer';\n\nexport default combineReducers({\n  alert,\n  auth,\n  post,\n  user,\n  tag,\n  answer,\n  comment,\n});\n"
  },
  {
    "path": "src/redux/store.js",
    "content": "import {createStore, applyMiddleware} from 'redux';\nimport {composeWithDevTools} from 'redux-devtools-extension';\nimport thunk from 'redux-thunk';\nimport rootReducer from './root-reducer';\n\nconst initialState = {};\n\nconst middleware = [thunk];\n\nconst store = createStore(\n  rootReducer,\n  initialState,\n  composeWithDevTools(applyMiddleware(...middleware))\n);\n\nexport default store;\n"
  },
  {
    "path": "src/redux/tags/tags.actions.js",
    "content": "import {setAlert} from '../alert/alert.actions';\nimport {GET_TAG, GET_TAGS, TAG_ERROR} from './tags.types';\nimport { allTagsData, singleTagData } from '../../api/tagsApi';\n\nexport const getTag = (tagName) => async (dispatch) => {\n  try {\n    const res = await singleTagData(tagName);\n\n    dispatch({\n      type: GET_TAG,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, 'danger'));\n\n    dispatch({\n      type: TAG_ERROR,\n      payload: {msg: err.response.statusText, status: err.response.status},\n    });\n  }\n};\n\nexport const getTags = () => async (dispatch) => {\n  try {\n    const res = await allTagsData();\n\n    dispatch({\n      type: GET_TAGS,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch(setAlert(err.response.data.message, 'danger'));\n\n    dispatch({\n      type: TAG_ERROR,\n      payload: {msg: err.response.statusText, status: err.response.status},\n    });\n  }\n};\n"
  },
  {
    "path": "src/redux/tags/tags.reducer.js",
    "content": "import {GET_TAG, GET_TAGS, TAG_ERROR} from './tags.types';\n\nconst initialState = {\n  tags: [],\n  tag: null,\n  loading: true,\n  redirect: false,\n  error: {},\n};\n\nexport default function tags(state = initialState, action) {\n  switch (action.type) {\n    case GET_TAG:\n      return {\n        ...state,\n        tag: action.payload,\n        loading: false,\n        redirect: false,\n      };\n    case GET_TAGS:\n      return {\n        ...state,\n        tags: action.payload,\n        loading: false,\n        redirect: false,\n      };\n    case TAG_ERROR:\n      return {\n        ...state,\n        error: action.payload,\n        loading: false,\n        redirect: true,\n      };\n    default:\n      return state;\n  }\n}\n"
  },
  {
    "path": "src/redux/tags/tags.types.js",
    "content": "export const GET_TAG = 'GET_TAG';\nexport const GET_TAGS = 'GET_TAGS';\nexport const TAG_ERROR = 'TAG_ERROR';\n"
  },
  {
    "path": "src/redux/users/users.actions.js",
    "content": "import {GET_USERS, GET_USER, USER_ERROR} from './users.types';\nimport { usersData, profileData } from '../../api/usersApi';\n\n// Get users\nexport const getUsers = () => async (dispatch) => {\n  try {\n    const res = await usersData();\n    dispatch({\n      type: GET_USERS,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch({\n      type: USER_ERROR,\n      payload: {msg: err.response.statusText, status: err.response.status},\n    });\n  }\n};\n\n// Get user\nexport const getProfile = (id) => async (dispatch) => {\n  try {\n    const res = await profileData(id);\n\n    dispatch({\n      type: GET_USER,\n      payload: res.data.data,\n    });\n  } catch (err) {\n    dispatch({\n      type: USER_ERROR,\n      payload: {msg: err.response.statusText, status: err.response.status},\n    });\n  }\n};\n"
  },
  {
    "path": "src/redux/users/users.reducer.js",
    "content": "import {GET_USERS, GET_USER, USER_ERROR} from './users.types';\n\nconst initialState = {\n  users: [],\n  user: null,\n  loading: true,\n  error: {},\n};\n\nexport default function users(state = initialState, action) {\n  switch (action.type) {\n    case GET_USERS:\n      return {\n        ...state,\n        users: action.payload,\n        loading: false,\n      };\n    case GET_USER:\n      return {\n        ...state,\n        user: action.payload,\n        loading: false,\n      };\n    case USER_ERROR:\n      return {\n        ...state,\n        error: action.payload,\n        loading: false,\n      };\n    default:\n      return state;\n  }\n}\n"
  },
  {
    "path": "src/redux/users/users.types.js",
    "content": "export const GET_USERS = 'GET_USERS';\nexport const GET_USER = 'GET_USER';\nexport const USER_ERROR = 'USER_ERROR';\n"
  },
  {
    "path": "src/utils/censorBadWords.js",
    "content": "import Filter from \"bad-words\";\n\nconst replaceRegex = /(?<=.).+(?=.)/;\nconst placeHolder = (str) => \"*\".repeat(str.length);\n\nconst badWordsFilter = new Filter({ replaceRegex, placeHolder });\n\nconst censorBadWords = (val) => {\n  let censored = val;\n  const containsEnglishWords = /\\b/.test(val);\n\n  if (val && containsEnglishWords) {\n    const toFilter = JSON.stringify(val);\n    censored = JSON.parse(badWordsFilter.clean(toFilter));\n  }\n  return censored;\n};\n\nexport { badWordsFilter };\nexport default censorBadWords;\n"
  },
  {
    "path": "src/utils/handleFilter.js",
    "content": "const handleFilter = (sortType, page = '') => {\n    let temp = sortType;\n\n    if (page === 'users' && temp === 'Name') {\n        temp = 'Username';\n    } else if (page === 'users' && temp === 'Popular') {\n        temp = 'Popular users';\n    }\n\n    let todayDate = Date.now()\n\n    function getTime(a) {\n        return new Date(a).getTime()\n    }\n\n    const milliSecSec = 1000\n    const milliSecDay = 86300000\n    const milliSecWeek = 604800000\n    const milliSecMonth = 2628000000\n    const milliSecYear = 31540000000\n\n\n    let handleToday = function(a) {\n        const aDate = todayDate - getTime(a.created_at)\n        return aDate < milliSecDay && aDate > milliSecSec\n    }\n\n    let handleWeek = function(a) {\n        const aDate = todayDate - getTime(a.created_at)\n        return aDate < milliSecWeek\n    }\n\n    let handleMonth = function(a) {\n        const aDate = todayDate - getTime(a.created_at)\n        return aDate < milliSecMonth\n    }\n\n    let handleYear = function(a) {\n        const aDate = todayDate - getTime(a.created_at)\n        return aDate < milliSecYear\n    }\n\n\n    switch (temp) {\n        case 'Today':\n            return(a) => handleToday(a)\n        case 'Week':\n            return (a) => handleWeek(a)\n        case 'Month':\n            return (a) => handleMonth(a)\n        case 'Year':\n            return (a) => handleYear(a)\n        default:\n            break;\n    }\n}\n\nexport default handleFilter;\n"
  },
  {
    "path": "src/utils/handleSorting.js",
    "content": "const handleSorting = (sortType, page = '') => {\n  let temp = sortType;\n\n  if (page === 'users' && temp === 'Name') {\n    temp = 'Username';\n  } else if (page === 'users' && temp === 'Popular') {\n    temp = 'Popular users';\n  }\n\n  let todayDate = Date.now()\n\n  function getTime(a) {\n    return new Date(a).getTime()\n  }\n\n  const milliSecDay = 86300000\n  const milliSecWeek = 604800000\n  const milliSecMonth = 2628000000\n  const milliSecYear = 31540000000\n\n  switch (temp) {\n    case 'Newest':\n      return (a, b) => new Date(b.created_at) - new Date(a.created_at);\n    case 'New':\n      return (a, b) => new Date(b.created_at) - new Date(a.created_at);\n    case 'New Users':\n      return (a, b) => new Date(b.created_at) - new Date(a.created_at);\n    case 'Top':\n      return (a, b) =>\n        b.answer_count + b.comment_count - (a.answer_count + a.comment_count);\n    case 'Active':\n      return (a, b) =>\n        b.posts_count + b.tags_count - (a.posts_count + a.tags_count);\n    case 'Views':\n      return (a, b) => b.views - a.views;\n    case 'Oldest':\n      return (a, b) => new Date(a.created_at) - new Date(b.created_at);\n    case 'Popular':\n      return (a, b) => b.posts_count - a.posts_count;\n    case 'Name':\n      return (a, b) => a.tagname.localeCompare(b.tagname);\n    case 'Username':\n      return (a, b) => a.username.localeCompare(b.username);\n    case 'Popular users':\n      return (a, b) => b.views - a.views;\n    case 'Today':\n      return (a,b) => {\n        const aDate = todayDate - getTime(a.created_at)\n        const bDate = todayDate - getTime(b.created_at)\n  \n        if (aDate < milliSecDay && bDate < milliSecDay) {\n          return b.answer_count + b.comment_count - (a.answer_count + a.comment_count);\n        }\n        \n      }\n    case 'Week':\n      return (a, b) => {\n        const aDate = todayDate - getTime(a.created_at)\n        const bDate = todayDate - getTime(b.created_at)\n        if (aDate < milliSecWeek && bDate < milliSecWeek) {\n          return b.answer_count + b.comment_count - (a.answer_count + a.comment_count);\n        }\n      }\n    case 'Month':\n      return (a, b) => {\n        const aDate = todayDate - getTime(a.created_at)\n        const bDate = todayDate - getTime(b.created_at)\n        if (aDate < milliSecMonth && bDate < milliSecMonth) {\n          return b.answer_count + b.comment_count - (a.answer_count + a.comment_count);\n        }\n      }\n    case 'Year':\n      return (a, b) => {\n        const aDate = todayDate - getTime(a.created_at)\n        const bDate = todayDate - getTime(b.created_at)\n        if (aDate < milliSecYear && bDate < milliSecYear) {\n          return b.answer_count + b.comment_count - (a.answer_count + a.comment_count);\n        }\n      }\n    default:\n      break;\n  }\n}\n\nexport default handleSorting;\n"
  },
  {
    "path": "src/utils/htmlSubstring.js",
    "content": "// http://jsfiddle.net/danmana/5mNNU/\nconst htmlSubstring = (s, n) => {\n    var m, r = /<([^>\\s]*)[^>]*>/g,\n        stack = [],\n        lasti = 0,\n        result = '';\n\n    //for each tag, while we don't have enough characters\n    while ((m = r.exec(s)) && n) {\n        //get the text substring between the last tag and this one\n        var temp = s.substring(lasti, m.index).substr(0, n);\n        //append to the result and count the number of characters added\n        result += temp;\n        n -= temp.length;\n        lasti = r.lastIndex;\n\n        if (n) {\n            result += m[0];\n            if (m[1].indexOf('/') === 0) {\n                //if this is a closing tag, than pop the stack (does not account for bad html)\n                stack.pop();\n            } else if (m[1].lastIndexOf('/') !== m[1].length - 1) {\n                //if this is not a self closing tag than push it in the stack\n                stack.push(m[1]);\n            }\n        }\n    }\n\n    //add the remainder of the string, if needed (there are no more tags in here)\n    result += s.substr(lasti, n);\n\n    //fix the unclosed tags\n    while (stack.length) {\n        result += '</' + stack.pop() + '>';\n    }\n\n    return result;\n\n}\n\nexport default htmlSubstring;"
  },
  {
    "path": "src/utils/injectEllipsis.js",
    "content": "const injectEllipsis = (html) => {\n    const re = /<\\/p>/g\n    const str = html;\n    let lastMatchIndex;\n    let match;\n    while ((match = re.exec(str)) != null) {\n        lastMatchIndex = match.index;\n    }\n\n    return html.substring(0, lastMatchIndex) + \"...\" + html.substring(lastMatchIndex)\n}\n\nexport default injectEllipsis;"
  }
]