chiper-inc · joserojasme · May 7, 2022 · May 7, 2022 · May 7, 2022 · May 7, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -1,6 +1,9 @@
 # Stolen Bike Index - Frontend (React) Conding Challenge
+
 ![JOIN Stolen Bike Cases](https://github.com/chiper-inc/React-Web-Coding-Challenge/blob/master/illustration.png)
 
+[You can to see this project running ](http://chiper-test.s3-website.us-east-2.amazonaws.com/)
+
 ## Context
 
 Stolen bikes are a typical problem in Berlin. The Police want to be more efficient in resolving stolen bike cases. They decided to build a software that can automate their processes — the software that you're going to develop.
@@ -31,7 +34,7 @@ As a police officer:
 
 Create the React application that satisfies all must-have requirements above, plus any nice-to-have requirements you wish to include.
 
-For that, you’ll need to make requests to a publicly-available [API](https://bikeindex.org/documentation/api_v3) to get JSON content and print it on view. 
+For that, you’ll need to make requests to a publicly-available [API](https://bikeindex.org/documentation/api_v3) to get JSON content and print it on view.
 
 The API is known to have some limitations. If you are not able to implement a particular requirement, please provide a description of what and why you could not implements.
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "react-web-coding-challenge",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.0",
+    "@types/node": "^16.11.33",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "sass": "^1.51.0",
+    "styled-components": "^5.3.5",
+    "typescript": "^4.6.4",
+    "use-http": "^1.0.26",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.25"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,21 @@
+import { Route, Routes } from 'react-router-dom';
+
+import Header from './components/Header';
+import StolenBike from './pages/StolenBike';
+import StolenBikeDetail from './pages/StolenBikeDetail';
+import NotFound from './pages/NotFound';
+
+const App = () => {
+  return (
+    <>
+      <Header />
+      <Routes>
+        <Route path="/" element={<StolenBike />} />
+        <Route path="/detail/:id" element={<StolenBikeDetail />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </>
+  );
+}
+
+export default App;
diff --git a/src/components/BikeItemList/index.tsx b/src/components/BikeItemList/index.tsx
@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+import { imgSourceDefault } from "../../config/constants";
+import { IBikeItemList } from "./interface";
+import './styles.scss';
+
+const BikeItemList = ({ title, date_stolen, description, thumb, stolen_location, id } : IBikeItemList) => {
+  return(
+    <section className="BikeItemList">
+      <img 
+        alt={title} 
+        src={thumb ? thumb : imgSourceDefault} />
+      <div>
+        <Link to={`/detail/${id}`}>{title}</Link>
+        <p>{stolen_location}</p>
+        <p>{description}</p>
+        <p>{date_stolen}</p>
+      </div>
+    </section>
+  )
+}
+
+export default BikeItemList;
diff --git a/src/components/BikeItemList/interface.d.ts b/src/components/BikeItemList/interface.d.ts
@@ -0,0 +1,8 @@
+export interface IBikeItemList {
+  thumb?: string;
+  title?: string;
+  description?: string;
+  date_stolen?: string;
+  stolen_location?: string;
+  id: number;
+}
diff --git a/src/components/BikeItemList/styles.scss b/src/components/BikeItemList/styles.scss
@@ -0,0 +1,30 @@
+.BikeItemList {
+    width: 80%;
+    height: 150px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    border: 2px solid black;
+
+
+    img {
+      width: 100px;
+      height: 100px;
+      margin: auto;
+    }
+
+    div {
+      width: 80%;
+      margin: auto;
+      p {
+        margin: 0;
+      }
+      a {
+        margin: 0;
+        cursor: pointer;
+      }
+    }
+}
diff --git a/src/components/FilterBar/index.tsx b/src/components/FilterBar/index.tsx
@@ -0,0 +1,29 @@
+import { useFilterBar } from '../../hooks/useFilterBar';
+import { Button } from '../StyledComponents/Button';
+import './styles.scss';
+
+const FilterBar = () => {
+  const { setDescription, setFrom, setTo, action } = useFilterBar();
+  return (
+    <section className='FilterBar'>
+      <input 
+        onChange={(e) => setDescription(e.target.value)} 
+        className='FilterBar__input' 
+        type="text" 
+        placeholder='Search by cases descriptions' />
+      <label>From</label>
+      <input 
+        onChange={(e) => setFrom(e.target.value)} 
+        className='FilterBar__date'
+        type="date"  />
+      <label>To</label>
+      <input 
+        onChange={(e) => setTo(e.target.value)} 
+        className='FilterBar__date' 
+        type="date" />
+      <Button onClick={action}>Find cases</Button>
+    </section>
+  )
+}
+
+export default FilterBar;
diff --git a/src/components/FilterBar/styles.scss b/src/components/FilterBar/styles.scss
@@ -0,0 +1,25 @@
+.FilterBar {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20px;
+  padding: 10px;
+  &__input {
+    margin-left: 20px;
+    width: 250px;
+  }
+
+  label {
+    font-weight: 600;
+    margin-left: 20px;
+  }
+
+  &__date {
+    margin-left: 20px;
+    width: 100px;
+  }
+
+  button {
+    margin-left: 20px;
+  }
+}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -0,0 +1,17 @@
+import './styles.scss';
+
+const Header = () => {
+  return (
+    <header className='Header'>
+      <img 
+      alt='berlin police' 
+      src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Coat_of_arms_of_Berlin.svg/180px-Coat_of_arms_of_Berlin.svg.png' />
+      <div>
+        <h1>Police Departament of Berlín</h1>
+        <h4>Stolen bykes</h4>
+      </div>
+    </header>
+  )
+}
+
+export default Header;
diff --git a/src/components/Header/styles.scss b/src/components/Header/styles.scss
@@ -0,0 +1,28 @@
+.Header {
+  width: 80%;
+  height: 100px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  img {
+    width: 60px;
+    height: 80px;
+    margin: auto;
+  }
+
+  div {
+    width: 90%;
+    height: 80px;
+    margin: auto;
+    h1 {
+      margin: 0;
+    }
+    h4  {
+      margin: 0
+    }
+  }
+}
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
@@ -0,0 +1,18 @@
+import { useBikeIndex } from "../../network/api/hooks/useBikeIndex";
+import { Button } from "../StyledComponents/Button";
+import { IPagination } from "./interface";
+import './styles.scss';
+
+const Pagination = ({ currentPage, pages, onSubmit }: IPagination) => {
+  return (
+    <section className="Pagination">
+    <Button onClick={()=> onSubmit(1)}>{`<< First`}</Button>
+    <Button onClick={()=> onSubmit(currentPage > 1 ? currentPage - 1 : currentPage)}>{`< Prev`}</Button>
+    <span> {currentPage} / {pages}</span>
+    <Button onClick={()=> onSubmit(currentPage < pages ? currentPage + 1 : currentPage)}>{`> Next`}</Button>
+    <Button onClick={()=> onSubmit(pages)}>{`>> Last`}</Button>
+    </section>
+  )
+}
+
+export default Pagination;
diff --git a/src/components/Pagination/interface.d.ts b/src/components/Pagination/interface.d.ts
@@ -0,0 +1,5 @@
+export interface IPagination {
+  currentPage: number;
+  pages: number;
+  onSubmit: (page: number) => {};
+}
diff --git a/src/components/Pagination/styles.scss b/src/components/Pagination/styles.scss
@@ -0,0 +1,16 @@
+.Pagination {
+  width: 80%;
+  height: 100px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 30px;
+
+  button {
+    margin-right: 10px;
+  }
+
+  span {
+    margin: 10px;
+    font-weight: 600;
+  }
+}