Merge branch '8-lag-sokebar-med-filtrerings-og-sorteringsfunksjoner' of...

Merge branch '8-lag-sokebar-med-filtrerings-og-sorteringsfunksjoner' of https://gitlab.stud.idi.ntnu.no/it2810-h21/team-28/project-3 into Hent-Data-Fra-Backend-Med-Api

project-3/package.json

@@ -45,5 +45,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "cypress": "^8.7.0",
+    "jest": "^27.3.1"
   }
 }

project-3/src/App.test.tsx

 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import { CardContainer } from './components/display/CardContainer';
+import Layout from './components/Layout';
+import ReactDOM from 'react-dom';
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+
+  const { getByText } = render(
+  <div className="App">
+       <Layout title="s">
+       <CardContainer/>
+       </Layout>
+
+    </div>
+
+  );
+
+  const SearchButton = getByText("Search");
+  expect(SearchButton).toBeInTheDocument();
+
 });
+
+test("it renders without crashing", () => {
+  const spanTest = document.createElement("li");
+  ReactDOM.render(
+  <div className="App">
+  <Layout title="s">
+  <CardContainer/>
+  </Layout>
+</div>,
+  spanTest
+  );
+
+  ReactDOM.unmountComponentAtNode(spanTest);
+});
+
+

project-3/src/components/display/CountryCard.tsx

@@ -22,7 +22,7 @@ export const CountryCard: FunctionComponent<IProps> = ({
     onClick={() => {store.getState().value!==id ? store.dispatch({ type: 'setState', newValue: id }) : store.dispatch({ type: 'setState', newValue: -1 });}}
     bg="dark">
     <Card.Body>
-      <Card.Title>{country.name}</Card.Title>
+      <Card.Title>{"ddd"+ country.name}</Card.Title>
       <Card.Text>
         {country.continent}
         </Card.Text>

project-3/src/components/searchbar/ContinentCheckbox.css

+.ContinentCheckbox{
+    display: flex;
+    align-items: flex-start;
+    gap:30px;
+    margin-top: 200px;
+   
+}
\ No newline at end of file

project-3/src/components/searchbar/ContinentCheckbox.test.tsx

+import { fireEvent, getByTestId, render,screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React, { useState } from "react";
+import App from "../../App";
+import { ContinentCheckbox } from "./ContinentCheckbox";
+
+
+
+
+
+  
+  
+
+describe("<ContinentCheckbox />", () => {
+    
+    test('render component', () => {
+    render(<ContinentCheckbox />);
+
+    const asia = screen.getByText("Asia");
+    expect(asia).toBeInTheDocument();
+    expect(asia).not.toBeChecked();
+    userEvent.click(asia);
+    //expect(asia.getAttribute).toBeFalsy;
+        
+    });
+
+  
+})

project-3/src/components/searchbar/ContinentCheckbox.tsx

+import React, { FunctionComponent, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import { getFilter } from '../../utils/APIUtil';
+import { searchbarStore } from './SearchbarStore';
+
+//import './CountryCard.css';
+
+
+
+export const ContinentCheckbox: FunctionComponent = ({ 
+}) => {  
+  //interface iLand {name: string; checked: boolean;}
+  //const land: iLand[] = [{"Asia",true},{ "EU",true}, {"Amerika",true}]
+  const [checkedAsia, setCheckedAsia] = useState(false)
+  const [checkedAfrika, setCheckedAfrika] = useState(false)
+  const [checkedEuropa, setCheckedEuropa] = useState(false)
+  const [checkedNordAmerika, setCheckedNordAmerika] = useState(false)
+  const [checkedSorAmerika, setCheckedSorAmerika] = useState(false)
+  const [checkedOseania, setCheckedOseania] = useState(false)
+
+
+
+  const handleClick = () => { 
+    let countrylist:string[] =[]
+    //send call
+    if (checkedAsia){
+      countrylist.push("asia")
+
+    }
+
+    getFilter('{country(continent:'+ countrylist+'){name, native, continent, capital, currency, languages}}')
+  }
+
+   
+
+    
+    
+//lage usestate for asia og endrer seg. 
+  //endre state
+  //
+  //
+  return <>
+  <div className="ContinentCheckbox"></div>
+    <Form.Check type="checkbox" label="Asia" id="Asia" onClick={() => {setCheckedAsia(!checkedAsia);handleClick();}} />
+    <Form.Check type="checkbox" label="Europa" onClick={() => {setCheckedEuropa(!checkedEuropa); handleClick()}} />
+    <Form.Check type="checkbox" label="Afrika" onClick={() => {setCheckedAfrika(!checkedAfrika);handleClick()}} />
+    <Form.Check type="checkbox" label="Sør-Amerika" onClick={() =>{setCheckedSorAmerika(!checkedSorAmerika); handleClick()}} />
+    <Form.Check type="checkbox" label="Nord-Amerika" onClick={() =>{setCheckedNordAmerika(!checkedNordAmerika); handleClick()}} />
+    <Form.Check type="checkbox" label="Oseania" onClick={() =>{setCheckedOseania(!checkedOseania); handleClick()}} />
+  </>
+}
+
+

project-3/src/components/searchbar/Filter.tsx

 import { CollapseFilled, ExpandFilled, Settings } from '@navikt/ds-icons';
 import React, { FunctionComponent, useState } from 'react';
-import { Button } from 'react-bootstrap';
+import { Button, Form } from 'react-bootstrap';
+import { ContinentCheckbox } from './ContinentCheckbox';
 import './Filter.css';
+import './ContinentCheckbox.css'
+
 type IProps = {}
 export const Filter: FunctionComponent<IProps> = () => {  
 
   const [hidden, setHidden] = useState(true);
   const filterOptions = <>
-  <Button variant="secondary">Name</Button>
-  <Button variant="secondary">Official languages</Button>
-  <Button variant="secondary">Option 3</Button>
+
+
+  <div className={"Sorting"}>
+    <Button variant="secondary">Name</Button>
+    <Button variant="secondary">Official languages</Button>
+    <Button variant="secondary">Option 3</Button>
+  </div>
+  <div className={"ContinentCheckbox"}>
+    <ContinentCheckbox/>
+
+   
+  </div>
   </>;
 
   return (

project-3/src/components/searchbar/__snapshots__/searchbar.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FocusInput matches snapshot 1`] = `
+<div
+  class="searchbar"
+>
+  <input
+    class="form-control"
+    placeholder="Enter Country"
+    type="text"
+  />
+  <div
+    class="input-group-append"
+  >
+    <button
+      class="btn btn-outline-secondary"
+      id="search_button"
+      type="button"
+    >
+       Search
+    </button>
+  </div>
+</div>
+`;

project-3/src/components/searchbar/countries.json

+[
+{
+    "AD": {
+      "name": "Andorra",
+      "native": "Andorra",
+      "phone": "376",
+      "continent": "EU",
+      "capital": "Andorra la Vella",
+      "currency": "EUR",
+      "languages": [
+        "ca"
+      ]
+    },
+    "AE": {
+      "name": "United Arab Emirates",
+      "native": "دولة الإمارات العربية المتحدة",
+      "phone": "971",
+      "continent": "AS",
+      "capital": "Abu Dhabi",
+      "currency": "AED",
+      "languages": [
+        "ar"
+      ]
+    },
+    "AF": {
+      "name": "Afghanistan",
+      "native": "افغانستان",
+      "phone": "93",
+      "continent": "AS",
+      "capital": "Kabul",
+      "currency": "AFN",
+      "languages": [
+        "ps",
+        "uz",
+        "tk"
+      ]
+    },
+    "AG": {
+      "name": "Antigua and Barbuda",
+      "native": "Antigua and Barbuda",
+      "phone": "1268",
+      "continent": "NA",
+      "capital": "Saint John's",
+      "currency": "XCD",
+      "languages": [
+        "en"
+      ]
+    },
+    "AI": {
+      "name": "Anguilla",
+      "native": "Anguilla",
+      "phone": "1264",
+      "continent": "NA",
+      "capital": "The Valley",
+      "currency": "XCD",
+      "languages": [
+        "en"
+      ]
+    }
+
+}
+]
\ No newline at end of file

project-3/src/components/searchbar/searchbar.test.tsx

+import React from "react";
+import {  fireEvent, render } from "@testing-library/react";
+
+import { Searchbar } from './searchbar';
+import App from "../../App";
+import { Provider } from "react-redux";
+import { searchbarStore } from "./SearchbarStore";
+
+
+
+
+        test('FocusInput matches snapshot', () => {
+            const { container } = render(<Searchbar />)
+            expect(container.firstChild).toMatchSnapshot();
+          });
+
+          describe('Component: Searchvar', () => {
+            const items =["Norway", "India", "Germany"];
+
+            describe("<searchbar />", () => {
+
+      //  test('Check placholer value', () => {
+          //  const container = render(<Searchbar />)
+           // expect(container.find('.searchbar').at(0).props().placeholder).toEqual("Enter Country")
+         
+
+
+        });
+
+          
+          
+           
+          
+             
+          });
+
+          
+   
+          
+          
+
+
+
+
+
+
+
+
+
+
+function shallow(arg0: JSX.Element) {
+    throw new Error("Function not implemented.");
+}
+         /*
+         test('calls correct function on click', () => {
+            const onClick = jest.fn();
+            const jo = render(getById("search_button") />)
+            expect(onClick).toHaveBeenCalled();
+
+
+
+
+
+          });
+
+         
+          */
+      
+     
+
+    //});
+
+

project-3/src/components/searchbar/searchbar.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Country } from '../../interfaces/Country';
 import './SearchbarStore.tsx'
 import { searchbarStore } from './SearchbarStore';
+import countriesJson from './countries.json'
 import { Search } from '@navikt/ds-icons';
 import { getAllData } from '../../utils/APIUtil';
 
@@ -13,6 +14,31 @@ interface IState {
     active: boolean,
     items: string[]
 }
+const jsonData = JSON.stringify(countriesJson)
+const jsnobj= JSON.parse(jsonData)
+
+
+//var newarray: Country[]= [];
+
+//for (const [key, value] of Object.entries(jsnobj[0])) {
+    //var test =(`${key}: ${value}`);
+ // }
+
+//for (let key in jsnobj[0]){
+    //let value = (Object.keys(jsnobj[0]))
+
+    //console.log(value)
+    //newarray.push(JSON.parse(key) as Country)
+//}
+
+
+
+    
+
+
+
+//const newdata:Country[] = jsonData
+
 
 export class Searchbar extends React.Component<IProps, IState> {
     constructor(props: IState) {
@@ -39,10 +65,10 @@ export class Searchbar extends React.Component<IProps, IState> {
                 
                 <input type="text" className="form-control" placeholder="Enter Country" />
                 <div className="input-group-append">
-                    <button onClick={() => this.onSearch()}
-                        className="btn btn-outline-secondary" type="button"><Search/>Search</button>
+                    <button id="search_button" onClick={() => this.onSearch()}
+                        className="btn btn-outline-secondary" type="button"> Search</button>
                 </div>
-                {this.state.active && <div>Jeg er active</div>}
+                {this.state.active }
             </div>)
     }
-}
\ No newline at end of file
+}

project-3/src/interfaces/Country.ts

@@ -5,4 +5,4 @@ export interface Country{
     currency: string, 
     languages: string[]
     name: string,
-}
\ No newline at end of file
+}