Skip to content

Commit

Permalink
succesfully converted to file based routng
Browse files Browse the repository at this point in the history
  • Loading branch information
jitunayak committed Jun 4, 2024
1 parent 720d35d commit ec89798
Show file tree
Hide file tree
Showing 20 changed files with 992 additions and 1,942 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<title>Airebnb | Holiday Rental</title>
</head>
<body>
<div id="root"></div>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Expand Down
13 changes: 7 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"@kinde-oss/kinde-auth-react": "^3.0.28",
"@stitches/react": "^1.2.8",
"@tanstack/react-form": "^0.20.3",
"@tanstack/react-query": "^5.40.0",
"@tanstack/react-query-devtools": "^5.40.0",
"@tanstack/react-query": "^5.40.1",
"@tanstack/react-query-devtools": "^5.40.1",
"@tanstack/react-router": "^1.34.9",
"@tanstack/zod-form-adapter": "^0.20.3",
"axios": "^1.7.2",
Expand All @@ -26,10 +26,11 @@
"zod": "^3.23.8"
},
"devDependencies": {
"@playwright/test": "^1.42.1",
"@playwright/test": "^1.44.1",
"@tanstack/eslint-plugin-query": "^4.38.0",
"@tanstack/router-devtools": "^0.0.1-beta.139",
"@types/node": "^20.14.0",
"@tanstack/router-devtools": "1.34.9",
"@tanstack/router-vite-plugin": "^1.34.8",
"@types/node": "^20.14.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^6.21.0",
Expand All @@ -46,4 +47,4 @@
"typescript": "^5.4.5",
"vite": "^5.2.12"
}
}
}
744 changes: 687 additions & 57 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

24 changes: 11 additions & 13 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,17 @@ const App: React.FC<IProps> = ({ router }) => {
});

return (
<>
<KindeProvider
clientId="9f31d731d86b41d4b38dd4988cb9eb42"
domain="https://airbnb.kinde.com"
logoutUri={window.location.origin}
redirectUri={window.location.origin}
>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</KindeProvider>
</>
<KindeProvider
clientId="9f31d731d86b41d4b38dd4988cb9eb42"
domain="https://airbnb.kinde.com"
logoutUri={window.location.origin}
redirectUri={window.location.origin}
>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</KindeProvider>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { styled } from '@/stitches.config';
import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
import { styled } from '@stitches/react';
import { useNavigate } from '@tanstack/react-router';
import { MapPin, Search } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
Expand Down
72 changes: 35 additions & 37 deletions src/components/UserMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
import { styled } from "@stitches/react";
import { Link } from "@tanstack/react-router";

import { wishListRoute } from "../main";
import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
import { styled } from '@stitches/react';
import { Link } from '@tanstack/react-router';

export default function UserMenu({
menuRef,
Expand All @@ -16,7 +14,7 @@ export default function UserMenu({
<MenuItem variant="primary">Notifications</MenuItem>
<MenuItem variant="primary">Trips</MenuItem>
<MenuItem variant="primary">
<Link style={{ display: "flex" }} to={wishListRoute.to}>
<Link style={{ display: 'flex' }} to="/wishlists">
Wishlists
</Link>
</MenuItem>
Expand All @@ -32,50 +30,50 @@ export default function UserMenu({
);
}

const FloatWrapper = styled("div", {
const FloatWrapper = styled('div', {
// backgroundColor: "White",
backdropFilter: "blur(40px)",
backgroundColor: "rgba(255, 255, 255, 0.75)",
border: "1px solid #eee",
borderRadius: ".6rem",
boxShadow: "-1px 4px 10px 3px rgba(0,0,0,0.1);",
cursor: "pointer",
display: "flex",
flexDirection: "column",
padding: ".6rem 0rem",
position: "absolute",
right: ".5rem",
top: "3rem",
backdropFilter: 'blur(40px)',
backgroundColor: 'rgba(255, 255, 255, 0.75)',
border: '1px solid #eee',
borderRadius: '.6rem',
boxShadow: '-1px 4px 10px 3px rgba(0,0,0,0.1);',
cursor: 'pointer',
display: 'flex',
flexDirection: 'column',
padding: '.6rem 0rem',
position: 'absolute',
right: '.5rem',
top: '3rem',
zIndex: 11,
});
const Divider = styled("div", {
backgroundColor: "#eee",
height: "1px",
margin: ".8rem 0rem",
width: "100%",
const Divider = styled('div', {
backgroundColor: '#eee',
height: '1px',
margin: '.8rem 0rem',
width: '100%',
});
const MenuItem = styled("span", {
"&:hover": {
backgroundColor: "#f6f6f6",
const MenuItem = styled('span', {
'&:hover': {
backgroundColor: '#f6f6f6',
},
fontSize: "13px",
minWidth: "12rem",
padding: ".6rem 1rem",
fontSize: '13px',
minWidth: '12rem',
padding: '.6rem 1rem',
variants: {
variant: {
danger: {
"&:hover": {
fontWeight: "500",
'&:hover': {
fontWeight: '500',
},
color: "red",
color: 'red',
},
primary: {
color: "black",
fontWeight: "500",
color: 'black',
fontWeight: '500',
},
secondary: {
color: "gray",
fontWeight: "400",
color: 'gray',
fontWeight: '400',
},
},
},
Expand Down
93 changes: 21 additions & 72 deletions src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,89 +1,38 @@
import { Outlet, RootRoute, Route, Router } from '@tanstack/react-router';
// import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import { QueryClient } from '@tanstack/react-query';
import { createRouter } from '@tanstack/react-router';
import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App.tsx';
import './index.css';
import Home from './pages/Home.tsx';
import Hosting from './pages/Hosting';
import NewListingOnboarding from './pages/Hosting/NewListing/index.tsx';
import RoomPage from './pages/Room/index.tsx';
import Wishlist from './pages/Wishlists.tsx';

// eslint-disable-next-line react-refresh/only-export-components
function Root() {
return (
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
}}
>
<Outlet />
{/* <TanStackRouterDevtools initialIsOpen={false} /> */}
</div>
);
}
const rootRoute = new RootRoute({
component: Root,
});

// Create an index route
const indexRoute = new Route({
component: Home,
getParentRoute: () => rootRoute,
path: '/',
});
export const hostingRoute = new Route({
component: Hosting,
getParentRoute: () => rootRoute,
path: 'hosting',
});

export const newListingOnboard = new Route({
component: NewListingOnboarding,
getParentRoute: () => rootRoute,
path: 'listing',
import { routeTree } from './routeTree.gen';

// Create a new router instance
const queryClient = new QueryClient();

// Set up a Router instance
const router = createRouter({
context: {
queryClient,
},
defaultPreload: 'intent',
// This will ensure that the loader is always called when the route is preloaded or visited
defaultPreloadStaleTime: 0,
// Since we're using React Query, we don't want loader calls to ever be stale
routeTree,
});

export const wishListRoute = new Route({
component: Wishlist,
getParentRoute: () => rootRoute,
path: 'wishlists',
});

export const roomsRoute = new Route({
component: RoomPage,
getParentRoute: () => rootRoute,
path: 'rooms',
});
export const roomRoute = new Route({
component: RoomPage,
getParentRoute: () => roomsRoute,
path: '$roomId',
});
const routeTree = rootRoute.addChildren([
indexRoute,
wishListRoute,
roomsRoute.addChildren([roomRoute]),
hostingRoute.addChildren([newListingOnboard]),
]);

// Create the router using your route tree
const router = new Router({ routeTree });

// Register your router for maximum type safety
// Register the router instance for type safety
declare module '@tanstack/react-router' {
interface Register {
router: typeof router;
}
}

export type IRouter = typeof router;

ReactDOM.createRoot(document.getElementById('root')!).render(
ReactDOM.createRoot(document.getElementById('app')!).render(
<React.StrictMode>
<App router={router} />
</React.StrictMode>
</React.StrictMode>,
);
34 changes: 21 additions & 13 deletions src/pages/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,39 @@
import { useNavigate } from "@tanstack/react-router";
import { useEffect } from "react";

import { Footer } from "../components/Footer";
import HomeResults from "../components/HomeResults";
import StickyHeader from "../components/StickyHeader";
import { getLocalStorage } from "../utils/LocalStorage";
import { Footer } from '@/components/Footer';
import HomeResults from '@/components/HomeResults';
import StickyHeader from '@/components/StickyHeader';
import { styled } from '@/stitches.config';
import { getLocalStorage } from '@/utils/LocalStorage';
import { useNavigate } from '@tanstack/react-router';
import { useEffect } from 'react';

function Home() {

const navigate = useNavigate();

useEffect(() => {
const redirectUri = getLocalStorage('redirectTo')
console.log(redirectUri)
const redirectUri = getLocalStorage('redirectTo');
if (redirectUri) {
navigate({ to: redirectUri });
localStorage.removeItem('redirectTo');
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, []);

return (
<>
<Container>
<StickyHeader />
<HomeResults />
<Footer />
</>
</Container>
);
}

export default Home;

const Container = styled('div', {
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
width: '100%',
});
2 changes: 1 addition & 1 deletion src/pages/Hosting/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const HostingHeader: React.FC = () => {
</span>
<HeaderWrapper>
<WelcomeMsg>Welcome, Jitu!</WelcomeMsg>
<OutlineButton onClick={() => navigate({ to: '/listing' })}>
<OutlineButton onClick={() => navigate({ to: '/hosting/listing' })}>
Add your listing
</OutlineButton>
</HeaderWrapper>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Room/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Column, Row } from '@/components';
import Header from '@/components/Header';
import { useApi } from '@/hooks';
import { styled } from '@/stitches.config';
import { useQuery } from '@tanstack/react-query';
import { useParams } from '@tanstack/react-router';

import { styled } from '../../stitches.config';
import Header from '../Hosting/Header';
import Reserve from './Reserve';

function RoomPage() {
Expand Down
Loading

0 comments on commit ec89798

Please sign in to comment.