diff --git a/src/App.tsx b/src/App.tsx index 0cde4f7..7e1f764 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,4 @@ import React, { Suspense, useEffect } from "react"; -import Navbar from "src/Components/Navbar/Navbar"; import ModalsContainer from "src/Components/Modals/ModalsContainer/ModalsContainer"; import { useAppDispatch, useAppSelector } from './utils/hooks'; import { Wallet_Service } from "./services"; @@ -10,23 +9,30 @@ import { useMeQuery } from "./graphql"; import { setUser } from "./redux/features/user.slice"; import ProtectedRoute from "./Components/ProtectedRoute/ProtectedRoute"; import { Helmet } from "react-helmet"; +import { NavbarLayout } from "./utils/routing/layouts"; +import { Loadable } from "./utils/routing"; + + // Pages -const FeedPage = React.lazy(() => import("./features/Posts/pages/FeedPage/FeedPage")) -const PostDetailsPage = React.lazy(() => import("./features/Posts/pages/PostDetailsPage/PostDetailsPage")) -const CreatePostPage = React.lazy(() => import("./features/Posts/pages/CreatePostPage/CreatePostPage")) -const PreviewPostPage = React.lazy(() => import("./features/Posts/pages/PreviewPostPage/PreviewPostPage")) +const FeedPage = Loadable(React.lazy(() => import("./features/Posts/pages/FeedPage/FeedPage"))) +const PostDetailsPage = Loadable(React.lazy(() => import("./features/Posts/pages/PostDetailsPage/PostDetailsPage"))) +const CreatePostPage = Loadable(React.lazy(() => import("./features/Posts/pages/CreatePostPage/CreatePostPage"))) +const PreviewPostPage = Loadable(React.lazy(() => import("./features/Posts/pages/PreviewPostPage/PreviewPostPage"))) + +const HottestPage = Loadable(React.lazy(() => import("src/features/Projects/pages/HottestPage/HottestPage"))) +const CategoryPage = Loadable(React.lazy(() => import("src/features/Projects/pages/CategoryPage/CategoryPage"))) +const ExplorePage = Loadable(React.lazy(() => import("src/features/Projects/pages/ExplorePage"))) + +const HackathonsPage = Loadable(React.lazy(() => import("./features/Hackathons/pages/HackathonsPage/HackathonsPage"))) + +const DonatePage = Loadable(React.lazy(() => import("./features/Donations/pages/DonatePage/DonatePage"))) +const LoginPage = Loadable(React.lazy(() => import("./features/Auth/pages/LoginPage/LoginPage"))) +const LogoutPage = Loadable(React.lazy(() => import("./features/Auth/pages/LogoutPage/LogoutPage"))) +const ProfilePage = Loadable(React.lazy(() => import("./features/Profiles/pages/ProfilePage/ProfilePage"))) -const HottestPage = React.lazy(() => import("src/features/Projects/pages/HottestPage/HottestPage")) -const CategoryPage = React.lazy(() => import("src/features/Projects/pages/CategoryPage/CategoryPage")) -const ExplorePage = React.lazy(() => import("src/features/Projects/pages/ExplorePage")) -const HackathonsPage = React.lazy(() => import("./features/Hackathons/pages/HackathonsPage/HackathonsPage")) -const DonatePage = React.lazy(() => import("./features/Donations/pages/DonatePage/DonatePage")) -const LoginPage = React.lazy(() => import("./features/Auth/pages/LoginPage/LoginPage")) -const LogoutPage = React.lazy(() => import("./features/Auth/pages/LogoutPage/LogoutPage")) -const ProfilePage = React.lazy(() => import("./features/Profiles/pages/ProfilePage/ProfilePage")) function App() { const { isWalletConnected } = useAppSelector(state => ({ @@ -76,27 +82,30 @@ function App() { /> - }> - } /> - } /> - } /> - - } /> } /> } /> - } /> - } /> + }> + } /> + } /> + } /> - } /> + } /> + } /> - } /> - } /> - } /> + } /> + + } /> + + } /> + } /> + } /> + + } /> + - } /> diff --git a/src/Components/ProtectedRoute/ProtectedRoute.tsx b/src/Components/ProtectedRoute/ProtectedRoute.tsx index 6416840..0235323 100644 --- a/src/Components/ProtectedRoute/ProtectedRoute.tsx +++ b/src/Components/ProtectedRoute/ProtectedRoute.tsx @@ -1,5 +1,5 @@ import { PropsWithChildren } from "react"; -import { Navigate, } from "react-router-dom"; +import { Navigate, useLocation } from "react-router-dom"; import { useAppSelector } from "src/utils/hooks"; interface Props { @@ -17,10 +17,14 @@ export default function ProtectedRoute({ const user = useAppSelector(state => state.user.me); + const location = useLocation(); + + + if (user === undefined) return <> if (user === null) - return ; + return ; if (!isAllowed) { diff --git a/src/features/Auth/pages/LoginPage/LoginPage.tsx b/src/features/Auth/pages/LoginPage/LoginPage.tsx index 4dd7352..f3b9ccb 100644 --- a/src/features/Auth/pages/LoginPage/LoginPage.tsx +++ b/src/features/Auth/pages/LoginPage/LoginPage.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useState } from "react" import { Helmet } from "react-helmet"; import { Grid } from "react-loader-spinner"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useLocation } from "react-router-dom"; import { useMeQuery } from "src/graphql" import { CONSTS } from "src/utils"; import { QRCodeSVG } from 'qrcode.react'; @@ -9,6 +9,7 @@ import { IoRocketOutline } from "react-icons/io5"; import Button from "src/Components/Button/Button"; import { FiCopy } from "react-icons/fi"; import useCopyToClipboard from "src/utils/hooks/useCopyToClipboard"; +import { getPropertyFromUnknown, } from "src/utils/helperFunctions"; @@ -58,6 +59,7 @@ const useLnurlQuery = () => { export default function LoginPage() { const [isLoggedIn, setIsLoggedIn] = useState(false); const navigate = useNavigate(); + const location = useLocation(); const [copied, setCopied] = useState(false); const { loadingLnurl, data: { lnurl, session_token }, error } = useLnurlQuery(); @@ -75,7 +77,10 @@ export default function LoginPage() { setIsLoggedIn(true); meQuery.stopPolling(); setTimeout(() => { - navigate('/') + const cameFrom = getPropertyFromUnknown(location.state, 'from'); + const navigateTo = cameFrom ? cameFrom : '/' + + navigate(navigateTo) }, 2000) } diff --git a/src/features/Posts/pages/FeedPage/FeedPage.tsx b/src/features/Posts/pages/FeedPage/FeedPage.tsx index 6173ca4..2f3e20c 100644 --- a/src/features/Posts/pages/FeedPage/FeedPage.tsx +++ b/src/features/Posts/pages/FeedPage/FeedPage.tsx @@ -79,14 +79,13 @@ export default function FeedPage() { top: `${navHeight + 16}px`, maxHeight: `calc(100vh - ${navHeight}px - 16px)`, }}> - {isLoggedIn && - } +
!/^https?:\/\//i.test(url) ? `http://${url}` : url; \ No newline at end of file +export const withHttp = (url: string) => !/^https?:\/\//i.test(url) ? `http://${url}` : url; + +export function getPropertyFromUnknown(obj: unknown, prop: string | number | symbol): Value | null { + if (typeof obj === 'object' && obj !== null && prop in obj) + return (obj as any)[prop as any] as Value; + return null +} \ No newline at end of file diff --git a/src/utils/routing/index.ts b/src/utils/routing/index.ts index 7256eea..de328f8 100644 --- a/src/utils/routing/index.ts +++ b/src/utils/routing/index.ts @@ -1 +1,2 @@ -export * from './routes' \ No newline at end of file +export * from './routes' +export * from './loadable' \ No newline at end of file diff --git a/src/utils/routing/layouts/NavbarLayout.tsx b/src/utils/routing/layouts/NavbarLayout.tsx new file mode 100644 index 0000000..cc63068 --- /dev/null +++ b/src/utils/routing/layouts/NavbarLayout.tsx @@ -0,0 +1,9 @@ +import { Outlet, } from 'react-router-dom'; +import Navbar from "src/Components/Navbar/Navbar"; + +export const NavbarLayout = () => { + return <> + + + +}; diff --git a/src/utils/routing/layouts/index.ts b/src/utils/routing/layouts/index.ts new file mode 100644 index 0000000..6a608f4 --- /dev/null +++ b/src/utils/routing/layouts/index.ts @@ -0,0 +1,2 @@ + +export * from './NavbarLayout' \ No newline at end of file diff --git a/src/utils/routing/loadable.tsx b/src/utils/routing/loadable.tsx new file mode 100644 index 0000000..d8eabce --- /dev/null +++ b/src/utils/routing/loadable.tsx @@ -0,0 +1,8 @@ +import { Suspense } from "react"; +import LoadingPage from "src/Components/LoadingPage/LoadingPage"; + +export const Loadable = (Component: any, Loading = LoadingPage) => (props: any) => ( + }> + + +);