Merge branch 'master' of...

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

.gitignore

+node_modules
+package-lock.json
\ No newline at end of file

node_modules/.yarn-integrity

@@ -6,6 +6,7 @@
   "flags": [],
   "linkedModules": [],
   "topLevelPatterns": [
+    "@types/axios@^0.14.0",
     "bootstrap@5.1.1",
     "react-bootstrap@^2.0.0-rc.0"
   ],
@@ -22,6 +23,7 @@
     "@restart/hooks@^0.3.26": "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.27.tgz#91f356d66d4699a8cd8b3d008402708b6a9dc505",
     "@restart/hooks@^0.4.0": "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.1.tgz#716b1fd7a67650a6d4ed441b5d704b4f73ca2612",
     "@restart/ui@^0.2.3": "https://registry.yarnpkg.com/@restart/ui/-/ui-0.2.3.tgz#8b68aa2ca07af799a65b288cc3c6039915c46a4c",
+    "@types/axios@^0.14.0": "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46",
     "@types/invariant@^2.2.33": "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be",
     "@types/prop-types@*": "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11",
     "@types/prop-types@^15.7.3": "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11",
@@ -31,6 +33,7 @@
     "@types/react@>=16.9.11": "https://registry.yarnpkg.com/@types/react/-/react-17.0.30.tgz#2f8e6f5ab6415c091cc5e571942ee9064b17609e",
     "@types/scheduler@*": "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39",
     "@types/warning@^3.0.0": "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52",
+    "axios@*": "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6",
     "bootstrap@5.1.1": "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.1.tgz#9d6eed81e08feaccedf3adaca51fe4b73a2871df",
     "classnames@^2.3.1": "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e",
     "csstype@^3.0.2": "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b",
@@ -38,6 +41,7 @@
     "dom-helpers@^5.0.1": "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902",
     "dom-helpers@^5.2.0": "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902",
     "dom-helpers@^5.2.1": "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902",
+    "follow-redirects@^1.14.4": "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379",
     "invariant@^2.2.4": "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6",
     "js-tokens@^3.0.0 || ^4.0.0": "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499",
     "loose-envify@^1.0.0": "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf",

package.json

 {
   "dependencies": {
+    "@types/axios": "^0.14.0",
     "bootstrap": "5.1.1",
     "react-bootstrap": "^2.0.0-rc.0"
   }

project-3/backend/package.json

+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "start": "nodemon ./src/app.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.17.1",
+    "express-graphql": "^0.12.0",
+    "graphql": "^15.7.0",
+    "mongoose": "^6.0.12",
+    "nodemon": "^2.0.14"
+  }
+}

project-3/backend/src/app.js

+
+const express = require('express');
+const mongoose = require('mongoose');
+const graphqlResolver = require('./resolver.js');
+
+const graphqlSchema = require('./schema');
+const graphqlHTTP = require('express-graphql').graphqlHTTP;
+
+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");
+    next();
+  });
+app.use(
+    '/graphql',
+    graphqlHTTP({
+        schema: graphqlSchema,
+        rootValue: graphqlResolver,
+        graphiql: true,
+    })
+);
+
+const uri = 'mongodb://bruker1:gruppe28@it2810-28.idi.ntnu.no:27017/it2810?authSource=it2810';
+
+const options = { useNewUrlParser: true, useUnifiedTopology: true };
+mongoose.connect(uri, options)
+        .then(() => app.listen(3001, console.log("Server is active")))
+        .catch((error) => {
+            throw error
+        });
+
+

project-3/backend/src/connection.tsx

+//Code fetched from https://www.youtube.com/watch?v=9OPP_1eAENg&list=PL4cUxeGkcC9jpvoYriLI0bY8DOgWZfi6u&index=1
+import mongoose from 'mongoose';
+
+//mongoose.Promise = global.Promise;
+
+function connectDB(done:Function){
+    // Connect to MongoDB
+    mongoose.connect('mongodb://bruker1:gruppe28@it2810-28.idi.ntnu.no:27017/it2810?authSource=it2810');
+
+    mongoose.connection.once('open', function() {
+        console.log('Connection has been made')
+        done();
+    }).on('error', function(error) {
+        console.log('Connection error:', error);
+    });
+};
+
+export default connectDB;
+/*beforeEach(function(done){
+    mongoose.connection.collections.countries.drop(function(){
+        done();
+    });
+})*/
\ No newline at end of file

project-3/backend/src/country.js

+//import mongoose from 'mongoose';
+const mongoose = require('mongoose');
+
+const Schema = mongoose.Schema;
+
+// Create Schema and Model
+
+const CountrySchema = new Schema({
+    name: String,
+    native: String,
+    continent: String,
+    capital: String,
+    currency: String,
+    languages: Array
+});
+
+const Country = mongoose.model('country', CountrySchema);
+
+module.exports = Country;
\ No newline at end of file

project-3/backend/src/resolver.js

+//import Country from './country';
+const Country = require('./country');
+
+module.exports = {
+    country: async () => {
+        try {
+            const countryFetched = await Country.find();
+            return countryFetched.map((country) => {
+                return {
+                    ...country._doc,
+                    _id: country._id,
+                };
+            });
+        } catch (error) {
+            throw error;
+        }
+    }
+}

project-3/backend/src/schema.js

+//import { buildSchema } from 'graphql';
+const { buildSchema } = require('graphql');
+
+module.exports = buildSchema(`
+    type Country {
+        _id: ID!
+        name: String!
+        native: String
+        continent: String!
+        capital: String!
+        currency: String
+        languages: [String]
+    }
+
+    input CountryInput {
+        navn: String!
+        capital: String!
+    }
+
+    type Query {
+        country:[Country!]
+    }
+
+    type Mutation {
+        createCountry(country:CountryInput): Country
+    }
+
+    schema {
+        query: Query
+        mutation: Mutation
+    }
+`);
\ No newline at end of file

project-3/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@navikt/ds-icons": "^0.5.8",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

project-3/src/components/Layout.css

@@ -6,4 +6,7 @@
   align-items: left;
   font-size: calc(10px + 2vmin);
   color: white;
+}
+.Layout__Content{
+  margin-top: 1rem;
 }
\ No newline at end of file

project-3/src/components/Layout.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Header } from './header/Header';
 import "./Layout.css"
 import { Searchbar } from './searchbar/searchbar';
+import { Filter } from './searchbar/Filter';
+import { getData } from '../utils/APIUtil';
 
 interface IProps {
   title: string
@@ -10,12 +12,13 @@ const Layout: React.FC<IProps> = ({
   title,
   children 
 }) => {
+    getData()
     return (
     <div className="Layout">
       <React.Fragment >
           <Header>
             <Searchbar/>
-          
+            <Filter/>
           </Header>
           <div className="Layout__Content">
               <main>{children}</main>

project-3/src/components/display/CardContainer.css

+@media only screen and (max-width: 600px) {
+  .Header__Logo {
+    display: none;
+  }
+}
\ No newline at end of file

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

@@ -16,7 +16,7 @@ export const CardContainer: FunctionComponent<IProps> = () => {
 
   return (
     <Container>
-      <Row xs={1} md={2} className="justify-content-md-center">
+      <Row xs={2} md={4} className="justify-content-md-center">
         <Provider store={store}>
         {cardData.map((country_data, index) => 
           <Col md="auto" key={index}>

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

@@ -7,4 +7,21 @@
     width: 37.5rem;
     height: 20rem;
     transition: all .2s ease-in-out;
-}
\ No newline at end of file
+}
+@media only screen and (max-width: 1000px) {
+    .CountryCard__card__false{
+        width: 14rem;
+        height: 8rem;
+        transition: all .2s ease-in-out;
+    }
+    .CountryCard__card__true{
+        width: 29.5rem;
+        transition: all .2s ease-in-out;
+    }
+  }
+  @media only screen and (max-width: 800px) {
+    .CountryCard__card__true{
+        width: 14rem;
+        transition: all .2s ease-in-out;
+    }
+  }
\ No newline at end of file

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

@@ -24,11 +24,15 @@ export const CountryCard: FunctionComponent<IProps> = ({
     <Card.Body>
       <Card.Title>{"ddd"+ country.name}</Card.Title>
       <Card.Text>
-        {"ppl: " + country.native}
+        {country.continent}
         </Card.Text>
         {active && <>
-        <Card.Text>Area: {country.continent}</Card.Text>
-        <Card.Text>Name: {country.name}</Card.Text>
+        <Card.Text>Capital: {country.capital}</Card.Text>
+        <Card.Text>Currecy: {country.currency}</Card.Text>
+        <Card.Text>Languages: 
+        {country.languages.map((language => " " + language))}
+        </Card.Text>
+        
         </>
         }
       

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

 .Header__Logo {
   height: 20vmin;
   pointer-events: none;
+  margin: 15px;
 }
 header{
   display: flex;
   flex-direction: left;
   align-content: center;
   content: initial;
+  background-color: rgb( 28, 40, 51 )
 }
 .Header__Content{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 3px solid green; 
-  width: calc(60vw);
+  margin-top: 15px;
+  width: 100%;
   height: 20vmin;
 }
+@media only screen and (max-width: 500px) {
+  .Header__Logo {
+    display: none;
+  }
+  .Header__Content{
+    height: 8rem;
+  }
+  .Header__Content{
+    margin-left: 1.5rem;
+  }
+}
\ No newline at end of file

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

 import React from 'react';
-import logo from '../../logo.svg';
+import globe from '../../res/globe2.png';
 import "./Header.css"
 
 export const Header: React.FC = ({ 
@@ -7,7 +7,7 @@ export const Header: React.FC = ({
 }) => {
 return (
     <header>
-        <img src={logo} alt="Logo" className="Header__Logo"/>
+        <img src={globe} alt="Logo" className="Header__Logo"/>
         <div className="Header__Content">{children}</div>
     </header>
     );

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

+.Filter__Title, .Filter__Container__closed{
+ display: flex;
+ width: 20rem;
+ margin-left: 2vw;
+ margin-top: 6px;
+ align-items: center;
+ z-index: 20;
+}
+.Filter__Big_Container{
+  display: inline-block;
+  position: absolute;
+  left: 40rem;
+  top: 2rem;
+  z-index: 20;
+}
+.Filter__Title, .Filter__Container__closed:hover {
+  cursor: pointer;
+}
+.Filter__Options{
+  margin-left: 2vw;
+  display: grid;
+  width: 15rem;
+  height: 9rem;
+  z-index: 20;
+}
+.Filter__Big_Buttons{
+  display: flex;
+  flex-flow: row;
+  height: 10vmin;
+  width: 50vmin;
+  justify-Content: space-around;
+  align-Items: center;
+
+}
+Button{
+  margin: 5px;
+  z-index: 20;
+}
+@media only screen and (max-width: 1000px) {
+  .Filter__Big_Container{
+    display: none;
+  }
+}
+@media only screen and (min-width: 1000px) {
+  .Filter__Container, .Filter__Container__closed{
+    display: none;
+  }
+}