From 72d8c89920bf9a7389cc427a2de403089f223197 Mon Sep 17 00:00:00 2001 From: shivam154co Date: Tue, 6 Jan 2026 12:11:46 +0530 Subject: [PATCH 1/2] Add custom 404 page (#33) --- package-lock.json | 32 +++++++++-------- package.json | 2 +- src/App.tsx | 33 +++++++++-------- src/components/NotFound.tsx | 72 +++++++++++++++++++++++++++++++++++++ 4 files changed, 110 insertions(+), 29 deletions(-) create mode 100644 src/components/NotFound.tsx diff --git a/package-lock.json b/package-lock.json index 9b9ae4b5..c08bdc9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "lucide-react": "^0.552.0", "react": "^19.1.1", "react-dom": "^19.1.1", - "react-router-dom": "^7.9.5", + "react-router-dom": "^7.11.0", "tailwindcss": "^4.1.16" }, "devDependencies": { @@ -2293,12 +2293,16 @@ "license": "MIT" }, "node_modules/cookie": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", - "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", "license": "MIT", "engines": { "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/cross-spawn": { @@ -2920,9 +2924,9 @@ "license": "MIT" }, "node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", + "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", "dev": true, "license": "MIT", "dependencies": { @@ -3582,9 +3586,9 @@ } }, "node_modules/react-router": { - "version": "7.9.5", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.5.tgz", - "integrity": "sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==", + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.11.0.tgz", + "integrity": "sha512-uI4JkMmjbWCZc01WVP2cH7ZfSzH91JAZUDd7/nIprDgWxBV1TkkmLToFh7EbMTcMak8URFRa2YoBL/W8GWnCTQ==", "license": "MIT", "dependencies": { "cookie": "^1.0.1", @@ -3604,12 +3608,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.9.5", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.5.tgz", - "integrity": "sha512-mkEmq/K8tKN63Ae2M7Xgz3c9l9YNbY+NHH6NNeUmLA3kDkhKXRsNb/ZpxaEunvGo2/3YXdk5EJU3Hxp3ocaBPw==", + "version": "7.11.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.11.0.tgz", + "integrity": "sha512-e49Ir/kMGRzFOOrYQBdoitq3ULigw4lKbAyKusnvtDu2t4dBX4AGYPrzNvorXmVuOyeakai6FUPW5MmibvVG8g==", "license": "MIT", "dependencies": { - "react-router": "7.9.5" + "react-router": "7.11.0" }, "engines": { "node": ">=20.0.0" diff --git a/package.json b/package.json index 8e30fcd7..210f0bca 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "lucide-react": "^0.552.0", "react": "^19.1.1", "react-dom": "^19.1.1", - "react-router-dom": "^7.9.5", + "react-router-dom": "^7.11.0", "tailwindcss": "^4.1.16" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index 93b9276a..736f3cb5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { Routes, Route } from 'react-router' +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' import Home from './pages/Home.tsx' import CreatePostPage from './pages/CreatePostPage.tsx' import Navbar from './components/Navbar.tsx' @@ -7,26 +7,31 @@ import CreateCommunityPage from './pages/CreateCommunityPage.tsx' import {CommunityPage} from './pages/CommunityPage.tsx' import { CommunitiesPage } from './pages/CommunitiesPage.tsx' import MessagesPage from './pages/MessagesPage.tsx' +import NotFound from './components/NotFound.tsx' // Import the 404 page function App() { return ( <>
- -
- - } /> - } /> - } /> - } /> - } /> - } /> - } /> - -
+ {/* Wrap everything with Router */} + +
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + {/* Add 404 route at the end - catches all undefined routes */} + } /> + +
+
) } -export default App +export default App \ No newline at end of file diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx new file mode 100644 index 00000000..c34362f2 --- /dev/null +++ b/src/components/NotFound.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const NotFound = () => { + const styles = { + container: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minHeight: '100vh', + backgroundColor: '#f5f5f5', + padding: '20px', + fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' + } as React.CSSProperties, + content: { + textAlign: 'center' as const, + backgroundColor: 'white', + padding: '40px', + borderRadius: '12px', + boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', + maxWidth: '500px', + width: '100%' + } as React.CSSProperties, + title: { + fontSize: '6rem', + fontWeight: 700, + color: '#dc3545', + margin: 0, + lineHeight: 1 + } as React.CSSProperties, + subtitle: { + fontSize: '2rem', + fontWeight: 600, + color: '#333', + margin: '20px 0 10px' + } as React.CSSProperties, + message: { + fontSize: '1.1rem', + color: '#666', + marginBottom: '30px', + lineHeight: '1.5' + } as React.CSSProperties, + button: { + display: 'inline-block', + backgroundColor: '#007bff', + color: 'white', + padding: '12px 30px', + borderRadius: '6px', + textDecoration: 'none', + fontWeight: 500, + fontSize: '1rem', + transition: 'background-color 0.3s ease' + } as React.CSSProperties + }; + + return ( +
+
+

404

+

Page Not Found

+

+ Oops! The page you're looking for doesn't exist or has been moved. +

+ + Return to Feed + +
+
+ ); +}; + +export default NotFound; \ No newline at end of file From 5017b8833a7a5e4f9a135654800d07c62c26160b Mon Sep 17 00:00:00 2001 From: shivam154co Date: Tue, 6 Jan 2026 15:04:59 +0530 Subject: [PATCH 2/2] Added a skeleton loader --- src/components/CommunityDisplay.tsx | 23 +++++++++++++-- src/components/PostSkeleton.tsx | 44 +++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 3 deletions(-) create mode 100644 src/components/PostSkeleton.tsx diff --git a/src/components/CommunityDisplay.tsx b/src/components/CommunityDisplay.tsx index 23cfb15c..045a4253 100644 --- a/src/components/CommunityDisplay.tsx +++ b/src/components/CommunityDisplay.tsx @@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query"; import type { Post } from "./PostList"; import { supabase } from "../supabase-client"; import PostItem from "./PostItem"; +import PostSkeleton from "./PostSkeleton"; // Import the skeleton component interface Props { communityId: number; @@ -32,8 +33,25 @@ export const CommunityDisplay = ({ communityId }: Props) => { queryFn: () => fetchCommunityPost(communityId), }); - if (isLoading) - return
Loading posts...
; + // Skeleton loading state + if (isLoading) { + return ( +
+ {/* Skeleton header */} +
+
+
+
+ + {/* Skeleton posts */} +
+ {[...Array(3)].map((_, index) => ( + + ))} +
+
+ ); + } if (error) return ( @@ -57,7 +75,6 @@ export const CommunityDisplay = ({ communityId }: Props) => { {data && data.length > 0 ? ( -
{data.map((post) => ( diff --git a/src/components/PostSkeleton.tsx b/src/components/PostSkeleton.tsx new file mode 100644 index 00000000..29320131 --- /dev/null +++ b/src/components/PostSkeleton.tsx @@ -0,0 +1,44 @@ +// src/components/PostSkeleton.tsx +import React from 'react'; + +const PostSkeleton: React.FC = () => { + return ( +
+ {/* Header with user info */} +
+
+
+
+
+
+
+ + {/* Post title */} +
+ + {/* Post content lines */} +
+
+
+
+
+ + {/* Tags */} +
+
+
+
+ + {/* Action buttons */} +
+
+
+
+
+
+
+
+ ); +}; + +export default PostSkeleton; \ No newline at end of file