This repository has been archived by the owner on Jun 25, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Main.tsx
94 lines (89 loc) · 4.7 KB
/
Main.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { useEffect } from "react";
import styled from "styled-components";
import { Helmet } from "react-helmet";
import { Routes, Route, Navigate, useLocation } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "./redux/hooks";
import LoginPage from "./pages/login/LoginPage";
import RegisterPage from "./pages/register/RegisterPage";
import ProfilePage from "./pages/profile/ProfilePage";
import AuctionHousePage from "./pages/auctionhouse/AuctionHousePage";
import GumballMachinePage from "./pages/gumballmachine/GumballMachinePage";
import MintPage from "./pages/mint/MintPage";
import NftPage from "./pages/nft/NftPage";
import PostPage from "./pages/posts/PostPage";
import SearchPage from "./pages/search/SearchPage";
import NudeSwapPage from "./pages/nudeswap/NudeSwapPage";
import Navbar, { TOTAL_HEIGHT } from "./components/nav/Navbar";
import NotificationsManager from "./components/notifications/NotificationsManager";
import { routes } from "./lib/routes";
import { useGetInitialLoginInfoQuery } from "./api/user";
import { setInitialLoginInfo } from "./redux/slices/user";
import useWallet from "./hooks/useWallet";
const MainContainer = styled.div<{ $isLoggedIn: boolean, $isDarkMode: boolean }>`
height: calc(100% - ${props => props.$isLoggedIn ? TOTAL_HEIGHT : 0}px);
margin-top: ${props => props.$isLoggedIn ? TOTAL_HEIGHT : 0}px;
width: 100%;
overflow-y: auto;
position: relative;
background-color: ${props => props.$isDarkMode ? props.theme.dark.backgroundColor : props.theme.light.backgroundColor};
color: ${props => props.$isDarkMode ? props.theme.dark.textColor : props.theme.light.textColor};
transition: background 500ms ease-in, color 500ms ease-in;
`;
export default function Main() {
const dispatch = useAppDispatch();
const location = useLocation();
const { address } = useWallet();
const { isLoggedIn, token } = useAppSelector(state => state.user);
const { isDarkMode } = useAppSelector(state => state.app);
const {
data: initialLoginInfoData,
isSuccess: isGetInitialLoginInfoSuccess,
} = useGetInitialLoginInfoQuery({ token }, {
skip: !token || !address,
});
useEffect(() => {
if (isGetInitialLoginInfoSuccess && initialLoginInfoData) {
dispatch(setInitialLoginInfo(initialLoginInfoData));
}
}, [dispatch, initialLoginInfoData, isGetInitialLoginInfoSuccess]);
return (
<MainContainer $isLoggedIn={isLoggedIn} $isDarkMode={isDarkMode} id="main-container">
<Helmet>
<title>Own Me | {routes[location.pathname]?.title || "App"}</title>
</Helmet>
{isLoggedIn && <Navbar />}
<NotificationsManager />
<Routes>
<Route path={routes.login.path} element={<LoginPage />} />
<Route path={routes.register.path} element={<RegisterPage />} />
<Route path={routes.candyshop.path} element={
isLoggedIn ? <MintPage /> : <Navigate to="/login" state={{ from: location }} replace={true} />
} />
<Route path={routes.auctionhouse.path} element={
isLoggedIn ? <AuctionHousePage /> : <Navigate to="/login" state={{ from: location }} replace={true} />
} />
<Route path={routes.gumballmachine.path} element={
isLoggedIn ? <GumballMachinePage /> : <Navigate to="/login" state={{ from: location }} replace={true} />
} />
<Route path={routes.mint.path} element={
isLoggedIn ? <MintPage /> : <Navigate to="/login" state={{ from: location }} replace={true} />
} />
<Route path={routes.nudeswap.path} element={
isLoggedIn ? <NudeSwapPage /> : <Navigate to="/login" state={{ from: location }} replace={true} />
} />
<Route path={`${routes.nft.path}/:tokenId`} element={
isLoggedIn ? <NftPage /> : <Navigate to="/login" state={{ from: location }} replace={true} />
} />
<Route path={`${routes.home.path}:name`} element={
isLoggedIn ? <ProfilePage /> : <Navigate to="/login" state={{ from: location }} replace={true} />
} />
<Route path={`${routes.post.path}/:postId`} element={
isLoggedIn ? <PostPage /> : <Navigate to="/login" state={{ from: location }} replace={true} />
} />
<Route path={routes.home.path} element={
isLoggedIn ? <SearchPage /> : <Navigate to="/login" state={{ from: location }} replace={true} />
} />
</Routes>
</MainContainer>
);
}