mlearnbr · renato3m · Oct 8, 2022 · Oct 8, 2022 · Oct 8, 2022 · Oct 9, 2022
diff --git a/qualifica-challenge/.gitignore b/qualifica-challenge/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/qualifica-challenge/README.md b/qualifica-challenge/README.md
@@ -0,0 +1,7 @@
+# Challenge
+
+Para rodar o projeto
+
+- cd qualifica-challenge
+- yarn
+- yarn dev
diff --git a/qualifica-challenge/index.html b/qualifica-challenge/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/qualifica-challenge/package.json b/qualifica-challenge/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "qualifica-challenge",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.1.2",
+    "jotai": "^1.8.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2",
+    "styled-components": "^5.3.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^2.1.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.1.0"
+  }
+}
diff --git a/qualifica-challenge/public/vite.svg b/qualifica-challenge/public/vite.svg
diff --git a/qualifica-challenge/src/App.css b/qualifica-challenge/src/App.css
@@ -0,0 +1,4 @@
+#root {
+  /* max-width: 1280px;
+  margin: 0 auto; */
+}
diff --git a/qualifica-challenge/src/App.tsx b/qualifica-challenge/src/App.tsx
@@ -0,0 +1,20 @@
+import { Routes, Route } from 'react-router-dom';
+
+import './App.css';
+
+import Header from './components/Header';
+import Character from './pages/Character';
+import Profile from './pages/Profile/[cod]';
+
+function App() {
+  return (
+    <div className="App">
+      <Routes>
+        <Route path="/" element={<Character />} />
+        <Route path="/profile/:cod" element={<Profile />} />
+      </Routes>
+    </div>
+  );
+}
+
+export default App;
diff --git a/qualifica-challenge/src/assets/react.svg b/qualifica-challenge/src/assets/react.svg
diff --git a/qualifica-challenge/src/assets/star-wars-4.svg b/qualifica-challenge/src/assets/star-wars-4.svg
diff --git a/qualifica-challenge/src/components/Card/index.tsx b/qualifica-challenge/src/components/Card/index.tsx
@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom';
+
+import { BrithYear, Button, Container, Content, Name, Specie } from './styles';
+
+interface CardProsp {
+  id: number;
+  name: string;
+  specie: string;
+  brithYear: string;
+}
+
+function Card(props: CardProsp) {
+  return (
+    <Container>
+      <Content>
+        <Name>{props.name}</Name>
+        <Specie>
+          <b>Specie:</b> {props.specie}
+        </Specie>
+        <BrithYear>
+          <b>Birth Year:</b> {props.brithYear}
+        </BrithYear>
+      </Content>
+      <Link to={`/profile/${props.id}`}>
+        <Button>ver detalher</Button>
+      </Link>
+    </Container>
+  );
+}
+export default Card;
diff --git a/qualifica-challenge/src/components/Card/styles.ts b/qualifica-challenge/src/components/Card/styles.ts
@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  height: 200px;
+
+  background-color: #303030;
+
+  border-width: 2px;
+  border-style: solid;
+  border-color: #606060;
+  border-radius: 0.5rem;
+
+  padding: 16px;
+
+  @media only screen and (max-width: 767px) {
+    width: 91.66%;
+  }
+
+  @media only screen and (min-width: 767px) and (max-width: 1023px) {
+    width: 33.33%;
+  }
+
+  @media only screen and (min-width: 1024px) {
+    width: 25%;
+  }
+`;
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.25rem;
+`;
+
+export const Name = styled.p`
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  color: #ffe81f;
+  margin-bottom: 0.5rem;
+`;
+
+export const Specie = styled.span``;
+
+export const BrithYear = styled.span``;
+
+export const Button = styled.button`
+  font-size: 1rem;
+  text-transform: uppercase;
+  padding: 0.5rem 1rem;
+  border: 2px solid #ffe81f;
+  background: transparent;
+  color: #ffe81f;
+  width: 100%;
+  cursor: pointer;
+`;
diff --git a/qualifica-challenge/src/components/Header/index.tsx b/qualifica-challenge/src/components/Header/index.tsx
@@ -0,0 +1,23 @@
+import logoImg from '../../assets/star-wars-4.svg';
+import { usePeople } from '../../hooks/people';
+
+import { Container, Content, Input, Logo } from './styles';
+
+function Header() {
+  const { search, handleSearch } = usePeople();
+
+  return (
+    <Container>
+      <Content>
+        <Logo src={logoImg} />
+        <Input
+          type="text"
+          value={search}
+          onChange={(e) => handleSearch(e.target.value)}
+          placeholder="Buscar..."
+        />
+      </Content>
+    </Container>
+  );
+}
+export default Header;
diff --git a/qualifica-challenge/src/components/Header/styles.ts b/qualifica-challenge/src/components/Header/styles.ts
@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  padding: 16px;
+  margin-bottom: 24px;
+`;
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  @media only screen and (max-width: 767px) {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  @media only screen and (min-width: 1024px) {
+    flex-direction: row;
+    justify-content: center;
+    gap: 2rem;
+  }
+`;
+
+export const Logo = styled.img`
+  @media only screen and (max-width: 767px) {
+    width: 150px;
+  }
+
+  @media only screen and (min-width: 767px) and (max-width: 1023px) {
+    width: 200px;
+  }
+
+  @media only screen and (min-width: 1024px) {
+    width: 200px;
+  }
+`;
+
+export const Input = styled.input`
+  padding: 1rem;
+  font-size: 14px;
+  border: 2px solid #606060;
+  border-radius: 0.25rem;
+  background-color: #303030;
+  color: #fafafa;
+  margin-bottom: 1rem;
+
+  @media only screen and (max-width: 767px) {
+    width: 90%;
+  }
+
+  @media only screen and (min-width: 767px) and (max-width: 1023px) {
+    width: 55%;
+  }
+
+  @media only screen and (min-width: 1024px) {
+    width: 60%;
+  }
+`;
diff --git a/qualifica-challenge/src/hooks/people.ts b/qualifica-challenge/src/hooks/people.ts
@@ -0,0 +1,72 @@
+import { atom, useAtom } from 'jotai';
+import { useState } from 'react';
+
+import Api from '../service';
+import { debounce } from '../util';
+
+interface Result {
+  name: string;
+  height: string;
+  mass: string;
+  hair_color: string;
+  skin_color: string;
+  eye_color: string;
+  birth_year: string;
+  gender: string;
+  homeworld: string;
+  films: string[];
+  species: string[];
+  vehicles: string[];
+  starships: string[];
+  created: Date;
+  edited: Date;
+  url: string;
+}
+
+interface Data {
+  count: number;
+  next: string;
+  previous?: any;
+  results: Result[];
+}
+
+const charactersAtom = atom<Result[]>([]);
+const searchAtom = atom('');
+
+export const usePeople = () => {
+  const [characters, setCharacters] = useAtom(charactersAtom);
+  const [search, setSearch] = useAtom(searchAtom);
+
+  const handleCharacter = async (value: string) => {
+    const {
+      data: { results },
+    } = await Api.get(`/people/?search=${value}`);
+    setCharacters(results);
+  };
+
+  const debounceChange = debounce(handleCharacter, 600);
+
+  const handleSearch = (value: string) => {
+    if (value !== '') {
+      setSearch(value);
+      debounceChange(value);
+    } else {
+      handleCharacters();
+      setSearch('');
+    }
+  };
+
+  const handleCharacters = async () => {
+    const {
+      data: { results },
+    } = await Api.get<Data>(`/people/`);
+    setCharacters(results);
+  };
+
+  return {
+    handleCharacters,
+    characters,
+    handleSearch,
+    search,
+  };
+};
diff --git a/qualifica-challenge/src/index.css b/qualifica-challenge/src/index.css
@@ -0,0 +1,32 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #000000;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+