devkiloton · devkiloton · Jan 14, 2024 · Jan 8, 2024 · Jan 8, 2024 · Jan 8, 2024
diff --git a/src/components/domain/auth/SignOutButton.tsx b/src/components/domain/auth/SignOutButton.tsx
diff --git a/src/components/screens/Home.tsx b/src/components/screens/Home.tsx
@@ -8,15 +8,13 @@ import {
   Stock,
 } from '~/clients/firebase-client/models/Investments';
 import { joinStockData } from '~/helpers/join-stock-data';
-import { Dialog } from '@headlessui/react';
 import { Head } from '../shared/Head';
 import EvolutionChart from '../shared/EvolutionChart';
 import { useCustomSelector } from '~/hooks/use-custom-selector';
 import Ghost from '~/assets/illustrations/ghost.svg';
 import Add from '~/assets/illustrations/add.svg';
 import WrapperIcon from '../shared/WrapperIcon';
 import { getCurrentBalanceFromManyStocks } from '~/helpers/get-current-balance-from-many-stocks';
-import AddInvestmentsForm from '../forms/AddInvestmentsForm';
 import { isStock } from '~/type-guards/is-stock';
 import { isCrypto } from '~/type-guards/is-crypto';
 import StockCard from '../shared/StockCard';
@@ -26,6 +24,7 @@ import { Result } from '~/clients/firebase-client/models/history-stock-br';
 import { joinCryptoData } from '~/helpers/join-crypto-data';
 import FixedIncomeCard from '../shared/FixedIncomeCard';
 import RadialChart from '../shared/RadialChart';
+import AddInvestmentDialog from '../shared/AddInvestmentDialog';
 
 type SupportedInvestments = Stock | FixedIncome | Crypto;
 
@@ -93,6 +92,10 @@ export default function Home() {
     [investmentsDataStore, investmentsStore, currentStocksBalance],
   );
 
+  const setStateDialogAddInvestment = useCallback((state: boolean) => {
+    setIsOpen(state);
+  }, []);
+
   return (
     <>
       <Head title="Home" />
@@ -143,9 +146,6 @@ export default function Home() {
           </div>
         </div>
         <div className="flex gap-x-4">
-          <div className="w-full h-full sticky top-24 max-w-120 hidden min-[1024px]:block ">
-            <AddInvestmentsForm />
-          </div>
           <div className="w-full flex flex-col gap-4">
             {investmentsJoined.length === 0 && (
               <div className="flex h-full justify-center items-center flex-col gap-4">
@@ -166,7 +166,7 @@ export default function Home() {
         </div>
         <button
           onClick={() => setIsOpen(!isOpen)}
-          className="btn btn-primary btn-circle fixed bottom-5 right-5 ">
+          className="btn btn-primary btn-circle fixed bottom-5 right-5 min-[768px]:hidden">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             className="h-6 w-6 rotate-45"
@@ -181,17 +181,10 @@ export default function Home() {
             />
           </svg>
         </button>
-        <Dialog
-          open={isOpen}
-          onClose={() => setIsOpen(false)}
-          className="relative z-[100]">
-          <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-          <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-            <Dialog.Panel className="max-w-120 w-full overflow-scroll max-h-[90vh]">
-              <AddInvestmentsForm />
-            </Dialog.Panel>
-          </div>
-        </Dialog>
+        <AddInvestmentDialog
+          isOpen={isOpen}
+          setIsOpen={setStateDialogAddInvestment}
+        />
       </PageContainer>
     </>
   );

diff --git a/src/components/shared/AddInvestmentDialog.tsx b/src/components/shared/AddInvestmentDialog.tsx
@@ -0,0 +1,29 @@
+import { Dialog } from '@headlessui/react';
+import AddInvestmentsForm from '../forms/AddInvestmentsForm';
+import React from 'react';
+
+interface IAddInvestmentDialog {
+  isOpen: boolean;
+  setIsOpen: (state: boolean) => void;
+}
+
+const AddInvestmentDialog: React.FC<IAddInvestmentDialog> = ({
+  isOpen,
+  setIsOpen,
+}) => {
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={() => setIsOpen(false)}
+      className="relative z-[100]">
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+        <Dialog.Panel className="max-w-120 w-full overflow-scroll max-h-[90vh]">
+          <AddInvestmentsForm />
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+};
+
+export default React.memo(AddInvestmentDialog);
diff --git a/src/components/shared/NavBar.tsx b/src/components/shared/NavBar.tsx
@@ -1,8 +1,25 @@
 import { changeTheme } from '~/helpers/change-theme';
 import logoSymbol from '~/assets/images/logoSymbol.svg';
-import { SignOutButton } from '../domain/auth/SignOutButton';
+import { useAuthState } from '../contexts/UserContext';
+import { useAuth } from '~/lib/firebase';
+import { useNavigate } from 'react-router-dom';
+import { useCallback, useState } from 'react';
+import AddInvestmentDialog from './AddInvestmentDialog';
 
 const NavBar = () => {
+  const { state } = useAuthState();
+  const navigate = useNavigate();
+  const auth = useAuth();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSignOut = useCallback(() => {
+    auth.signOut().then(() => navigate('/'));
+  }, []);
+
+  const setStateDialogAddInvestment = useCallback((state: boolean) => {
+    setIsOpen(state);
+  }, []);
+
   return (
     <div className="pt-4 px-4 sticky top-0 z-[100] min-[768px]:px-8">
       <div className="navbar glass bg-none hover:bg-none rounded-box relative">
@@ -19,7 +36,7 @@ const NavBar = () => {
         </div>
         <div className="flex justify-end flex-1 px-2">
           <div className="flex items-stretch">
-            <label className="swap swap-rotate px-4">
+            <label className="swap swap-rotate">
               {/* this hidden checkbox controls the state */}
               <input onClick={changeTheme} type="checkbox" />
 
@@ -39,10 +56,47 @@ const NavBar = () => {
                 <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
               </svg>
             </label>
-            <SignOutButton />
+
+            {state.state === 'SIGNED_IN' && (
+              <>
+                <div className="dropdown dropdown-end max-md:flex px-3 min-[768px]:pt-3">
+                  <label className="swap">
+                    <input type="checkbox" />
+
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="512px"
+                      id="Layer_1"
+                      version="1.1"
+                      viewBox="0 0 512 512"
+                      className="h-6 w-6 fill-current">
+                      <path d="M424.5,216.5h-15.2c-12.4,0-22.8-10.7-22.8-23.4c0-6.4,2.7-12.2,7.5-16.5l9.8-9.6c9.7-9.6,9.7-25.3,0-34.9l-22.3-22.1  c-4.4-4.4-10.9-7-17.5-7c-6.6,0-13,2.6-17.5,7l-9.4,9.4c-4.5,5-10.5,7.7-17,7.7c-12.8,0-23.5-10.4-23.5-22.7V89.1  c0-13.5-10.9-25.1-24.5-25.1h-30.4c-13.6,0-24.4,11.5-24.4,25.1v15.2c0,12.3-10.7,22.7-23.5,22.7c-6.4,0-12.3-2.7-16.6-7.4l-9.7-9.6  c-4.4-4.5-10.9-7-17.5-7s-13,2.6-17.5,7L110,132c-9.6,9.6-9.6,25.3,0,34.8l9.4,9.4c5,4.5,7.8,10.5,7.8,16.9  c0,12.8-10.4,23.4-22.8,23.4H89.2c-13.7,0-25.2,10.7-25.2,24.3V256v15.2c0,13.5,11.5,24.3,25.2,24.3h15.2  c12.4,0,22.8,10.7,22.8,23.4c0,6.4-2.8,12.4-7.8,16.9l-9.4,9.3c-9.6,9.6-9.6,25.3,0,34.8l22.3,22.2c4.4,4.5,10.9,7,17.5,7  c6.6,0,13-2.6,17.5-7l9.7-9.6c4.2-4.7,10.2-7.4,16.6-7.4c12.8,0,23.5,10.4,23.5,22.7v15.2c0,13.5,10.8,25.1,24.5,25.1h30.4  c13.6,0,24.4-11.5,24.4-25.1v-15.2c0-12.3,10.7-22.7,23.5-22.7c6.4,0,12.4,2.8,17,7.7l9.4,9.4c4.5,4.4,10.9,7,17.5,7  c6.6,0,13-2.6,17.5-7l22.3-22.2c9.6-9.6,9.6-25.3,0-34.9l-9.8-9.6c-4.8-4.3-7.5-10.2-7.5-16.5c0-12.8,10.4-23.4,22.8-23.4h15.2  c13.6,0,23.3-10.7,23.3-24.3V256v-15.2C447.8,227.2,438.1,216.5,424.5,216.5z M336.8,256L336.8,256c0,44.1-35.7,80-80,80  c-44.3,0-80-35.9-80-80l0,0l0,0c0-44.1,35.7-80,80-80C301.1,176,336.8,211.9,336.8,256L336.8,256z" />
+                    </svg>
+                  </label>
+                  <ul
+                    tabIndex={0}
+                    className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+                    <li>
+                      <a onClick={handleSignOut} className="text-red-600">
+                        Sair
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <button
+                  onClick={() => setIsOpen(true)}
+                  className="btn btn-primary hidden min-[768px]:block">
+                  Adicionar ativo
+                </button>
+              </>
+            )}
           </div>
         </div>
       </div>
+      <AddInvestmentDialog
+        isOpen={isOpen}
+        setIsOpen={setStateDialogAddInvestment}
+      />
     </div>
   );
 };