[Feat]: Implement Automatic Offline Page Display #3500
Conversation
|
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
apps/web/app/[locale]/layout.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThe pull request introduces an Changes
Sequence DiagramsequenceDiagram
participant App as Application
participant OfflineWrapper as OfflineWrapper
participant NetworkState as useNetworkState
participant TimerView as useTimerView
participant Offline as Offline Component
App->>OfflineWrapper: Render children
OfflineWrapper->>NetworkState: Check online status
OfflineWrapper->>TimerView: Check timer status
alt Is Offline and Not Auth Page
OfflineWrapper->>Offline: Render with timer
else Is Online or Auth Page
OfflineWrapper->>App: Render children
end
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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: 0
🧹 Nitpick comments (2)
apps/web/components/pages/offline/index.tsx (1)
Line range hint
11-40: Consider enhancing accessibility for offline state.While the implementation is good, consider adding ARIA attributes to improve accessibility:
-<div className="mt-28 flex flex-col gap-7 items-center"> +<div + className="mt-28 flex flex-col gap-7 items-center" + role="alert" + aria-live="polite" +>apps/web/components/offline-wrapper/index.tsx (1)
25-37: Consider adding error boundary for network state hook.While the implementation is good, consider handling potential errors from the network state hook:
export default function OfflineWrapper({ children }: OfflineWrapperProps) { + const [error, setError] = React.useState<Error | null>(null); - const { online } = useNetworkState(); + const { online } = useNetworkState({ + onError: (error) => setError(error) + }); const { timerStatus } = useTimerView(); const pathname = usePathname(); const isAuthPage = pathname?.startsWith('/auth'); + if (error) { + console.error('Network state error:', error); + return <>{children}</>; + } if (!online && !isAuthPage) { return <Offline showTimer={timerStatus?.running} />; } return <>{children}</>; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/app/[locale]/layout.tsx(2 hunks)apps/web/app/[locale]/page-component.tsx(4 hunks)apps/web/components/offline-wrapper/index.tsx(1 hunks)apps/web/components/pages/offline/index.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (4)
apps/web/components/pages/offline/index.tsx (1)
7-9: LGTM! Well-defined props interface.The
IPropsOfflineinterface is clear and follows TypeScript best practices.apps/web/components/offline-wrapper/index.tsx (1)
12-24: LGTM! Excellent documentation.The JSDoc documentation is comprehensive and includes a clear example of usage.
apps/web/app/[locale]/page-component.tsx (1)
5-5: LGTM! Clean removal of network status handling.The changes successfully move network status handling to the OfflineWrapper component, making the MainPage component more focused.
Also applies to: 44-44, 60-60, 68-68, 74-74, 97-97
apps/web/app/[locale]/layout.tsx (1)
20-20: LGTM! Clean integration of OfflineWrapper.The OfflineWrapper is properly integrated at the layout level, ensuring consistent offline state handling across the application.
Also applies to: 149-158
Innocent-Akim
added
bug
Description
#3479
Please include a summary of the changes and the related issue.
Type of Change
Checklist
Previous screenshots
Please add here videos or images of previous status
Current screenshots
https://www.loom.com/share/8316a0af236e4bcbb0462dd9efca8ebe?sid=79e18763-5922-4dca-b603-5d2962bf9733
Summary by CodeRabbit
Release Notes
New Features
OfflineWrappercomponent to handle network connectivity statesOfflinecomponent with optional timer displayImprovements
MainPagecomponent by removing unused network and timer status checksCode Refactoring