Bruker kan oppdatere favorite-feltet (m feil) #10

project-3/backend/src/app.js

@@ -11,6 +11,7 @@ const app = express();
 app.use(function(req, res, next) {
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+    res.header("Access-Control-Allow-Methods", "DELETE, POST, GET, OPTIONS")
     next();
   });
 app.use(

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

@@ -3,6 +3,8 @@ import { Country } from '../../interfaces/Country';
 import './CountryCard.css';
 import Card from 'react-bootstrap/Card'
 import { store } from './Store';
+import FavoriteStar from "./FavoriteStar";
+import { localStore, addCountry } from "../../webstorage"
 
 type IProps = {
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void,
@@ -28,15 +30,14 @@ export const CountryCard: FunctionComponent<IProps> = ({
         </Card.Text>
         {active && <>
         <Card.Text>Capital: {country.capital}</Card.Text>
-        <Card.Text>Currecy: {country.currency}</Card.Text>
+        <Card.Text>Currency: {country.currency}</Card.Text>
         <Card.Text>Languages: 
-        {country.languages.map((language => " " + language))}
-        </Card.Text>
-        <Card.Text>Favorite: {country.favorite}</Card.Text>
-        
+        {country.languages.map((language => " " + language))}</Card.Text>
+        <Card.Text><FavoriteStar id={country._id} />Favorite: {country.favorite}</Card.Text>
+
         </>
         }
-      
+
     </Card.Body>
   </Card>
 }

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

+import React, { useState } from "react";
+import { saveData } from "../../utils/APIUtil";
+import { localStore, addCountry } from "../../webstorage"
+
+//Inspired by https://dev.to/michaelburrows/create-a-custom-react-star-rating-component-5o6
+
+const FavoriteStar: React.FC<{id: string}> = ({id}) => {
+  const [favorite, setFavorite] = useState(0);
+  return (
+    <div className="favorite-star">
+       {[...Array(1)].map((star, index) => {
+        index += 1;
+        return (
+          <button
+            type="button"
+            key={index}
+            className={index <= favorite ? "on" : "off"}
+            onClick={() => {setFavorite(index); 
+                saveData(id);
+                /*if(localStorage.getItem("favorites")!=null) {
+                  localStore(addCountry(country.name, JSON.parse(localStorage.getItem("favorites")!)))
+                }*/
+              }
+            }
+          >
+            <span className="star">&#9733;</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+  export default FavoriteStar;
\ No newline at end of file

project-3/src/components/header/Header.css

@@ -25,4 +25,17 @@ header{
   .Header__Content{
     margin-left: 1.5rem;
   }
+}
+
+button {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+.on {
+  color: #000;
+}
+.off {
+  color: #ccc;
 }
\ No newline at end of file

project-3/src/interfaces/Country.ts

 export interface Country{
+    _id: string,
     native: string,
     continent: string, 
     capital: string, 

project-3/src/utils/APIUtil.tsx

@@ -3,7 +3,7 @@ import axios, {AxiosResponse} from 'axios';
 import { Country } from '../interfaces/Country';
 
 export function getData(): Promise<Country[]> {
-    return axios.get('http://localhost:3001/graphql?query={country{name, native, continent, capital, currency, languages, favorite}}')
+    return axios.get('http://localhost:3001/graphql?query={country{_id, name, native, continent, capital, currency, languages, favorite}}')
         .then((response: AxiosResponse) => {
             console.log(response.data);
             console.log(response.data.data.country[0]);
@@ -11,6 +11,17 @@ export function getData(): Promise<Country[]> {
         });
 }
 
-/*export function saveData(ID?????): ???? {
-    return axios.post('http://localhost:3001/graphql', {query: `mutation updateCountry() { updateCountry()}`)
-}*/
\ No newline at end of file
+export function saveData(_id:String): Promise<Country> {
+    let config = {
+        headers: {
+          "Content-Type": "application/json",
+          'Access-Control-Allow-Origin': '*',
+          }
+        }
+    return axios.post('http://localhost:3001/graphql?', 
+    {query: `mutation {
+            updateFavorite(input:{_id:"${_id}"}) 
+            {name, favorite}
+        }`},
+    config);
+}
\ No newline at end of file

project-3/src/webstorage.tsx

+import { Country } from './interfaces/Country';
+
+//Store favorites of user
+export function localStore(favorites: string[]) {
+    if (typeof(Storage) !== "undefined") {
+      // Store the state
+      localStorage.setItem("favorites", JSON.stringify(favorites));
+      // Retrieve the previous state
+      let storedState = localStorage.getItem("favorites");
+      return storedState;
+    } 
+    //If the browser has no support for web storage
+    else {
+      alert("Sorry, your browser does not support Web Storage...");
+    }
+}
+
+export function addCountry(name: string, favoriteList: string[]) {
+  if (!(favoriteList.includes(name))) {
+    favoriteList.push(name);
+  }
+  return favoriteList;
+}