remove existing radar and decouple everything

src/components/App.tsx

@@ -4,21 +4,20 @@ import Header from './Header/Header';
 import Footer from './Footer/Footer';
 import Router from './Router';
 import {BrowserRouter, Switch, Route, Redirect, useParams, useLocation} from 'react-router-dom';
-import radardata from '../rd.json';
 import { Item } from '../model';
 
 const useQuery = () => {
   return new URLSearchParams(useLocation().search);
 }
 
-const RouterWithPageParam = () => {
+const RouterWithPageParam = ({items, releases}: {items: Item[], releases: string[]}) => {
   const { page } = useParams();
   const query = useQuery();
 
-  return <Router pageName={page} search={query.get('search') || ''} items={radardata.items as Item[]} releases={radardata.releases as string[]}/>;
+  return <Router pageName={page} search={query.get('search') || ''} items={items} releases={releases}/>;
 };
 
-export default function App() {
+export default function App({items, releases}: {items: Item[], releases: string[]}) {
   return (
     <BrowserRouter>
       <div>
@@ -29,7 +28,7 @@ export default function App() {
           <div className={classNames('page__content')}>
             <Switch>
               <Route path={'/techradar/:page(.+).html'}>
-                <RouterWithPageParam />
+                <RouterWithPageParam items={items} releases={releases} />
               </Route>
               <Route path={'/'}>
                 <Redirect to={'/techradar/index.html'} />
@@ -37,7 +36,7 @@ export default function App() {
             </Switch>
           </div>
           <div className='page__footer'>
-            <Footer items={radardata.items as Item[]} pageName='a' />
+            <Footer items={items} pageName='a' />
           </div>
         </div>
       </div>

src/index.tsx_

@@ -2,10 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
 import './index.scss';
+import {Item} from "./model";
+import radardata from './rd.json';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App items={radardata.items as Item[]} releases={radardata.releases as string[]} />
   </React.StrictMode>,
   document.getElementById('root')
 );

src/react-app-env.d.ts

@@ -1 +1,66 @@
-/// <reference types="react-scripts" />
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}