From 550f00b93c03a9ad98ef9bb1197c0fbfd5b1e572 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 21 Mar 2020 14:17:58 +0300
Subject: chore!: migrate index.js -> index.tsx

---
 src/index.js           | 87 -----------------------------------------------
 src/index.tsx          | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/react-app-env.d.ts |  1 +
 3 files changed, 92 insertions(+), 87 deletions(-)
 delete mode 100644 src/index.js
 create mode 100644 src/index.tsx
 create mode 100644 src/react-app-env.d.ts

(limited to 'src')

diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 49c66e7..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-
-import {
-  BenzinThemeProvider,
-  Header,
-} from 'react-benzin';
-
-import 'typeface-roboto';
-
-import Timer from './pages/Timer/Timer';
-import Scoreboard from './pages/Scoreboard/Scoreboard';
-import Contribute from './pages/Contribute/Contribute';
-import Profile from './pages/Profile/Profile';
-
-import TimerIcon from '@material-ui/icons/Timer';
-import AccountCircleIcon from '@material-ui/icons/AccountCircle';
-import AssignmentIcon from '@material-ui/icons/Assignment';
-import GitHubIcon from '@material-ui/icons/GitHub';
-
-import { get } from './requests';
-
-
-const App = () => {
-
-  const [page, setPage] = useState('app');
-  const [user, setUser] = useState({ username: 'anonymous', id: null });
-  const [recentSolutions, setRecentSolutions] = useState([]);
-
-  const headerContents = {
-    app: (<TimerIcon />),
-    profile: (<AccountCircleIcon />),
-    scoreboard: (<AssignmentIcon />),
-    contribute: (<GitHubIcon />),
-  };
-
-  useEffect(() => {
-    const userId = +localStorage.getItem('userId');
-    if (userId) {
-      get('users/').then(response => {
-        setUser(response.data.filter(user => user.id === +userId)[0]);
-      });
-    }
-  }, []);
-
-  const Page = ({ page }) => {
-    switch (page) {
-      case 'app':
-        return (
-          <Timer
-            user={user}
-            recentSolutions={recentSolutions}
-            setRecentSolutions={setRecentSolutions}
-            setPage={setPage}
-          />
-        );
-
-      case 'profile':
-        return <Profile user={user} setUser={setUser} />;
-
-      case 'scoreboard':
-        return <Scoreboard />;
-
-      case 'contribute':
-        return <Contribute />;
-
-      default:
-        return <Contribute />;
-    }
-  };
-
-  return (
-    <BenzinThemeProvider>
-      <Header
-        logo={{
-          title: 'ChronoCube'
-        }}
-        contents={headerContents}
-        page={page}
-        setPage={setPage}/>
-      <Page page={page} />
-    </BenzinThemeProvider>
-  );
-};
-
-document.body.style.overflow = 'hidden';
-ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..eb43b7e
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+
+import {
+  BenzinThemeProvider,
+  Header,
+} from 'react-benzin';
+
+import 'typeface-roboto';
+
+import Timer from './pages/Timer/Timer';
+import Scoreboard from './pages/Scoreboard/Scoreboard';
+import Contribute from './pages/Contribute/Contribute';
+import Profile from './pages/Profile/Profile';
+
+import TimerIcon from '@material-ui/icons/Timer';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import GitHubIcon from '@material-ui/icons/GitHub';
+
+import { get } from './requests';
+
+interface User {
+  username: string;
+  id: number | null;
+}
+
+const App: React.FC = () => {
+  const [page, setPage] = useState<string>('app');
+  const [user, setUser] = useState<User>({ username: 'anonymous', id: null });
+  const [recentSolutions, setRecentSolutions] = useState([]);
+
+  const headerContents = {
+    app: (<TimerIcon />),
+    profile: (<AccountCircleIcon />),
+    scoreboard: (<AssignmentIcon />),
+    contribute: (<GitHubIcon />),
+  };
+
+  useEffect(() => {
+    const userId = localStorage.getItem('userId');
+    if (userId) {
+      get('users/').then(response => {
+        setUser(response.data.filter((user: User) => user.id === +userId)[0]);
+      });
+    }
+  }, []);
+
+  const Page: React.FC<{ page: string }> = ({ page }) => {
+    switch (page) {
+      case 'app':
+        return (
+          <Timer
+            user={user}
+            recentSolutions={recentSolutions}
+            setRecentSolutions={setRecentSolutions}
+            setPage={setPage}
+          />
+        );
+
+      case 'profile':
+        return <Profile user={user} setUser={setUser} />;
+
+      case 'scoreboard':
+        return <Scoreboard />;
+
+      case 'contribute':
+        return <Contribute />;
+
+      default:
+        return <Contribute />;
+    }
+  };
+
+  return (
+    <BenzinThemeProvider>
+      <Header
+        logo={{
+          title: 'ChronoCube',
+          icon: null
+        }}
+        contents={headerContents}
+        page={page}
+        setPage={setPage}/>
+      <Page page={page} />
+    </BenzinThemeProvider>
+  );
+};
+
+document.body.style.overflow = 'hidden';
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
-- 
cgit v1.2.3