added redirector component (#199)

* added redirector component
    * it will redirect every request to /$something that is not handled otherwise (/intro, /login and such) to /n/$something
* added getNote API Call
* added NotFound component
* added LandingLayout around the NotFound component, so users can easily navigate away from the component

Signed-off-by: Philip Molares <philip.molares@udo.edu>

src/components/error/not-found.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { LandingLayout } from '../landing/landing-layout'
+
+export const NotFound: React.FC = () => {
+  return (
+    <LandingLayout>
+      <div className='text-white d-flex align-items-center justify-content-center my-5'>
+        <h1>404 Not Found <small>oops.</small></h1>
+      </div>
+    </LandingLayout>
+  )
+}

src/components/redirector/redirector.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react'
+import { Redirect } from 'react-router'
+import { useParams } from 'react-router-dom'
+import { getNote } from '../../api/note'
+import { NotFound } from '../error/not-found'
+
+interface RouteParameters {
+  id: string
+}
+
+export const Redirector: React.FC = () => {
+  const { id } = useParams<RouteParameters>()
+  const [error, setError] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    getNote(id)
+      .then((noteFromAPI) => setError(!noteFromAPI.preVersionTwoNote))
+      .catch(() => setError(true))
+  }, [id])
+
+  if (error) {
+    return (<NotFound/>)
+  } else if (!error && error != null) {
+    return (<Redirect to={`/n/${id}`}/>)
+  } else {
+    return (<span>Loading</span>)
+  }
+}