Move App and index to tsx (#6)

package.json

@@ -70,6 +70,7 @@
     "@babel/cli": "^7.16.7",
     "@babel/core": "^7.16.7",
     "@babel/preset-env": "^7.16.7",
+    "@types/react-dom": "^17.0.11",
     "react-styleguidist": "^11.2.0",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.5"

src/App.js → src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Grid, Menu, Segment } from "semantic-ui-react";
 
 // Left column
@@ -10,6 +10,8 @@ import Query from "./lib/Query/Query";
 import Upload from "./lib/Upload/Upload";
 import Articles from "./lib/Articles/Articles";
 import AggregatePane from "./lib/Aggregate/AggregatePane";
+import Amcat from "./lib/apis/Amcat";
+import { AmcatQuery } from "./lib/interfaces";
 
 const menuItems = ["Upload", "Articles", "Aggregate"];
 
@@ -22,12 +24,12 @@ const testQuery = {
 
 export default function App() {
   const [selected, setSelected] = useState(menuItems[2]);
-  const [amcat, setAmcat] = useState(null);
-  const [index, setIndex] = useState(null);
-  const [query, setQuery] = useState();
+  const [amcat, setAmcat] = useState<Amcat>(null);
+  const [index, setIndex] = useState<string>(null);
+  const [query, setQuery] = useState<AmcatQuery>();
 
   useEffect(() => {
-    setQuery();
+    setQuery(undefined);
   }, [amcat, index]);
 
   const render = () => {
@@ -69,7 +71,13 @@ export default function App() {
   );
 }
 
-function ComponentMenu({ index, selected, setSelected }) {
+interface ComponentMenuProps {
+  index: string,
+  selected: string,
+  setSelected: (value: string)=> void
+}
+
+function ComponentMenu({ index, selected, setSelected }: ComponentMenuProps) {
   return (
     <Menu attached="top" tabular>
       {menuItems.map((name) => {

src/index.tsx

@@ -0,0 +1,8 @@
+import "semantic-ui-css/semantic.min.css";
+import * as ReactDOM from 'react-dom';
+import App from "./App";
+
+ReactDOM.render(
+    <App />,
+  document.getElementById('root') as HTMLElement
+);

src/lib/index.tsx

@@ -0,0 +1,9 @@
+// here import and export all components for the npm module
+import AggregateResult from "./Aggregate/AggregateResult";
+import AggregateOptionsChooser from "./Aggregate/AggregateOptionsChooser";
+import Articles from "./Articles/Articles";
+import Login from "./Login/Login";
+import Query from "./Query/Query";
+import Upload from "./Upload/Upload";
+
+export { AggregateOptionsChooser, AggregateResult, Articles, Login, Query, Upload };

tsconfig.json

@@ -8,7 +8,8 @@
     "allowJs": true,
     "moduleResolution": "node",
     "lib": [
-      "ES2021.String"
+      "ES2021.String",
+      "DOM"
     ]
   }
 }