nilva-challenge · hamed0zabihi · Dec 4, 2021
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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "nilva",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.24.0",
+    "bootstrap": "^5.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-loading": "^2.0.3",
+    "react-redux": "^7.2.6",
+    "react-router": "^6.0.2",
+    "react-router-dom": "^6.0.2",
+    "react-scripts": "4.0.3",
+    "reactstrap": "^9.0.1",
+    "redux": "^4.1.2",
+    "redux-thunk": "^2.4.1",
+    "web-vitals": "^1.1.2"
+  },
+  "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"
+    ]
+  }
+}
diff --git a/public/images/fav.ico b/public/images/fav.ico
diff --git a/public/images/logo.png b/public/images/logo.png
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%/images/fav.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%/images/logo.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>nilva-challenge</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/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/component/country/MutualNeighbors.jsx b/src/component/country/MutualNeighbors.jsx
@@ -0,0 +1,86 @@
+import { Row, Col, Badge, Alert } from "reactstrap";
+import { useSelector } from "react-redux";
+import ReactLoading from "react-loading";
+
+const MutualNieghbors = () => {
+  const {
+    commonNeighborsUniqeCountry,
+    countriesNeighbors,
+    isFetching,
+    isLoading,
+    uniqCountries,
+  } = useSelector((state) => state.country);
+  const notEmptyNeighbors = commonNeighborsUniqeCountry.filter(
+    (el) => el.neighbor != ""
+  );
+
+  //   function generate seprate neighbors :
+  //   { name: "iran", neighbor: ["turkey","iraq"] }  to :
+  //   { name: "iran", neighbor: "turkey" },{ name: "iran", neighbor: "iraq" }
+
+  const pairNeghbors = notEmptyNeighbors
+    .map((el) =>
+      el.neighbor
+        ?.map((item) => {
+          return { name: el.name, neighbor: item };
+        })
+        .flat()
+    )
+    .flat();
+
+  // We want to show the mutual neighbors once
+  // one of
+  // { name: "iran", neighbor: "turkey" }   or   { name: "turkey", neighbor: "iran" }
+  // select one of mutual neighbors with index
+  // function return on of two mutual index
+
+  const indexOfMutual = (obj, arr, index) => {
+    let indexis = arr.findIndex(
+      (el) => el.name === obj.neighbor && el.neighbor === obj.name
+    );
+    if (indexis !== -1 && indexis > index) return indexis;
+  };
+
+  const allIndexMutual = pairNeghbors
+    .map((el, index) => indexOfMutual(el, pairNeghbors, index))
+    .filter((item) => item);
+
+  const mutual = pairNeghbors.filter((el, index) =>
+    allIndexMutual.every((els) => els !== index)
+  );
+
+  return (
+    <Col>
+      {!isFetching &&
+      !isLoading &&
+      countriesNeighbors.length >= uniqCountries.length ? (
+        <Row className="d-flex align-item-center">
+          {mutual.length ? (
+            <Col xs={12} className=" d-flex justify-content-center">
+              mutual neighbor
+            </Col>
+          ) : (
+            <Alert color="warning">no matual neighbors</Alert>
+          )}
+          <Col className=" d-flex justify-content-center py-2">
+            {mutual.length ? (
+              <Alert color="info">
+                {mutual.map((el, index) => (
+                  <Badge color="success" pill key={index} className="mx-1">
+                    {el.name} - {el.neighbor}
+                  </Badge>
+                ))}
+              </Alert>
+            ) : (
+              ""
+            )}
+          </Col>
+        </Row>
+      ) : (
+        <ReactLoading type="spin" color="red" height={36} width={36} />
+      )}
+    </Col>
+  );
+};
+
+export default MutualNieghbors;
diff --git a/src/component/country/Neighbors.jsx b/src/component/country/Neighbors.jsx
@@ -0,0 +1,69 @@
+import { useSelector } from "react-redux";
+import { Col, Badge } from "reactstrap";
+import findNeigbors from "../utils/country/findNeighbors";
+
+const Neighbors = ({ name }) => {
+  const { countriesNeighbors, uniqCountries } = useSelector(
+    (state) => state.country
+  );
+
+  // select unique contries with neighbors
+  const uniqCountriesWithNeighbors = uniqCountries
+    .map((el) =>
+      countriesNeighbors.filter((els) => {
+        if (Object.keys(els) == el) {
+          return els;
+        }
+      })
+    )
+    .flat();
+  // This country is a neighbor of another country on this list
+  // countries have this country in neighbors
+  const neighborsCountry = findNeigbors(name, uniqCountriesWithNeighbors);
+  // filter neighbors
+  const countryWithNeighbors = countriesNeighbors
+    .filter((els) => {
+      if (Object.keys(els) == name) {
+        return els;
+      }
+    })
+    .flat();
+  const c = countryWithNeighbors[0];
+  const countryNeighbors = Object.values(c).flat();
+
+  return (
+    <Col>
+      <Col>
+        <Col>
+          {countryNeighbors.map((el) => (
+            <Badge color="secondary" pill key={el}>
+              {el}
+            </Badge>
+          ))}
+        </Col>
+        <Col>
+          {neighborsCountry.length ? (
+            <Col>
+              <span> {name} is one of </span>
+              {neighborsCountry.map((el) => (
+                <div
+                  key={el}
+                  className=" d-inline-flex justify-content-center align-items-center"
+                >
+                  <Badge pill color="success">
+                    {el}
+                  </Badge>
+                </div>
+              ))}
+              <span> neighbors on this list</span>
+            </Col>
+          ) : (
+            ""
+          )}
+        </Col>
+      </Col>
+    </Col>
+  );
+};
+
+export default Neighbors;
diff --git a/src/component/country/UniqCountries.jsx b/src/component/country/UniqCountries.jsx
@@ -0,0 +1,53 @@
+import { useSelector } from "react-redux";
+import { Row, Col, ListGroup, ListGroupItem, Badge } from "reactstrap";
+import ReactLoading from "react-loading";
+import isExistKeyArrayObjects from "../utils/country/isExistKeyArrayObjects";
+import Neighbors from "./Neighbors";
+import MutualNieghbors from "./MutualNeighbors";
+
+const UniqCountries = () => {
+  const { uniqCountries, countriesNeighbors, isLoading, isFetching } =
+    useSelector((state) => state.country);
+
+  return (
+    <Row>
+      {!isFetching ? (
+        <>
+          <Row>
+            <Col>
+              {uniqCountries.map((name, index) => (
+                <ListGroup key={name}>
+                  <ListGroupItem>
+                    <Badge color="info" pill>
+                      {index + 1}
+                    </Badge>
+                    {name}
+                    {!isLoading &&
+                    countriesNeighbors.length >= uniqCountries.length &&
+                    isExistKeyArrayObjects(countriesNeighbors, name) ? (
+                      <Neighbors name={name} />
+                    ) : (
+                      <ReactLoading
+                        type="spin"
+                        color="red"
+                        height={36}
+                        width={36}
+                      />
+                    )}
+                  </ListGroupItem>
+                </ListGroup>
+              ))}
+            </Col>
+          </Row>
+          <Row className="py-5">
+            <MutualNieghbors />
+          </Row>
+        </>
+      ) : (
+        <ReactLoading type="spin" color="#2080f3" height={36} width={36} />
+      )}
+    </Row>
+  );
+};
+
+export default UniqCountries;
diff --git a/src/component/styles/ButtonIncDec/ButtonIncDec.jsx b/src/component/styles/ButtonIncDec/ButtonIncDec.jsx
@@ -0,0 +1,17 @@
+import { Input } from "reactstrap";
+
+const ButtonIncDec = ({ handleClick, defaultData }) => {
+  return (
+    <>
+      <Input
+        type="number"
+        min={2}
+        max={100}
+        defaultValue={defaultData}
+        onChange={(e) => handleClick(e)}
+      />
+    </>
+  );
+};
+
+export default ButtonIncDec;
diff --git a/src/component/styles/mainLayout/FooterSection.jsx b/src/component/styles/mainLayout/FooterSection.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Container, Col } from "reactstrap";
+
+const FooterSection = () => {
+  return (
+    <Container fluid className="d-flex  navbar fixed-bottom bg-black">
+      <Col className=" text-center">
+        <p className="text-white m-auto">footer section</p>
+      </Col>
+    </Container>
+  );
+};
+
+export default FooterSection;
diff --git a/src/component/styles/mainLayout/HeaderSection.jsx b/src/component/styles/mainLayout/HeaderSection.jsx
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { Container, Navbar, NavbarToggler } from "reactstrap";
+import { Link } from "react-router-dom";
+
+const HeaderSection = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen(!isOpen);
+  return (
+    <header>
+      <Container fluid className="px-0">
+        <div className="items-align-center">
+          <Navbar expand="md" className="navbar-dark bg-black  px-4 ">
+            <Link to="/" className="navbar-brand mx-auto">
+              <img src="../images/fav.ico" alt="logo" width="32" />
+            </Link>
+            <NavbarToggler onClick={toggle} />
+          </Navbar>
+        </div>
+      </Container>
+    </header>
+  );
+};
+
+export default HeaderSection;