From 541ca8fcd595144564468a7b84369ed86c1575e4 Mon Sep 17 00:00:00 2001
From: Martin Wighus Holtmon <martinwh@stud.ntnu.no>
Date: Mon, 1 Nov 2021 19:33:36 +0100
Subject: [PATCH] firstpart/Problem5 - Made use of router to redirect. I am not
sure If i modified the DOM or not or If I have proper MVC decomposition. Also
removed unused imports.
---
.../components/example/Example.jsx | 1 -
projectFirstPart/components/states/States.jsx | 1 -
projectFirstPart/p5.html | 14 +++++++++
projectFirstPart/p5.jsx | 30 +++++++++++++++++++
projectFirstPart/webpack.config.js | 1 +
5 files changed, 45 insertions(+), 2 deletions(-)
create mode 100644 projectFirstPart/p5.html
create mode 100644 projectFirstPart/p5.jsx
diff --git a/projectFirstPart/components/example/Example.jsx b/projectFirstPart/components/example/Example.jsx
index 5470e6b..40ee265 100644
--- a/projectFirstPart/components/example/Example.jsx
+++ b/projectFirstPart/components/example/Example.jsx
@@ -8,7 +8,6 @@ import './Example.css';
import Prism from 'prismjs';
import 'prismjs/components/prism-jsx.js';
import '../../node_modules/prismjs/themes/prism.css';
-import Header from "../header/Header";
/* eslint-disable react/jsx-one-expression-per-line */
/* eslint-disable react/destructuring-assignment */
diff --git a/projectFirstPart/components/states/States.jsx b/projectFirstPart/components/states/States.jsx
index b669946..d04125a 100644
--- a/projectFirstPart/components/states/States.jsx
+++ b/projectFirstPart/components/states/States.jsx
@@ -1,6 +1,5 @@
import React from 'react';
import './States.css';
-import Header from "../header/Header";
/**
* Define States, a React componment of CS142 project #4 problem #2. The model
diff --git a/projectFirstPart/p5.html b/projectFirstPart/p5.html
new file mode 100644
index 0000000..cd96014
--- /dev/null
+++ b/projectFirstPart/p5.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+ <title>CS142 Class Project</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ <script src="modelData/states.js"></script>
+ <script src="modelData/example.js"></script>
+</head>
+<body>
+<div id="reactapp">
+ <script src="compiled/p5.bundle.js"></script>
+</div>
+</body>
+</html>
diff --git a/projectFirstPart/p5.jsx b/projectFirstPart/p5.jsx
new file mode 100644
index 0000000..3758e57
--- /dev/null
+++ b/projectFirstPart/p5.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {HashRouter, Route, Link, Redirect} from "react-router-dom";
+import States from './components/states/States';
+import Example from './components/example/Example';
+import Header from "./components/header/Header";
+
+class P5 extends React.Component {
+ render() {
+ return(
+ <div>
+ <Header />
+ <HashRouter>
+ <Link to="/states">States</Link>
+ <Link to="/example">Example</Link>
+ <Route exact path="/">
+ <Redirect to="/example" />
+ </Route>
+ <Route exact path="/example" component={Example} />
+ <Route exact path="/states" component={States} />
+ </HashRouter>
+ </div>
+ )
+ }
+}
+
+ReactDOM.render(
+ <P5/>,
+ document.getElementById('reactapp'),
+);
diff --git a/projectFirstPart/webpack.config.js b/projectFirstPart/webpack.config.js
index 718e185..38381a0 100644
--- a/projectFirstPart/webpack.config.js
+++ b/projectFirstPart/webpack.config.js
@@ -3,6 +3,7 @@ module.exports = {
gettingStarted: './gettingStarted.jsx',
p2: './p2.jsx',
p4: './p4.jsx',
+ p5: './p5.jsx',
},
module: {
rules: [
--
GitLab