Starwars Planets and Flight selection

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -2,23 +2,22 @@
   <img src="https://user-images.githubusercontent.com/850110/153227453-ee147c59-830b-48ad-930e-7075d3229ae4.png" title="AgileSearch" width="150" style="margin-bottom: 1rem" />
 </p>
 
-
-👋  Hej välkommen på [AgileSearch](agilesearch) fullstack challenge!
+👋 Hej välkommen på [AgileSearch](agilesearch) fullstack challenge!
 
 My name is Broodar Plawind and I'm living in a far far away solar system located in the Arkanis sector of the Outer Rim Territories, in the Tatooine desert.
 
 I'm would love to spend the next months travelling around the universe, my idea is to visit and stay at least 15 days on the planets that I always dreamed about: Naboo, Mandalore and Hoth.
 
 Could you help me to get the right spaceship tickets for me? I'm afraid that I'm not good enough with today's technology and I don't know where to start.
 
-----
+---
 
 _How would you help Brooday to get the **best experience** for planning his vacations?_
 We are going to evaluate everything, but the main focus will be:
 
-* :bulb: Creativity.
-* :wrench: Tools.
-* :man_technologist: Good practice in the choosen technology.
+- :bulb: Creativity.
+- :wrench: Tools.
+- :man_technologist: Good practice in the choosen technology.
 
 ## Dataset
 
@@ -31,9 +30,9 @@ The `dataset.json` has all the necessary information for searching with the foll
     destination: String,
     price: Float,
     availability: Number,
-    date: String
-  }
-]
+    date: String,
+  },
+];
 ```
 
 ## Planets
@@ -46,10 +45,48 @@ We encourage you to fork this repository and when you are done with the challeng
 
 If your solution needs to prepare an environment of any kind, please don't forget to let us know.
 
-###### 🙌  Psst, One more thing!
+###### 🙌 Psst, One more thing!
 
 The challenge is open to any solution. You can use your imagination, creativity and skills to deliver the best of the worlds you like the most.
 
 You can always reach us by writing an email with all your questions and/or feedback about this challenge.
 
 [agilesearch]: https://www.agilesearch.io
+
+## Prerequisite
+
+To run the project you will need the latest/LTS version of Nodejs
+
+## Setting up the project
+
+Clone the repository and install the dependencies using the following command.
+
+```
+ yarn install
+```
+
+## Development
+
+You can start the project by running the following command.
+
+```
+yarn start
+```
+
+### Libraries used
+
+The following libraries are used in the project.
+
+- [semantic-ui-react](https://react.semantic-ui.com/) : For UI components
+- [react-router-dom](https://reactrouter.com/en/main) : For routing to SPA app
+- [react-semantic-ui-datepickers](https://github.com/arthurdenner/react-semantic-ui-datepickers) : Datepicker component with semantic-ui-react touch
+- [dayjs](https://day.js.org/) : To deal with complex date tasks (adding dates, checking dates etc.)
+
+### Known issues
+
+- The _Clear_ button in home page doesnt clear the date picker
+- The dates selected by _react-semantic-ui-datepickers_ gives a day prior to what the user selects (to mitigate this I add an extra day)
+
+### Demo
+
+You can test the Demo application using the [live site](https://starwars-planet-travel.netlify.app/).

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "starwars",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.11.50",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "dayjs": "^1.11.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "6",
+    "react-scripts": "5.0.1",
+    "react-select": "^5.4.0",
+    "react-semantic-ui-datepickers": "^2.17.1",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.1.3",
+    "typescript": "^4.7.4",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "postinstall": "semantic-ui-css-patch"
+  },
+  "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": {
+    "@semantic-ui-react/css-patch": "^1.1.2"
+  }
+}

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>

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"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/App.tsx

@@ -0,0 +1,20 @@
+import Home from "./pages/Home";
+import Final from "./pages/Final";
+import Navigation from "./components/Navigation";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Navigation>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/final" element={<Final />} />
+          <Route path="*" element={<div />} />
+        </Routes>
+      </Navigation>
+    </BrowserRouter>
+  );
+}
+
+export default App;

src/AppType.ts

@@ -0,0 +1,25 @@
+export type PlanetType = {
+  name: string;
+  code: string;
+};
+
+export type FlightType = {
+  id?: number;
+  data: string;
+  origin: string;
+  destination: string;
+  price: number;
+  nodays: number;
+  availability: number;
+};
+
+export type DetailsType = {
+  origin: string;
+  destinations: Array<FlightType>;
+  date: string;
+};
+
+export interface FlightRowType extends FlightType {
+  addTrip: (data: FlightType) => void;
+  getNameByCode: (code: string) => string;
+}

src/components/FlightRows.tsx

@@ -0,0 +1,77 @@
+import { Fragment, useState } from "react";
+import dayjs from "dayjs";
+import { Button, Card, Input, Icon, Modal } from "semantic-ui-react";
+
+import { FlightRowType } from "../AppType";
+
+function FlightRows({
+  data,
+  destination,
+  origin,
+  price,
+  availability,
+  addTrip,
+  getNameByCode,
+}: FlightRowType) {
+  const [nodays, setNoDays] = useState(0);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Fragment>
+      <Card
+        fluid
+        header={`${getNameByCode(origin)}  --->  ${getNameByCode(destination)}`}
+        meta={dayjs(data).toISOString().slice(0, 10)}
+        description={`Price : ${price}`}
+        extra={
+          <Fragment>
+            <Icon name="plane" />
+            {availability}
+          </Fragment>
+        }
+        onClick={() => {
+          setOpen(true);
+        }}
+      />
+      <Modal onClose={() => setOpen(false)} open={open}>
+        <Modal.Header>Number of days</Modal.Header>
+        <Modal.Content image>
+          <Modal.Description>
+            <p>Enter the number of days you are planing to stay</p>
+            <Input
+              placeholder="Number of days"
+              onChange={(e, { value }) => {
+                setNoDays(parseInt(value));
+              }}
+            ></Input>
+          </Modal.Description>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button color="black" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button
+            content="Add"
+            labelPosition="right"
+            icon="checkmark"
+            onClick={() => {
+              addTrip({
+                data,
+                price,
+                origin,
+                nodays,
+                destination,
+                availability,
+              });
+              setNoDays(0);
+              setOpen(false);
+            }}
+            positive
+          />
+        </Modal.Actions>
+      </Modal>
+    </Fragment>
+  );
+}
+
+export default FlightRows;

src/components/Navigation.tsx

@@ -0,0 +1,17 @@
+import React, { Fragment } from "react";
+import { Menu, Header } from "semantic-ui-react";
+
+function Navigation({ children }: { children: React.ReactNode }) {
+  return (
+    <Fragment>
+      <Menu>
+        <Menu.Item>
+          <Header>Star Wars</Header>
+        </Menu.Item>
+      </Menu>
+      {children}
+    </Fragment>
+  );
+}
+
+export default Navigation;