climateconnect icon indicating copy to clipboard operation
climateconnect copied to clipboard
verified publisher icon climateconnect

Added welcome box component to hub model

Open fateme-ramezanpour opened this issue 4 months ago • 2 comments

Description

This pull request aims to add a new welcome_box_component field to the Hub model, enabling dynamic loading of welcome components.

Issue: #1580

Change

To aim this goal, we have changes on Backend and Frontend: Backend

  • Added a new welcome_box_component field to the Hub model.
  • Updated the Hub serializer to include the new field.

Frontend

Documentation: Optimizing Welcome Box Component Loading Our goal is to make the welcome box component's loading process more efficient, as its current dynamic import leads to a visible loading spinner for users.

Problem: The component's name is stored in our database, requiring a dynamic import to display the correct welcome box. On a full page load, this client-side import causes a noticeable delay.

Analysis of Solutions Two primary approaches to improve performance were considered.

  • Static Generation (getStaticProps): We cannot use getStaticProps to generate this component at build time. we should use only getServersideProps or getStaticProps for one page.

  • The component was directly loaded within getServerSideProps to ensure rendering on the server before being sent to the client. This approach was blocked by a fundamental limitation of Next.js: getServerSideProps can only return JSON-serializable data. A React component is a JavaScript function and therefore cannot be converted into a JSON format. This results in a TypeError.

Checked the following

  • [ ] Pages affected by this change work on mobile
  • [ ] Pages affected by this change work when logged out
  • [ ] Pages affected by this change work when logged in
  • [ ] Pages affected by this change work with custom theme and default theme
  • [ ] Run within /frontend: yarn format && yarn lint
  • [ ] Run within /backend: make format && make lint

What and Why

Summary by CodeRabbit

  • New Features
    • Hubs can now specify an optional “welcome box” component name, enabling locale-aware dynamic rendering on hub pages.
    • Added dynamic Devlink loading hook for landing/welcome components with loading state and fallback.
  • Refactor
    • Replaced legacy custom “welcome” config with component-based rendering; removed outdated config types and examples.
  • Documentation
    • Improved README formatting and clarified frontend env var example by quoting LOCATION_HUBS.
  • Chores
    • Added and aligned backend schema and API to expose the new welcome box component field.

fateme-ramezanpour avatar Aug 21 '25 12:08 fateme-ramezanpour

Walkthrough

Adds Hub.welcome_box_component field with migrations and exposes it via serializer. Frontend refactors to load Devlink components via a new hook, wiring the welcome box to hubData.welcome_box_component. Removes legacy custom hub “welcome” config and an old PRIO1 config module. Minor doc and comment/formatting adjustments.

Changes

Cohort / File(s) Summary of changes
Docs formatting
README.md		 Minor formatting tweaks; quoted example for LOCATION_HUBS.
Backend: Hub welcome box field
backend/hubs/models/hub.py, backend/hubs/serializers/hub.py, backend/hubs/migrations/0042_hub_welcome_box_component.py, backend/hubs/migrations/0043_alter_hub_welcome_box_component.py, backend/hubs/migrations/0044_alter_hub_welcome_box_component.py		 Add optional CharField welcome_box_component to Hub; refine help_text; expose in serializer; add migrations.
Frontend: Devlink hook + integration
frontend/src/components/hooks/useDevlinkComponent.ts, frontend/src/components/hub/HubBrowsePage.tsx, frontend/src/components/hub/HubContent.tsx, frontend/pages/hubs/[hubUrl]/index.tsx		 Introduce hook to dynamically load Devlink component; use hubData.welcome_box_component; render spinner/component/fallback; replace previous inline dynamic import on hub page.
Frontend: remove legacy custom welcome config
frontend/public/data/customHubConfig/prio1.ts, frontend/public/data/customHubConfig/scott.ts, frontend/public/data/customHubtypes.ts, frontend/public/data/prio1Config.ts		 Remove welcome fields from custom hub configs and types; delete prio1Config module.
Misc frontend nits
frontend/src/components/devlink/DevlinkPage.tsx, frontend/src/components/header/Header.tsx		 Non-functional comment and whitespace cleanup.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant HubPage as HubBrowsePage
  participant Hook as useDevlinkComponent
  participant Devlink as Dynamic import(../../../devlink)
  participant Content as HubContent

  User->>HubPage: Navigate to hub
  HubPage->>Hook: useDevlinkComponent(hubData, hubData.welcome_box_component, locale)
  Hook->>Hook: Normalize component name by locale (En/De prefix)
  Hook->>Devlink: import("../../../devlink")
  Devlink-->>Hook: Components module
  Hook-->>HubPage: { DevlinkComponent, isLoading }
  HubPage->>Content: Render with DevlinkComponent, isLoadingWelcomebox

  alt isLoadingWelcomebox
    Content->>User: Show LoadingSpinner
  else DevlinkComponent available
    Content->>User: Render DevlinkComponent
  else
    Content->>User: Render LoggedOutLocationHubBox
  end

sequenceDiagram
  participant Admin as Admin/Editor
  participant DB as Django Migrations
  participant API as Backend API (Hub serializer)
  participant FE as Frontend

  Admin->>DB: Apply migrations 0042–0044
  DB-->>DB: Add/alter Hub.welcome_box_component
  FE->>API: GET /hubs/<id>
  API-->>FE: Hub JSON incl. welcome_box_component
  FE->>FE: Pass field to useDevlinkComponent

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • climateconnect/climateconnect#1541 — Introduces custom hub welcome/Devlink config; overlaps with removal/refactor of the same areas and Devlink-based welcome rendering.

Suggested labels

PR: looking for reviewer

Suggested reviewers

  • Idontker
  • positiveimpact

Poem

A rabbit hops through hubs so bright,
New boxes welcome, left and right.
A hook now fetches names with cheer,
Devlink whispers, “Render here!”
Old configs fade with gentle grace—
Thump-thump, onward to a cleaner place. 🐇✨

[!TIP]

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
  • [ ] 📝 Generate Docstrings
🧪 Generate unit tests
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
  • [ ] Commit unit tests in branch welcome_page_component

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot] avatar Aug 21 '25 12:08 coderabbitai[bot]

Should we find a different solution here or just upgrade our nextjs version?

positiveimpact avatar Oct 07 '25 08:10 positiveimpact

Closing this PR. Will address it again after we have upgraded next.js.

HaraldWalker avatar Dec 01 '25 08:12 HaraldWalker