From cf10bd8925fe8cbffb91e2b282e16f086575bf32 Mon Sep 17 00:00:00 2001
From: asketonim <anton.dubik33@gmail.com>
Date: Mon, 3 Feb 2020 19:53:37 +0300
Subject: feat: migrate Header to TypeScript

---
 src/lib/Header/Header.tsx | 79 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/lib/Header/Header.tsx

(limited to 'src/lib/Header/Header.tsx')

diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx
new file mode 100644
index 0000000..85dac4b
--- /dev/null
+++ b/src/lib/Header/Header.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import {
+  AppBar,
+  Tabs,
+  Tab,
+  Typography,
+  Toolbar,
+} from '@material-ui/core';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+
+interface PropTypes {
+  logo: {
+    icon: React.ReactNode;
+    title: string;
+  };
+  contents: any;
+  page: string;
+  setPage: any;
+}
+
+
+
+const useStyles = makeStyles((theme: any) => ({
+  root: {
+    background: theme.palette.background.elevation2,
+    color: theme.palette.text.primary,
+    paddingLeft: theme.spacing(3),
+  },
+  logo: {
+    margin: theme.spacing(0, 3, 0, 1),
+  },
+  tab: {
+    '& .MuiTab-wrapper': {
+      padding: theme.spacing(2),
+      flexDirection: 'row',
+      fontSize: '0.8125rem',
+      '& svg': {
+        marginRight: theme.spacing(1),
+        marginBottom: '0 !important',
+      }
+    }
+  }
+}));
+
+
+const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => {
+  const classes = useStyles();
+
+  const handleChange = (event: any, newPage: string) => {
+    setPage(newPage);
+  };
+
+  return (
+  <AppBar position="sticky" className={classes.root}>
+    <Toolbar>
+      {logo.icon}
+      <Typography variant="h5" className={classes.logo} color="primary">
+        {logo.title}
+      </Typography>
+      <Tabs onChange={handleChange} value={page}>
+        {contents && Object.keys(contents).map(item => (
+          <Tab
+            label={item}
+            icon={contents[item]}
+            value={item}
+            className={classes.tab}
+            key={item}
+          />
+        ))}
+      </Tabs>
+    </Toolbar>
+  </AppBar>
+  );
+};
+
+export default Header;
-- 
cgit v1.2.3


From f0a70407aaf633eeb2612ca054af27204d8c0a9f Mon Sep 17 00:00:00 2001
From: asketonim <anton.dubik33@gmail.com>
Date: Mon, 3 Feb 2020 19:56:47 +0300
Subject: fix: add missing prop

---
 src/lib/Header/Header.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/lib/Header/Header.tsx')

diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx
index 85dac4b..2b13e3f 100644
--- a/src/lib/Header/Header.tsx
+++ b/src/lib/Header/Header.tsx
@@ -16,13 +16,13 @@ interface PropTypes {
     icon: React.ReactNode;
     title: string;
   };
-  contents: any;
+  contents: {
+    [key: string]: React.ReactNode;
+  };
   page: string;
   setPage: any;
 }
 
-
-
 const useStyles = makeStyles((theme: any) => ({
   root: {
     background: theme.palette.background.elevation2,
-- 
cgit v1.2.3


From ddb2ba73406d6982e81bc779c155e6c687f98bb5 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 3 Feb 2020 20:19:57 +0300
Subject: feat: separate HeaderTab component

@asketonim, feel free to correct these changes
---
 src/lib/Header/Header.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

(limited to 'src/lib/Header/Header.tsx')

diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx
index 2b13e3f..cc73fd9 100644
--- a/src/lib/Header/Header.tsx
+++ b/src/lib/Header/Header.tsx
@@ -10,14 +10,13 @@ import {
 
 import { makeStyles } from '@material-ui/core/styles';
 
-
 interface PropTypes {
   logo: {
     icon: React.ReactNode;
     title: string;
   };
   contents: {
-    [key: string]: React.ReactNode;
+    [key: string]: React.ReactNode | null;
   };
   page: string;
   setPage: any;
@@ -49,6 +48,19 @@ const useStyles = makeStyles((theme: any) => ({
 const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => {
   const classes = useStyles();
 
+  const HeaderTab: React.FC<{ item: string }> = ({ item }) => {
+    const icon = contents[item];
+    return (
+      <Tab
+        label={item}
+        icon={icon}
+        value={item}
+        className={classes.tab}
+        key={item}
+      />
+    )
+  };
+
   const handleChange = (event: any, newPage: string) => {
     setPage(newPage);
   };
@@ -61,14 +73,8 @@ const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => {
         {logo.title}
       </Typography>
       <Tabs onChange={handleChange} value={page}>
-        {contents && Object.keys(contents).map(item => (
-          <Tab
-            label={item}
-            icon={contents[item]}
-            value={item}
-            className={classes.tab}
-            key={item}
-          />
+        {contents && Object.keys(contents).map((item: string) => (
+          <HeaderTab item={item}/>
         ))}
       </Tabs>
     </Toolbar>
-- 
cgit v1.2.3


From 78f5ec6998f96da4f99f169c10e6639dfa818207 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 3 Feb 2020 21:07:49 +0300
Subject: fix: correct icon type

This partially reverts last commit
---
 src/lib/Header/Header.tsx | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

(limited to 'src/lib/Header/Header.tsx')

diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx
index cc73fd9..e052f6c 100644
--- a/src/lib/Header/Header.tsx
+++ b/src/lib/Header/Header.tsx
@@ -10,6 +10,7 @@ import {
 
 import { makeStyles } from '@material-ui/core/styles';
 
+
 interface PropTypes {
   logo: {
     icon: React.ReactNode;
@@ -48,19 +49,6 @@ const useStyles = makeStyles((theme: any) => ({
 const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => {
   const classes = useStyles();
 
-  const HeaderTab: React.FC<{ item: string }> = ({ item }) => {
-    const icon = contents[item];
-    return (
-      <Tab
-        label={item}
-        icon={icon}
-        value={item}
-        className={classes.tab}
-        key={item}
-      />
-    )
-  };
-
   const handleChange = (event: any, newPage: string) => {
     setPage(newPage);
   };
@@ -74,7 +62,13 @@ const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => {
       </Typography>
       <Tabs onChange={handleChange} value={page}>
         {contents && Object.keys(contents).map((item: string) => (
-          <HeaderTab item={item}/>
+          <Tab
+            label={item}
+            icon={contents[item] as JSX.Element}
+            value={item}
+            className={classes.tab}
+            key={item}
+          />
         ))}
       </Tabs>
     </Toolbar>
-- 
cgit v1.2.3


From ea4472805d4d5a717f6b880200977805961dc546 Mon Sep 17 00:00:00 2001
From: asketonim <anton.dubik33@gmail.com>
Date: Mon, 3 Feb 2020 21:28:11 +0300
Subject: fix: correct handleChange prop types

---
 src/lib/Header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/Header/Header.tsx')

diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx
index e052f6c..4e75ada 100644
--- a/src/lib/Header/Header.tsx
+++ b/src/lib/Header/Header.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles((theme: any) => ({
 const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => {
   const classes = useStyles();
 
-  const handleChange = (event: any, newPage: string) => {
+  const handleChange = (event: React.ChangeEvent<{}>, newPage: string) => {
     setPage(newPage);
   };
 
-- 
cgit v1.2.3


From 94a00e852a0f99dbe9cef949375a79e175c7cc94 Mon Sep 17 00:00:00 2001
From: asketonim <anton.dubik33@gmail.com>
Date: Mon, 3 Feb 2020 22:00:48 +0300
Subject: fix: correct setPage type

---
 src/lib/Header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/Header/Header.tsx')

diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx
index 4e75ada..7f3d35d 100644
--- a/src/lib/Header/Header.tsx
+++ b/src/lib/Header/Header.tsx
@@ -20,7 +20,7 @@ interface PropTypes {
     [key: string]: React.ReactNode | null;
   };
   page: string;
-  setPage: any;
+  setPage: (newPage: string) => void;
 }
 
 const useStyles = makeStyles((theme: any) => ({
-- 
cgit v1.2.3

