iriver/photography
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve hydration mismatch error and improve project setup

Browse Source 
- Fix React hydration mismatch in ThemeProvider with mounted state check
- Update layout.tsx to use light theme by default instead of system
- Optimize photo filtering with useMemo in page.tsx
- Add Express mock API for development
- Update CLAUDE.md with comprehensive project documentation
- Create backend/ and admin/ directories for future development
This commit is contained in:
xujiang
2025-07-08 17:34:16 +08:00
parent 3d197eb7e3
commit 8c5c9a5f8e
6 changed files with 285 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/layout.tsx
View File

@ -24,8 +24,8 @@ export default function RootLayout({
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
defaultTheme="light"
enableSystem={false}
disableTransitionOnChange
>
<QueryProvider>

16
frontend/app/page.tsx
View File

@ -15,7 +15,6 @@ import { useToast } from "@/components/ui/use-toast"
export default function HomePage() {
const { data: photos = [], isLoading, error } = usePhotos()
const { toast } = useToast()
const [filteredPhotos, setFilteredPhotos] = useState<Photo[]>([])
const [selectedPhoto, setSelectedPhoto] = useState<Photo | null>(null)
const [activeCategory, setActiveCategory] = useState("all")
const [activeTab, setActiveTab] = useState("gallery")
@ -30,17 +29,15 @@ export default function HomePage() {
}
}, [error, toast])
useEffect(() => {
setFilteredPhotos(photos)
}, [photos])
const filteredPhotos = useMemo(() => {
if (activeCategory === "all") {
return photos
}
return photos.filter((photo) => photo.category === activeCategory)
}, [photos, activeCategory])
const handleFilter = (category: string) => {
setActiveCategory(category)
if (category === "all") {
setFilteredPhotos(photos)
} else {
setFilteredPhotos(photos.filter((photo) => photo.category === category))
}
}
const handlePhotoClick = (photo: any) => {
@ -72,7 +69,6 @@ export default function HomePage() {
// Reset filters when switching tabs
if (tab === "timeline") {
setActiveCategory("all")
setFilteredPhotos(photos)
}
}