feat: React Skeleton #2403
feat: React Skeleton #2403
Conversation
This comment was marked as off-topic.
This comment was marked as off-topic.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/Layout/index.tsx (1)
46-69: LGTM: Layout component structure is well-designed and flexible.The Layout component is well-structured and provides flexibility through conditional rendering of header and footer components. The use of SlotFillProvider is appropriate for WordPress plugin integration.
Consider using default prop values for better readability:
const Layout = ({ children, route, - title = '', + title = '', // Consider moving this default to the prop definition headerComponent, footerComponent, }: LayoutProps) => { // ... }This change doesn't affect functionality but can improve code readability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
- src/Dashboard/index.tsx (1 hunks)
- src/Layout/Header.tsx (1 hunks)
- src/Layout/index.tsx (1 hunks)
- src/Routing/index.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/Dashboard/index.tsx
- src/Layout/Header.tsx
- src/Routing/index.tsx
🧰 Additional context used
🔇 Additional comments (6)
src/Layout/index.tsx (6)
1-9: LGTM: Imports are appropriate and comprehensive.The imports cover all necessary dependencies for the component's functionality, including WordPress-specific elements and custom components.
14-22: LGTM: ThemeProvider implementation is correct and follows best practices.The ThemeProvider component correctly manages the theme state and provides it to its children through the context. The use of useState for theme management is appropriate for this use case.
24-43: LGTM: Type definitions are comprehensive and enhance type safety.The DokanRoute type and LayoutProps interface provide clear and comprehensive type definitions, which will improve code readability and catch potential type-related errors early in development.
72-74: LGTM: useTheme custom hook is correctly implemented.The useTheme custom hook provides a convenient way to access the theme context in other components. Its implementation follows React hook conventions.
76-76: LGTM: Default export is correct.The Layout component is correctly exported as the default export, following common React component export patterns.
1-76: Overall, the Layout component is well-implemented with room for minor improvements.The new Layout component provides a flexible and type-safe structure for the application. It effectively integrates WordPress-specific components and implements theming capabilities. The code follows React best practices and is well-organized.
To further improve the code:
- Address the issue raised in the previous review comment regarding the default value for ThemeContext (lines 11-12).
- Implement the null check for
route.idas suggested in the previous review comment (line 65).- Consider moving the default value for the
titleprop to the prop definition for improved readability.These changes will enhance the robustness and maintainability of the component.
To ensure that the Layout component is being used correctly throughout the project, you can run the following verification script:
This script will help identify where the Layout component and useTheme hook are being used, allowing you to verify that they are being implemented correctly across the project.
This commit introduces a new REST API endpoint for searching customers specific to a vendor's orders. Key changes include: - Add new route `/dokan/v1/customers/search` in CustomersController - Implement `search_customers` method with the following features: * Search customers by ID or term (name/email) * Limit results to customers who have ordered from the current vendor * Support excluding specific customer IDs * Limit results to 20 when search term is less than 3 characters * Apply `dokan_json_search_found_customers` filter for extensibility - Add permission check to ensure only users with 'edit_shop_orders' capability can access - Include detailed PHPDoc for the new filter This feature allows vendors to efficiently search their customer base through the REST API, mirroring the functionality of the existing AJAX action while providing a standardized API interface.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/Routing/index.tsx (2)
1-5: Remove unused imports to improve code cleanliness and performance.The following imports are not used in this file and should be removed:
redirectreplaceApply this diff to remove unused imports:
-import { useNavigate, useParams, useLocation, redirect, replace, useMatches, useNavigation, } from 'react-router-dom'; +import { useNavigate, useParams, useLocation, useMatches, useNavigation } from 'react-router-dom';
7-41: LGTM! Minor formatting suggestion.The
withRouterhigher-order component is well-implemented and provides a good abstraction for adding routing props to other components. It correctly handles both function and element components.Consider removing extra spaces in the parameter destructuring for consistency:
- let params = useParams(); + let params = useParams();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- src/Dashboard/index.tsx (1 hunks)
- src/Routing/index.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/Dashboard/index.tsx
🧰 Additional context used
🔇 Additional comments (2)
src/Routing/index.tsx (2)
70-70: LGTM! Default export is correct.The default export of the
getRoutesfunction is appropriate and follows good module design practices.
43-68:⚠️ Potential issueAddress TypeScript errors and ensure consistent path prefixes.
The paths in the route definitions are inconsistent. Some start with '/' while others don't. This can lead to unexpected routing behavior.
The use of
@ts-ignoresuppresses TypeScript errors, which can hide potential issues. Instead, properly type thewpobject.To resolve these issues:
- Make the paths consistent by adding a leading '/' to all paths:
- path: 'settings', + path: '/settings',
- Remove the
@ts-ignorecomment and properly type thewpobject. You can declare the type forwpor extend theWindowinterface:declare global { interface Window { wp: { hooks: { applyFilters: (filterName: string, value: any, ...args: any[]) => any; }; }; } } routes = window.wp.hooks.applyFilters('dokan-dashboard-routes', routes) as Array<DokanRoute>;These changes will improve type safety and consistency in your routing logic.
…ure' into update/vendor-dashboard-structure
…e' into update/vendor-dashboard-structure
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/Layout/Header.tsx (2)
7-18: LGTM: Well-structured and flexible component rendering.The component's structure is well-organized and utilizes Tailwind CSS for responsive styling. The use of Slot components for extensibility is a great practice. The conditional rendering of the title and passing of the navigate function to the header actions slot are implemented correctly.
Consider adding an
aria-labelto the outerdivto improve accessibility:- <div className="flex items-center sm:flex-wrap md:flex-nowrap"> + <div className="flex items-center sm:flex-wrap md:flex-nowrap" aria-label="Page header">
1-21: Overall: Excellent implementation of the Header component.This Header component is well-implemented and aligns perfectly with the PR objectives of setting up a skeleton for the new vendor dashboard. It provides a flexible and extensible structure, utilizing WordPress components and React Router for navigation. The use of Slot components allows for easy customization, which is crucial for a dashboard layout.
The component follows React best practices, uses modern functional component syntax, and leverages Tailwind CSS for responsive styling. This implementation sets a solid foundation for further development of the dashboard layout.
As you continue developing the dashboard, consider the following:
- Implement unit tests for this component to ensure its behavior remains consistent as the project evolves.
- Document the usage of the Slot components to guide other developers on how to extend the header functionality.
- Consider creating a theme context if you plan to implement dark mode or other theme variations in the future.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/Layout/Header.tsx (1 hunks)
🧰 Additional context used
🔇 Additional comments (4)
src/Layout/Header.tsx (4)
1-2: LGTM: Imports are appropriate and necessary.The imports of
Slotfrom@wordpress/componentsanduseNavigatefromreact-router-domare well-chosen for the component's requirements. They align with the WordPress ecosystem and provide necessary routing functionality.
4-4: LGTM: Component definition is clear and follows best practices.The
Headercomponent is well-defined as a functional component with a descriptive name. The use of default prop value fortitleis a good practice for handling optional props.
5-5: LGTM: Proper use of the useNavigate hook.The
useNavigatehook is correctly used and stored in a well-named constant. This setup will allow for programmatic navigation within the component.
21-21: LGTM: Appropriate default export.The default export of the Header component is correct and follows common React component export patterns.
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (3)
src/Layout/index.tsx (1)
25-44: Add JSDoc documentation and improve type consistency.The type definitions would benefit from documentation and consistent optionality.
+/** + * Represents a route configuration in the Dokan dashboard + */ export type DokanRoute = { + /** Unique identifier for the route */ id: string; + /** Display title for the route */ title?: string; - icon?: JSX.Element | React.ReactNode; + /** Icon component to display (React.ReactNode includes JSX.Element) */ + icon?: React.ReactNode; - element: JSX.Element | React.ReactNode; + /** Component to render for this route */ + element: React.ReactNode; // ... rest of the type }; +/** + * Props for the Layout component + */ interface LayoutProps { children: React.ReactNode; route: DokanRoute; title?: string; - headerComponent?: JSX.Element|React.ReactNode; - footerComponent?: JSX.Element|React.ReactNode; + headerComponent?: React.ReactNode; + footerComponent?: React.ReactNode; }package.json (2)
64-64: Consider code-splitting for React Router.The addition of
react-router-domis appropriate for dashboard navigation. However, ensure route-based code splitting is implemented to optimize initial load performance.Recommendations:
- Use React.lazy() for route components
- Implement Suspense boundaries
- Consider implementing progressive loading for dashboard sections
Line range hint
25-64: Review bundle size impact.The addition of multiple new dependencies could significantly increase the bundle size. Consider implementing appropriate optimization strategies.
Recommendations:
- Implement tree-shaking for all new dependencies
- Consider using dynamic imports for less frequently used components
- Monitor the bundle size impact using webpack-bundle-analyzer
- Implement chunking strategies to optimize loading performance
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- package.json (3 hunks)
- src/Layout/index.tsx (1 hunks)
🔇 Additional comments (4)
src/Layout/index.tsx (1)
1-10: LGTM! Well-organized imports following WordPress conventions.The imports are properly structured, using WordPress-specific packages where appropriate.
package.json (3)
57-63: Verify WordPress package versions compatibility.The WordPress packages being added (
@wordpress/components,@wordpress/data, etc.) are at different major versions (v28.x vs v4.x vs v7.x). This might lead to compatibility issues.#!/bin/bash # Check for potential version conflicts in WordPress packages echo "Checking @wordpress/* package usage..." rg -l "@wordpress" | xargs cat | rg "from '@wordpress/"
56-56: Verify @getdokan/dokan-ui compatibility.The addition of
@getdokan/dokan-ui(v1.0.14) is a significant change. Ensure it's compatible with the WordPress admin environment and follows the project's design system.#!/bin/bash # Check for potential UI component usage echo "Checking dokan-ui component usage..." rg -l "@getdokan/dokan-ui" | xargs cat | rg "from '@getdokan/dokan-ui"
25-26: Verify Tailwind CSS configuration to prevent style conflicts.The addition of Tailwind CSS utilities (
@tailwindcss/forms,@tailwindcss/typography,tailwindcss-scoped-preflight) is appropriate for a modern React dashboard. However, ensure proper scoping to prevent conflicts with WordPress admin styles.Consider the following recommendations:
- Use
tailwindcss-scoped-preflightto scope Tailwind's base styles- Configure content paths in
tailwind.config.jsto minimize bundle size- Add appropriate CSS cascade layers to manage style precedence
Also applies to: 39-39
…er-api' into update/vendor-dashboard-structure # Conflicts: # includes/REST/Manager.php
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
…shboard-structure
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
…ate/vendor-dashboard-structure
* update: Status elements and status page added * update: Status elements dynamically render * update: Vendor Dashboard nave menu Status elements added * refactor: exception added in set_children * refactor: translation and custom element support added. * refactor: removed unnecessary status element in page
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/Status/SettingsParser.tsx (1)
33-40:⚠️ Potential issueImprove type safety and null handling in the default case.
The current implementation has several issues:
- Uses @ts-ignore to bypass type checking
- Returns an empty fragment which is unnecessary
- Uses wp.hooks instead of wp namespace
Apply this fix:
default: - // @ts-ignore - return wp.hooks.applyFilters( + const customElement = wp.hooks.applyFilters<React.ReactElement>( 'dokan_status_custom_element', - <></>, + null, element ); + return customElement || null;Also, consider adding a type declaration for the WordPress filters:
declare global { interface Window { wp: { hooks: { applyFilters<T>( hookName: string, defaultValue: T | null, ...args: any[] ): T | null; }; }; } }🧰 Tools
🪛 Biome (1.9.4)
[error] 37-37: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
(lint/complexity/noUselessFragments)
🧹 Nitpick comments (1)
src/Status/SettingsParser.tsx (1)
12-13: Consider extracting props interface for better maintainability.Since this is a parser component that might grow in complexity, consider extracting the props into a separate interface:
+interface SettingsParserProps { + element: StatusElement; +} + -const SettingsParser = ( { element }: { element: StatusElement } ) => { +const SettingsParser = ( { element }: SettingsParserProps ) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/Status/SettingsParser.tsx(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/Status/SettingsParser.tsx
[error] 37-37: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
(lint/complexity/noUselessFragments)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: e2e tests (3, 3)
- GitHub Check: e2e tests (2, 3)
- GitHub Check: e2e tests (1, 3)
- GitHub Check: api tests (1, 1)
🔇 Additional comments (2)
src/Status/SettingsParser.tsx (2)
1-11: Well-organized imports!The imports are logically grouped and each imported component corresponds to a specific case in the switch statement.
14-32: Clean and consistent switch statement implementation!The switch statement is well-structured with:
- Consistent prop passing
- Proper key usage for list rendering
- Clear type-to-component mapping
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
|
@mrabbani vai Need to update the |
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
…2514) * enhance: Handle vendor dashboard menu highlighter using react route. * fix: remove useEffect when not used. * enhance: update dashboard navigation list * fix: phpcs stuff * fix: prevent error for pathname.
| use WP_REST_Request; | ||
| use WP_REST_Response; | ||
|
|
||
| class DokanDataContinentsController extends WC_REST_Data_Continents_Controller { |
There was a problem hiding this comment.
- Pls refactor the class just by overriding the
get_items_permissions_checkand try to not override any other methods. - Must add the test case.
| use WP_REST_Request; | ||
| use WP_REST_Response; | ||
|
|
||
| class DokanDataCountriesController extends WC_REST_Data_Countries_Controller { |
There was a problem hiding this comment.
Same as Continents controller.
| foreach ( $downloads as $download ) { | ||
| $product = dokan()->product->get( $download->product_id ); | ||
| $download->product = [ | ||
| 'id' => $product->get_id(), | ||
| 'name' => $product->get_name(), | ||
| 'slug' => $product->get_slug(), | ||
| 'link' => $product->get_permalink(), | ||
| ]; | ||
|
|
||
| /** | ||
| * @var $file \WC_Product_Download | ||
| */ | ||
| $file = $product->get_file( $download->download_id ); | ||
| $download->file_data = $file->get_data(); | ||
| $download->file_data['file_title'] = wc_get_filename_from_url( $product->get_file_download_path( $download->download_id ) ); | ||
|
|
||
| $updated_response[] = $download; | ||
| } |
There was a problem hiding this comment.
Pls remove the N+1 query. Use query param post__in
| $schema = parent::get_product_collection_params(); | ||
|
|
||
| $schema['only_downloadable'] = [ | ||
| 'description' => __( 'If truthy value then only downloadable products will be returned', 'dokan' ), |
| * | ||
| * @return array | ||
| */ | ||
| public function display_notice( array $notices ): array { |
There was a problem hiding this comment.
Pls show notice if dokan_is_dashboard_nav_dependency_resolved is used to prevent the React.
CC: @shohag121 vai
src/Dashboard/index.tsx
Outdated
| }; | ||
|
|
||
| domReady( function () { | ||
| const rootElement = document.querySelector( '.dashboard-content-area' ); |
src/Layout/404.tsx
Outdated
| // @ts-ignore | ||
| const dashBoardUrl = window.dokan?.urls?.dashboardUrl ?? '#'; | ||
|
|
||
| return ( |
There was a problem hiding this comment.
Need simple design for 404 status.
CC: @getdokan/product
src/Layout/Footer.tsx
Outdated
| import {Slot} from "@wordpress/components"; | ||
|
|
||
| const Footer = () => { | ||
| return <><Slot name="dokan-footer-area" /></>; |
src/Layout/Header.tsx
Outdated
|
|
||
| const Header = ( { title = '' } ) => { | ||
| const navigate = useNavigate(); | ||
|
|
There was a problem hiding this comment.
- Pls apply filter for
title - Pls add developer
docs
| @@ -0,0 +1,72 @@ | |||
| <?php | |||
There was a problem hiding this comment.
Pls use ID to render the react compoenent
webpack.config.js
Outdated
| @@ -9,6 +9,7 @@ const entryPoint = { | |||
| // Dokan tailwind css | |||
| 'dokan-tailwind': './src/tailwind.css', | |||
|
|
|||
| 'frontend': './src/Dashboard/index.tsx', | |||
There was a problem hiding this comment.
Pls extract the entries to the separate file
| secondary: { | ||
| DEFAULT: | ||
| 'var(--dokan-button-secondary-text-color, var(--dokan-button-background-color))', | ||
| hover: 'var(--dokan-button-secondary-hover-text-color, var(--dokan-button-text-color))', |
There was a problem hiding this comment.
What will be the default color if the css variables are not declared/assigned.
CC: @shohag121 vai.
* feat: introduce dataviews from dokan free. * feat: introduce dataviews from dokan free. * revert: add dokan category comission js. * update: remove category commission js updates. * remove: revert component package js file. * remove: dokan sidebar class from data view table. * enhance: update dataviews doc. * update: filter naming convension for dataviews property. * remove: module federation node package from json file. * remove: example dataviews table usage component. * remove: example dataviews table usage component. * update: button class name for color scheme customizer. * update: split webpack entries, use change-case for namespace cases, handle responsive preview from base components. * update: introduce utilities directory, make exporter from dokan free & add documentation for components, utilities. * update: routing folder naming convesional stuff. * update: add component and utilities accessor doc for dokan free. * Add router param add dataview table id * fix: add file exists check before register components scripts. * revert: remove default config from webpack entries. * enhance: separate hooks & introduce @dokan/hooks. * enhance: add documentation for hooks and update viewport file extension. * remove: react components manual enqueue. * update: variable name of component assets path. --------- Co-authored-by: Aunshon <[email protected]>
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
* feat: introduce dataviews from dokan free. * feat: introduce dataviews from dokan free. * revert: add dokan category comission js. * update: remove category commission js updates. * remove: revert component package js file. * remove: dokan sidebar class from data view table. * enhance: update dataviews doc. * update: filter naming convension for dataviews property. * remove: module federation node package from json file. * remove: example dataviews table usage component. * remove: example dataviews table usage component. * update: button class name for color scheme customizer. * update: split webpack entries, use change-case for namespace cases, handle responsive preview from base components. * update: introduce utilities directory, make exporter from dokan free & add documentation for components, utilities. * update: routing folder naming convesional stuff. * update: add component and utilities accessor doc for dokan free. * Add router param add dataview table id * fix: add file exists check before register components scripts. * revert: remove default config from webpack entries. * enhance: Introduce dokan Draggable/Sortable list component. * revert: remove viewport dimension hook. --------- Co-authored-by: Aunshon <[email protected]>
This comment was marked as off-topic.
This comment was marked as off-topic.
Sorry, something went wrong.
| * | ||
| * @return Table | ||
| */ | ||
| public static function table( string $id ): Table { |
There was a problem hiding this comment.
- Pls use factory
- Change the visibility to
protectedand remove thestaticso that it can only be used from the self & descendants.
CC: @shohag121 vai.
All Submissions:
Changes proposed in this Pull Request:
Related Pull Request(s)
Closes
How to test the changes in this Pull Request:
Changelog entry
Title
Detailed Description of the pull request. What was previous behaviour
and what will be changed in this PR.
Before Changes
Describe the issue before changes with screenshots(s).
After Changes
Describe the issue after changes with screenshot(s).
Feature Video (optional)
Link of detailed video if this PR is for a feature.
PR Self Review Checklist:
FOR PR REVIEWER ONLY:
Summary by CodeRabbit
Dokan Plugin Release Notes
New Features
Improvements
Technical Enhancements
Performance
Compatibility