fix(frontend): logout from previous project when switching to a diffe…

…rent project (#204) * Handled confusion screens * Add signout for home page * Fixed index error in explore page * Minor modifications * Minor fixes Co-authored-by: AshenI99 <[email protected]>
curaOS · Jan 3, 2022 · d42bf05 · d42bf05 · vercel · Jan 3, 2022
1 parent fa01318
commit d42bf05
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 24 deletions.
diff --git a/examples/frontend/containers/Layout.tsx b/examples/frontend/containers/Layout.tsx
@@ -9,7 +9,7 @@ import Head from 'next/head'
 import { indexLoaderState } from '../state/recoil'
 import { useRecoilValue } from 'recoil'
 import { useFTMethod, useNearHooksContainer } from '@cura/hooks'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { mapPathToProject } from 'utils/path-to-project'
 
@@ -26,11 +26,14 @@ export default function Layout({ children, project = 'share' }) {
         {
             account_id: accountId,
         }
-    )
+    );
+
+    const [currentProject, setCurrentProject] = useState('');
+    const [signedProject, setSignedProject] = useState('');
 
     const switchProject = () => {
-        const currentProject = mapPathToProject(router.asPath)
-        const signedProject = localStorage.getItem('contractAddress')
+        setCurrentProject(mapPathToProject(router.asPath));
+        setSignedProject(localStorage.getItem('contractAddress'))
 
         if (
             signedProject &&
@@ -41,8 +44,11 @@ export default function Layout({ children, project = 'share' }) {
         }
     }
 
-    const preSignIn = () => {
+    const preSignIn = async () => {
         const project = mapPathToProject(router.asPath)
+        if(localStorage.getItem('contractAddress')){
+            await signOut();
+        }
         localStorage.setItem('contractAddress', project)
 
         signIn(
@@ -76,7 +82,7 @@ export default function Layout({ children, project = 'share' }) {
             <Box style={{ minHeight: '100vh' }}>
                 <Header
                     base={project}
-                    accountId={accountId}
+                    accountId={currentProject == signedProject ? accountId : null}
                     onSignIn={preSignIn}
                     onSignOut={preSignOut}
                     title={project.toUpperCase()}
@@ -91,6 +97,7 @@ export default function Layout({ children, project = 'share' }) {
                     }}
                 >
                     <Menu
+                        accountId={currentProject == signedProject ? accountId : null}
                         base={project}
                         nextLinkWrapper={(href, children) => (
                             <Link href={href}>{children}</Link>

diff --git a/examples/frontend/containers/Menu.tsx b/examples/frontend/containers/Menu.tsx
@@ -1,20 +1,20 @@
 // @ts-nocheck
 /** @jsxImportSource theme-ui */
 
-import { useNearHooksContainer } from '@cura/hooks'
 import { Menu } from '@cura/components'
 
 export default function MenuContainer({
+    accountId,
     base,
     nextLinkWrapper,
     activeLink,
 }: {
+    accountId: string
     base: string
     nextLinkWrapper: (link: string, children: JSX.Element) => JSX.Element
     activeLink: string
 }) {
-    const { accountId } = useNearHooksContainer()
-
+
     return (
         <Menu
             accountId={accountId}

diff --git a/examples/frontend/pages/cc/[project]/explore/index.tsx b/examples/frontend/pages/cc/[project]/explore/index.tsx
@@ -31,7 +31,7 @@ const Explore = () => {
     )
 
     // hook that contains all the logic of explore page
-    const { items, nextPage } = useNFTExplore(
+    const { items, nextPage, notLogged } = useNFTExplore(
         contractAdress,
         NFT_PER_PAGE
     )
@@ -50,7 +50,7 @@ const Explore = () => {
             project={project}
             items={items}
             loadMore={loadMore}
-            totalSupply={totalSupply}
+            totalSupply={notLogged ? 0 : totalSupply}
             baseUrl={`/${project}/explore/`}
         />
     )
@@ -62,6 +62,7 @@ function useNFTExplore(contractAdress: string, limitPerPage = 4) {
     const [currentPage, setCurrentPage] = useState(0)
     const [data, setData] = useState([])
     const [isLoading, setIsLoading] = useState(true)
+    const [notLogged, setNotLogged] = useState(true)
 
     const from_index = Math.floor(limitPerPage * currentPage)
 
@@ -81,13 +82,19 @@ function useNFTExplore(contractAdress: string, limitPerPage = 4) {
 
     // Excute function if contract change or currentPage change
     useEffect(() => {
+        let signedAddress = localStorage.getItem('contractAddress');
+
         // make sure the user is logged in and the contract is the right contract
         if (
             contract?.account?.accountId &&
-            contract.contractId == contractAdress
+            contract.contractId == contractAdress &&
+            contract.contractId == signedAddress
         ) {
             setIsLoading(true)
+            setNotLogged(false)
             getData()
+        } else {
+            setNotLogged(true)
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [contract,  currentPage])
@@ -96,5 +103,6 @@ function useNFTExplore(contractAdress: string, limitPerPage = 4) {
         items: data,
         loading: isLoading,
         nextPage: () => setCurrentPage(currentPage + 1),
+        notLogged: notLogged,
     }
 }
diff --git a/examples/frontend/pages/index.tsx b/examples/frontend/pages/index.tsx
@@ -6,6 +6,8 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { ProjectCard } from '@cura/components'
 import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
+import { useNearHooksContainer } from '@cura/hooks'
+import { mapPathToProject } from 'utils/path-to-project'
 
 const slideDetails = [
     {
@@ -75,6 +77,8 @@ const Index = () => {
     const [pauseSlider, setPauseSlider] = useState(0)
     const [loading, setLoading] = useState(true)
 
+    const { signOut } = useNearHooksContainer()
+
 
     const slidify = (newDirection: number) => {
         if (pauseSlider) return
@@ -94,6 +98,23 @@ const Index = () => {
         setLoading(false)
     }, [])
 
+    const handleClick = async (path, buttonType) =>{
+        if(localStorage.getItem('contractAddress') != mapPathToProject(path)){
+            localStorage.removeItem('contractAddress')
+            await signOut();
+        }
+
+        if(buttonType == 'create') {
+            router.push(
+                slideDetails[page].path + `/create`
+            )
+        } else {
+            router.push(
+                slideDetails[page].path + `/explore`
+            )
+        }
+    }
+
     return (
         <div
             sx={{
@@ -150,14 +171,10 @@ const Index = () => {
                                 description={slideDetails[page].description}
                                 tags={slideDetails[page].tags}
                                 onCreateClick={() =>
-                                    router.push(
-                                        slideDetails[page].path + `/create`
-                                    )
+                                    handleClick(slideDetails[page].path, 'create')
                                 }
                                 onExploreClick={() =>
-                                    router.push(
-                                        slideDetails[page].path + `/explore`
-                                    )
+                                    handleClick(slideDetails[page].path, 'explore')
                                 }
                             />
                         </motion.div>

diff --git a/examples/frontend/pages/ml/[project]/explore/index.tsx b/examples/frontend/pages/ml/[project]/explore/index.tsx
@@ -31,7 +31,7 @@ const Explore = () => {
     )
 
     // hook that contains all the logic of explore page
-    const { items, nextPage } = useNFTExplore(contractAdress, NFT_PER_PAGE)
+    const { items, nextPage, notLogged } = useNFTExplore(contractAdress, NFT_PER_PAGE)
 
     function loadMore() {
         try {
@@ -47,7 +47,7 @@ const Explore = () => {
             project={project}
             items={items}
             loadMore={loadMore}
-            totalSupply={totalSupply}
+            totalSupply={notLogged ? 0 : totalSupply}
             baseUrl={`/${project}/explore/`}
             type="image"
         />
@@ -60,6 +60,7 @@ function useNFTExplore(contractAdress: string, limitPerPage = 4) {
     const [currentPage, setCurrentPage] = useState(0)
     const [data, setData] = useState([])
     const [isLoading, setIsLoading] = useState(true)
+    const [notLogged, setNotLogged] = useState(true)
 
     const from_index = Math.floor(limitPerPage * currentPage)
 
@@ -79,13 +80,19 @@ function useNFTExplore(contractAdress: string, limitPerPage = 4) {
 
     // Excute function if contract change or currentPage change
     useEffect(() => {
+        let signedAddress = localStorage.getItem('contractAddress');
+
         // make sure the user is logged in and the contract is the right contract
         if (
             contract?.account?.accountId &&
-            contract.contractId == contractAdress
+            contract.contractId == contractAdress &&
+            contract.contractId == signedAddress
         ) {
             setIsLoading(true)
+            setNotLogged(false)
             getData()
+        } else {
+            setNotLogged(true)
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [contract, currentPage])
@@ -94,5 +101,6 @@ function useNFTExplore(contractAdress: string, limitPerPage = 4) {
         items: data,
         loading: isLoading,
         nextPage: () => setCurrentPage(currentPage + 1),
+        notLogged: notLogged,
     }
 }
diff --git a/examples/frontend/pages/share/explore/index.tsx b/examples/frontend/pages/share/explore/index.tsx
@@ -31,7 +31,7 @@ const Explore = () => {
     )
 
     // hook that contains all the logic of explore page
-    const { items, nextPage } = useNFTExplore(contractAdress, NFT_PER_PAGE)
+    const { items, nextPage, notLogged } = useNFTExplore(contractAdress, NFT_PER_PAGE)
 
     function loadMore() {
         try {
@@ -47,7 +47,7 @@ const Explore = () => {
             project={project}
             items={items}
             loadMore={loadMore}
-            totalSupply={totalSupply}
+            totalSupply={notLogged ? 0 : totalSupply}
             baseUrl={`/${project}/explore/`}
         />
     )
@@ -59,6 +59,7 @@ function useNFTExplore(contractAdress: string, limitPerPage = 4) {
     const [currentPage, setCurrentPage] = useState(0)
     const [data, setData] = useState([])
     const [isLoading, setIsLoading] = useState(true)
+    const [notLogged, setNotLogged] = useState(true)
 
     const from_index = Math.floor(limitPerPage * currentPage)
 
@@ -78,13 +79,19 @@ function useNFTExplore(contractAdress: string, limitPerPage = 4) {
 
     // Excute function if contract change or currentPage change
     useEffect(() => {
+        let signedAddress = localStorage.getItem('contractAddress');
+
         // make sure the user is logged in and the contract is the right contract
         if (
             contract?.account?.accountId &&
-            contract.contractId == contractAdress
+            contract.contractId == contractAdress &&
+            contract.contractId == signedAddress
         ) {
+            setNotLogged(false)
             setIsLoading(true)
             getData()
+        } else {
+            setNotLogged(true)
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [contract, currentPage])
@@ -93,5 +100,6 @@ function useNFTExplore(contractAdress: string, limitPerPage = 4) {
         items: data,
         loading: isLoading,
         nextPage: () => setCurrentPage(currentPage + 1),
+        notLogged: notLogged,
     }
 }