-
Notifications
You must be signed in to change notification settings - Fork 42
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.
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
feat(web): implements projects functionalities #1055
Conversation
✅ Deploy Preview for reearth-web ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…isualizer into feat/improve-dashboard
…into feat/improve-dashboard
Warning Rate limit exceeded@airslice has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 19 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe recent updates significantly enhance the project management dashboard's functionality and user interface. Key improvements include optimized sorting options, enhanced pagination and search capabilities, and streamlined project status management. The layout styling is refined with new components, and internationalization support is improved, collectively aiming to elevate user interaction and streamline project handling within the application. Changes
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
…t/improve-dashboard
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (18)
- web/src/beta/features/Dashboard/ContentsContainer/CommonHeader.tsx (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx (5 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts (4 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/types.ts (1 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (5 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (6 hunks)
- web/src/beta/features/Dashboard/type.ts (1 hunks)
- web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx (1 hunks)
- web/src/services/api/projectApi.ts (2 hunks)
- web/src/services/gql/gen/gql.ts (2 hunks)
- web/src/services/gql/gen/graphql.ts (2 hunks)
- web/src/services/gql/queries/project.ts (2 hunks)
- web/src/services/i18n/translations/en.yml (1 hunks)
- web/src/services/i18n/translations/ja.yml (1 hunks)
- web/src/services/theme/reearthTheme/darkTheme/index.ts (1 hunks)
- web/src/services/theme/reearthTheme/lightTheme/index.ts (1 hunks)
- web/src/services/theme/reearthTheme/types.ts (1 hunks)
Additional comments not posted (70)
web/src/services/gql/__gen__/graphql.ts (2)
Line range hint
1-1
:
LGTM! The addition of thestarred
field is correct.The new optional field
starred
enhances the mutation's capability to handle starred status.
Line range hint
1-1
:
LGTM! The mutation update is correct.The inclusion of the
starred
variable in the mutation definition is consistent with the type changes.web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/types.ts (1)
Line range hint
1-1
:
LGTM! The removal ofisStarred
andonProjectStarClick
is correct.The changes simplify the
ProjectProps
type and align with the new approach to handling starred projects.web/src/beta/features/Dashboard/type.ts (1)
15-15
: LGTM! The addition of thestarred
property is correct.The new optional property
starred
enhances theProject
type to convey project importance.web/src/services/theme/reearthTheme/types.ts (1)
68-70
: LGTM!The addition of the
publish
property to theTheme
type is consistent with the existing structure and enhances the theming capabilities.web/src/services/theme/reearthTheme/lightTheme/index.ts (1)
65-67
: LGTM!The addition of the
publish
property to thelightTheme
object is consistent with the existing structure and enhances the theming capabilities.web/src/services/theme/reearthTheme/darkTheme/index.ts (1)
65-67
: LGTM!The addition of the
publish
property to thedarkTheme
object is consistent with the existing structure and enhances the theming capabilities.web/src/beta/lib/reearth-ui/components/Breadcrumb/index.tsx (2)
30-32
: LGTM!The addition of the color property to the
Typography
component enhances the visual consistency and readability of the breadcrumb titles.
38-38
: LGTM!The updated logic for rendering the
Separator
component ensures consistent visual layout, even with a single breadcrumb item.web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts (4)
22-22
: LGTM!The addition of the
isStarred
state variable is necessary for managing the starred status of a project.
43-45
: LGTM!The
useEffect
hook ensures that the component dynamically reflects the current starred status of the project.
78-89
: LGTM!The
handleProjectStarClick
callback function enhances user interactivity by allowing users to star or unstar projects directly within the UI.
101-107
: LGTM!The addition of the
isStarred
andpublishStatus
properties to the return statement is necessary to expose the new state and computed properties to the component's consumer.web/src/beta/features/Dashboard/ContentsContainer/CommonHeader.tsx (5)
19-21
: LGTM!The addition of new properties to the
HeaderProps
type extends its functionality to support search capabilities.Also applies to: 27-27
45-45
: LGTM!The initialization of the
searchInputValue
state variable is necessary to manage the search input value.
54-59
: LGTM!The
handleSearchInputChange
callback function is necessary to handle user input for the search functionality.
61-65
: LGTM!The
SearchIcon
component enhances the interactivity of the search functionality by providing a clickable icon to initiate the search.
71-81
: LGTM!The rendering logic integrates the search functionality into the header component, allowing users to type keywords and trigger a search action both on change and on blur.
web/src/services/gql/queries/project.ts (2)
101-101
: Ensure the new parameter is optional.The new
starred
parameter should be optional to maintain backward compatibility.Ensure that the backend can handle cases where
starred
is not provided.
116-116
: LGTM!The
starred
parameter is correctly added to the mutation input.web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx (5)
23-24
: Ensure the new props are correctly derived.The
isStarred
andpublishStatus
props are now derived fromuseHooks
. Ensure that theuseHooks
function correctly provides these values.Check the implementation of
useHooks
to ensure it correctly providesisStarred
andpublishStatus
.
29-29
: Ensure the new event handler is correctly implemented.The
handleProjectStarClick
event handler is now derived fromuseHooks
. Ensure that theuseHooks
function correctly provides this handler.Check the implementation of
useHooks
to ensure it correctly provideshandleProjectStarClick
.
61-61
: Ensure the new prop is correctly used.The
publishStatus
prop is now used in the component. Ensure that it is correctly passed and used in thePublishStatus
component.Check the usage of
publishStatus
in thePublishStatus
component to ensure it is correctly implemented.
122-127
: Styling changes look good.The addition of
gap
andpadding
in theCardFooter
improves layout consistency.
129-134
: New styled component looks good.The
PublishStatus
styled component is correctly implemented to visually represent the publish status.web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (11)
1-7
: Ensure all imports are necessary.Review if all imported modules are being used in the file to avoid unnecessary imports.
13-20
: Confirm the completeness ofSortType
.Ensure that all necessary sort types are covered in the
SortType
union type.
29-63
: Review the completeness of the pagination logic.Ensure that all necessary sort types are handled correctly in the
pagination
function.
102-103
: Review the pagination parameters.Ensure that
first
,last
, andsortBy
are correctly derived from thepagination
function.
119-125
: Ensure proper refetching after project update.Verify that the
refetch
function is correctly called after a project update.
128-130
: Confirm the cache eviction logic.Ensure that evicting the
projects
field from the cache is necessary and correctly implemented.
157-159
: Optimize thefavarateProjects
memoization.Ensure that
favarateProjects
is memoized correctly to avoid unnecessary recalculations.
215-217
: Ensure proper refetching on dependency changes.Verify that the
refetch
function is correctly called whensort
,refetch
, orsearchTerm
changes.
219-225
: Review the sort change handler.Ensure that the
handleProjectSortChange
function correctly updates the sort state.
227-233
: Review the search handler.Ensure that the
handleSearch
function correctly updates the search term state.
234-255
: Ensure all returned values are necessary.Review if all returned state variables and handler functions are necessary and used in the component.
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (12)
Line range hint
1-12
:
Ensure all imports are necessary.Review if all imported modules are being used in the file to avoid unnecessary imports.
23-35
: Ensure correct state management.Verify that all state variables and handler functions are correctly managed and used within the component.
40-52
: Optimize thesortOptions
memoization.Ensure that
sortOptions
is memoized correctly to avoid unnecessary recalculations.
61-67
: Review theCommonHeader
component.Ensure that the
CommonHeader
component correctly handles the new sorting and search functionalities.
74-113
: Ensure proper rendering of favorite projects.Verify that favorite projects are correctly rendered in the grid view.
115-127
: Ensure proper rendering of all projects.Verify that all projects are correctly rendered in the grid view.
129-198
: Ensure proper rendering in list view.Verify that projects are correctly rendered in the list view.
200-207
: Ensure proper loading state handling.Verify that the loading state is correctly handled and displayed.
Line range hint
208-218
:
Ensure proper handling of project creation modal.Verify that the project creation modal is correctly handled and displayed.
235-239
: Ensure correct styling and responsiveness.Verify that the
ProjectsContainer
styled component is correctly styled and responsive.
270-273
: Ensure correct styling and responsiveness.Verify that the
FlexTableRow
styled component is correctly styled and responsive.
288-290
: Ensure correct styling and responsiveness.Verify that the
StyledLoading
styled component is correctly styled and responsive.web/src/services/api/projectApi.ts (4)
Line range hint
1-5
:
Ensure all imports are necessary.Review if all imported modules are being used in the file to avoid unnecessary imports.
57-74
: Ensure correct handling of the new input parameter.Verify that the
input
parameter is correctly handled and used within theuseProjectsQuery
hook.
65-72
: Ensure correct handling of pagination properties.Verify that
hasMoreProjects
andendCursor
are correctly derived and used.
74-74
: Ensure all returned values are necessary.Review if all returned properties are necessary and used in the component.
web/src/services/i18n/translations/ja.yml (5)
52-52
: Translation entry added:Type key word to search
.The translation entry for
Type key word to search
has been correctly added.
53-53
: Translation entry added:Sort
.The translation entry for
Sort
has been correctly added.
54-54
: Translation entry added:Use Name or Email
.The translation entry for
Use Name or Email
has been correctly added.
55-55
: Translation entry added:Find Member
.The translation entry for
Find Member
has been correctly added.
57-60
: Translation entries added:First Created At
,Last Created At
,First Updated
,Last Updated
.The translation entries for project timestamps have been correctly added.
web/src/services/i18n/translations/en.yml (6)
52-52
: Translation entry added:Type key word to search
.The translation entry for
Type key word to search
has been correctly added.
53-53
: Translation entry added:Sort
.The translation entry for
Sort
has been correctly added.
54-54
: Translation entry added:Use Name or Email
.The translation entry for
Use Name or Email
has been correctly added.
55-55
: Translation entry added:Find Member
.The translation entry for
Find Member
has been correctly added.
56-56
: Translation entry added:No Member match your search
.The translation entry for
No Member match your search
has been correctly added.
57-60
: Translation entries added:First Created At
,Last Created At
,First Updated
,Last Updated
.The translation entries for project timestamps have been correctly added.
web/src/services/gql/__gen__/gql.ts (2)
54-54
: Verify the correctness of the addedstarred
parameter.The
starred
parameter has been added to the mutation definition. Ensure that this parameter is correctly handled in the backend and aligns with the existing structure.
258-258
: Verify the correctness of the addedstarred
parameter.The
starred
parameter has been added to the mutation function. Ensure that this parameter is correctly handled in the backend and aligns with the existing structure.web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx (5)
39-39
: LGTM! Verify the consistency of the prop name change.The
onProjectStarClick
prop has been replaced withhandleProjectStarClick
.Ensure that all instances of
onProjectStarClick
have been updated tohandleProjectStarClick
.Verification successful
LGTM! Verify the consistency of the prop name change.
The
onProjectStarClick
prop has been successfully replaced withhandleProjectStarClick
across the codebase.
- No instances of
onProjectStarClick
were found, confirming the consistency of the change.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the consistency of the prop name change from `onProjectStarClick` to `handleProjectStarClick`. # Test: Search for any remaining instances of `onProjectStarClick`. Expect: No occurrences. rg --type tsx 'onProjectStarClick'Length of output: 62
Script:
#!/bin/bash # Description: Verify the consistency of the prop name change from `onProjectStarClick` to `handleProjectStarClick`. # Test: Search for any remaining instances of `onProjectStarClick`. Expect: No occurrences. rg 'onProjectStarClick'Length of output: 23
70-70
: LGTM! Verify the correctness and styling of thePublishStatus
component.The
PublishStatus
component has been added to visually convey the project's publish status.Ensure that the component is correctly styled and integrated.
64-64
: LGTM! Verify the correctness of the event handler.The
onClick
event handler for the star button has been updated to usehandleProjectStarClick
.Ensure that the event handler works correctly and triggers the expected behavior.
Verification successful
Verified: The
handleProjectStarClick
event handler is correctly implemented and functions as expected.
- The function stops the propagation of the click event.
- It toggles the
isStarred
state.- It updates the project object with the new star status.
- It calls the
onProjectUpdate
callback with the updated project.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correctness of the `handleProjectStarClick` event handler. # Test: Search for the implementation of `handleProjectStarClick`. Expect: Correct implementation and expected behavior. rg --type tsx 'handleProjectStarClick'Length of output: 66
Script:
#!/bin/bash # Description: Verify the correctness of the `handleProjectStarClick` event handler. # Test: Search for the implementation of `handleProjectStarClick`. Expect: Correct implementation and expected behavior. rg 'handleProjectStarClick'Length of output: 785
Script:
#!/bin/bash # Description: Extract the implementation details of `handleProjectStarClick` from `hooks.ts`. # Test: Retrieve the implementation of `handleProjectStarClick`. Expect: Correct implementation and expected behavior. rg -A 20 'const handleProjectStarClick' web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.tsLength of output: 636
144-150
: LGTM! Verify the correctness of the styles.The
PublishStatus
styled component is defined with specific styles to convey the status through color coding.Ensure that the styles are correctly applied and render as expected.
Verification successful
LGTM!
The
PublishStatus
styled component is correctly applied in bothProjectListViewItem.tsx
andProjectGridViewItem.tsx
. The styles are conditionally applied based on thestatus
prop inProjectListViewItem.tsx
, and static styles are used inProjectGridViewItem.tsx
. Both usages align with the intended design of the component.
ProjectListViewItem.tsx
: Conditional styles based onstatus
prop.ProjectGridViewItem.tsx
: Static styles.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correctness of the styles for the `PublishStatus` component. # Test: Search for the usage of the `PublishStatus` component. Expect: Correct application of styles. rg --type tsx 'PublishStatus'Length of output: 57
Script:
#!/bin/bash # Description: Verify the correctness of the styles for the `PublishStatus` component. # Test: Search for the usage of the `PublishStatus` component within TypeScript files. rg 'PublishStatus' --glob '*.tsx'Length of output: 1289
Script:
#!/bin/bash # Description: Extract relevant lines of code for `PublishStatus` usage in `ProjectListViewItem.tsx` and `ProjectGridViewItem.tsx`. # Extract lines around the usage of `PublishStatus` in `ProjectListViewItem.tsx` rg 'PublishStatus' -A 5 -B 5 web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx # Extract lines around the usage of `PublishStatus` in `ProjectGridViewItem.tsx` rg 'PublishStatus' -A 5 -B 5 web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsxLength of output: 1642
33-34
: LGTM! Verify the integration of new props.The
isStarred
andpublishStatus
props are correctly destructured from theuseHooks
call.Ensure that these props are correctly integrated and used throughout the component.
Verification successful
Verified: Integration of
isStarred
andpublishStatus
propsThe
isStarred
andpublishStatus
props are correctly integrated and used throughout the codebase.
isStarred
is used in various files, includinghooks.ts
,ProjectGridViewItem.tsx
, andProjectListViewItem.tsx
.publishStatus
is used in files such asPublishToolsPanel/index.tsx
,PublishToolsPanel/PublishModal/index.tsx
, andhooks.ts
.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration of `isStarred` and `publishStatus` props in the codebase. # Test: Search for the usage of `isStarred` and `publishStatus` props. Expect: Proper integration and usage. rg --type tsx 'isStarred' rg --type tsx 'publishStatus'Length of output: 111
Script:
#!/bin/bash # Description: Verify the integration of `isStarred` and `publishStatus` props in the codebase. # Test: Search for the usage of `isStarred` and `publishStatus` props. Expect: Proper integration and usage. rg 'isStarred' rg 'publishStatus'Length of output: 5599
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
Outdated
Show resolved
Hide resolved
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (1)
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (1)
14-14
: Consider renamingname-reverse
toname-reversed
for consistency.The other sort types use the
-reversed
suffix, so for consistency,name-reverse
should be renamed toname-reversed
.- export type SortType = "date" | "date-reversed" | "name" | "name-reverse" | "date-updated"; + export type SortType = "date" | "date-reversed" | "name" | "name-reversed" | "date-updated";
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (6)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (5 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (5 hunks)
- web/src/services/gql/gen/gql.ts (2 hunks)
- web/src/services/gql/gen/graphql.ts (2 hunks)
- web/src/services/i18n/translations/en.yml (1 hunks)
- web/src/services/i18n/translations/ja.yml (2 hunks)
Files skipped from review as they are similar to previous changes (5)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
- web/src/services/gql/gen/gql.ts
- web/src/services/gql/gen/graphql.ts
- web/src/services/i18n/translations/en.yml
- web/src/services/i18n/translations/ja.yml
Additional comments not posted (13)
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (13)
1-8
: Imports and constants look good.The imports are necessary for the functionality added and the constants are defined correctly.
17-22
: Consider using a switch statement for clarity.Using a switch statement might improve readability and maintainability.
- const toPublishmentStatus = (s: PublishmentStatus) => - s === PublishmentStatus.Public - ? "published" - : s === PublishmentStatus.Limited - ? "limited" - : "unpublished"; + const toPublishmentStatus = (s: PublishmentStatus) => { + switch (s) { + case PublishmentStatus.Public: + return "published"; + case PublishmentStatus.Limited: + return "limited"; + default: + return "unpublished"; + } + };
24-52
: Pagination function looks good.The function correctly handles different sort types and returns appropriate pagination values.
57-70
: State and effect hooks look good.The state and effect hooks are correctly implemented and necessary for the added functionalities.
71-74
: Handle layout change function looks good.The function correctly updates the layout and stores the new layout in local storage.
Line range hint
75-90
:
Handle project create function looks good.The function correctly creates a new project and handles edge cases.
92-108
: Use projects query hook looks good.The hook correctly integrates the new sorting and pagination parameters and handles edge cases.
109-115
: Handle project update function looks good.The function correctly updates the project and triggers a refetch if sorting is applied.
118-120
: Cache eviction effect looks good.The effect correctly evicts the cache for projects.
Line range hint
121-149
:
Memoized project nodes and projects look good.The hooks correctly memoize the values and handle edge cases.
147-149
: Memoized favorite projects look good.The hook correctly memoizes the values and handles edge cases.
151-151
: Memoized refetching state looks good.The hook correctly memoizes the refetching state and handles edge cases.
Line range hint
152-246
:
Remaining functions and return statement look good.The functions correctly handle user interactions and the return statement exports the necessary values and functions.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (7)
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (4)
28-56
: Consider clarifying pagination logic.Explicitly setting both
first
andlast
in each case can improve readability and prevent potential logical errors.case "date": + first = undefined; last = projectsPerPage; case "date-reversed": first = projectsPerPage; + last = undefined; // Continue similarly for other cases
114-120
: EnsuresortBy
is defined when refetching.Consider adding a check to ensure
sortBy
is defined before callingrefetch
.async (project: Project, projectId: string) => { await useUpdateProject({ projectId, ...project }); - if (sortBy) refetch(); + if (sortBy) { + refetch(); + } },
123-125
: Add a comment to explain cache eviction.Consider adding a comment to explain why cache eviction is necessary here.
useEffect(() => { + // Evict projects cache to ensure fresh data on component mount. gqlCache.evict({ fieldName: "projects" }); }, [gqlCache]);
214-220
: Handle invalid sort values explicitly.Consider adding a check to ensure the sort value is valid before updating the state.
(value?: string) => { if (!value) return; - setSort((value as SortType) ?? sortValue); + if (["date", "date-reversed", "name", "name-reverse", "date-updated"].includes(value)) { + setSort(value as SortType); + } },web/src/services/api/projectApi.ts (3)
Line range hint
89-132
: Handle potential null values explicitly.Consider checking for null values in
projectResults
andsceneResults
before accessing their properties.const { data: projectResults, errors: projectErrors } = await createNewProject({ variables: { teamId: workspaceId, visualizer, name, description: description ?? "", imageUrl: imageUrl ?? "", coreSupport: !!coreSupport, }, }); - if (projectErrors || !projectResults?.createProject) { + if (projectErrors || !projectResults || !projectResults.createProject) { setNotification({ type: "error", text: t("Failed to create project.") }); return { status: "error" }; } const { data: sceneResults, errors: sceneErrors } = await createScene({ variables: { projectId: projectResults?.createProject.project.id }, }); - if (sceneErrors || !sceneResults?.createScene) { + if (sceneErrors || !sceneResults || !sceneResults.createScene) { setNotification({ type: "error", text: t("Failed to create project.") }); return { status: "error" }; }
Line range hint
176-195
: Improve error logging.Consider providing more context when logging errors to aid in debugging.
const { data, errors } = await publishProjectMutation({ variables: { projectId, alias, status: gqlStatus }, }); - if (errors || !data?.publishProject) { - console.log("GraphQL: Failed to publish project", errors); + if (errors || !data || !data.publishProject) { + console.log(`GraphQL: Failed to publish project with ID ${projectId}`, errors); setNotification({ type: "error", text: t("Failed to publish project.") }); return { status: "error" }; }
Line range hint
214-233
: Ensureinput.projectId
is defined.Consider adding a check to ensure
input.projectId
is defined before proceeding with the mutation.async (input: UpdateProjectInput) => { - if (!input.projectId) return { status: "error" }; + if (!input || !input.projectId) { + setNotification({ type: "error", text: t("Project ID is required.") }); + return { status: "error" }; + } const { data, errors } = await updateProjectMutation({ variables: { ...input } });
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (5)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (5 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (5 hunks)
- web/src/services/api/projectApi.ts (2 hunks)
- web/src/services/i18n/translations/en.yml (2 hunks)
- web/src/services/i18n/translations/ja.yml (2 hunks)
Files skipped from review as they are similar to previous changes (3)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
- web/src/services/i18n/translations/en.yml
- web/src/services/i18n/translations/ja.yml
Additional comments not posted (5)
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (4)
17-26
: LGTM!The
toPublishmentStatus
function is clear and correctly implemented using a switch statement.
210-212
: LGTM!The
useEffect
for refetching projects is correctly implemented.
222-228
: LGTM!The
handleSearch
function is correctly implemented.
Line range hint
58-239
: Ensure naming consistency and state management clarity.
- The variable
favarateProjects
seems to be misspelled; consider renaming it tofavoriteProjects
.- Consider initializing
searchTerm
with an empty string for consistency.- Verify that all usages of
sortValue
andsearchTerm
are updated correctly across the codebase.- const [searchTerm, setSearchTerm] = useState<string>(); + const [searchTerm, setSearchTerm] = useState<string>(""); - const favarateProjects: Project[] = useMemo(() => { + const favoriteProjects: Project[] = useMemo(() => {Verification successful
Ensure Naming Consistency and State Initialization
- Rename
favarateProjects
tofavoriteProjects
to correct the typo.- Initialize
searchTerm
with an empty string for consistency with other parts of the codebase.These changes align with the current codebase usage patterns and improve code clarity.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that all usages of `sortValue` and `searchTerm` are updated correctly. # Test: Search for occurrences of `sortValue` and `searchTerm`. rg --type js 'sortValue|searchTerm'Length of output: 37
Script:
#!/bin/bash # Re-run the search with a more focused approach to ensure the presence and usage of `sortValue` and `searchTerm` across the codebase. # Search for occurrences of `sortValue` in the codebase. rg 'sortValue' -A 3 # Search for occurrences of `searchTerm` in the codebase. rg 'searchTerm' -A 3Length of output: 18436
web/src/services/api/projectApi.ts (1)
57-74
: LGTM! But verify the impact of changes.The
useProjectsQuery
function enhancements are well-implemented.Ensure that all usages of
useProjectsQuery
are updated to accommodate the new input type.Verification successful
Verified: Usage of
useProjectsQuery
is consistent with the new input type.The function is correctly utilized in
hooks.ts
, with parameters that match the expected input type. No further changes are needed.
- Location:
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that all usages of `useProjectsQuery` are updated to accommodate the new input type. # Test: Search for occurrences of `useProjectsQuery`. rg --type js 'useProjectsQuery'Length of output: 31
Script:
#!/bin/bash # Description: Perform a broader search for occurrences of `useProjectsQuery` in both JavaScript and TypeScript files. # Test: Search for occurrences of `useProjectsQuery` in JavaScript and TypeScript files. rg 'useProjectsQuery' --type-add 'typescript:*.ts' --type-add 'typescriptreact:*.tsx' --type js --type typescript --type typescriptreactLength of output: 556
Script:
#!/bin/bash # Description: Examine the context around the usage of `useProjectsQuery` in `hooks.ts` to verify compatibility with the new input type. # Test: Display lines around the usage of `useProjectsQuery` in `hooks.ts`. rg 'useProjectsQuery' -A 5 -B 5 web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.tsLength of output: 689
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (5 hunks)
- web/src/services/i18n/translations/en.yml (2 hunks)
- web/src/services/i18n/translations/ja.yml (2 hunks)
Files skipped from review as they are similar to previous changes (3)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
- web/src/services/i18n/translations/en.yml
- web/src/services/i18n/translations/ja.yml
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (8)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (5 hunks)
- web/src/services/gql/gen/gql.ts (2 hunks)
- web/src/services/gql/gen/graphql.ts (2 hunks)
- web/src/services/i18n/translations/en.yml (1 hunks)
- web/src/services/i18n/translations/ja.yml (1 hunks)
- web/src/services/theme/reearthTheme/darkTheme/index.ts (1 hunks)
- web/src/services/theme/reearthTheme/lightTheme/index.ts (1 hunks)
- web/src/services/theme/reearthTheme/types.ts (1 hunks)
Files skipped from review as they are similar to previous changes (7)
- web/src/services/gql/gen/gql.ts
- web/src/services/gql/gen/graphql.ts
- web/src/services/i18n/translations/en.yml
- web/src/services/i18n/translations/ja.yml
- web/src/services/theme/reearthTheme/darkTheme/index.ts
- web/src/services/theme/reearthTheme/lightTheme/index.ts
- web/src/services/theme/reearthTheme/types.ts
Additional comments not posted (10)
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (10)
1-4
: Import statements look good.The necessary imports for
useMemo
,Breadcrumb
, and styled components are correctly added.
40-50
: Use ofuseMemo
for sorting options is appropriate.The
useMemo
hook is used correctly to optimize the creation of sorting options based on the translation functiont
.
54-72
: Enhancements inManagerHeader
are well-implemented.The
ManagerHeader
component now includes sorting and search functionalities, which enhance user interaction.
79-104
: Conditional rendering ofBreadcrumb
is effective.The
Breadcrumb
component is conditionally rendered based onfavarateProjects
, which provides contextual navigation.
105-159
: Grid layout logic is clear and functional.The grid layout for displaying projects is well-structured, and the use of
ProjectsGrid
enhances visual organization.
Line range hint
161-235
: List layout logic is consistent and well-implemented.The list layout complements the grid view, providing flexibility in how projects are displayed.
239-246
: Loading state handling is appropriate.The loading state is managed effectively, ensuring a smooth user experience when fetching more projects.
274-278
:ProjectsContainer
styled component is well-defined.The styling for
ProjectsContainer
is clear, enhancing the layout's visual appeal.
280-282
:BreadcrumbContainer
styling is appropriate.The padding adjustment for
BreadcrumbContainer
ensures proper spacing.
312-315
:FlexTableRow
styling update is effective.The inclusion of
gap
inFlexTableRow
improves spacing and layout consistency.
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (5 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (5 hunks)
Additional comments not posted (16)
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (7)
17-26
: LGTM!The
toPublishmentStatus
function is well-implemented with a switch statement, enhancing readability.
28-57
: LGTM!The
pagination
function effectively calculates pagination parameters based on the sort type, covering all necessary cases.
123-125
: LGTM!The
useEffect
hook for cache eviction is correctly implemented, ensuring data consistency.
Line range hint
128-151
: Efficient use of memoization!The memoization of
projects
is well-implemented, optimizing performance by reducing unnecessary recalculations.
152-154
: Efficient use of memoization!The memoization of
favoriteProjects
is well-implemented, optimizing performance by reducing unnecessary recalculations.
156-171
: LGTM!The
handleGetMoreProjects
function is well-implemented, ensuring additional projects are fetched when needed.
Line range hint
58-251
: Well-structured implementation!The default export function is well-organized, effectively managing project fetching, sorting, and state. The use of hooks and memoization is appropriate for performance optimization.
Ensure that the new sort and pagination logic is correctly integrated throughout the codebase.
Verification successful
Integration of Sort and Pagination Logic Verified
The search results indicate that the
pagination
function andSortType
are consistently used across various parts of the codebase, including theProjects
,Assets
, andAssetsManager
modules. This suggests that the new sort and pagination logic is correctly integrated throughout the codebase.
- Files with relevant usage:
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
web/src/beta/features/AssetsManager/hooks.ts
web/src/beta/features/Assets/hooks.ts
web/src/services/gql/queries/project.ts
web/src/services/gql/queries/asset.ts
This confirms that the new logic is applied consistently, ensuring proper functionality across different features.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration of new sort and pagination logic in the codebase. # Test: Search for the usage of `pagination` and `SortType`. Expect: Consistent usage across the codebase. rg --type typescript -A 5 $'pagination' rg --type typescript -A 5 $'SortType'Length of output: 145
Script:
#!/bin/bash # Description: Verify the integration of new sort and pagination logic in the codebase. # Test: Search for the usage of `pagination` and `SortType`. Expect: Consistent usage across the codebase. rg --type-add 'ts:*.ts' --type ts -A 5 'pagination' rg --type-add 'ts:*.ts' --type ts -A 5 'SortType'Length of output: 76104
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (9)
Line range hint
10-237
: Well-structured component!The
Projects
component is well-organized, effectively managing project display, sorting, and user interactions. The use of hooks and memoization is appropriate for performance optimization.
40-50
: Efficient use of memoization!The memoization of
sortOptions
is well-implemented, optimizing performance and supporting internationalization.
54-72
: LGTM!The
ManagerHeader
component is correctly used, providing a user-friendly interface for sorting and layout selection.
Line range hint
73-246
: LGTM!The
ProjectsWrapper
component is correctly used, ensuring smooth scrolling and project display.
274-278
: LGTM!The
ProjectsContainer
styled component is well-implemented, organizing project display in grid or list layouts.
280-282
: LGTM!The
BreadcrumbContainer
styled component is well-implemented, providing appropriate spacing for breadcrumbs.
Line range hint
283-291
: LGTM!The
ProjectsGrid
styled component is well-implemented, providing a responsive grid layout that adapts to different screen sizes.
Line range hint
292-309
: LGTM!The
FlexTable
andFlexTableBody
styled components are well-implemented, organizing projects in a flexible table layout.
312-315
: LGTM!The
FlexTableRow
styled component is well-implemented, organizing individual project rows with appropriate spacing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (5 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (5 hunks)
- web/src/services/i18n/translations/en.yml (1 hunks)
- web/src/services/i18n/translations/ja.yml (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- web/src/services/i18n/translations/en.yml
- web/src/services/i18n/translations/ja.yml
Additional comments not posted (11)
web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts (5)
17-26
: LGTM!The
toPublishmentStatus
function is well-implemented using a switch statement for clarity.
28-58
: LGTM, but note the pending backend fix.The
pagination
function is well-structured. The TODO comment indicates a pending backend fix for sorting byCreatedat
.
100-114
: LGTM!The
useProjectsQuery
hook is correctly configured with parameters for sorting, pagination, and search functionality.
115-121
: LGTM!The
handleProjectUpdate
function correctly handles project updates and refetches data to ensure UI accuracy.
211-213
: LGTM!The
useEffect
hook is appropriately used to refetch projects when the sort value or search term changes.web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (6)
11-53
: LGTM!The
Projects
component is well-structured, utilizing hooks and conditional rendering effectively for project management.
40-50
: LGTM!The
sortOptions
are efficiently generated usinguseMemo
, supporting internationalization with the translation functiont
.
54-73
: LGTM!The
ManagerHeader
component is well-configured with sorting, layout, and search functionalities to enhance user interaction.
80-159
: LGTM!The breadcrumb and project display logic is well-implemented, providing clear navigation and enhancing the user experience.
Line range hint
162-236
: LGTM!The
FlexTable
component is effectively used for list layout, enhancing the visual organization of projects.
Line range hint
275-333
: LGTM!The styled components are well-defined, contributing to a consistent and responsive design.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx (5 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx (6 hunks)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (5 hunks)
Files skipped from review as they are similar to previous changes (2)
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
- web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
Additional comments not posted (11)
web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx (11)
1-1
: Imports look good!The import of
useMemo
is appropriate for optimizing the sorting options.Also applies to: 3-4
20-35
: State and handlers look good!The updated state variables and handlers align well with the new functionalities.
40-50
: Efficient use ofuseMemo
for sorting options.The use of
useMemo
to optimize sorting options creation is efficient and improves performance.
54-73
: UI enhancements are well-implemented!The updates to the
ManagerHeader
and breadcrumb navigation enhance user experience and align with the PR objectives.
80-105
: Breadcrumb navigation is clear and effective.The breadcrumb component provides clear navigation, especially with the integration of favorite projects and search terms.
106-160
: Grid layout for projects is responsive and well-structured.The use of
ProjectsContainer
andProjectsGrid
ensures a responsive and organized display of projects.
Line range hint
162-236
: List layout is consistent with grid layout.The
FlexTable
andFlexTableBody
components maintain consistency in displaying projects in list view.
240-247
: Loading indicators are appropriately used.The loading indicators provide clear feedback to users during data fetching.
275-279
: Styled components are well-defined.The
ProjectsContainer
styled component effectively organizes the project display.
281-283
: BreadcrumbContainer styling is appropriate.The
BreadcrumbContainer
styled component provides adequate spacing for breadcrumb elements.
313-316
: FlexTableRow styling adjustment is effective.The inclusion of a gap in
FlexTableRow
improves the layout's readability and aesthetics.
Overview
What I've done
What I haven't done
How I tested
Which point I want you to review particularly
Memo
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Style