GH-110 Fix strapi to fetch data in realtime. #110
Conversation
Signed-off-by: Martin Sulikowski <vLuckyyy.biznes@gmail.com>
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe Team component now manages a loading state to show a message while fetching team members and displays a styled error message if something goes wrong, including the HTTP status code. It fetches data from the API with an explicit JSON header and validates the response format before updating members. Links in TeamMember open in new tabs securely. The Projects component added similar loading and error handling improvements, removed a static export, and validates fetched data. Both the team and project API routes now include error handling, caching headers, and a revalidation setting for better performance and reliability. The public interfaces of these components remain unchanged. Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
app/api/team/route.tsOops! Something went wrong! :( ESLint: 9.12.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by app/api/project/route.tsOops! Something went wrong! :( ESLint: 9.12.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by components/projects/Projects.tsxOops! Something went wrong! :( ESLint: 9.12.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code Graph Analysis (2)app/api/project/route.ts (1)
app/api/team/route.ts (1)
🔇 Additional comments (17)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
components/team/Team.tsx (2)
62-62: Translate the comment to EnglishFor consistency and better collaboration, please use English comments.
-// Dodanie klucza API jeśli istnieje +// Add API key if it exists
52-94: Consider adding cleanup for unmounted componentsThe current implementation doesn't handle the case where the component unmounts during the fetch operation.
useEffect(() => { + let isMounted = true; const fetchMembers = async () => { try { setLoading(true); const headers: HeadersInit = { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache' }; // Add API key if it exists if (STRAPI_KEY) { headers['Authorization'] = `Bearer ${STRAPI_KEY}`; } // Direct request to Strapi using environment variables const response = await fetch(`${STRAPI_URL}/api/team-members?populate=team_roles`, { method: 'GET', headers }); if (!response.ok) { throw new Error(`Failed to fetch team members: ${response.status}`); } const data = await response.json(); if (data && data.data) { + if (isMounted) { setMembers(data.data); + } } else { throw new Error("Invalid data structure in API response"); } } catch (error) { const err = error as Error; + if (isMounted) { setError(err.message); + } console.error("Error fetching team members:", err); } finally { + if (isMounted) { setLoading(false); + } } }; fetchMembers(); + return () => { + isMounted = false; + }; }, []);🧰 Tools
🪛 Biome (1.9.4)
[error] 79-79: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/team/Team.tsx(5 hunks)
🔇 Additional comments (5)
components/team/Team.tsx (5)
57-71: Good implementation of fetch with headersThe cache control headers and conditional API key usage look good. This will help with real-time data fetching.
88-90: Good use of finally blockUsing a finally block ensures the loading state is properly reset even if an error occurs.
96-106: Nice loading state implementationThe loading state provides good feedback to users while data is being fetched.
109-117: Well-styled error handlingThe error state is nicely styled and provides clear feedback to users.
182-183: Good security practice for external linksAdding target="_blank" with rel="noopener noreferrer" is important for security when opening links in new tabs.
Also applies to: 195-196
vLuckyyy
changed the title
No description provided.