chore!: migrate index.js -> index.tsx

2 files changed, 14 insertions, 9 deletions

diff --git a/src/index.js b/src/index.tsx
index 49c66e7..eb43b7e 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -20,11 +20,14 @@ 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 });
+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 = {
@@ -35,15 +38,15 @@ const App = () => {
   };
 
   useEffect(() => {
-    const userId = +localStorage.getItem('userId');
+    const userId = localStorage.getItem('userId');
     if (userId) {
       get('users/').then(response => {
-        setUser(response.data.filter(user => user.id === +userId)[0]);
+        setUser(response.data.filter((user: User) => user.id === +userId)[0]);
       });
     }
   }, []);
 
-  const Page = ({ page }) => {
+  const Page: React.FC<{ page: string }> = ({ page }) => {
     switch (page) {
       case 'app':
         return (
@@ -73,7 +76,8 @@ const App = () => {
     <BenzinThemeProvider>
       <Header
         logo={{
-          title: 'ChronoCube'
+          title: 'ChronoCube',
+          icon: null
         }}
         contents={headerContents}
         page={page}
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" />