Login start

client/src/components/Header.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { useHistory } from 'react-router';
+import { Link } from 'react-router-dom';
+import { AUTH_TOKEN } from '../constants';
+
+const Header = () => {
+    const history = useHistory();
+    const authToken = localStorage.getItem(AUTH_TOKEN);
+    return (
+        <div className="flex pa1 justify-between nowrap orange">
+            <div className="flex flex-fixed black">
+                <div className="fw7 mr1">Hacker News</div>
+                <Link to="/" className="ml1 no-underline black">
+                    new
+        </Link>
+                <div className="ml1">|</div>
+                <Link to="/top" className="ml1 no-underline black">
+                    top
+        </Link>
+                <div className="ml1">|</div>
+                <Link
+                    to="/search"
+                    className="ml1 no-underline black"
+                >
+                    search
+        </Link>
+                {authToken && (
+                    <div className="flex">
+                        <div className="ml1">|</div>
+                        <Link
+                            to="/create"
+                            className="ml1 no-underline black"
+                        >
+                            submit
+            </Link>
+                    </div>
+                )}
+            </div>
+            <div className="flex flex-fixed">
+                {authToken ? (
+                    <div
+                        className="ml1 pointer black"
+                        onClick={() => {
+                            localStorage.removeItem(AUTH_TOKEN);
+                            history.push(`/`);
+                        }}
+                    >
+                        logout
+                    </div>
+                ) : (
+                        <Link
+                            to="/login"
+                            className="ml1 no-underline black"
+                        >
+                            login
+                        </Link>
+                    )}
+            </div>
+        </div>
+    );
+};
+
+export default Header;
+
+// import React from 'react';
+// import { useHistory } from 'react-router';
+// import { Link, withRouter } from 'react-router-dom';
+
+// const Header = () => {
+//     const history = useHistory();
+//     return (
+//         <div className="flex pa1 justify-between nowrap orange">
+//             <div className="flex flex-fixed black">
+//                 <div className="fw7 mr1">Hacker News</div>
+//                 <Link to="/" className="ml1 no-underline black">
+//                     new
+//         </Link>
+//                 <div className="ml1">|</div>
+//                 <Link
+//                     to="/create"
+//                     className="ml1 no-underline black"
+//                 >
+//                     submit
+//         </Link>
+//             </div>
+//         </div>
+//     );
+// };
+
+// export default Header;