Skip to content

Modernize frontend component s and reduce codes #749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
dodo920306 wants to merge 84 commits into
base: main
Choose a base branch
from
Draft

Modernize frontend component s and reduce codes #749

dodo920306 wants to merge 84 commits into from
+6,287 −18,050

Conversation

@dodo920306
Copy link
Contributor

@dodo920306 dodo920306 commented Dec 14, 2025

Summary

Modernize frontend code architecture by introducing Factory Pattern and converting Class Components to Functional Components.

Changes

New Utilities

  • serviceFactory.js: Provides reusable CRUD operations

    • createCrudService(): Generates standard CRUD methods
    • customRequest(): Wrapper for non-standard API endpoints
    • formDataRequest(): File upload helper
    • blobRequest(): File download helper

  • modelFactory.js: Provides reusable dva model logic

    • createModel(): Generates complete dva model
    • createListEffect(): Handles paginated lists
    • createSimpleEffect(): Generates simple effects
    • commonReducers: Shared reducers

  • hooks/: New reusable React Hooks

    • useTableManagement: Table management
    • useModalForm: Modal form handling
    • useDeleteConfirm: Delete confirmation dialog

Component Refactoring

  • Convert Organization page from Class Component to Functional Component
  • Convert all pages to Functional Components
    • Agent
    • ChainCode
    • Channel
    • Node
    • UserManagement

Remove Network Feature

  • Remove Network-related pages (src/pages/Network/)
  • Remove Network router configuration

Code Reduction

  • Services: Reduced ~87 lines of duplicate code
  • Models: Reduced ~176 lines of duplicate code

Benefits

  • ✅ Consistent API call patterns
  • ✅ Centralized extension point
  • ✅ Better code readability and maintainability
  • ✅ Modern React patterns (Hooks)

Breaking Changes

  • Network feature has been completely removed
  • Page component APIs may have changed

Dependencies

🤖 This PR description was generated with AI assistance (Claude, Anthropic).

@dodo920306
Remove Celery
76a62e7 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove Celery tasks
97fabfa 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Refactor user module
b52eae9 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Replace envsubst with plain python
120109d 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Create 'auth' application
53f9929 
Signed-off-by: KIRIN.CHU 朱祐麟 <[email protected]>
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Refactor organization into an application
70b01b2 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Refactor agent into an application
4fb0703 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Refactor node into an application
93e6134 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Fulfill node initialization
14dfbf8 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Finish testing new auth, user, organization APIs
e47fc90 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove duplicate config assignments
22eee32 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove duplicate config assignments
155458c 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Reduce duplicate codes of paginators
dbd6c78 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Reduce duplicate codes UserInfoSerializer
eeb7959 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Reduce duplicate codes of NodeListSerializer
732d691 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Make Node migrations
6b992b1 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Finish node container creation
fd91921 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Finish channel creation
111592e 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove old channel codes
284fc8a 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Finish list chaincodes
ce6ba86 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Finish upload chaincodes
407eb5c 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Finish chaincode creation
be87027 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Finish chaincode commit
715ed1f 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove redundant old API files
9222ed8 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove redundant old API files
6b45ce1 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Make migrations
c4fab83 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Move Docker file into api engine
1577c07 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Simplify entrypoint
21e575f 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove Fabric Node templates
f9f1b5f 
Move inside api engine.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove redundant mkdir
d4d5642 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Move the fabric node dockerfile into src
0372e63 
All dockerfiles should be directly placed inside with their
codes. By this way, it reduces the effort to pay attention
to connect them with their true codebase and context.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Add a welcome message on the home page
d442037 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Unify the padding size of the icons
5cc9b6b 
Since the login page doesn't include the `GlobalHeader`, the icon
of the language selection doesn't include the padding like pages
after login.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Add a docs link to the sidebar of dashboards
565c149 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Add the GitHub link to the side bar
826f048 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Add a swagger link to the side bar
f7a49af 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Create an application gateway draft
a8755e2 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Extract chaincode installation logic to another function
c7fe789 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Make chaincode installation and approvement as separate APIs
7930d6c 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Fix Swagger requests failed when accessed via nginx
45b6db3 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Fix unable to get anchor peer ports
80a77eb 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
WIP: Add chaincode commit and transact APIs
c2dee0a 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Force static collection not expecting user input
5477243 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Fix missing lines and redundant space under Flake8
688dbec 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Fix the peers form label
9da7bee 
The peers dropdown in the chaincode form should be
labelled as "peers" directly instead of "Please select
peers" which should be the warning message.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Fix breadcrumb breaks when users enter the home page
b68d5de 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Add cello api-engine data to .gitignore
a03d59d 
The directory contains organizational MSPs should be ignored
by Git.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Use different keys for upper and lower menus
8432467 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Replace deprecated Menu children with items
5e2d34b 
Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Set the chaincodes package IDs once they are created
8900a5f 
To block duplicate package IDs, chaincodes package IDs
will be set when they're created.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Extract common CRUD operations into serviceFactory
d85c455 
- Add src/utils/serviceFactory.js with reusable utilities:
  - createCrudService(): generates standard CRUD methods for REST resources
  - customRequest(): wrapper for non-standard API endpoints
  - formDataRequest(): helper for file uploads
  - blobRequest(): helper for file downloads

- Refactor all service files to use the new factory:
  - agent.js: use createCrudService, remove duplicate applyAgent/createAgent
  - network.js: use createCrudService
  - node.js: use createCrudService + custom helpers
  - organization.js: use createCrudService, fix getOrganization URL path
  - channel.js: use createCrudService
  - chaincode.js: use customRequest + formDataRequest
  - user.js: use createCrudService

This reduces ~87 lines of duplicate code and provides:
- Consistent API call patterns across all services
- Centralized extension point for future enhancements
- Better code readability and maintainability

---
Generated-by: AI (Claude, Anthropic)
Note: All changes in this commit were generated by AI assistant.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Extract common pagination logic into modelFactory
d1d5fa1 
- Add src/utils/modelFactory.js with reusable utilities:
  - createModel(): generates complete dva model with auto reducers
  - createListEffect(): handles paginated list with consistent logic
  - createSimpleEffect(): generates simple call-and-callback effects
  - commonReducers: shared save reducer
  - createClearReducer(): generates reset reducer from initial state

- Refactor all model files to use the new factory:
  - agent.js: 127 -> 56 lines
  - network.js: 75 -> 28 lines
  - node.js: 140 -> 54 lines
  - organization.js: 97 -> 38 lines
  - channel.js: 73 -> 37 lines
  - chaincode.js: 90 -> 48 lines

This reduces ~176 lines of duplicate code and provides:
- Consistent pagination handling across all models
- Auto-generated save/clear reducers
- Flexible customization for edge cases

---
Generated-by: AI (Claude, Anthropic)

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Add reusable hooks for table management
a88015c 
- Add src/hooks/ directory with custom React hooks:
  - useTableManagement: handles selected rows, pagination, filters
  - useModalForm: handles modal visibility, create/update modes
  - useDeleteConfirm: handles delete confirmation dialog with i18n

These hooks can reduce ~50 lines of boilerplate code per page
when migrating from Class Components to Function Components.

---
Generated-by: AI (Claude, Anthropic)

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Fix unable to load new models
9e7b6c7 
New models generated by the factory now will fail to be
loaded since they're not static. Thus, they will be forced
to be loaded after the DVA app is ready.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Migrate the Organization Page from a class component to a function one
aacd436 
With the introduction of Hooks in React 16.8, function components have
become the preferred way to write React components. They are simpler,
more readable, and provide more powerful patterns for managing state
and side effects compared to class components.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Change all pages to functional components
f57f106 
With the introduction of Hooks in React 16.8, function components have
become the preferred way to write React components. They are simpler,
more readable, and provide more powerful patterns for managing state
and side effects compared to class components.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove network pages
8b804e4 
Network is deprecated.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Remove network router
809074a 
Network is deprecated.

Signed-off-by: dodo920306 <[email protected]>
@dodo920306
Copy link
Contributor Author

dodo920306 commented Dec 14, 2025

This is draft only because #748 hasn't been merged yet.

@dodo920306 dodo920306 mentioned this pull request Dec 14, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@dodo920306