Commit 0feacfec authored by Ingri Holm Nygaardsmoen's avatar Ingri Holm Nygaardsmoen
Browse files

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

parent 7c1c3c3a
......@@ -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(
......
......@@ -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>
}
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
......@@ -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
export interface Country{
_id: string,
native: string,
continent: string,
capital: string,
......
......@@ -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
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;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment