diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..e53d802 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["next/babel", "@babel/preset-typescript"] +} diff --git a/frontend/.editorconfig b/.editorconfig similarity index 77% rename from frontend/.editorconfig rename to .editorconfig index f9366fa..c6c8b36 100644 --- a/frontend/.editorconfig +++ b/.editorconfig @@ -2,7 +2,8 @@ root = true [*] indent_style = space -indent_size = 4 +indent_size = 2 +end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true diff --git a/.env b/.env new file mode 100644 index 0000000..4f5e433 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +NEXT_PUBLIC_DEV_CHALLENGE_API_URL=http://localhost:3333 diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..f04b105 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,36 @@ +{ + "env": { + "browser": true, + "es2021": true, + "jest": true, + "node": true + }, + "settings": { + "react": { + "version": "detect" + } + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "plugin:prettier/recommended" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": ["react", "@typescript-eslint", "react-hooks"], + "rules": { + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", + "react/prop-types": "off", + "react/react-in-jsx-scope": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-non-null-assertion": "off" + } +} diff --git a/.github/ISSUE_TEMPLATE/novo-desafio.md b/.github/ISSUE_TEMPLATE/novo-desafio.md index 890a4c7..1d99b82 100644 --- a/.github/ISSUE_TEMPLATE/novo-desafio.md +++ b/.github/ISSUE_TEMPLATE/novo-desafio.md @@ -22,6 +22,6 @@ Ex: Seu desafio será criar uma landing page sobre um site de criação de gráf Ex: HTML, CSS 5 - Informe o link do desafio no github: -O seu desafio deverá ser um template no github, contendo texto utilizado, imagens, fontes e cores. -Ex padrão: Amazing Graph. +O seu desafio deverá ser um template no github, contendo texto utilizado, imagens, fontes e cores. +Ex padrão: Amazing Graph. Caso você não possua, pode informar mais detalhes do desafio aqui que te auxilio ou crio o repositório pra você :) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..e982728 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,36 @@ +name: ci +on: [pull_request] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout Repository + uses: actions/checkout@v2 + + - name: Setup Node + uses: actions/setup-node@v1 + with: + node-version: 14.x + + - uses: actions/cache@v2 + id: yarn-cache + with: + path: | + ~/cache + !~/cache/exclude + **/node_modules + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + - name: Install dependencies + run: yarn install + + - name: Linting + run: yarn lint + + - name: Typecheck + run: yarn typecheck + + - name: Test + run: yarn test diff --git a/frontend/.gitignore b/.gitignore similarity index 67% rename from frontend/.gitignore rename to .gitignore index e40d1f1..3ddeb42 100644 --- a/frontend/.gitignore +++ b/.gitignore @@ -8,16 +8,34 @@ # testing /coverage +# next.js +/.next/ +/out/ + # production /build # misc .DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files .env.local .env.development.local .env.test.local .env.production.local -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.vscode + +# vercel +.vercel + +# sw stuff +public/sw.js +public/workbox-*.js + +# storybook +storybook-static diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..86b0c4a --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,5 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx --no-install lint-staged +yarn lint-staged diff --git a/.jest/fixtures/challenge.json b/.jest/fixtures/challenge.json new file mode 100644 index 0000000..d4cfe32 --- /dev/null +++ b/.jest/fixtures/challenge.json @@ -0,0 +1,29 @@ +{ + "background": "https://i.imgur.com/7FhmLIn.png", + "brief": "criar um aplicativo listando os personagens da Marvel, com suas informações, habilidades e filmes! O modelo final está disponível na pasta 'design'", + "createdAt": "2020-06-05T21:57:46.607Z", + "description": "Escolha seu personagem preferido da Marvel!", + "dev_id": { + "avatar": "https://bit.ly/dan-abramov", + "bio": "Loading...", + "createdAt": "2020-06-05T21:52:04.232Z", + "linkedin": "in/DanAbrahmov", + "name": "Dan Abrahmov", + "position": "Facebook developer", + "updatedAt": "2020-06-05T21:52:04.232Z", + "__v": 0, + "_id": "1" + }, + "github_url": "https://github.com/Lorenalgm/marvel-heroes", + "images": [ + "https://i.imgur.com/IroCUou.png", + "https://i.imgur.com/efLHRzt.png" + ], + "level": "advanced", + "name": "Marvel Heroes", + "techs": ["Free choice"], + "type": "Mobile", + "updatedAt": "2020-06-05T21:57:46.607Z", + "__v": 0, + "_id": "1" +} diff --git a/.jest/fixtures/challenges.json b/.jest/fixtures/challenges.json new file mode 100644 index 0000000..1b93545 --- /dev/null +++ b/.jest/fixtures/challenges.json @@ -0,0 +1,40 @@ +[ + { + "background": "https://i.imgur.com/7FhmLIn.png", + "brief": "criar um aplicativo listando os personagens da Marvel, com suas informações, habilidades e filmes! O modelo final está disponível na pasta 'design'", + "createdAt": "2020-06-05T21:57:46.607Z", + "description": "Escolha seu personagem preferido da Marvel!", + "dev_id": "1", + "github_url": "https://github.com/Lorenalgm/marvel-heroes", + "images": [ + "https://i.imgur.com/IroCUou.png", + "https://i.imgur.com/efLHRzt.png" + ], + "level": "advanced", + "name": "Marvel Heroes", + "techs": ["Free choice"], + "type": "Mobile", + "updatedAt": "2020-06-05T21:57:46.607Z", + "__v": 0, + "_id": "1" + }, + { + "background": "https://i.imgur.com/7FhmLIn.png", + "brief": "criar um aplicativo listando os personagens da Marvel, com suas informações, habilidades e filmes! O modelo final está disponível na pasta 'design'", + "createdAt": "2020-06-05T21:57:46.607Z", + "description": "Escolha seu personagem preferido da Marvel!", + "dev_id": "1", + "github_url": "https://github.com/Lorenalgm/marvel-heroes", + "images": [ + "https://i.imgur.com/IroCUou.png", + "https://i.imgur.com/efLHRzt.png" + ], + "level": "advanced", + "name": "Marvel Heroes", + "techs": ["Free choice"], + "type": "Mobile", + "updatedAt": "2020-06-05T21:57:46.607Z", + "__v": 0, + "_id": "2" + } +] diff --git a/.jest/fixtures/contributors.json b/.jest/fixtures/contributors.json new file mode 100644 index 0000000..22f86f6 --- /dev/null +++ b/.jest/fixtures/contributors.json @@ -0,0 +1,26 @@ +[ + { + "avatar": "https://bit.ly/dan-abramov", + "bio": "Loading...", + "createdAt": "2020-05-18T23:46:19.420Z", + "github": "DanAbrahmov", + "linkedin": "in/DanAbrahmov", + "name": "Dan Abrahmov", + "position": "Facebook developer", + "updatedAt": "2020-05-18T23:46:19.420Z", + "__v": 0, + "_id": "1" + }, + { + "avatar": "https://bit.ly/dan-abramov", + "bio": "Loading...", + "createdAt": "2020-05-18T23:46:19.420Z", + "github": "DanAbrahmov", + "linkedin": "in/DanAbrahmov", + "name": "Dan Abrahmov", + "position": "Facebook developer", + "updatedAt": "2020-05-18T23:46:19.420Z", + "__v": 0, + "_id": "2" + } +] diff --git a/.jest/mock-css.ts b/.jest/mock-css.ts new file mode 100644 index 0000000..8764ae3 --- /dev/null +++ b/.jest/mock-css.ts @@ -0,0 +1 @@ +// file needed to fix broken tests when importing css files diff --git a/.jest/mock-env-variables.ts b/.jest/mock-env-variables.ts new file mode 100644 index 0000000..52ec134 --- /dev/null +++ b/.jest/mock-env-variables.ts @@ -0,0 +1 @@ +process.env.NEXT_PUBLIC_DEV_CHALLENGE_API_URL = 'http://localhost:3333' diff --git a/.jest/mock-server.ts b/.jest/mock-server.ts new file mode 100644 index 0000000..db2cb8f --- /dev/null +++ b/.jest/mock-server.ts @@ -0,0 +1,44 @@ +import { rest } from 'msw' +import { setupServer } from 'msw/node' + +const devChallengeApiUrl = process.env.NEXT_PUBLIC_DEV_CHALLENGE_API_URL + +import challengesMocked from './fixtures/challenges.json' +import challengeMocked from './fixtures/challenge.json' +import contributorsMocked from './fixtures/contributors.json' + +const server = setupServer( + // challenges + rest.get(`${devChallengeApiUrl}/challenges`, (_req, res, ctx) => { + return res(ctx.status(200), ctx.json(challengesMocked)) + }), + rest.get(`${devChallengeApiUrl}/challenges/:id`, (_req, res, ctx) => { + return res(ctx.status(200), ctx.json(challengeMocked)) + }), + + // contributors + rest.get(`${devChallengeApiUrl}/devs`, (_req, res, ctx) => { + return res(ctx.status(200), ctx.json(contributorsMocked)) + }), + + // newsletter + rest.post(`${devChallengeApiUrl}/newsletter`, (_req, res, ctx) => { + return res(ctx.status(200)) + }), + + rest.get('*', (req, res, ctx) => { + console.error(`Please add request handler for ${req.url.toString()}`) + return res( + ctx.status(500), + ctx.json({ error: 'You must add request handler.' }) + ) + }) +) + +beforeAll(() => server.listen()) +afterAll(() => server.close()) +afterEach(() => server.resetHandlers()) + +const urls = { devChallengeApiUrl } + +export { server, rest, urls } diff --git a/.jest/mock-use-router.ts b/.jest/mock-use-router.ts new file mode 100644 index 0000000..b65f973 --- /dev/null +++ b/.jest/mock-use-router.ts @@ -0,0 +1,16 @@ +// eslint-disable-next-line @typescript-eslint/no-var-requires +const useRouter = jest.spyOn(require('next/router'), 'useRouter') + +useRouter.mockImplementation(() => ({ + push: jest.fn(() => Promise.resolve(true)), + prefetch: jest.fn(() => Promise.resolve(true)), + replace: jest.fn(() => Promise.resolve(true)), + query: {}, + asPath: '', + route: '/', + events: { + emit: jest.fn(), + on: jest.fn(), + off: jest.fn() + } +})) diff --git a/.jest/next-image.mock.js b/.jest/next-image.mock.js new file mode 100644 index 0000000..8e6edfe --- /dev/null +++ b/.jest/next-image.mock.js @@ -0,0 +1,10 @@ +/* eslint-disable */ +import * as nextImage from 'next/image' + +Object.defineProperty(nextImage, 'default', { + configurable: true, + value: (props) => { + const { objectFit, placeholder, blurDataURL, ...rest} = props + return + } +}) diff --git a/.jest/setup.ts b/.jest/setup.ts new file mode 100644 index 0000000..5954a50 --- /dev/null +++ b/.jest/setup.ts @@ -0,0 +1,7 @@ +import 'next-image.mock' +import '@testing-library/jest-dom' +import 'jest-canvas-mock' + +import './mock-env-variables' + +import './mock-server' diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0e5c1db --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "trailingComma": "none", + "semi": false, + "singleQuote": true +} diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..578c314 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,26 @@ +const path = require("path") + +const toPath = (_path) => path.join(process.cwd(), _path) + +module.exports = { + stories: ['../src/components/**/stories.tsx'], + addons: ['@storybook/addon-essentials'], + typescript: { + reactDocgen: false, + }, + webpackFinal: async (config) => { + return { + ...config, + resolve: { + ...config.resolve, + alias: { + ...config.resolve.alias, + "@emotion/core": toPath("node_modules/@emotion/react"), + "emotion-theming": toPath("node_modules/@emotion/react"), + "components": toPath("src/components"), + "services": toPath("src/services"), + }, + }, + } + }, +}; diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..63fa385 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,26 @@ +import '../.jest/next-image.mock' +import { ChakraProvider } from '@chakra-ui/react' + +import theme from '../src/theme' +import './styles.css' + +export const parameters = { + backgrounds: { + default: 'dark', + layout: 'fullscreen', + values: [ + { + name: 'dark', + value: theme.colors.backgroundColor + } + ] + } +} + +export const decorators = [ + (Story) => ( + + + + ) +] diff --git a/.storybook/styles.css b/.storybook/styles.css new file mode 100644 index 0000000..dff3bcb --- /dev/null +++ b/.storybook/styles.css @@ -0,0 +1,3 @@ +.sb-show-main.sb-main-padded { + padding: 0; +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..ae563b1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "editor.formatOnSave": false, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true, + } +} diff --git a/frontend/.env b/frontend/.env deleted file mode 100644 index 506dc23..0000000 --- a/frontend/.env +++ /dev/null @@ -1 +0,0 @@ -REACT_APP_API_URL=http://localhost:3333 \ No newline at end of file diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js deleted file mode 100644 index 91bba3f..0000000 --- a/frontend/.eslintrc.js +++ /dev/null @@ -1,38 +0,0 @@ -module.exports = { - env: { - es6: true, - }, - extends: ['airbnb', 'prettier', 'prettier/react'], - globals: { - Atomics: 'readonly', - SharedArrayBuffer: 'readonly', - __DEV__: 'readonly', - }, - parser: 'babel-eslint', - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - ecmaVersion: 2018, - sourceType: 'module', - }, - plugins: ['react', 'prettier'], - rules: { - 'prettier/prettier': 'error', - 'react/jsx-filename-extension': [ - 'warn', - { - extensions: ['.jsx', '.js'], - }, - ], - 'import/prefer-default-export': 'off', - 'react/state-in-constructor': 'off', - 'react/static-property-placement': 'off', - 'react/jsx-props-no-spreading': 'off', - 'react/prop-types': 'off', - 'no-param-reassign': 'off', - 'no-console': 'off', - 'no-undef': 'off', - 'no-alert': 'off', - }, -}; diff --git a/frontend/.prettierrc b/frontend/.prettierrc deleted file mode 100644 index c1a6f66..0000000 --- a/frontend/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "singleQuote": true, - "trailingComma": "es5" -} diff --git a/frontend/Teste.log b/frontend/Teste.log deleted file mode 100644 index a87a691..0000000 --- a/frontend/Teste.log +++ /dev/null @@ -1 +0,0 @@ -Testando PR na branch \ No newline at end of file diff --git a/frontend/debug.log b/frontend/debug.log deleted file mode 100644 index b8febe5..0000000 --- a/frontend/debug.log +++ /dev/null @@ -1,32 +0,0 @@ -[0729/221145.237:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/221145.282:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/221145.283:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/221145.283:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/223542.097:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/223542.098:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/223542.098:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/223542.098:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/235052.267:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/235052.268:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/235052.304:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0729/235052.304:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0730/213507.902:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0730/213507.904:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0730/213507.904:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0730/213507.904:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0731/195201.876:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0731/195201.899:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0731/195201.899:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0731/195201.899:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0801/210611.449:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0801/210611.500:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0801/210611.500:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0801/210611.500:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0813/135559.995:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0813/135600.175:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0813/135600.175:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0813/135600.176:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0813/172932.159:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0813/172932.219:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0813/172932.219:ERROR:crash_report_database_win.cc(469)] failed to stat report -[0813/172932.219:ERROR:crash_report_database_win.cc(469)] failed to stat report diff --git a/frontend/package.json b/frontend/package.json deleted file mode 100644 index 416744d..0000000 --- a/frontend/package.json +++ /dev/null @@ -1,61 +0,0 @@ -{ - "name": "frontend", - "version": "0.1.0", - "private": true, - "dependencies": { - "@fortawesome/fontawesome-svg-core": "^1.2.28", - "@fortawesome/free-brands-svg-icons": "^5.13.0", - "@fortawesome/free-solid-svg-icons": "^5.13.0", - "@fortawesome/react-fontawesome": "^0.1.9", - "@lottiefiles/react-lottie-player": "^1.0.2", - "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^9.3.2", - "@testing-library/user-event": "^7.1.2", - "axios": "^0.19.2", - "dotenv": "^8.2.0", - "react": "^16.13.1", - "react-awesome-slider": "^4.1.0", - "react-dom": "^16.13.1", - "react-icons": "^3.11.0", - "react-loading-skeleton": "^2.0.1", - "react-router-dom": "^5.2.0", - "react-scripts": "3.4.1", - "react-toastify": "^6.0.5", - "react-web-vector-icons": "^1.0.2", - "styled-components": "^5.1.1", - "styled-media-query": "^2.1.2" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": "react-app" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "babel-eslint": "^10.1.0", - "eslint": "^6.8.0", - "eslint-config-airbnb": "^18.1.0", - "eslint-config-prettier": "^6.11.0", - "eslint-plugin-import": "^2.20.2", - "eslint-plugin-jsx-a11y": "^6.2.3", - "eslint-plugin-prettier": "^3.1.3", - "eslint-plugin-react": "^7.20.0", - "eslint-plugin-react-hooks": "^2.5.1", - "prettier": "^2.0.5" - } -} diff --git a/frontend/public/fonts/FontAwesome.ttf b/frontend/public/fonts/FontAwesome.ttf deleted file mode 100755 index 35acda2..0000000 Binary files a/frontend/public/fonts/FontAwesome.ttf and /dev/null differ diff --git a/frontend/public/index.html b/frontend/public/index.html deleted file mode 100644 index 38e2381..0000000 --- a/frontend/public/index.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - DevChallenge - - - - - -
- - diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json deleted file mode 100644 index 8860d6a..0000000 --- a/frontend/public/manifest.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "short_name": "DevChallenge", - "name": "DevChallenge", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo.png", - "type": "image/png", - "sizes": "512x512" - } - ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/frontend/src/App.js b/frontend/src/App.js deleted file mode 100644 index c368411..0000000 --- a/frontend/src/App.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import Routes from './routes'; - -function App() { - return ; -} - -export default App; diff --git a/frontend/src/App.test.js b/frontend/src/App.test.js deleted file mode 100644 index 657a2f5..0000000 --- a/frontend/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - const { getByText } = render(); - const linkElement = getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/frontend/src/assets/chevron-down.svg b/frontend/src/assets/chevron-down.svg deleted file mode 100644 index 76d8a1e..0000000 --- a/frontend/src/assets/chevron-down.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/frontend/src/assets/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/frontend/src/assets/page-under-construction.png b/frontend/src/assets/page-under-construction.png deleted file mode 100644 index c39043d..0000000 Binary files a/frontend/src/assets/page-under-construction.png and /dev/null differ diff --git a/frontend/src/components/Banner/index.js b/frontend/src/components/Banner/index.js deleted file mode 100644 index e5d7556..0000000 --- a/frontend/src/components/Banner/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -import * as S from './styled'; - -export default function Banner() { - return ( - - - Melhore suas habilidades - - - Com desafios de front-end, back-end e mobile - - - Bora codar! - - - ); -} diff --git a/frontend/src/components/Banner/styled.js b/frontend/src/components/Banner/styled.js deleted file mode 100644 index c7ad2e5..0000000 --- a/frontend/src/components/Banner/styled.js +++ /dev/null @@ -1,84 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -export const BannerContainer = styled.div` - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: center; - align-items: center; - margin-top: 160px; - margin-bottom: 160px; - ${media.lessThan('medium')` - margin-top: 14%; - margin-bottom: 14%; - margin-left: 3%; - margin-right: 3%; - `} -`; - -export const BannerTitle = styled.h1` - color: var(--white); - font-size: 60px; -`; - -export const BannerSubtitle = styled.h2` - color: var(--yellow); - font-size: 20px; - margin-top: 10px; - margin-bottom: 20px; - - ${media.lessThan('medium')` - font-size: 1em; - `} -`; - -export const BannerButton = styled.button` - color: var(--white); - background-color: var(--purple); - width: 250px; - height: 60px; - font-weight: bold; - font-size: 20px; - border-radius: 50px; - cursor: pointer; - transition: 0.3s; - - &:hover { - background-color: var(--dark-purple); - } -`; - -export const Typewriter = styled.div` - h1 { - color: var(--white); - overflow: hidden; - border-right: 0.15em solid var(--purple); - white-space: nowrap; - letter-spacing: 0.02em; - animation: typing 3.5s steps(30, end), - blink-caret 0.5s step-end infinite; - - ${media.lessThan('medium')` - font-size: 1.8em; - `} - } - @keyframes typing { - from { - width: 0; - } - to { - width: 100%; - } - } - - @keyframes blink-caret { - from, - to { - border-color: transparent; - } - 50% { - border-color: var(--purple); - } - } -`; diff --git a/frontend/src/components/CategoriesList/index.js b/frontend/src/components/CategoriesList/index.js deleted file mode 100644 index 03c489d..0000000 --- a/frontend/src/components/CategoriesList/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import CategoryListItem from '../CategoryListItem'; - -import * as S from './styled'; - -const categories = [ - { _id: 1, name: 'Front-end', icon: 'desktop' }, - { _id: 2, name: 'Back-end', icon: 'code' }, - { _id: 3, name: 'Mobile', icon: 'mobile' }, -]; - -export default function CategoriesList() { - return ( - - {categories.map((category) => ( - - ))} - - ); -} diff --git a/frontend/src/components/CategoriesList/styled.js b/frontend/src/components/CategoriesList/styled.js deleted file mode 100644 index 4a4dcdb..0000000 --- a/frontend/src/components/CategoriesList/styled.js +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; - -export const Techs = styled.section` - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: center; -`; diff --git a/frontend/src/components/CategoryListItem/index.js b/frontend/src/components/CategoryListItem/index.js deleted file mode 100644 index 365c5c3..0000000 --- a/frontend/src/components/CategoryListItem/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import Icon from 'react-web-vector-icons'; -import * as S from './styled'; - -export default function CategoryListItem({ category }) { - const type = category.name.replace('-', '').toLowerCase(); - return ( - - - - {category.name} - - - ); -} diff --git a/frontend/src/components/CategoryListItem/styled.js b/frontend/src/components/CategoryListItem/styled.js deleted file mode 100644 index b88bc99..0000000 --- a/frontend/src/components/CategoryListItem/styled.js +++ /dev/null @@ -1,42 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -import { Link } from 'react-router-dom'; - -export const Anchor = styled(Link)` - text-decoration: none; - margin: 0 25px 0 25px; - - ${media.lessThan('medium')` - margin: 15px 0px 10px 0px; - `} -`; - -export const Card = styled.div` - width: 300px; - height: 300px; - background-color: var(--secondary); - border-radius: 20px; - - cursor: pointer; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - transition: 0.25s; - - &:hover { - background-color: var(--dark-hover); - } -`; - -export const Title = styled.h2` - color: var(--white); - margin-top: 20px; - - ${media.lessThan('medium')` - margin-top: 0.6em; - `} -`; - - diff --git a/frontend/src/components/ChallengeCard/index.js b/frontend/src/components/ChallengeCard/index.js deleted file mode 100644 index cb7f8f7..0000000 --- a/frontend/src/components/ChallengeCard/index.js +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import * as S from './styled'; - -const colorMatch = { - beginner: 'nephritis', - intermediate: 'pumpkin', - advanced: 'pomegranate', - Mobile: 'blue', - Frontend: 'red', - Backend: 'light-purple', -}; - -function ChallengeCard({ challenge, progress, redirect, buttonText }) { - const [techs, setTechs] = useState([]); - - useEffect(() => { - const techsUnOrder = challenge.techs - .toString() - .split(',') - .map((element) => element.replace(/^[ ]/, '')); - - techsUnOrder.forEach((techItem, i) => { - techsUnOrder.forEach((element, j) => { - if (j > i && element.length > techItem.length) { - const aux = techItem; - techsUnOrder[i] = element; - techsUnOrder[j] = aux; - } - }); - }); - - setTechs(techsUnOrder); - }, [challenge.techs]); - - return ( - - - - - {techs.map((item) => ( -

- {item} -

- ))} - - - - {challenge.type} - - - {challenge.level} - - - - - {progress && } - - - -

{challenge.name}

- -

{challenge.description}

{' '} - - - {buttonText} - - - ); -} - -export default ChallengeCard; diff --git a/frontend/src/components/ChallengeCard/styled.js b/frontend/src/components/ChallengeCard/styled.js deleted file mode 100644 index bc87fea..0000000 --- a/frontend/src/components/ChallengeCard/styled.js +++ /dev/null @@ -1,151 +0,0 @@ -import styled from 'styled-components'; -import { Link } from 'react-router-dom'; - -export const Anchor = styled(Link)` - text-decoration: none; - cursor: pointer; - - color: var(--white-gray); -`; - -export const Level = styled.span` - background-color: var(--${(props) => props.color}); - padding: 6px 16px; - font-size: 11px; - height: 23px; - border-radius: 20px; - font-weight: bold; - margin-bottom: 5px; -`; - -export const ChallengeCard = styled.div` - height: 350px; - width: 300px; - - background-color: var(--secondary); - border-radius: 16px; - - margin: 1em 1em 1em 1em; - - display: flex; - flex-direction: column; - align-items: center; - - position: relative; - overflow: hidden; -`; - -export const CardImage = styled.div` - overflow: hidden; - height: 150px; - width: 300px; - background-color: #2b3035; - - img { - transition: 0.3s; - width: 100%; - } - img:hover { - transform: scale(1.1); - } -`; - -export const CardContent = styled.div` - margin-top: 10px; - color: var(--white-gray); - text-align: center; - width: 100%; - padding: 0 16px; - - h1 { - font-size: 25px; - margin-top: 0px; - font-weight: 500; - } - - p { - margin-top: 10px; - } -`; - -export const CardTechs = styled.div` - position: absolute; - right: 0; - top: 16px; - padding: 0 16px; - height: auto; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-end; - z-index: 999; - .tech { - background-color: var(--quaternary); - padding: 5px 15px; - margin-bottom: 5px; - border-radius: 25px; - text-align: center; - font-weight: bold; - color: var(--white); - align-items: center; - font-size: 13px; - } - - .level { - color: var(--yellow); - font-weight: bold; - } -`; - -export const CardPlatforms = styled.div` - position: absolute; - left: 0; - top: 16px; - padding: 0 16px; - height: auto; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - z-index: 999; -`; - -export const Button = styled.button` - width: 80%; - height: 46px; - - position: absolute; - bottom: 16px; - left: 50%; - transform: translateX(-50%); - - background: var(--purple); - color: var(--white); - font-weight: bold; - font-size: 18px; - - border-radius: 50px; - - cursor: pointer; - - transition: 0.25s; - - &:hover { - width: 83%; - } -`; - -export const ProgressBar = styled.div` - width: 100%; - height: 8px; - background: var(--quinary); - - &::after { - position: absolute; - content: ' '; - width: ${(props) => `${props.progress}%`}; - height: 8px; - background: var(--green); - border-radius: 0 5px 5px 0; - } -`; diff --git a/frontend/src/components/ChallengesSkeleton/index.js b/frontend/src/components/ChallengesSkeleton/index.js deleted file mode 100644 index b109ccc..0000000 --- a/frontend/src/components/ChallengesSkeleton/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; -import * as S from './styled'; - -export default function ChallengesSkeleton({ cards = 4 }) { - const arr = Array.from({ length: cards }, (_, i) => i + 1); - - return ( - - - {arr.map((item) => ( - - - - ))} - - - ); -} diff --git a/frontend/src/components/ChallengesSkeleton/styled.js b/frontend/src/components/ChallengesSkeleton/styled.js deleted file mode 100644 index 7130117..0000000 --- a/frontend/src/components/ChallengesSkeleton/styled.js +++ /dev/null @@ -1,21 +0,0 @@ -import styled from 'styled-components'; - -export const Section = styled.section` - margin-top: 3%; - display: flex; - flex-wrap: wrap; - max-width: 100vw; - align-items: center; - justify-content: center; -`; - -export const ChallengeSkeleton = styled.div` - border-radius: 16px; - cursor: pointer; - - height: 350px; - width: 300px; - margin: 0 0.5em 1em 0.5em; - - overflow: hidden; -`; diff --git a/frontend/src/components/DashboardDefault/index.js b/frontend/src/components/DashboardDefault/index.js deleted file mode 100644 index 4cd2269..0000000 --- a/frontend/src/components/DashboardDefault/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import SidebarUser from '../SidebarUser'; -import Logo from '../Logo'; -import { DashboardWrapper, DashboardContent, DbHeader } from './styled'; - -function DashboardDefault(props) { - return ( - - - - - - - - {props.children} - - - ); -} - -export default DashboardDefault; diff --git a/frontend/src/components/DashboardDefault/styled.js b/frontend/src/components/DashboardDefault/styled.js deleted file mode 100644 index 60254d8..0000000 --- a/frontend/src/components/DashboardDefault/styled.js +++ /dev/null @@ -1,37 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -export const DashboardWrapper = styled.div` - display: flex; - min-height: calc(100vh - 100px); -`; - -export const DashboardContent = styled.div` - display: flex; - flex: 1; - flex-direction: column; - color: var(--light-gray); -`; - -export const DbHeader = styled.header` - display: flex; - align-items: center; - justify-content: flex-end; - padding: 0px 80px 0 80px; - margin-top: 40px; - - font-weight: normal; - - ${media.between('medium', 'large')` - padding: 0px 60px 0 60px; - `} - - ${media.lessThan('medium')` - display: flex; - align-items: flex-end; - flex-direction: column; - justify-content: center; - padding: 0 20px; - position: relative; - `} -`; diff --git a/frontend/src/components/DevCard/index.js b/frontend/src/components/DevCard/index.js deleted file mode 100644 index 5a5f11c..0000000 --- a/frontend/src/components/DevCard/index.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; - -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faGithubSquare, faLinkedin } from '@fortawesome/free-brands-svg-icons'; - -import * as S from './styled'; - -function DevCard(props) { - return ( - - {`Avatar: - -

{props.name}

- {props.position} - - - {props.github && ( - - - - )} - {props.linkedin && ( - - - - )} - - - ); -} - -export default DevCard; diff --git a/frontend/src/components/DevCard/styled.js b/frontend/src/components/DevCard/styled.js deleted file mode 100644 index 50e5d91..0000000 --- a/frontend/src/components/DevCard/styled.js +++ /dev/null @@ -1,79 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - - -export const Card = styled.div` - min-width: 300px; - height: 90px; - - box-sizing: border-box; - padding: 0px 10px; - - background: var(--secondary); - border-radius: 16px; - - display: flex; - align-items: center; - - position: relative; - - > img { - height: 70px; - width: 70px; - border-radius: 50%; - } - - ${media.lessThan('medium')` - margin-bottom: 5%; - `} -`; - - -export const Infos = styled.div` - max-width: 200px; - flex-wrap: wrap; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: left; - - margin: 0 16px; - - > h1 { - font-size: 18px; - font-weight: bold; - color: var(--white); - } - - > span { - font-size: 14px; - font-weight: 500; - color: var(--yellow); - } -`; - - -export const Social = styled.div` - display: flex; - flex-direction: column; - - position: absolute; - right: 16px; -`; - -export const Anchor = styled.a` - text-decoration: none; - color: var(--white); - font-size: 20px; - - display: flex; - align-items: center; - justify-content: center; - - transition: .25s; - - &:hover{ - color: var(--yellow); - } -`; \ No newline at end of file diff --git a/frontend/src/components/Footer/index.js b/frontend/src/components/Footer/index.js deleted file mode 100644 index c6fe560..0000000 --- a/frontend/src/components/Footer/index.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; - -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faGithub, faDiscord, faInstagram, faTwitter } from '@fortawesome/free-brands-svg-icons'; - -import * as S from './styled'; - -function Footer() { - return ( - - - - - - - - - - - - - - - - - DevChallenge - - - ); -} - -export default Footer; \ No newline at end of file diff --git a/frontend/src/components/Footer/styled.js b/frontend/src/components/Footer/styled.js deleted file mode 100644 index 45e85c1..0000000 --- a/frontend/src/components/Footer/styled.js +++ /dev/null @@ -1,54 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -export const Container = styled.footer` - width: 100%; - height: 100px; - - padding: 40px 100px; - - background-color: var(--tertiary); - - display: flex; - justify-content: space-between; - - ${media.lessThan('small')` - flex-direction: column-reverse; - align-items: center; - justify-content: center; - `} -`; - -export const Social = styled.div` - display: flex; - - > a ~ a { - margin-left: 20px; - } -`; - -export const Title = styled.div` - font-size: 24px; - font-weight: bold; - color: var(--white); - - span { - color: var(--yellow); - } - - ${media.lessThan('small')` - margin-bottom: 25px; - `} -`; - -export const Anchor = styled.a` - text-decoration: none; - font-size: 22px; - color: var(--quinary); - - transition: 0.25s; - - &:hover { - color: var(--yellow); - } -`; diff --git a/frontend/src/components/Header/index.js b/frontend/src/components/Header/index.js deleted file mode 100644 index f30c5ea..0000000 --- a/frontend/src/components/Header/index.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'; -import { faGithub } from '@fortawesome/free-brands-svg-icons'; -import * as S from './styled'; - -export default function Header() { - const location = useLocation(); - const [clicked, setClicked] = useState(false); - - useEffect(() => { - setClicked(false); - }, [location]); - - return ( - - - - DevChallenge - - - - setClicked(!clicked)}> - {!clicked ? ( - - ) : ( - - )} - - - -
    -
  • - - Início - -
    • -
  • - - Desafios - -
    • -
  • - - Comunidade - -
    • -
  • - - Entrar - - -
    • -
- - - ); -} diff --git a/frontend/src/components/Header/styled.js b/frontend/src/components/Header/styled.js deleted file mode 100644 index c015057..0000000 --- a/frontend/src/components/Header/styled.js +++ /dev/null @@ -1,128 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; -import { NavLink } from 'react-router-dom'; - -export const Header = styled.header` - display: flex; - align-items: center; - justify-content: space-between; - - padding: 0px 80px 0 80px; - margin-top: 40px; - - font-weight: normal; - - ${media.between('medium', 'large')` - padding: 0px 60px 0 60px; - `} - - ${media.lessThan('medium')` - display: flex; - align-items: flex-start; - flex-direction: column; - justify-content: center; - padding: 0; - position: relative; - `} -`; - -export const Title = styled.div` - font-size: 30px; - font-weight: bold; - color: var(--white); - - span { - color: var(--yellow); - } - - ${media.lessThan('medium')` - margin-left: 20px; - `} -`; - -export const MenuMobile = styled.div` - display: none; - - transition: 0.25s; - - ${media.lessThan('medium')` - display: block; - position: absolute; - font-size: 25px; - color: var(--white); - top: 2; - right: 0; - margin-right: 20px; - cursor: pointer; - - z-index: 9999; - `} -`; - -export const Menu = styled.div` - ul { - display: flex; - align-items: center; - - list-style-type: none; - - font-size: 20px; - color: var(--white); - font-weight: 400; - - li ~ li { - margin-left: 20px; - } - - li:hover { - opacity: 0.8; - } - - ${media.lessThan('medium')` - background-color: var(--primary); - flex-direction: column; - width: 100%; - position: absolute; - justify-content: space-around; - height: 300px; - align-items: center; - margin-top: 0.5em; - top: -100%; - transform: ${({ open }) => - open ? 'translateY(-100%)' : 'translateY(0)'}; - transition: transform 0.5s ease; - z-index: 1000; - li ~ li { - margin-left: 0; - } - `} - } -`; - -export const StyledLink = styled(NavLink)` - text-decoration: none; - color: var(--white); - - cursor: pointer; - - &.is-active { - color: var(--yellow); - } -`; - -export const ButtonLink = styled(NavLink)` - background-color: var(--quaternary); - - width: 100px; - padding: 5px 30px; - border-radius: 25px; - - text-align: center; - text-decoration: none; - color: var(--white); - - &.is-active { - background-color: var(--yellow); - color: var(--tertiary); - } -`; diff --git a/frontend/src/components/Logo/index.js b/frontend/src/components/Logo/index.js deleted file mode 100644 index b25aaf2..0000000 --- a/frontend/src/components/Logo/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import { StyledLink } from '../Header/styled'; -import { Title } from './styled'; - -function Logo() { - return ( - - <StyledLink to="/" exact> - Dev<span>Challenge</span> - </StyledLink> - - ); -} - -export default Logo; diff --git a/frontend/src/components/Logo/styled.js b/frontend/src/components/Logo/styled.js deleted file mode 100644 index 1bf2f98..0000000 --- a/frontend/src/components/Logo/styled.js +++ /dev/null @@ -1,10 +0,0 @@ -import styled from 'styled-components'; - -export const Title = styled.div` - font-size: 30px; - font-weight: bold; - color: var(--white); - span { - color: var(--yellow); - } -`; diff --git a/frontend/src/components/Newsletter/index.js b/frontend/src/components/Newsletter/index.js deleted file mode 100644 index 41c98f8..0000000 --- a/frontend/src/components/Newsletter/index.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useState } from 'react'; -import { Player } from '@lottiefiles/react-lottie-player'; -import api from '../../services/api'; -import ToastNotification from '../../utils/toast'; - -import * as S from './styled'; - -export default function Newsletter() { - const [email, setEmail] = useState(''); - - async function handleSubscribe(e) { - e.preventDefault(); - - const data = { - email, - }; - - try { - await api.post('newsletter', data); - ToastNotification.notify( - 'success', - 'Feito! Você será o primeiro a saber sobre novos desafios :)' - ); - } catch (err) { - ToastNotification.notify( - 'error', - 'Opa, algo deu errado! Pode tentar novamente? :c' - ); - } - } - - return ( - -
- -
-
- - Seja notificado sobre novos desafios! - - - Inscreva-se para ser o primeiro a saber sobre novos desafios - :) - - - setEmail(e.target.value)} - required - /> - - -
- - ); -} diff --git a/frontend/src/components/Newsletter/styled.js b/frontend/src/components/Newsletter/styled.js deleted file mode 100644 index 4408caf..0000000 --- a/frontend/src/components/Newsletter/styled.js +++ /dev/null @@ -1,96 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -export const NewsletterContainer = styled.section` - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - - ${media.lessThan('medium')` - flex-direction: column; - `} - - div { - display: flex; - flex-direction: column; - align-items: left; - margin-left: 2em; - - ${media.lessThan('medium')` - align-items: center; - justify-content: center; - text-align: center; - margin-left: 0; - `} - } -`; - -export const NewsletterTitle = styled.h1` - color: var(--white); - font-size: 2em; - margin-bottom: 0.1em; - - ${media.lessThan('medium')` - font-size: 1.3em; - margin-bottom: 0.1em; - `} -`; - -export const NewsletterParagraph = styled.p` - color: var(--yellow); - font-size: 1em; - - ${media.lessThan('medium')` - margin: 1em; - `} -`; - -export const NewsletterForm = styled.form` - display: flex; - flex-direction: column; - - ${media.lessThan('medium')` - display: flex; - align-content: center; - justify-content: center; - text-align: center; - margin-bottom: 3em; - `} - - input { - height: 3.5em; - width: 20em; - margin-top: 1em; - margin-bottom: 1em; - border-radius: 0.5em; - padding: 20px; - font-size: 18px; - - ${media.lessThan('medium')` - height: 3em; - width: 18em; - `} - } - - button { - color: var(--white); - background-color: var(--purple); - width: 350px; - height: 60px; - font-weight: bold; - font-size: 20px; - border-radius: 50px; - cursor: pointer; - transition: 0.3s; - - ${media.lessThan('medium')` - width: 16em; - height: 3em; - `} - - &:hover { - background-color: var(--dark-purple); - } - } -`; diff --git a/frontend/src/components/SidebarUser/index.js b/frontend/src/components/SidebarUser/index.js deleted file mode 100644 index eaccb69..0000000 --- a/frontend/src/components/SidebarUser/index.js +++ /dev/null @@ -1,97 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { useLocation } from 'react-router-dom'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'; - -import Icon from 'react-web-vector-icons'; -import { Aside, Img, UserInfo, StyledLink, Menu, MenuMobile } from './styles'; - -function SidebarUser() { - const location = useLocation(); - const [clicked, setClicked] = useState(false); - const [user, setUser] = useState({}); - - useEffect(() => { - setClicked(false); - setUser({ - name: 'Dev Challenge', - username: '@devChallenge', - img: '', - }); - }, [location]); - - return ( - <> - setClicked(!clicked)}> - {!clicked ? ( - - ) : ( - - )} - - - - ); -} - -export default SidebarUser; diff --git a/frontend/src/components/SidebarUser/styles.js b/frontend/src/components/SidebarUser/styles.js deleted file mode 100644 index 2bd921e..0000000 --- a/frontend/src/components/SidebarUser/styles.js +++ /dev/null @@ -1,107 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; -import { NavLink } from 'react-router-dom'; - -export const Aside = styled.aside` - display: flex; - align-items: center; - flex-direction: column; - text-align: center; - - width: 350px; - background: var(--secondary); - color: var(--white); - - ${media.between('medium', 'large')` - width: 278px; - `} - - ${media.lessThan('860px')` - position: absolute; - top: 0; - bottom: 0; - z-index: 9998; - - transform: ${({ open }) => - open ? 'translateX(0)' : 'translateX(-350px)'}; - transition: 0.5s ease; - `} -`; - -export const UserInfo = styled.div` - margin-top: 40px; - - & > p { - font-size: 16px; - font-family: Roboto; - } - - & > span { - font-family: Roboto; - font-size: 12px; - } -`; - -export const Img = styled.img` - height: 90px; - width: 90px; - border-radius: 50%; - margin-bottom: 10px; - border: 3px solid var(--yellow); -`; - -export const Menu = styled.div` - ul { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 350px; - margin-top: 60px; - list-style: none; - - ${media.between('medium', 'large')` - width: 278px; - `} - - li { - width: 200px; - height: 45px; - display: flex; - align-items: center; - font-size: 18px; - } - - li:hover { - opacity: 0.8; - } - } -`; - -export const StyledLink = styled(NavLink)` - text-decoration: none; - color: var(--white); - - &.is-active { - color: var(--yellow); - } -`; - -export const MenuMobile = styled.div` - display: none; - - transition: 0.25s; - - ${media.lessThan('860px')` - display: block; - position: absolute; - font-size: 25px; - color: var(--white); - top: 50px; - left: 20px; - margin-right: 20px; - cursor: pointer; - - z-index: 9999; - `} -`; diff --git a/frontend/src/components/StatusCard/index.js b/frontend/src/components/StatusCard/index.js deleted file mode 100644 index 6d67b68..0000000 --- a/frontend/src/components/StatusCard/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import { CardWrapper } from './styled'; - -function StatusCard(props) { - return ( - -

{props.title}

-

{props.count}

- - ); -} - -export default StatusCard; diff --git a/frontend/src/components/StatusCard/styled.js b/frontend/src/components/StatusCard/styled.js deleted file mode 100644 index 099996b..0000000 --- a/frontend/src/components/StatusCard/styled.js +++ /dev/null @@ -1,26 +0,0 @@ -import styled from 'styled-components'; - -export const CardWrapper = styled.div` - display: flex; - width: 48%; - max-width: 350px; - height: 110px; - background: var(--secondary); - border-radius: 11px; - border: 2px solid; - padding: 25px; - align-items: center; - justify-content: space-between; - color: var(--white); - - & > p { - width: 150px; - font-weight: 400; - font-size: 20px; - padding: 10px; - } - - & > h1 { - font-size: 50px; - } -`; diff --git a/frontend/src/components/Steps/index.js b/frontend/src/components/Steps/index.js deleted file mode 100644 index 67c0d12..0000000 --- a/frontend/src/components/Steps/index.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { - faSearch, - faCode, - faShareSquare, -} from '@fortawesome/free-solid-svg-icons'; - -import * as S from './styled'; - -export default function Steps() { - return ( - - - -

Escolha

- - - -

Desenvolva

- - - -

Compartilhe

- - - ); -} diff --git a/frontend/src/components/Steps/styled.js b/frontend/src/components/Steps/styled.js deleted file mode 100644 index 2629662..0000000 --- a/frontend/src/components/Steps/styled.js +++ /dev/null @@ -1,46 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - -export const StepsContainer = styled.section` - margin-top: 100px; - - display: flex; - align-items: center; - justify-content: center; - - ${media.lessThan('medium')` - padding: 0; - `} -`; - -export const Step = styled.div` - width: 300px; - height:300px; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - h2 { - color: var(--yellow); - margin-top: 20px; - - ${media.lessThan('medium')` - font-size: 1em; - `} - } -`; - -export const Icon = styled(FontAwesomeIcon)` - color: var(--white); - width: 60px !important; - height: 60px; - - ${media.lessThan('medium')` - height: 3em; - width: 3em; - `} -`; diff --git a/frontend/src/index.js b/frontend/src/index.js deleted file mode 100644 index da830b4..0000000 --- a/frontend/src/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; -import { GlobalStyles } from './styles/GlobalStyles'; - -ReactDOM.render( - - - - , - document.getElementById('root') -); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); diff --git a/frontend/src/pages/Challenges/README.fr.md b/frontend/src/pages/Challenges/README.fr.md deleted file mode 100644 index 9ba0aff..0000000 --- a/frontend/src/pages/Challenges/README.fr.md +++ /dev/null @@ -1,110 +0,0 @@ -[![Forks][forks-shield]][forks-url] -[![Stargazers][stars-shield]][stars-url] -[![Issues][issues-shield]][issues-url] - -
-

- - Logo - - -

DevChallenge

- -

- Site permettant aux développeurs d'améliorer leurs compétences grâce à des défis Front-end, Back-end et Mobile!

-
-
- DevChallenge -

- -## Sommaire - -- [Sommaire](#sommaire) -- [A propos du projet](#a-propos-du-projet) - - [Demo:](#demo) - - [Technologies:](#technologies) -- [Utilisation](#utilisation) -- [Contribution](#contribution) - - [Prérequis](#prérequis) - - [Installation](#installation) -- [Communauté](#communauté) - -## A propos du projet -Le DevChallenge est un projet contribuant à l'évolution des développeurs, en leur fournissant des défis afin qu'ils puissent s'entraîner, améliorer leurs compétences et créer leur portfolio :) - -### Demo: -

-DevChallenge -

- -### Technologies: -- Backend: Nodejs -- Frontend: Reactjs -- Banque de données: MongoDB - -## Utilisation -1 - Utilisez un des modèles DevChallenge comme base.
-2 - Lisez les instructions du readme.md.
-3 - Codez.
-4 - Partagez le résultat avec la communauté :) - -## Contribution -Participez au projet:
-- Suggérez et / ou créez de nouveaux défis: ces défis seront alors disponibles et pourront aider tous les développeurs à s'entraîner. -- Améliorez ou corrigez le site: vous pouvez envoyer une *Pull Request* afin que votre modification soit disponible à tous les développeurs! - -### Prérequis -1. Nodejs - -### Installation - -Front-end - -1. Téléchargez ou clonez le répertoire DevChallenge -```sh -git clone git@github.com:Lorenalgm/DevChallenge.git -``` -2. Ouvrez le projet avec votre éditeur. -3. A partir du terminal, installez les dépendances (packages) nécessaires: -```sh -yarn -``` -ou -```sh -npm install -``` -4. Parfait! Vous pouvez maintenant vous rendre dans le dossier `frontend` e inicier votre serveur: -```sh -cd frontend -``` -```sh -yarn start -``` -1. Ouvrez votre navigateur! Le DevChallenge sera disponible à `http://localhost:3000/` :) - - -Back-end - -Le Backend est disponible dans le répertoire: DevChallengeAPI - - -## Communauté -Notre objectif est d'aider au maximum les développeurs dans leur évolution! Nous avons donc une communauté DevChallenge exclusive sur Discord. On se retrouve là-bas? https://discord.gg/yvYXhGj
-
-Site: https://www.devchallenge.com.br/
- - - - - - -
- Discord LinkedinTwitter - Instagram
- -[forks-shield]: https://img.shields.io/github/forks/Lorenalgm/DevChallenge.svg?style=flat-square -[forks-url]: https://github.com/Lorenalgm/DevChallenge/network/members -[stars-shield]: https://img.shields.io/github/stars/Lorenalgm/DevChallenge.svg?style=flat-square -[stars-url]: https://github.com/Lorenalgm/DevChallenge/stargazers -[issues-shield]: https://img.shields.io/github/issues/Lorenalgm/DevChallenge.svg?style=flat-square -[issues-url]: https://github.com/Lorenalgm/DevChallenge/issues diff --git a/frontend/src/pages/Challenges/index.js b/frontend/src/pages/Challenges/index.js deleted file mode 100644 index 5d445f3..0000000 --- a/frontend/src/pages/Challenges/index.js +++ /dev/null @@ -1,114 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import api from '../../services/api'; -import ChallengesSkeleton from '../../components/ChallengesSkeleton'; -import ChallengeCard from '../../components/ChallengeCard'; -import Header from '../../components/Header'; -import * as S from './styled'; - -const languages = [ - { id: 1, name: 'React Native' }, - { id: 2, name: 'Free Choice' }, - { id: 3, name: 'Javascript' }, - { id: 4, name: 'HTML' }, - { id: 5, name: 'CSS' }, -]; - -const types = [ - { id: 1, name: 'Frontend' }, - { id: 2, name: 'Backend' }, - { id: 3, name: 'Mobile' }, -]; - -export default function Challenges({ location }) { - const [challenges, setChallenges] = useState([]); - const [loading, setLoading] = useState(true); - const [languageFilter, setLanguageFilter] = useState(''); - const [typeFilter, setTypeFilter] = useState(location.search.split('=')[1]); - - function capitalize(s) { - return s && s[0].toUpperCase() + s.slice(1); - } - - useEffect(() => { - window.scrollTo(0, 0); - async function loadChallenges() { - let response = []; - if (typeFilter) { - const type = capitalize(typeFilter); - response = await api.get(`/challenges/?type=${type}`); - } else { - response = await api.get('/challenges'); - } - setChallenges(response.data); - - setLoading(false); - } - - loadChallenges(); - }, [location, typeFilter, languageFilter]); - - return ( - <> -
- -

Desafios

- - - - - - - - - - - - - - - - - {loading && } - {!loading && ( - - {challenges.map((challenge) => { - return ( - - ); - })} - - )} - - ); -} diff --git a/frontend/src/pages/Challenges/styled.js b/frontend/src/pages/Challenges/styled.js deleted file mode 100644 index ece3cbe..0000000 --- a/frontend/src/pages/Challenges/styled.js +++ /dev/null @@ -1,84 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; -import chevronDown from '../../assets/chevron-down.svg'; - -export const Alert = styled.form` - color: white; - text-align: center; - margin-top: 3em; -`; - -export const Section = styled.section` - margin-top: 3%; - display: flex; - flex-wrap: wrap; - max-width: 100vw; - align-items: center; - justify-content: center; -`; - -export const Head = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid var(--quaternary); - margin-top: 60px; - padding: 0 80px; - font-size: 18px; - - h1 { - color: whitesmoke; - ${media.lessThan('medium')` - font-size: 30px; - `} - } - - ${media.lessThan('medium')` - padding: 0 20px; - `} -`; - -export const Filters = styled.form` - color: white; - display: flex; -`; - -export const InputGroup = styled.div` - margin: 0 0 0 14px; - - label { - padding-left: 4px; - font-size: 14px; - font-weight: bold; - display: block; - } -`; - -export const Select = styled.div` - padding-right: 20px; - height: 34px; - overflow: hidden; - background: url(${chevronDown}) no-repeat right var(--primary); - - select { - width: 120%; - padding-right: 20px; - background: transparent; - padding: 5px; - font-size: 16px; - line-height: 1; - border: 0; - border-radius: 0; - height: 34px; - -webkit-appearance: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - color: white; - } - - option { - background-color: var(--primary); - border: 0; - } -`; diff --git a/frontend/src/pages/ConstructPage/index.js b/frontend/src/pages/ConstructPage/index.js deleted file mode 100644 index 29e12b0..0000000 --- a/frontend/src/pages/ConstructPage/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; - -import pageInConstruction from '../../assets/page-under-construction.png'; -import Header from '../../components/Header'; - -function ConstructPage() { - return ( - <> -
-
- -

Pagina em Construção

-
- - ); -} - -export default ConstructPage; diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js deleted file mode 100644 index 0c1b0f6..0000000 --- a/frontend/src/pages/Dashboard/index.js +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import DashboardDefault from '../../components/DashboardDefault'; -import StatusCard from '../../components/StatusCard'; -import { StatusCardWrapper, Title, Container } from './styled'; -import { ChallengeCard } from '../../components/ChallengeCard/styled'; - -const fakeData = { - complete: 5, - inProgress: 2, -}; - -function Dashboard() { - const [statusCount, setStatusCount] = useState({}); - - useEffect(() => { - setStatusCount(fakeData); - }, []); - - return ( - - - - - - - #WeeklyDevChallenge - - - - ); -} - -export default Dashboard; diff --git a/frontend/src/pages/Dashboard/styled.js b/frontend/src/pages/Dashboard/styled.js deleted file mode 100644 index 555446b..0000000 --- a/frontend/src/pages/Dashboard/styled.js +++ /dev/null @@ -1,29 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -export const Container = styled.div` - padding: 0px 80px 0 80px; - - ${media.between('medium', 'large')` - padding: 0px 60px 0 60px; - `} - - ${media.lessThan('medium')` - padding: 0px 20px 0 20px; - `} -`; - -export const StatusCardWrapper = styled.div` - display: flex; - justify-content: space-between; - margin-top: 30px; - margin-bottom: 50px; - - ${media.greaterThan('large')` - justify-content: space-around; - `} -`; - -export const Title = styled.h2` - margin-bottom: 20px; -`; diff --git a/frontend/src/pages/Detail/index.js b/frontend/src/pages/Detail/index.js deleted file mode 100644 index 4c4168a..0000000 --- a/frontend/src/pages/Detail/index.js +++ /dev/null @@ -1,179 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; -import { faCheck } from '@fortawesome/free-solid-svg-icons'; -import AwesomeSlider from 'react-awesome-slider'; -import 'react-awesome-slider/dist/styles.css'; -import api from '../../services/api'; -import DevCard from '../../components/DevCard'; - -import * as S from './styled'; -import Header from '../../components/Header'; - -const includes = [ - { - id: 1, - instruction: - 'Readme com instruções de requisitos e as rotas da aplicação', - }, - { - id: 2, - instruction: 'Imagens para adicionar no projeto', - }, - { - id: 3, - instruction: 'Modelo como design para utilizar como referência', - }, - { - id: 4, - instruction: 'Arquivo contendo o texto que será utilizado', - }, -]; - -const starts = [ - { - id: 1, - steps: 'Clone o projeto com o código inicial', - }, - { - id: 2, - steps: 'Leia as instruções disponíveis no readme', - }, - { - id: 3, - steps: 'Inicie o desenvolvimento!', - }, - { - id: 4, - steps: 'Compartilhe seus resultados com a comunidade', - }, -]; - -const colorMatch = { - beginner: 'nephritis', - intermediate: 'pumpkin', - advanced: 'pomegranate', - Mobile: 'blue', - Frontend: 'red', - Backend: 'light-purple', -}; - -export default function Detail() { - const [challenge, setChallenge] = useState({}); - const [techs, setTechs] = useState([]); - const [dev, setDev] = useState({}); - const [images, setImages] = useState([]); - const { id } = useParams(); - - useEffect(() => { - window.scrollTo(0, 0); - async function loadChallenge() { - const response = await api.get(`/challenges/${id}`); - setChallenge(response.data[0]); - setDev(response.data[0].dev_id); - setImages(response.data[0].images); - setTechs(response.data[0].techs); - } - - loadChallenge(); - }, [id]); - - return ( - <> -
- - - - -

{challenge.name}

- - - - - {challenge.level} - - - {challenge.type} - - {techs[0]?.split(', ').map((item, idx) => ( - {item} - ))} - - - - {challenge.description} - - - - Iniciar desafio - - - - - {images.map((image) => ( -
- Challenge -
- ))} - - - - - - - -

Sobre o desafio

-

Seu desafio é {challenge.brief}.

- - - -

O que está incluso?

- - {challenge.type === 'Backend' ? ( - - Readme com - instruções de requisitos e as rotas da - aplicação - - ) : ( - <> - {includes.map((include) => ( - - {' '} - {include.instruction} - - ))} - - )} - - -

Como iniciar?

- {starts.map((start) => ( -

- {start.id} - - {start.steps} -

- ))} - - - - - - - - ); -} diff --git a/frontend/src/pages/Detail/styled.js b/frontend/src/pages/Detail/styled.js deleted file mode 100644 index 2ea2aff..0000000 --- a/frontend/src/pages/Detail/styled.js +++ /dev/null @@ -1,340 +0,0 @@ -import styled from 'styled-components'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import media from 'styled-media-query'; - -export const Container = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - margin: 2%; - flex: 1; - - ${media.lessThan('medium')` - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - margin: 0%; - margin-top: 5%; - `} -`; - -export const Banner = styled.div` - display: flex; - align-items: center; - justify-content: center; - margin-top: 3em; - - ${media.lessThan('medium')` - flex-wrap: wrap-reverse; - `} -`; - -export const LeftColumn = styled.div` - display: flex; - flex-direction: column; - align-items: left; - justify-content: center; - width: 40%; - text-align: left; - - ${media.lessThan('medium')` - display: flex; - width: 100%; - margin-top: 8%; - flex-direction: column; - align-items: center; - justify-content: center; - margin-left: 0; - margin-right: 0; - `} - - ${media.lessThan('small')` - margin-right: 4%; - margin-left: 4%; - `} -`; - -export const InfosType = styled.div` - filter: brightness(90%); - width: 10em; - border-radius: 20px; - text-align: left; - font-weight: bold; - margin-left: 4%; - margin-bottom: 1%; - color: var(--purple); - ${media.lessThan('medium')` - text-align: center; - margin: 0; - width: 5em; - `}; -`; - -export const TitleContainer = styled.div` - margin-left: 4%; - margin-bottom: 1%; - h1 { - color: var(--yellow); - text-align: left; - } - - ${media.lessThan('medium')` - margin: 0; - margin-top: 4%; - text-align: center; - `} -`; - -export const ChallengeDescription = styled.div` - color: var(--white); - font-size: 1.2em; - margin-left: 4%; - margin-bottom: 4%; - - ${media.lessThan('medium')` - text-align: left; - margin-left: 0; - margin-top: 2%; - margin-bottom: 4%; - `} -`; - -export const Infos = styled.div` - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: left; - padding: 0 4%; - font-size: 14px; - margin-bottom: 10px; - - ${media.lessThan('medium')` - align-items: start; - width: 100%; - padding: 0; - `} -`; - -export const InfosLevel = styled.div` - background-color: var(--${(props) => props.color}); - filter: brightness(90%); - padding: 7px 15px; - margin-right: 2%; - margin-bottom: 2%; - border-radius: 20px; - text-align: center; - font-weight: bold; - color: var(--white); -`; - -export const InfosTechs = styled.div` - background-color: var(--quaternary); - filter: brightness(90%); - padding: 7px 15px; - margin-right: 2%; - margin-bottom: 2%; - border-radius: 20px; - text-align: center; - font-weight: bold; - color: var(--white); -`; - -export const ChallengeLink = styled.a` - color: var(--white); - background-color: var(--purple); - width: 15em; - height: 3em; - font-weight: bold; - font-size: 20px; - border-radius: 50px; - cursor: pointer; - transition: 0.3s; - margin: 4%; - text-decoration: none; - display: flex; - justify-content: center; - align-items: center; - - &:hover { - background-color: var(--dark-purple); - } - - ${media.lessThan('medium')` - margin: 0; - margin-top: 5%; - margin-bottom: 2%; - `} - - ${media.between('large', 'huge')` - width: 20em; - `} -`; - -export const Demo = styled.div` - width: 47em; - border-radius: 10px; - - .image { - height: 100%; - } - - .slider { - width: 100%; - height: 100%; - } - - .awssld__wrapper { - border-radius: 10px; - } - - .awssld__bullets { - bottom: 0; - z-index: 9999; - padding: 10px 0; - transition: 0.4s; - } - - .awssld__bullets:hover { - background-color: rgba(0, 0, 0, 0.3); - } - - .awssld__bullets button { - border: 3px solid var(--yellow); - background-color: rgba(0, 0, 0, 0); - } - - .awssld__bullets .awssld__bullets--active { - background-color: var(--yellow); - } - - .image { - height: 100%; - width: 100%; - } - - ${media.lessThan('medium')` - width: 90%; - height: 100%; - margin-bottom: 20px; - `} -`; - -export const FlexContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - - ${media.lessThan('medium')` - align-items: center; - justify-content: center; - max-width: 100%; - `} -`; - -export const Content = styled.div` - margin-top: 3%; -`; - -export const ChallengeAbout = styled.div` - width: 100%; - margin-top: 5%; - margin-bottom: 4%; - text-align: left; - - h1 { - color: var(--purple); - font-size: 1.6em; - } - - p { - margin-top: 1%; - color: var(--white); - } - - ${media.lessThan('medium')` - align-items: center; - justify-content: center; - margin-left: 4%; - margin-right: 4%; - max-width: 95%; - `} -`; - -export const ChallengeContainer = styled.div` - width: 100%; - display: flex; - align-items: center; - justify-content: center; - line-height: 1.5em; - margin-bottom: 4%; - p { - color: var(--white); - } - - ${media.lessThan('medium')` - text-align: left; - flex-wrap: wrap; - `} -`; - -export const ChallengeInclude = styled.div` - display: flex; - margin-right: 8%; - flex-direction: column; - - h3 { - color: var(--purple); - margin-top: 0.3em; - padding: 0.2em; - font-size: 1.6em; - } - - span { - color: var(--white); - padding: 0.2em; - display: block; - } - - ${media.lessThan('medium')` - margin-right: 0; - `} - - ${media.lessThan('small')` - margin-right: 4%; - margin-left: 4%; - `} -`; - -export const Icon = styled(FontAwesomeIcon)` - color: var(--green); -`; - -export const ChallengeStart = styled.div` - display: flex; - flex-direction: column; - - h3 { - color: var(--purple); - padding: 0.2em; - margin-top: 0.3em; - font-size: 1.6em; - } - - p { - color: var(--white); - padding: 0.2em; - } - - span { - color: var(--yellow); - font-weight: bold; - margin: 0; - padding: 0; - } - - ${media.lessThan('small')` - margin-right: 4%; - margin-left: 4%; - `} -`; diff --git a/frontend/src/pages/Devs/index.js b/frontend/src/pages/Devs/index.js deleted file mode 100644 index afa7eda..0000000 --- a/frontend/src/pages/Devs/index.js +++ /dev/null @@ -1,113 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { - faLightbulb, - faCodeBranch, - faComment, -} from '@fortawesome/free-solid-svg-icons'; -// import { Link } from 'react-router-dom'; - -import * as S from './styled'; - -import api from '../../services/api'; - -import DevCard from '../../components/DevCard'; -import Header from '../../components/Header'; - -export default function Challenges() { - const [devs, setDevs] = useState([]); - const [loading, setLoading] = useState(true); - - useEffect(() => { - async function loadChallenges() { - const response = await api.get('/devs'); - // console.log(response.data); - setDevs(response.data); - - setLoading(false); - } - - loadChallenges(); - }, []); - - return ( - <> -
- - - - - - - - Submeter -
- novo desafio - - - - - - - - Participar -
- da comunidade - - - - - - - - Contribuir -
- open source - - - - - {!loading && ( - -

Últimas contribuições

- - {devs.map((dev) => ( - - ))} - - - )} - - - ); -} diff --git a/frontend/src/pages/Devs/styled.js b/frontend/src/pages/Devs/styled.js deleted file mode 100644 index cce7162..0000000 --- a/frontend/src/pages/Devs/styled.js +++ /dev/null @@ -1,107 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; - -export const Container = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - margin: 6%; - flex: 1 1; - - ${media.lessThan('medium')` - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - margin: 0%; - margin-top: 5%; - `} -`; - -export const OptionsContainer = styled.div` - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: center; - a { - text-decoration: none; - } -`; - -export const Option = styled.div` - width: 300px; - height: 300px; - - background-color: var(--secondary); - - margin: 20px; - border-radius: 10px; - - cursor: pointer; - - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; - justify-content: center; - - transition: .25s; - - &:hover { - transform: scale(1.05); - background-color: var(--dark-hover); - } -`; - -export const OptionIcon = styled(FontAwesomeIcon)` - color: var(--yellow) !important; - font-size: 60px !important; - height: 60px; -`; - -export const OptionTitle = styled.h2` - color: var(--white); - margin-top: 20px; - text-align: center; -`; - -export const Help = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - h3 { - color: var(--white); - font-size: 18px; - font-weight: normal; - margin-bottom: 0.5em; - } -`; - -export const DevsContainer = styled.div` - margin-top: 4em; - color: var(--white); - - display: flex; - flex-direction: column; - align-items: center; - - >h1 { - margin-bottom: 1em; - } -`; - -export const Devs = styled.div` - display: flex; - flex-direction: row; - - justify-content: space-evenly; - flex-wrap: wrap; - - > div { - margin-bottom: 2em; - } -`; diff --git a/frontend/src/pages/Home/index.js b/frontend/src/pages/Home/index.js deleted file mode 100644 index fefb5e7..0000000 --- a/frontend/src/pages/Home/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import CategoriesList from '../../components/CategoriesList'; -import Newsletter from '../../components/Newsletter'; -import Steps from '../../components/Steps'; -import Banner from '../../components/Banner'; -import Header from '../../components/Header'; - -export default function Home() { - return ( - <> -
- - - - - - ); -} diff --git a/frontend/src/pages/MyChallenges/index.js b/frontend/src/pages/MyChallenges/index.js deleted file mode 100644 index 97ee72f..0000000 --- a/frontend/src/pages/MyChallenges/index.js +++ /dev/null @@ -1,101 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import DashboardDefault from '../../components/DashboardDefault'; -import { ProgressBar } from '../../components/ChallengeCard/styled'; -import ChallengeCard from '../../components/ChallengeCard'; - -import { Title, Section, Container } from './styled'; - -const fakeData = { - inProgress: [ - { - techs: ['CSS, React Native'], - images: [ - 'https://i.imgur.com/nAsuQSs.png', - 'https://i.imgur.com/A9sWFtn.png', - ], - _id: '5ec1cd5b9cd83622b185db7f', - type: 'Mobile', - name: 'Fisiotherapp', - description: 'Ajude pacientes com exercícios de fisioterapia!', - level: 'beginner', - background: 'https://i.imgur.com/4FgywHQ.png', - github_url: 'https://github.com/Lorenalgm/fisiotheapp', - brief: - 'criar um aplicativo em React Native para ajudar pessoas com exercícios de fisioterapia', - dev_id: '5ec31e81e8051f63faefdf5e', - createdAt: '2020-05-17T23:48:43.265Z', - updatedAt: '2020-08-09T00:31:57.252Z', - __v: 0, - }, - ], - complete: [ - { - techs: ['CSS, React Native'], - images: [ - 'https://i.imgur.com/nAsuQSs.png', - 'https://i.imgur.com/A9sWFtn.png', - ], - _id: '5ec1cd5b9cd83622b185db7f', - type: 'Mobile', - name: 'Fisiotherapp', - description: 'Ajude pacientes com exercícios de fisioterapia!', - level: 'beginner', - background: 'https://i.imgur.com/4FgywHQ.png', - github_url: 'https://github.com/Lorenalgm/fisiotheapp', - brief: - 'criar um aplicativo em React Native para ajudar pessoas com exercícios de fisioterapia', - dev_id: '5ec31e81e8051f63faefdf5e', - createdAt: '2020-05-17T23:48:43.265Z', - updatedAt: '2020-08-09T00:31:57.252Z', - __v: 0, - }, - ], -}; - -function MyChallenges() { - const [challengesList, setChallengesList] = useState({}); - - useEffect(() => { - setChallengesList(fakeData); - }, []); - - return ( - - - Em andamento -
- {challengesList.inProgress?.map((challenge) => ( - - - - ))} -
- - Concluídos - -
- {challengesList.complete?.map((challenge) => ( - - - - ))} -
- - - ); -} - -export default MyChallenges; diff --git a/frontend/src/pages/MyChallenges/styled.js b/frontend/src/pages/MyChallenges/styled.js deleted file mode 100644 index c0d95c6..0000000 --- a/frontend/src/pages/MyChallenges/styled.js +++ /dev/null @@ -1,21 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -export const Container = styled.div` - padding: 0px 80px 0 80px; - - ${media.between('medium', 'large')` - padding: 0px 60px 0 60px; - `} -`; - -export const Title = styled.h2` - margin-bottom: 20px; -`; - -export const Section = styled.section` - margin-top: 3%; - display: flex; - flex-wrap: wrap; - max-width: 100vw; -`; diff --git a/frontend/src/pages/Submit/index.js b/frontend/src/pages/Submit/index.js deleted file mode 100644 index 50b6795..0000000 --- a/frontend/src/pages/Submit/index.js +++ /dev/null @@ -1,193 +0,0 @@ -import React, { useState } from 'react'; -import { FiXCircle } from 'react-icons/fi'; - -import * as S from './styled'; -import Header from '../../components/Header'; - -const levels = [ - { id: 1, title: 'iniciante' }, - { id: 2, title: 'intermediário' }, - { id: 3, title: 'avançado' }, -]; -const categories = [ - { id: 1, title: 'Frontend' }, - { id: 2, title: 'Backend' }, - { id: 3, title: 'Mobile' }, -]; - -const linkVerify = /^https:\/\/[A-z]/; - -export default function Submit() { - const [title, setTitle] = useState(''); - const [level, setLevel] = useState('iniciante'); - const [category, setCategory] = useState(''); - const [description, setDescription] = useState(''); - const [languages, setLanguages] = useState(''); - const [link, setLink] = useState(''); - const [imageLink, setImageLink] = useState([]); - const [imageInput, setImageInput] = useState(''); - - function set(data) { - let newString = ''; - if (category.includes(data)) { - newString = category.replace(data, ''); - } else { - newString = category.concat(` ${data}`); - } - setCategory(newString.trim()); - } - - async function addLink() { - console.log(linkVerify.test(imageInput)); - if (imageInput !== '' && linkVerify.test(imageInput)) { - await fetch(`${imageInput}`).then((response) => { - if (response.ok) { - setImageLink([...imageLink, imageInput]); - setImageInput(''); - } - }); - } - } - - function removeImageItem(index) { - const updatedLinkImages = imageLink.filter((item, i) => i !== index); - setImageLink(updatedLinkImages); - } - - function submitForm() {} - - function clearForm() { - setCategory(''); - setDescription(''); - setTitle(''); - setLink(''); - setImageLink([]); - setImageInput(''); - } - - return ( - <> -
- - - Submissão de desafios - - - Categoria - - {categories.map((categoryItem) => ( - set(categoryItem.title)} - key={categoryItem.id} - > - {categoryItem.title} - - ))} - - - - Nível - - {levels.map((levelItem) => ( - - setLevel(levelItem.title) - } - key={levelItem.id} - > - {levelItem.title} - - ))} - - - - Título - setTitle(e.target.value)} - /> - - - Descrição - setDescription(e.target.value)} - /> - - - - Imagens - - setImageInput(e.target.value)} - onKeyPress={(e) => { - if (e.key === 'Enter') { - addLink(); - } - }} - required - value={imageInput} - /> - - - Add Image + - - - - {imageLink.map((linkItem, i) => ( -
  • - - -
    • - ))} -     -     - - - Linguagens - setLanguages(e.target.value)} - /> - - - - Informe o link do desafio no github - - setLink(e.target.value)} - /> - - - - Limpar - - - Enviar - - -     -     -     - - ); -} diff --git a/frontend/src/pages/Submit/styled.js b/frontend/src/pages/Submit/styled.js deleted file mode 100644 index 63f91a9..0000000 --- a/frontend/src/pages/Submit/styled.js +++ /dev/null @@ -1,241 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -export const Section = styled.section` - margin-top: 3%; - margin-bottom: 10%; - display: flex; - flex-wrap: wrap; - max-width: 100vw; - align-items: center; - justify-content: center; - - ${media.lessThan('medium')` - margin-top: 15%; - margin-bottom: 15%; - `} -`; - -export const Container = styled.div` - background-color: var(--secondary); - width: 50%; - max-width: 800px; - height: 50%; - padding: 36px 48px 31px; - border-radius: 10px; - - ${media.between('medium', 'large')` - width: 70%; - height: 70%; - `} - - ${media.between('small', 'medium')` - width: 80%; - height: 80%; - `} - - ${media.lessThan('small')` - width: 80%; - padding: 20px 28px 18px; - `} -`; - -export const Title = styled.p` - color: var(--white); - font-size: 20px; - margin-bottom: 20px; - font-weight: bold; -`; - -export const Form = styled.div` - width: 100%; - margin: 0 0 15px; -`; -export const Field = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - margin-bottom: 15px; - - ${media.lessThan('small')` - flex-direction: column; - align-items: flex-start; - `} -`; -export const Label = styled.p` - margin-bottom: 7px; - color: var(--quaternary); - font-size: 18px; - font-weight: bold; -`; -export const Input = styled.input` - width: 100%; - background: var(--quaternary); - height: 40px; - display: flex; - align-items: center; - color: white; - font-size: 14px; - padding: 0 15px; - border-radius: 40px; - - & + Input { - margin-top: 10px; - } - - ${media.lessThan('small')` - width: 100%; - `} -`; - -export const Textarea = styled.textarea` - width: 100%; - min-height: 200px; - background: var(--quaternary); - padding: 10px 15px; - font-size: 16px; - color: white; - border-radius: 20px; - - resize: vertical; -`; - -export const Select = styled.div` - display: flex; - height: 40px; - - ${media.lessThan('small')` - margin-bottom: 60px; - width: 100%; - flex-direction: column; - `} -`; - -const colorMatch = { - category: [ - 'var(--quaternary)', - 'var(--red)', - 'var(--light-purple)', - 'var(--blue)', - ], - level: [ - 'var(--quaternary)', - 'var(--nephritis)', - 'var(--pumpkin)', - 'var(--pomegranate)', - ], -}; - -export const Item = styled.button` - width: 100%; - padding: 5px 10px; - - text-transform: uppercase; - color: var(--tertiary); - font-size: 12px; - font-weight: bold; - - cursor: pointer; - - &:first-child { - background-color: ${(props) => - props.selected - ? colorMatch[props.type][1] - : colorMatch[props.type][0]}; - border-top-left-radius: 25px; - border-bottom-left-radius: 25px; - } - - &:nth-child(2) { - background-color: ${(props) => - props.selected - ? colorMatch[props.type][2] - : colorMatch[props.type][0]}; - border-style: none solid; - } - - &:last-child { - background-color: ${(props) => - props.selected - ? colorMatch[props.type][3] - : colorMatch[props.type][0]}; - border-top-right-radius: 25px; - border-bottom-right-radius: 25px; - } - - ${media.lessThan('small')` - padding: 10px 0; - &:first-child { - border-top-right-radius: 20px; - border-top-left-radius: 20px; - border-bottom-left-radius: 0; - } - &:nth-child(2) { - border-style: solid none; - } - &:last-child { - border-top-right-radius: 0; - border-bottom-right-radius: 20px; - border-bottom-left-radius: 20px; - } - `} -`; - -export const Actions = styled.div` - display: flex; - width: 100%; - margin-top: 30px; - align-items: center; - justify-content: space-around; -`; - -export const Button = styled.button` - padding: 10px 15px; - border-radius: 40px; - font-size: 18px; - cursor: pointer; - - background-color: ${(props) => - props.type === 'submit' ? 'var(--yellow)' : 'var(--quaternary)'}; -`; - -export const AddLinkButton = styled.button` - background-color: rgba(0, 0, 0, 0); - cursor: pointer; - margin-top: 10px; - align-self: flex-end; - padding: 0 20px; - font-weight: bold; - - color: var(--quaternary); -`; - -export const ImagePreview = styled.img` - //width: 50px; - height: 50px; - border-radius: 10px; -`; - -export const PreviewList = styled.ul` - display: flex; - flex-wrap: wrap; - list-style: none; - max-width: 100%; - - li { - width: 50px; - margin: 10px 30px; - display: flex; - align-items: center; - justify-content: space-between; - } - - button { - position: relative; - background-color: rgba(0, 0, 0, 0); - color: var(--red); - top: 25px; - right: 15px; - cursor: pointer; - } -`; diff --git a/frontend/src/pages/ToDoChallenge/index.js b/frontend/src/pages/ToDoChallenge/index.js deleted file mode 100644 index 510610f..0000000 --- a/frontend/src/pages/ToDoChallenge/index.js +++ /dev/null @@ -1,109 +0,0 @@ -import React, { useState } from 'react'; - -import { HeaderImg, Container, ToDoDiv, AddToDo, Content } from './styled'; -import DashboardDefault from '../../components/DashboardDefault'; - -function ToDoChallenge() { - const [todos, setTodos] = useState([ - { - id: 2, - title: 'teste', - checked: 1, - subtodo: [{ id: 1, title: 'teste', checked: 1, subtodo: [] }], - }, - ]); - - function renameTodo(todo, value) { - return { ...todo, title: value }; - } - - function changeChecked(todo, value) { - const newValue = value === '1' ? 0 : 1; - console.log(newValue); - return { ...todo, checked: newValue }; - } - - function createTodo(todo) { - const newValue = { title: '', id: '', checked: 0, subtodo: [] }; - return { ...todo, newValue }; - } - - const modifiers = { - rename: renameTodo, - check: changeChecked, - add: createTodo, - }; - - function findToDo(toDoList, id, modify, value) { - const newTodoList = toDoList.map((todo) => { - if (`${todo.id}` === id) { - const todoItem = modifiers[modify](todo, value); - return todoItem; - } - if (todo.subtodo.length !== 0) { - const subtodos = findToDo(todo.subtodo, id, modify, value); - return { ...todo, subtodo: subtodos }; - } - return todo; - }); - return newTodoList; - } - - function toggleCheckedStatus(e, modify) { - const { id, value } = e.target; - const newTodoList = findToDo(todos, id, modify, value); - setTodos(newTodoList); - console.log(newTodoList); - } - - function renderToDo(todo) { - return ( - <> - - toggleCheckedStatus(e, 'check')} - value={todo.checked} - /> - - toggleCheckedStatus(e, 'rename')} - /> - - {todo.subtodo.map((newTodo) => renderToDo(newTodo))} - - {todo.subtodo.length === 0 && ( - toggleCheckedStatus(e)} - > - + Add To-Do - - )} - - ); - } - - return ( - - - -

    Titulo

    - - {todos.map((todo) => renderToDo(todo))} - toggleCheckedStatus(e)}> - + Add To-Do - - -     -     - ); -} - -export default ToDoChallenge; diff --git a/frontend/src/pages/ToDoChallenge/styled.js b/frontend/src/pages/ToDoChallenge/styled.js deleted file mode 100644 index b1a15bc..0000000 --- a/frontend/src/pages/ToDoChallenge/styled.js +++ /dev/null @@ -1,79 +0,0 @@ -import styled from 'styled-components'; -import media from 'styled-media-query'; - -export const Container = styled.div` - padding: 40px 100px 0 100px; - - ${media.between('medium', 'large')` - padding: 40px 60px 0 60px; - `} -`; - -export const HeaderImg = styled.div` - width: 100%; - height: 200px; - background: ${(props) => `url(${props.img}) no-repeat`}; - background-size: cover; - margin-top: 20px; -`; - -export const Content = styled.div` - padding: 30px; -`; -export const ToDoDiv = styled.div` - display: flex; - padding-left: 30px; - padding-top: 10px; - width: 100%; - display: block; - - input[type='checkbox'] { - display: none; - } - - input[type='text'] { - background: var(--primary); - color: var(--quinary); - font-size: 18px; - width: 80%; - } - - label { - cursor: pointer; - font-size: 0; - } - - input + label::before { - border: 1px solid var(--quinary); - content: '\\00a0'; - display: inline-block; - font: 16px/1em sans-serif; - height: 16px; - margin: 0 10px 0 0; - padding: 0; - vertical-align: top; - width: 16px; - } - - input[type='checkbox']:checked + label:before { - color: var(--quinary); - content: '\\2713'; - text-align: center; - } - - input[type='checkbox']:checked + label:after { - font-weight: bold; - } -`; - -export const AddToDo = styled.button` - background: var(--primary); - color: var(--quinary); - opacity: 0; - transition: 0.3s; - padding-left: 30px; - - &:hover { - opacity: 1; - } -`; diff --git a/frontend/src/routes.js b/frontend/src/routes.js deleted file mode 100644 index 0bc93a5..0000000 --- a/frontend/src/routes.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'; - -import { ToastContainer } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; -import Home from './pages/Home'; -import Challenges from './pages/Challenges'; -import Detail from './pages/Detail'; -import Devs from './pages/Devs'; -import Submit from './pages/Submit'; -import MyChallenges from './pages/MyChallenges'; -import Dashboard from './pages/Dashboard'; -import Footer from './components/Footer'; -import ToDoChallenge from './pages/ToDoChallenge'; - -import { Container } from './styles/GlobalStyles'; -import ConstructPage from './pages/ConstructPage'; - -const logged = false; - -const LoggedRoute = ({ component: Component, ...rest }) => ( - - logged ? ( - - ) : ( - - ) - } - /> -); - -function Routes() { - return ( - - - - - - - - - - - - - - - -