feat: remove LogInButton.tsx

README.md

@@ -14,7 +14,7 @@ Free meal planner for cooks short on ideas! (like me …)
 
 ![Screenshot](docs/short_clip.gif)
 
-### Screenshot
+### Screenshots
 
 #### Home page
 

TODO.md

@@ -14,4 +14,4 @@
 - [ ] Use Css-in-Js
 - [ ] Redirect to 404
 - [x] Typescript
-- [ ] strict typing
+- [x] strict typing

package.json

@@ -38,6 +38,7 @@
     "@types/node": "^14.14.37",
     "@types/react": "^17.0.3",
     "@types/react-router-dom": "^5.1.7",
+    "prettier": "^2.5.1",
     "typescript": "^4.2.3"
   }
 }

src/components/LogInButton.tsx

@@ -1,14 +0,0 @@
-import { useAuth0 } from "../utils/auth0-spa";
-
-type Props = { color: string };
-
-export const LogInButton = ({ color }: Props) => {
-  const { loginWithRedirect } = useAuth0();
-  const handleClick = () => loginWithRedirect({});
-
-  return (
-    <button className={`waves-effect waves-light btn ${color}`} onClick={handleClick}>
-      Log in
-    </button>
-  );
-};

src/components/Navbar.tsx

@@ -1,47 +1,40 @@
 import { MouseEventHandler } from "react";
 import { Link } from "react-router-dom";
 import { buttonURL, links } from "../constants";
-import { useAuth0 } from "../utils/auth0-spa";
 import { FooterLink } from "./FooterLink";
-import { LogInButton } from "./LogInButton";
 import { Logo } from "./Logo";
-import { LogOutButton } from "./LogOutButton";
 import { RandomButton } from "./RandomButton";
 
 type Props = { openNavClick: MouseEventHandler };
 
-export const Navbar = ({ openNavClick }: Props) => {
+export const Navbar = ({ openNavClick }: Props) => (
-  const { isAuthenticated } = useAuth0();
+  <div className="navbar-fixed">
-
+    <nav>
-  return (
+      <div className="nav-wrapper">
-    <div className="navbar-fixed">
+        <div className="container ">
-      <nav>
+          <Logo />
-        <div className="nav-wrapper">
+          <ul id="nav-mobile" className="right hide-on-med-and-down">
-          <div className="container ">
+            {links.map((link, i) => (
-            <Logo />
+              <FooterLink key={i} link={link} textColor="black" />
-            <ul id="nav-mobile" className="right hide-on-med-and-down">
+            ))}
-              {links.map((link, i) => (
+            <li>
-                <FooterLink key={i} link={link} textColor="black" />
+              <RandomButton
-              ))}
+                url={buttonURL}
-              {isAuthenticated && <FooterLink link="profile" textColor="black" />}
+                size="small"
-              <li>
+                color="orange darken-2"
-                <RandomButton url={buttonURL} size="small" color="orange darken-2" />
+              />
-              </li>
+            </li>
-              <li>
+          </ul>
-                {!isAuthenticated ? <LogInButton color="orange lighten-1" /> : <LogOutButton />}
+          <Link
-              </li>
+            to="#"
-            </ul>
+            data-target="slide-out"
-            <Link
+            className="sidenav-trigger "
-              to="#"
+            onClick={openNavClick}
-              data-target="slide-out"
+          >
-              className="sidenav-trigger "
+            <i className="material-icons">menu</i>
-              onClick={openNavClick}
+          </Link>
-            >
-              <i className="material-icons">menu</i>
-            </Link>
-          </div>
         </div>
-      </nav>
+      </div>
-    </div>
+    </nav>
-  );
+  </div>
-};
+);

src/components/SideNav.tsx

@@ -5,8 +5,6 @@ import ChefImage from "../images/chef.svg";
 import SpecialEventImage from "../images/special_event.svg";
 import { useAuth0 } from "../utils/auth0-spa";
 import { FooterLink } from "./FooterLink";
-import { LogInButton } from "./LogInButton";
-import { LogOutButton } from "./LogOutButton";
 import { RandomButton } from "./RandomButton";
 
 type Props = {
@@ -35,9 +33,8 @@ export const SideNav = ({ showNav, closeNavClick }: Props) => {
                 left: "0",
                 right: "0",
                 bottom: "0",
-                backgroundColor: "rgba(0,0,0,0.5)" /* Black background with opacity */,
+                backgroundColor: "rgba(0,0,0,0.5)",
-                zIndex: 2 /* Specify a stack order in case you're using a different order for other elements */,
+                zIndex: 2,
-                // cursor: "pointer" /* Add a pointer on hover */
               }}
               src={SpecialEventImage}
               alt="sidenav_background"
@@ -65,12 +62,6 @@ export const SideNav = ({ showNav, closeNavClick }: Props) => {
       <li>
         <RandomButton url={buttonURL} size="small" color="orange darken-2" />
       </li>
-      <li>
-        <Link to="#">
-          {!isAuthenticated ? <LogInButton color="orange lighten-1" /> : <LogOutButton />}
-        </Link>
-      </li>
-
       <li>
         <div className="divider" />
       </li>

yarn.lock

@@ -9341,6 +9341,11 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
 pretty-bytes@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"