diff --git a/src/App.js b/src/App.js
index 3876028..141103c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,97 +1,81 @@
-import React, {Component} from 'react';
-import {
- Route, NavLink, HashRouter
-} from 'react-router-dom'
+import React from 'react';
+import {HashRouter, NavLink, Route} from 'react-router-dom'
import './app.css';
import PlaneList from './PlaneList';
import Home from './Home';
import UeberHugo from './UeberHugo'
import Planes from "./PlaneInfo";
-class App extends Component {
- render() {
- return (
-
-
-
- );
- }
-}
+const App = () => (
+
+
+
+ ✈️Hugos Lieblingsflugzeuge✈️
+
+
+
+
+
+
+
+
+
+
+);
export default App;
-class Navigation extends Component {
- render() {
- return (
-
-
-
- Start
-
-
- Über Hugo
-
-
- Militär
-
- Erster Weltkrieg
- Zwischenkriegszeit
- Zweiter Weltkrieg
- Kalter Krieg
- Moderne
-
-
-
- Airliner
-
- Boeing
- Airbus
- Andere
-
-
-
- Sport
-
- Doppeldecker
- Propeller
- Segel
- Andere
-
-
-
- Spezielle
-
- Helikopter
- Zeppeline
- Andere
-
-
-
-
- )
- }
-}
+const Navigation = () => (
+
+
+
+ Start
+
+
+ Über Hugo
+
+
+ Militär
+
+ Erster Weltkrieg
+ Zwischenkriegszeit
+ Zweiter Weltkrieg
+ Kalter Krieg
+ Moderne
+
+
+
+ Airliner
+
+ Boeing
+ Airbus
+ Andere
+
+
+
+ Sport
+
+ Doppeldecker
+ Propeller
+ Segel
+ Andere
+
+
+
+ Spezielle
+
+ Helikopter
+ Zeppeline
+ Andere
+
+
+
+
+)
-class Footer extends Component {
- render() {
- return (
-
- )
- }
-}
\ No newline at end of file
+const Footer = () => (
+
+)
\ No newline at end of file
diff --git a/src/Home.js b/src/Home.js
index 1445936..6dbd549 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,32 +1,23 @@
-import React, {Component} from 'react';
+import React from 'react';
import ModelImage from './PlanePreview';
import planes from './planes.json'
-class Home extends Component {
- constructor(props) {
- super(props);
- const favs = planes.filter(isFavPlane);
- this.state = {
- favs: favs
- }
- }
+const Home = () => {
+ const favs = planes.filter(isFavPlane)
+ .map(p =>
+
Hugos Favoriten
+ {favs}
+ Alle Flugzeuge
+ {all}
+
+ );
- return (
-
-
Hugos Favoriten
- {favs}
- Alle Flugzeuge
- {all}
-
- );
- }
}
function isFavPlane(plane) {
diff --git a/src/PlaneInfo.js b/src/PlaneInfo.js
index e2a1445..8f69147 100644
--- a/src/PlaneInfo.js
+++ b/src/PlaneInfo.js
@@ -1,41 +1,29 @@
-import React, {Component} from 'react';
+import React from 'react';
+import {useLocation} from 'react-router-dom';
import planes from './planes.json';
import './plane.css';
-class Planes extends Component {
- render() {
- const loc = this.props.location.pathname;
- const planeName = loc.replaceAll('/flugzeug/', '');
- let plane;
- for (const e of planes) {
- if (e.category + e.name === planeName) {
- plane = e;
- break;
- }
- }
+const Planes = () => {
+ const route = useLocation().pathname.replaceAll("/flugzeug/", "");
- let content;
- if (plane === undefined) {
- content =
-
+ const plane = planes.find(p => p.category + p.name === route);
+ const imgPath = process.env.PUBLIC_URL + '/img/' + plane.category + plane.img;
+
+ return (
+
+ {
+ plane ?
+ <>
+
{plane.name}
+
+
{plane.description}
+
+ :
Flugzeug nicht gefunden.
-
- ;
- } else {
- const imgPath = process.env.PUBLIC_URL + '/img/' + plane.category + plane.img;
- content =
-
-
{plane.name}
-
-
{plane.description}
-
- ;
- }
-
- return (
- content
- );
- }
+ }
+
- {matches}
-
- )
- }
+ return (
+
+ {matches}
+
+ )
}
+
export default PlaneList;
\ No newline at end of file
diff --git a/src/PlanePreview.js b/src/PlanePreview.js
index fd1b3c2..497107d 100644
--- a/src/PlanePreview.js
+++ b/src/PlanePreview.js
@@ -1,37 +1,16 @@
-import React, {Component} from 'react';
-import {
- NavLink
-} from 'react-router-dom'
+import React from 'react';
+import {NavLink} from 'react-router-dom'
import './plane_preview.css'
-class ModelImage extends Component {
- constructor(props) {
- super(props);
- this.state = {
- name: '',
- src: '',
- cat: '',
- }
- }
+const ModelImage = props => (
+
+
+ {props.name}
+
+
+);
- static getDerivedStateFromProps(props) {
- return {name: props.name, src: props.src,
- cat: (props.cat === undefined ? '' : props.cat),
- };
- }
-
- render() {
- const s = this.state;
- return (
-
-
- {s.name}
-
-
- );
- }
-}
export default ModelImage;
\ No newline at end of file
diff --git a/src/UeberHugo.js b/src/UeberHugo.js
index eb9483f..2bc13a8 100644
--- a/src/UeberHugo.js
+++ b/src/UeberHugo.js
@@ -1,19 +1,18 @@
-import React, {Component} from 'react';
+import React from 'react';
-class UeberHugo extends Component {
- render() {
- return (
-
-
Hugo Boss
-
Hugo Boss ist ein begeisterter Modellbauer und Gründungsmitglied
- vom Modellbauverein Winterthur.
-
Am liebsten baut er Flugzeuge, sie haben ihn schon sein ganzes Leben fasziniert und er wollte immer Pilot werden.
- Das hat er zwar nicht geschafft, aber das Modellbauen ermöglicht es ihm, seine Leidenschaft trotzdem auszuleben.
- Auf dieser Website präsentiert Hugo seine liebsten Flugzeuge, die er am liebsten alle nachbauen würde.
-
-
+
Hugo Boss
+
Hugo Boss ist ein begeisterter Modellbauer und Gründungsmitglied
+ vom Modellbauverein Winterthur.
+
Am liebsten baut er Flugzeuge, sie haben ihn schon sein ganzes Leben fasziniert und er wollte immer Pilot
+ werden.
+ Das hat er zwar nicht geschafft, aber das Modellbauen ermöglicht es ihm, seine Leidenschaft trotzdem
+ auszuleben.
+ Auf dieser Website präsentiert Hugo seine liebsten Flugzeuge, die er am liebsten alle nachbauen
+ würde.
+
+
+