siste

Oving 03/.babelrc

+{
+  "plugins": [["@babel/plugin-proposal-class-properties", { "loose": true }]]
+}

Oving 03/dao/dao.js

+module.exports = class Dao {
+  constructor(pool) {
+    // Dependency Injection
+    this.pool = pool;
+  }
+
+  query(sql, params, callback) {
+    this.pool.getConnection((err, connection) => {
+      console.log("dao: connected to database");
+      if (err) {
+        console.log("dao: error connecting");
+        callback(500, { error: "feil ved ved oppkobling" });
+      } else {
+        console.log("dao: running sql: " + sql);
+        connection.query(sql, params, (err, rows) => {
+          connection.release();
+          if (err) {
+            console.log(err);
+            callback(500, { error: "error querying" });
+          } else {
+            console.log("dao: returning rows");
+            callback(200, rows);
+          }
+        });
+      }
+    });
+  }
+};

Oving 03/dao/sakerdao.js

+// @flow
+
+const Dao = require("./dao.js");
+
+module.exports = class SakerDao extends Dao {
+  //FORSIDE
+  getAll(callback) {
+    super.query(
+      "SELECT id, tittel, tekst, bilde, DATE_FORMAT(dato, '%Y-%m-%d %H:%i') as 'tid', kategori, viktighet FROM saker WHERE viktighet=1 ORDER BY id DESC LIMIT 20",
+      [],
+      callback
+    );
+  }
+
+  //Alle saker uansett viktighet
+  getAll1(callback) {
+    super.query(
+      "SELECT id, tittel, tekst, bilde, DATE_FORMAT(dato, '%Y-%m-%d %H:%i') as 'tid', kategori, viktighet FROM saker ORDER BY id DESC LIMIT 20",
+      [],
+      callback
+    );
+  }
+
+  getOne(id, callback) {
+    super.query(
+      "SELECT id, tittel, tekst, bilde, DATE_FORMAT(dato, '%Y-%m-%d %H:%i') as 'tid', kategori, viktighet FROM saker WHERE id=? LIMIT 20",
+      [id],
+      callback
+    );
+  }
+
+  getNyhet(callback) {
+    super.query(
+      "SELECT id, tittel, tekst, bilde, DATE_FORMAT(dato, '%Y-%m-%d %H:%i') as 'tid', kategori, viktighet FROM saker WHERE kategori='Nyheter' LIMIT 20",
+      [],
+      callback
+    );
+  }
+
+  getFilmogSerier(callback) {
+    super.query(
+      "SELECT id, tittel, tekst, bilde, DATE_FORMAT(dato, '%Y-%m-%d %H:%i') as 'tid', kategori, viktighet FROM saker WHERE kategori='Film og Serier' LIMIT 20",
+      [],
+      callback
+    );
+  }
+
+  getSport(callback) {
+    super.query(
+      "SELECT id, tittel, tekst, bilde, DATE_FORMAT(dato, '%Y-%m-%d %H:%i') as 'tid', kategori, viktighet FROM saker WHERE kategori='Sport' LIMIT 20",
+      [],
+      callback
+    );
+  }
+
+  getGaming(callback) {
+    super.query(
+      "SELECT id, tittel, tekst, bilde, DATE_FORMAT(dato, '%Y-%m-%d %H:%i') as 'tid', kategori, viktighet FROM saker WHERE kategori='Gaming' LIMIT 20",
+      [],
+      callback
+    );
+  }
+
+  createOne(json, callback) {
+    var val = [
+      json.tittel,
+      json.tekst,
+      json.dato,
+      json.bilde,
+      json.kategori,
+      json.viktighet
+    ];
+    super.query(
+      "INSERT INTO saker (tittel, tekst, dato, bilde, kategori, viktighet) VALUES (?,?,?,?,?,?)",
+      val,
+      callback
+    );
+  }
+
+  updateOne(json, id, callback) {
+    var val = [json.tittel, json.tekst, json.bilde, id];
+    super.query(
+      "UPDATE saker SET tittel=?, tekst=?, bilde=? WHERE id=?",
+      val,
+      callback
+    );
+  }
+
+  deleteOne(id, callback) {
+    super.query("DELETE FROM saker WHERE id=?", [id], callback);
+  }
+
+  getSiste(callback) {
+    super.query(
+      "SELECT id, tittel, DATE_FORMAT(dato, '%H:%i') as 'tid' FROM saker ORDER BY id DESC LIMIT 10;",
+      [],
+      callback
+    );
+  }
+};

Oving 03/flow-typed/npm/history_v4.x.x.js

+// flow-typed signature: 540e42745f797051f3bf17a6af1ccf06
+// flow-typed version: 6a3fe49a8b/history_v4.x.x/flow_>=v0.25.x
+
+declare module "history/createBrowserHistory" {
+  declare function Unblock(): void;
+
+  declare export type Action = "PUSH" | "REPLACE" | "POP";
+
+  declare export type BrowserLocation = {
+    pathname: string,
+    search: string,
+    hash: string,
+    // Browser and Memory specific
+    state: {},
+    key: string
+  };
+
+  declare interface IBrowserHistory {
+    length: number;
+    location: BrowserLocation;
+    action: Action;
+    push(path: string, state?: {}): void;
+    push(location: $Shape<BrowserLocation>): void;
+    replace(path: string, state?: {}): void;
+    replace(location: $Shape<BrowserLocation>): void;
+    go(n: number): void;
+    goBack(): void;
+    goForward(): void;
+    listen: Function;
+    block(message: string): typeof Unblock;
+    block(
+      (location: BrowserLocation, action: Action) => string
+    ): typeof Unblock;
+  }
+
+  declare export type BrowserHistory = IBrowserHistory;
+
+  declare type HistoryOpts = {
+    basename?: string,
+    forceRefresh?: boolean,
+    getUserConfirmation?: (
+      message: string,
+      callback: (willContinue: boolean) => void
+    ) => void
+  };
+
+  declare export default (opts?: HistoryOpts) => BrowserHistory;
+}
+
+declare module "history/createMemoryHistory" {
+  declare function Unblock(): void;
+
+  declare export type Action = "PUSH" | "REPLACE" | "POP";
+
+  declare export type MemoryLocation = {
+    pathname: string,
+    search: string,
+    hash: string,
+    // Browser and Memory specific
+    state: {},
+    key: string
+  };
+
+  declare interface IMemoryHistory {
+    length: number;
+    location: MemoryLocation;
+    action: Action;
+    index: number;
+    entries: Array<string>;
+    push(path: string, state?: {}): void;
+    push(location: $Shape<MemoryLocation>): void;
+    replace(path: string, state?: {}): void;
+    replace(location: $Shape<MemoryLocation>): void;
+    go(n: number): void;
+    goBack(): void;
+    goForward(): void;
+    // Memory only
+    canGo(n: number): boolean;
+    listen: Function;
+    block(message: string): typeof Unblock;
+    block((location: MemoryLocation, action: Action) => string): typeof Unblock;
+  }
+
+  declare export type MemoryHistory = IMemoryHistory;
+
+  declare type HistoryOpts = {
+    initialEntries?: Array<string>,
+    initialIndex?: number,
+    keyLength?: number,
+    getUserConfirmation?: (
+      message: string,
+      callback: (willContinue: boolean) => void
+    ) => void
+  };
+
+  declare export default (opts?: HistoryOpts) => MemoryHistory;
+}
+
+declare module "history/createHashHistory" {
+  declare function Unblock(): void;
+
+  declare export type Action = "PUSH" | "REPLACE" | "POP";
+
+  declare export type HashLocation = {
+    pathname: string,
+    search: string,
+    hash: string
+  };
+
+  declare interface IHashHistory {
+    length: number;
+    location: HashLocation;
+    action: Action;
+    push(path: string, state?: {}): void;
+    push(location: $Shape<HashLocation>): void;
+    replace(path: string, state?: {}): void;
+    replace(location: $Shape<HashLocation>): void;
+    go(n: number): void;
+    goBack(): void;
+    goForward(): void;
+    listen: Function;
+    block(message: string): typeof Unblock;
+    block((location: HashLocation, action: Action) => string): typeof Unblock;
+    push(path: string): void;
+  }
+
+  declare export type HashHistory = IHashHistory;
+
+  declare type HistoryOpts = {
+    basename?: string,
+    hashType: "slash" | "noslash" | "hashbang",
+    getUserConfirmation?: (
+      message: string,
+      callback: (willContinue: boolean) => void
+    ) => void
+  };
+
+  declare export default (opts?: HistoryOpts) => HashHistory;
+}

Oving 03/flow-typed/npm/react-router-dom_v4.x.x.js

+// flow-typed signature: 53be1849af6037db65e90a7abc558afe
+// flow-typed version: f4e99ca1ed/react-router-dom_v4.x.x/flow_>=v0.63.x
+
+declare module "react-router-dom" {
+  import type { ComponentType, ElementConfig, Node, Component } from "react";
+
+  declare export var BrowserRouter: Class<
+    Component<{|
+      basename?: string,
+      forceRefresh?: boolean,
+      getUserConfirmation?: GetUserConfirmation,
+      keyLength?: number,
+      children?: Node
+    |}>
+  >;
+
+  declare export var HashRouter: Class<
+    Component<{|
+      basename?: string,
+      getUserConfirmation?: GetUserConfirmation,
+      hashType?: "slash" | "noslash" | "hashbang",
+      children?: Node
+    |}>
+  >;
+
+  declare export var Link: Class<
+    Component<{
+      className?: string,
+      to: string | LocationShape,
+      replace?: boolean,
+      children?: Node
+    }>
+  >;
+
+  declare export var NavLink: Class<
+    Component<{
+      to: string | LocationShape,
+      activeClassName?: string,
+      className?: string,
+      activeStyle?: Object,
+      style?: Object,
+      isActive?: (match: Match, location: Location) => boolean,
+      children?: Node,
+      exact?: boolean,
+      strict?: boolean
+    }>
+  >;
+
+  // NOTE: Below are duplicated from react-router. If updating these, please
+  // update the react-router and react-router-native types as well.
+  declare export type Location = {
+    pathname: string,
+    search: string,
+    hash: string,
+    state?: any,
+    key?: string
+  };
+
+  declare export type LocationShape = {
+    pathname?: string,
+    search?: string,
+    hash?: string,
+    state?: any
+  };
+
+  declare export type HistoryAction = "PUSH" | "REPLACE" | "POP";
+
+  declare export type RouterHistory = {
+    length: number,
+    location: Location,
+    action: HistoryAction,
+    listen(
+      callback: (location: Location, action: HistoryAction) => void
+    ): () => void,
+    push(path: string | LocationShape, state?: any): void,
+    replace(path: string | LocationShape, state?: any): void,
+    go(n: number): void,
+    goBack(): void,
+    goForward(): void,
+    canGo?: (n: number) => boolean,
+    block(
+      callback: (location: Location, action: HistoryAction) => boolean
+    ): void,
+    // createMemoryHistory
+    index?: number,
+    entries?: Array<Location>
+  };
+
+  declare export type Match = {
+    params: { [key: string]: ?string },
+    isExact: boolean,
+    path: string,
+    url: string
+  };
+
+  declare export type ContextRouter = {|
+    history: RouterHistory,
+    location: Location,
+    match: Match,
+    staticContext?: StaticRouterContext
+  |};
+
+  declare type ContextRouterVoid = {
+    history: RouterHistory | void,
+    location: Location | void,
+    match: Match | void,
+    staticContext?: StaticRouterContext | void
+  };
+
+  declare export type GetUserConfirmation = (
+    message: string,
+    callback: (confirmed: boolean) => void
+  ) => void;
+
+  declare export type StaticRouterContext = {
+    url?: string
+  };
+
+  declare export var StaticRouter: Class<
+    Component<{|
+      basename?: string,
+      location?: string | Location,
+      context: StaticRouterContext,
+      children?: Node
+    |}>
+  >;
+
+  declare export var MemoryRouter: Class<
+    Component<{|
+      initialEntries?: Array<LocationShape | string>,
+      initialIndex?: number,
+      getUserConfirmation?: GetUserConfirmation,
+      keyLength?: number,
+      children?: Node
+    |}>
+  >;
+
+  declare export var Router: Class<
+    Component<{|
+      history: RouterHistory,
+      children?: Node
+    |}>
+  >;
+
+  declare export var Prompt: Class<
+    Component<{|
+      message: string | ((location: Location) => string | boolean),
+      when?: boolean
+    |}>
+  >;
+
+  declare export var Redirect: Class<
+    Component<{|
+      to: string | LocationShape,
+      push?: boolean,
+      from?: string,
+      exact?: boolean,
+      strict?: boolean
+    |}>
+  >;
+
+  declare export var Route: Class<
+    Component<{|
+      component?: ComponentType<*>,
+      render?: (router: ContextRouter) => Node,
+      children?: ComponentType<ContextRouter> | Node,
+      path?: string,
+      exact?: boolean,
+      strict?: boolean,
+      location?: LocationShape,
+      sensitive?: boolean
+    |}>
+  >;
+
+  declare export var Switch: Class<
+    Component<{|
+      children?: Node,
+      location?: Location
+    |}>
+  >;
+
+  declare export function withRouter<WrappedComponent: ComponentType<*>>(
+    Component: WrappedComponent
+  ): ComponentType<
+    $Diff<ElementConfig<$Supertype<WrappedComponent>>, ContextRouterVoid>
+  >;
+
+  declare type MatchPathOptions = {
+    path?: string,
+    exact?: boolean,
+    sensitive?: boolean,
+    strict?: boolean
+  };
+
+  declare export function matchPath(
+    pathname: string,
+    options?: MatchPathOptions | string,
+    parent?: Match
+  ): null | Match;
+
+  declare export function generatePath(
+    pattern?: string,
+    params?: Object
+  ): string;
+}

Oving 03/package.json

+{
+  "name": "oving03",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "dependencies": {
+    "babel-eslint": "^10.0.1",
+    "cors": "^2.8.5",
+    "eslint": "^5.9.0",
+    "express": "^4.16.4",
+    "flow-bin": "^0.86.0",
+    "mysql": "^2.16.0",
+    "react": "^16.6.3"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+
+  },
+  "author": "Quan Tran",
+  "license": "ISC"
+}

Oving 03/scripts/enable_babelrc.js

+// Workaround for buggy transform of uninitialized class properties in react-scripts
+
+const fs = require("fs");
+
+const path = "node_modules/react-scripts/config/webpack.config.dev.js";
+
+fs.readFile(path, "utf8", (error, data) => {
+  if (error) {
+    console.error(error);
+    process.exit(1);
+  }
+
+  let result = data.replace(/babelrc: false/g, "babelrc: true");
+  fs.writeFile(path, result, "utf8", error => {
+    if (error) {
+      console.error(error);
+      process.exit(1);
+    }
+  });
+});

Oving 03/server.js

+var express = require("express");
+var mysql = require("mysql");
+var bodyParser = require("body-parser");
+var app = express();
+var apiRoutes = express.Router();
+app.use(bodyParser.json()); // for å tolke JSON
+const SakerDao = require("./dao/sakerdao.js");
+var cors = require("cors");
+app.use(cors());
+
+var pool = mysql.createPool({
+  connectionLimit: 2,
+  host: "mysql.stud.iie.ntnu.no",
+  user: "quannt",
+  password: "UX8fRcx1",
+  database: "quannt",
+  debug: false
+});
+
+let sakerDao = new SakerDao(pool);
+
+//Få alle saker med viktighet 1 (forside)
+app.get("/", (req, res) => {
+  console.log("/forside: fikk request fra klient!");
+  sakerDao.getAll((status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Få alle nyhetssaker uansett viktighet
+app.get("/saker", (req, res) => {
+  console.log("/saker: fikk request fra klient!");
+  sakerDao.getAll1((status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Få spesifikk sak
+app.get("/saker/:id", (req, res) => {
+  console.log("/saker/:id: fikk request fra klient!");
+  sakerDao.getOne(req.params.id, (status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Få alle nyhetssaker
+app.get("/nyheter", (req, res) => {
+  console.log("/nyheter: fikk request fra klient!");
+  sakerDao.getNyhet((status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Få sport
+app.get("/sport", (req, res) => {
+  console.log("/sport: fikk request fra klient!");
+  sakerDao.getSport((status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Gaming
+app.get("/gaming", (req, res) => {
+  console.log("/gaming: fikk request fra klient!");
+  sakerDao.getGaming((status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Film og serier
+app.get("/filmogserier", (req, res) => {
+  console.log("/filmogserier: fikk request fra klient!");
+  sakerDao.getFilmogSerier((status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Ny sak post
+app.post("/saker", (req, res) => {
+  console.log("Fikk POST-request fra klient!");
+  sakerDao.createOne(req.body, (status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Slett en sak
+app.delete("/saker/:id", (req, res) => {
+  console.log("/saker/:id: fikk DELETE request fra klient!");
+  sakerDao.deleteOne(req.params.id, (status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Få de 10 siste (live feed)
+app.get("/livefeed", (req, res) => {
+  console.log("/livefeed: GET request om siste saker!");
+  sakerDao.getSiste((status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+//Oppdatere
+app.put("/saker/:id", (req, res) => {
+  console.log("/saker/:id: fikk PUT request fra klient!");
+  sakerDao.updateOne(req.body, req.params.id, (status, data) => {
+    res.status(status);
+    res.json(data);
+  });
+});
+
+var server = app.listen(8080);

Oving 03/tables.sql

+SET FOREIGN_KEY_CHECKS=0;
+DROP TABLE IF EXISTS saker;
+DROP TABLE IF EXISTS kategorier;
+SET FOREIGN_KEY_CHECKS=1;
+
+CREATE TABLE kategorier (
+kategori VARCHAR (20) NOT NULL,
+PRIMARY KEY (kategori)
+);
+
+CREATE TABLE saker (
+id INT NOT NULL AUTO_INCREMENT,
+tittel VARCHAR (256) NOT NULL,
+tekst TEXT NOT NULL,
+dato TIMESTAMP NOT NULL,
+bilde VARCHAR(250),
+kategori VARCHAR (20) NOT NULL,
+viktighet TINYINT,
+PRIMARY KEY (id),
+FOREIGN KEY (kategori) REFERENCES kategorier(kategori)
+);
+
+Insert into kategorier (kategori) VALUES ('Nyheter'), ('Sport'), ('Gaming'), ('Film og Serier');
+
+INSERT INTO saker (tittel, tekst, bilde, kategori, viktighet) VALUES ('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Film og Serier', 0),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Nyheter', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Sport', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1),
+('Hei på deg', 'Dette er en test', 'https://i.ytimg.com/vi/kS98tDJm7Pw/maxresdefault.jpg', 'Gaming', 1);

Oving 12/.babelrc

+{
+  "plugins": [["@babel/plugin-proposal-class-properties", {"loose": true}]]
+}

Oving 12/.npmrc

+package-lock=false

Oving 12/.prettierrc

+{
+  "printWidth": 120,
+  "singleQuote": true
+}

Oving 12/flow-typed/npm/history_v4.x.x.js

+// flow-typed signature: 540e42745f797051f3bf17a6af1ccf06
+// flow-typed version: 6a3fe49a8b/history_v4.x.x/flow_>=v0.25.x
+
+declare module "history/createBrowserHistory" {
+  declare function Unblock(): void;
+
+  declare export type Action = "PUSH" | "REPLACE" | "POP";
+
+  declare export type BrowserLocation = {
+    pathname: string,
+    search: string,
+    hash: string,
+    // Browser and Memory specific
+    state: {},
+    key: string,
+  };
+
+  declare interface IBrowserHistory {
+    length: number,
+    location: BrowserLocation,
+    action: Action,
+    push(path: string, state?: {}): void,
+    push(location: $Shape<BrowserLocation>): void,
+    replace(path: string, state?: {}): void,
+    replace(location: $Shape<BrowserLocation>): void,
+    go(n: number): void,
+    goBack(): void,
+    goForward(): void,
+    listen: Function,
+    block(message: string): typeof Unblock,
+    block((location: BrowserLocation, action: Action) => string): typeof Unblock,
+  }
+
+  declare export type BrowserHistory = IBrowserHistory;
+
+  declare type HistoryOpts = {
+    basename?: string,
+    forceRefresh?: boolean,
+    getUserConfirmation?: (
+      message: string,
+      callback: (willContinue: boolean) => void,
+    ) => void,
+  };
+
+  declare export default (opts?: HistoryOpts) => BrowserHistory;
+}
+
+declare module "history/createMemoryHistory" {
+  declare function Unblock(): void;
+
+  declare export type Action = "PUSH" | "REPLACE" | "POP";
+
+  declare export type MemoryLocation = {
+    pathname: string,
+    search: string,
+    hash: string,
+    // Browser and Memory specific
+    state: {},
+    key: string,
+  };
+
+  declare interface IMemoryHistory {
+    length: number,
+    location: MemoryLocation,
+    action: Action,
+    index: number,
+    entries: Array<string>,
+    push(path: string, state?: {}): void,
+    push(location: $Shape<MemoryLocation>): void,
+    replace(path: string, state?: {}): void,
+    replace(location: $Shape<MemoryLocation>): void,
+    go(n: number): void,
+    goBack(): void,
+    goForward(): void,
+    // Memory only
+    canGo(n: number): boolean,
+    listen: Function,
+    block(message: string): typeof Unblock,
+    block((location: MemoryLocation, action: Action) => string): typeof Unblock,
+  }
+
+  declare export type MemoryHistory = IMemoryHistory;
+
+  declare type HistoryOpts = {
+    initialEntries?: Array<string>,
+    initialIndex?: number,
+    keyLength?: number,
+    getUserConfirmation?: (
+      message: string,
+      callback: (willContinue: boolean) => void,
+    ) => void,
+  };
+
+  declare export default (opts?: HistoryOpts) => MemoryHistory;
+}
+
+declare module "history/createHashHistory" {
+  declare function Unblock(): void;
+
+  declare export type Action = "PUSH" | "REPLACE" | "POP";
+
+  declare export type HashLocation = {
+    pathname: string,
+    search: string,
+    hash: string,
+  };
+
+  declare interface IHashHistory {
+    length: number,
+    location: HashLocation,
+    action: Action,
+    push(path: string, state?: {}): void,
+    push(location: $Shape<HashLocation>): void,
+    replace(path: string, state?: {}): void,
+    replace(location: $Shape<HashLocation>): void,
+    go(n: number): void,
+    goBack(): void,
+    goForward(): void,
+    listen: Function,
+    block(message: string): typeof Unblock,
+    block((location: HashLocation, action: Action) => string): typeof Unblock,
+    push(path: string): void,
+  }
+
+  declare export type HashHistory = IHashHistory;
+
+  declare type HistoryOpts = {
+    basename?: string,
+    hashType: "slash" | "noslash" | "hashbang",
+    getUserConfirmation?: (
+      message: string,
+      callback: (willContinue: boolean) => void,
+    ) => void,
+  };
+
+  declare export default (opts?: HistoryOpts) => HashHistory;
+}

Oving 12/flow-typed/npm/react-router-dom_v4.x.x.js

+// flow-typed signature: 53be1849af6037db65e90a7abc558afe
+// flow-typed version: f4e99ca1ed/react-router-dom_v4.x.x/flow_>=v0.63.x
+
+declare module "react-router-dom" {
+  import type { ComponentType, ElementConfig, Node, Component } from 'react';
+
+  declare export var BrowserRouter: Class<Component<{|
+    basename?: string,
+    forceRefresh?: boolean,
+    getUserConfirmation?: GetUserConfirmation,
+    keyLength?: number,
+    children?: Node
+  |}>>
+
+  declare export var HashRouter: Class<Component<{|
+    basename?: string,
+    getUserConfirmation?: GetUserConfirmation,
+    hashType?: "slash" | "noslash" | "hashbang",
+    children?: Node
+  |}>>
+
+  declare export var Link: Class<Component<{
+    className?: string,
+    to: string | LocationShape,
+    replace?: boolean,
+    children?: Node
+  }>>
+
+  declare export var NavLink: Class<Component<{
+    to: string | LocationShape,
+    activeClassName?: string,
+    className?: string,
+    activeStyle?: Object,
+    style?: Object,
+    isActive?: (match: Match, location: Location) => boolean,
+    children?: Node,
+    exact?: boolean,
+    strict?: boolean
+  }>>
+
+  // NOTE: Below are duplicated from react-router. If updating these, please
+  // update the react-router and react-router-native types as well.
+  declare export type Location = {
+    pathname: string,
+    search: string,
+    hash: string,
+    state?: any,
+    key?: string
+  };
+
+  declare export type LocationShape = {
+    pathname?: string,
+    search?: string,
+    hash?: string,
+    state?: any
+  };
+
+  declare export type HistoryAction = "PUSH" | "REPLACE" | "POP";
+
+  declare export type RouterHistory = {
+    length: number,
+    location: Location,
+    action: HistoryAction,
+    listen(
+      callback: (location: Location, action: HistoryAction) => void
+    ): () => void,
+    push(path: string | LocationShape, state?: any): void,
+    replace(path: string | LocationShape, state?: any): void,
+    go(n: number): void,
+    goBack(): void,
+    goForward(): void,
+    canGo?: (n: number) => boolean,
+    block(
+      callback: (location: Location, action: HistoryAction) => boolean
+    ): void,
+    // createMemoryHistory
+    index?: number,
+    entries?: Array<Location>
+  };
+
+  declare export type Match = {
+    params: { [key: string]: ?string },
+    isExact: boolean,
+    path: string,
+    url: string
+  };
+
+  declare export type ContextRouter = {|
+    history: RouterHistory,
+    location: Location,
+    match: Match,
+    staticContext?: StaticRouterContext
+  |};
+
+  declare type ContextRouterVoid = {
+    history: RouterHistory | void,
+    location: Location | void,
+    match: Match | void,
+    staticContext?: StaticRouterContext | void
+  };
+
+  declare export type GetUserConfirmation = (
+    message: string,
+    callback: (confirmed: boolean) => void
+  ) => void;
+
+  declare export type StaticRouterContext = {
+    url?: string
+  };
+
+  declare export var StaticRouter: Class<Component<{|
+    basename?: string,
+    location?: string | Location,
+    context: StaticRouterContext,
+    children?: Node
+  |}>>
+
+  declare export var MemoryRouter: Class<Component<{|
+    initialEntries?: Array<LocationShape | string>,
+    initialIndex?: number,
+    getUserConfirmation?: GetUserConfirmation,
+    keyLength?: number,
+    children?: Node
+  |}>>
+
+  declare export var Router: Class<Component<{|
+    history: RouterHistory,
+    children?: Node
+  |}>>
+
+  declare export var Prompt: Class<Component<{|
+    message: string | ((location: Location) => string | boolean),
+    when?: boolean
+  |}>>
+
+  declare export var Redirect: Class<Component<{|
+    to: string | LocationShape,
+    push?: boolean,
+    from?: string,
+    exact?: boolean,
+    strict?: boolean
+  |}>>
+
+  declare export var Route: Class<Component<{|
+    component?: ComponentType<*>,
+    render?: (router: ContextRouter) => Node,
+    children?: ComponentType<ContextRouter> | Node,
+    path?: string,
+    exact?: boolean,
+    strict?: boolean,
+    location?: LocationShape,
+    sensitive?: boolean
+  |}>>
+
+  declare export var Switch: Class<Component<{|
+    children?: Node,
+    location?: Location
+  |}>>
+
+  declare export function withRouter<WrappedComponent: ComponentType<*>>(
+    Component: WrappedComponent
+  ): ComponentType<
+    $Diff<ElementConfig<$Supertype<WrappedComponent>>, ContextRouterVoid>
+    >;
+
+  declare type MatchPathOptions = {
+    path?: string,
+    exact?: boolean,
+    sensitive?: boolean,
+    strict?: boolean
+  };
+
+  declare export function matchPath(
+    pathname: string,
+    options?: MatchPathOptions | string,
+    parent?: Match
+  ): null | Match;
+
+  declare export function generatePath(pattern?: string, params?: Object): string;
+}

Oving 12/package.json

+{
+  "name": "oving12",
+  "version": "1.0.0",
+  "scripts": {
+    "postinstall": "node ./scripts/enable_babelrc.js",
+    "start": "react-scripts start"
+  },
+  "dependencies": {
+    "bootstrap": "^4.1.3",
+    "cors": "^2.8.5",
+    "es6-promise": "^4.2.5",
+    "popper": "^1.0.1",
+    "promise": "^8.0.2",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "^2.0.4",
+    "react-simplified": "^1.5.1"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

Oving 12/public/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"/>
+    <title>Øving 3 og 12</title>
+    <link rel="stylesheet" href="bootstrap.min.css"/>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>