Merge pull request #43 from exstake/hide-pages-to-unauthenticated-user

hide pages from unauthenticated users

app/javascript/src/Routes.tsx

@@ -2,29 +2,36 @@ import type { FC } from "react";
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 
+import { useCurrentUser } from "./contexts/UserProvider";
 import { Dashbaord, Home, Orders, Wallet } from "./pages";
 
 export const Routes: FC = () => {
+  const { isAuthenticated } = useCurrentUser();
+
   return (
     <Switch>
       <Route exact path="/">
         <Home />
       </Route>
-      <Route exact path="/dashboard">
+      {isAuthenticated && (
-        <Dashbaord />
+        <>
-      </Route>
+          <Route exact path="/dashboard">
-      <Route exact path="/wallet">
+            <Dashbaord />
-        <Wallet />
+          </Route>
-      </Route>
+          <Route exact path="/wallet">
-      <Route exact path="/orders/exchange">
+            <Wallet />
-        <Orders.Exchange />
+          </Route>
-      </Route>
+          <Route exact path="/orders/exchange">
-      <Route exact path="/orders/stake">
+            <Orders.Exchange />
-        <Orders.Stake />
+          </Route>
-      </Route>
+          <Route exact path="/orders/stake">
-      <Route exact path="/orders/deposit">
+            <Orders.Stake />
-        <Orders.Deposit />
+          </Route>
-      </Route>
+          <Route exact path="/orders/deposit">
+            <Orders.Deposit />
+          </Route>
+        </>
+      )}
     </Switch>
   );
 };

app/javascript/src/components/Navbar/Navbar.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { MenuIcon } from "@heroicons/react/outline";
+import cs from "classnames";
 
 import XStakeLogo from "../../assets/images/logo.png";
 import { useApp } from "../../contexts/AppProvider";
@@ -9,13 +10,12 @@ const linkStyles =
   "cursor-pointer bg-transparent hover:bg-gray-100 h-full px-4 font-bold flex items-center";
 
 export const Navbar = () => {
+  const { isAuthenticated } = useCurrentUser();
   const { setSideNavExpanded } = useApp();
   const handleExpandSideNav = () => {
     setSideNavExpanded((prevState) => !prevState);
   };
 
-  const { isAuthenticated } = useCurrentUser();
-
   const csrfToken =
     document
       .querySelector('meta[name="csrf-token"]')
@@ -24,7 +24,10 @@ export const Navbar = () => {
   return (
     <nav className="w-full h-16 flex bg-white shadow items-center px-4 space-x-2 z-50">
       <button
-        className="w-12 mr-2 md:w-10 h-12 md:h-10 xl:hidden fixed md:relative bottom-8 md:bottom-auto right-8 md:right-auto bg-white rounded-full p-3 md:p-0 shadow md:shadow-none"
+        className={cs(
+          "w-12 mr-2 md:w-10 h-12 md:h-10 xl:hidden fixed md:relative bottom-8 md:bottom-auto right-8 md:right-auto bg-white rounded-full p-3 md:p-0 shadow md:shadow-none",
+          isAuthenticated ? "" : "hidden"
+        )}
         onClick={() => handleExpandSideNav()}
       >
         <MenuIcon />

app/javascript/src/components/SideNav/SideNav.tsx

@@ -4,6 +4,7 @@ import { Transition } from "@headlessui/react";
 import cs from "classnames";
 
 import { useApp } from "../../contexts/AppProvider";
+import { useCurrentUser } from "../../contexts/UserProvider";
 
 type MenuItem = {
   label: string;
@@ -38,6 +39,7 @@ const MenuItems: MenuItem[] = [
 ];
 
 export const SideNav = () => {
+  const { isAuthenticated } = useCurrentUser();
   const { sideNavExpanded, setSideNavExpanded } = useApp();
   const location = useLocation();
 
@@ -51,6 +53,8 @@ export const SideNav = () => {
     }
   };
 
+  if (!isAuthenticated) return null;
+
   return (
     <>
       <Transition

app/javascript/src/pages/Home/StakeOrderModal/StakeOrderModal.tsx

@@ -6,6 +6,7 @@ import { useRelayEnvironment } from "react-relay";
 import { Button, Modal } from "../../../components";
 import { commitCreateStakeOrderMutation } from "./createStakeOrder";
 import { Input } from "../../../components/Input/Input";
+import { useCurrentUser } from "../../../contexts/UserProvider";
 
 type Props = {
   poolName: string;
@@ -14,6 +15,7 @@ type Props = {
 
 export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
   const environment = useRelayEnvironment();
+  const { isAuthenticated } = useCurrentUser();
   const [isOpen, setIsOpen] = useState(false);
   const [investAmountInput, setInvestAmountInput] = useState("0");
 
@@ -21,7 +23,11 @@ export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
   const investAmount = new BigNumber(investAmountInput);
 
   const handleButtonClick = () => {
-    setIsOpen((prevState) => !prevState);
+    if (!isAuthenticated) {
+      window.location.href = "/users/sign_in";
+    } else {
+      setIsOpen((prevState) => !prevState);
+    }
   };
 
   const onSubmit = () => {
@@ -59,7 +65,7 @@ export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
         type="button"
         className="py-2 px-4 text-blue-600 border-2 border-blue-600 hover:bg-blue-100 w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md rounded-lg "
       >
-        Stake
+        Investir
       </button>
       <Modal
         isOpen={isOpen}
@@ -87,7 +93,7 @@ export const StakeOrderModal: FC<Props> = ({ poolName, balance }) => {
             <span className="text-red-500 mb-1">Você não possuí saldo.</span>
           )}
           <Button disabled={!stakeAvaliable} type="submit">
-            Fazer Stake
+            Investir
           </Button>
         </form>
       </Modal>