Replace CreateReactApp with Vite #153
Conversation
WalkthroughThis update primarily focuses on improving the code's handling of environment variables and enhancing type safety in the front-end codebase. Environment variables have been shifted to use 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 Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (6)
src/pages/ProjectsPage.tsx (1)
Line range hint
24-24: Simplify the conditional expression.The static analysis tool flagged the use of a ternary operator where a simpler expression could suffice. Consider simplifying this to enhance readability.
- const [showBanner, setShowBanner] = useState(localStorage.getItem('banner') === 'N' ? false : true); + const [showBanner, setShowBanner] = useState(localStorage.getItem('banner') !== 'N');src/features/users/MobileGnbDropdown.tsx (1)
Line range hint
46-46: Specify button type to avoid unexpected form submissions.The static analysis tool correctly identified a potential issue with the default button type. Specifying the type can prevent unintended form submissions.
- <button className="btn_menu"> + <button type="button" className="btn_menu">src/serviceWorker.ts (1)
Line range hint
81-81: Implement optional chaining for better safety.Consider using optional chaining to safely access nested properties and avoid potential runtime errors.
- if (navigator.serviceWorker.controller) { + if (navigator.serviceWorker?.controller) {- if (config && config.onUpdate) { + if (config?.onUpdate) {Also applies to: 91-91
src/features/projects/Overview.tsx (1)
Line range hint
85-90: Add explicittypeattribute to button elements.The linter has identified a potential issue where the default button type of
submitcould unintentionally submit forms. This is crucial in React applications to avoid unexpected behaviors.85a85 + type="button" 93a94 + type="button"Also applies to: 93-98
src/features/users/usersSlice.ts (2)
Line range hint
54-54: Consider using optional chaining for safer code.Given the potential for
undefinedvalues, using optional chaining here can help prevent runtime errors.- initialState.username = jwtDecode<JWTPayload>(initialState.token).username; + initialState.username = jwtDecode<JWTPayload>(initialState.token)?.username;
Line range hint
226-243: Remove unnecessary else clause.Following best practices in JavaScript, unnecessary
elseclauses after return statements should be removed to simplify the code and enhance readability.226,243d225 - else { - const signupErrors: Array<ErrorDetails> = []; - for (const { field, description } of error.details!) { - if (field === 'Username') { - signupErrors.unshift({ - target: 'username', - message: description, - }); - } else if (field === 'Password') { - signupErrors.unshift({ - target: 'password', - message: description, - }); - } - } - state.signup.error = signupErrors; - action.meta.isHandledError = true; - }
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (7)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/assets/fonts/Pretendard-ExtraBold.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-Light.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-Medium.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-Regular.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-SemiBold.woffis excluded by!**/*.woffpublic/assets/fonts/RobotoMono-Regular.woffis excluded by!**/*.woff
Files selected for processing (28)
- .env (1 hunks)
- .env.development (1 hunks)
- .env.production (1 hunks)
- .github/workflows/ghpages-publish.yml (2 hunks)
- .gitignore (1 hunks)
- MAINTAINING.md (1 hunks)
- index.html (3 hunks)
- package.json (3 hunks)
- src/App.tsx (3 hunks)
- src/api/index.ts (1 hunks)
- src/app/appThunk.ts (1 hunks)
- src/app/middleware.ts (1 hunks)
- src/app/store.ts (1 hunks)
- src/components/CodeBlock/CodeBlock.tsx (3 hunks)
- src/components/Icons/Icon.tsx (1 hunks)
- src/features/projects/Overview.tsx (2 hunks)
- src/features/users/MobileGnbDropdown.tsx (1 hunks)
- src/features/users/usersSlice.ts (3 hunks)
- src/main.tsx (1 hunks)
- src/pages/CommunityPage.tsx (1 hunks)
- src/pages/Footer.tsx (1 hunks)
- src/pages/Header.tsx (2 hunks)
- src/pages/NotFoundPage.tsx (1 hunks)
- src/pages/PrivateRoute.tsx (1 hunks)
- src/pages/ProjectsPage.tsx (3 hunks)
- src/serviceWorker.ts (2 hunks)
- tsconfig.json (2 hunks)
- vite.config.ts (1 hunks)
Files skipped from review due to trivial changes (10)
- .env
- .env.development
- .env.production
- .gitignore
- index.html
- src/app/appThunk.ts
- src/app/middleware.ts
- src/app/store.ts
- src/components/Icons/Icon.tsx
- src/pages/CommunityPage.tsx
Additional context used
LanguageTool
MAINTAINING.md
[style] ~9-~9: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym. (ENGLISH_WORD_REPEAT_BEGINNING_RULE)
Context: ...e-team/dashboard/blob/main/.env#L2). 3. Update version of Yorkie image in [docker/dock...
Biome
src/pages/ProjectsPage.tsx
[error] 24-24: Unnecessary use of boolean literals in conditional expression. (lint/complexity/noUselessTernary)
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression withsrc/features/users/MobileGnbDropdown.tsx
[error] 46-46: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetsrc/serviceWorker.ts
[error] 81-81: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 91-91: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
src/features/projects/Overview.tsx
[error] 85-90: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 93-98: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetsrc/features/users/usersSlice.ts
[error] 54-54: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 226-243: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
Additional comments not posted (24)
vite.config.ts (1)
9-9: Verify the necessity of the commonjs plugin.The inclusion of
commonjs()in the Vite configuration suggests there are CommonJS modules being used. If this is not the case, consider removing this plugin to streamline the build process.Verification successful
The commonjs plugin is necessary.
The search results indicate that there are CommonJS
requirestatements present in the following files:
src/api/yorkie/v1/resources_pb.jssrc/api/yorkie/v1/admin_pb.jssrc/api/yorkie/v1/error_details_pb.jssrc/api/yorkie/v1/admin_connect.jsThese files utilize CommonJS modules, justifying the inclusion of the
commonjs()plugin in the Vite configuration.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Search for CommonJS module usage in the project. # Test: Search for `require` statements. Expect: No occurrences if the commonjs plugin is unnecessary. rg --type ts,tsx "require\("Length of output: 61
Script:
#!/bin/bash # Description: Search for CommonJS module usage in the project. # Test: Search for `require` statements. Expect: No occurrences if the commonjs plugin is unnecessary. rg --type-add 'js:*.{js,jsx,ts,tsx}' "require\("Length of output: 1140
MAINTAINING.md (1)
8-8: Update to environment variable in release instructions approved.The change from
REACT_APP_JS_SDK_VERSIONtoVITE_JS_SDK_VERSIONin the release instructions aligns with the migration to Vite..github/workflows/ghpages-publish.yml (1)
27-27: Deployment configuration update approved.The change to deploy from the
distfolder aligns with Vite's default build output, replacing the previousbuildfolder used by CreateReactApp.tsconfig.json (2)
21-23: TypeScript path aliases approved.The configuration for path aliases (
@/*) is correctly set to enable easier imports throughout the project.
17-17: JSX configuration update approved.The setting for
jsxtoreact-jsxis appropriate for React 18 and ensures better compatibility with the new JSX transform.
[APROVED]src/pages/Footer.tsx (1)
23-23: Environment variable usage updated correctly for Vite.The update from
process.envtoimport.meta.envis correct and aligns with Vite's approach to handling environment variables. Ensure thatVITE_SERVICE_URLis correctly defined in your Vite environment configuration files.src/main.tsx (1)
19-26: Correct implementation of React 18'screateRoot.The transition to
createRootfromReactDOM.renderis correctly implemented. This change is necessary for React 18's new features like concurrent mode. Ensure that the HTML file contains an element with the id 'root' to avoid runtime errors.src/pages/PrivateRoute.tsx (1)
31-31: Environment variable usage updated correctly for Vite.The update from
process.envtoimport.meta.envis correct and aligns with Vite's approach to handling environment variables. Ensure thatVITE_SERVICE_URLis correctly defined in your Vite environment configuration files.src/pages/NotFoundPage.tsx (1)
19-19: Correct usage of Vite-specific SVG import syntax.The update to import SVGs with the
?reactsuffix is correctly implemented and aligns with Vite's capabilities for handling assets in React projects. Ensure that your Vite configuration supports this feature.src/components/CodeBlock/CodeBlock.tsx (2)
18-18: Updated import for ReactJsonViewProps.This change aligns with the new package version introduced in the PR. Ensure that all properties used from
ReactJsonViewPropsare compatible with the new version.
32-40: Ensure proper handling of tokens in Highlight.The logic here appears correct and should function as intended with the updated imports. However, verify that
getLinePropsandgetTokenPropsare correctly utilized per the latest API changes inprism-react-renderer.Verification successful
Proper handling of tokens in Highlight verified.
The usage of
getLinePropsandgetTokenPropsinsrc/components/CodeBlock/CodeBlock.tsxaligns with the latest API documentation ofprism-react-renderer. The functions are correctly utilized to apply props to the rendered elements, ensuring proper token handling.
getLinePropsis used to spread props onto line elements.getTokenPropsis used to spread props onto token elements.No breaking changes were found in the latest documentation that would affect the current implementation.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for breaking changes in the API of prism-react-renderer. # Test: Search for API changes in the official repository. gh repo view prismjs/prism-react-renderer --json releases --jq '.[0].body'Length of output: 1176
Script:
#!/bin/bash # Description: Fetch the latest release information from prism-react-renderer repository. # Test: Check for breaking changes in the latest release. gh repo view prismjs/prism-react-renderer --json latestRelease --jq '.latestRelease.description'Length of output: 198
Script:
#!/bin/bash # Description: Search for the correct repository name for prism-react-renderer. # Test: Find the correct repository name and fetch the latest release information. # Search for repositories related to prism-react-renderer gh repo list --json nameWithOwner --jq '.[] | select(.nameWithOwner | contains("prism-react-renderer")) | .nameWithOwner'Length of output: 123
Script:
#!/bin/bash # Description: Fetch the latest version of prism-react-renderer from npm and check for release notes. # Test: Find the latest release information and check for breaking changes. # Fetch the latest version of prism-react-renderer npm show prism-react-renderer version # Fetch the release notes or changelog URL if available npm show prism-react-renderer repository.urlLength of output: 228
Script:
#!/bin/bash # Description: Search for the implementation of getLineProps and getTokenProps in the codebase to verify their usage. # Search for getLineProps implementation fd . -e tsx -x grep -Hn 'getLineProps' {} # Search for getTokenProps implementation fd . -e tsx -x grep -Hn 'getTokenProps' {}Length of output: 515
Script:
#!/bin/bash # Description: Fetch the latest documentation for prism-react-renderer to verify the usage of getLineProps and getTokenProps. # Fetch the URL of the prism-react-renderer documentation curl -s https://api.npms.io/v2/package/prism-react-renderer | jq -r '.collected.metadata.links.repository'Length of output: 161
Script:
#!/bin/bash # Description: Fetch the README or documentation file from the prism-react-renderer repository to verify the usage of getLineProps and getTokenProps. # Clone the repository git clone https://github.com/FormidableLabs/prism-react-renderer.git # Display the README file cat prism-react-renderer/README.mdLength of output: 16906
src/pages/Header.tsx (1)
34-34: Updated environment variable references and links.The changes correctly reflect the transition from
REACT_APP_toVITE_prefixes for environment variables. This is crucial for maintaining functionality with Vite. Ensure all references to these variables are updated across the project.Also applies to: 56-56
src/pages/ProjectsPage.tsx (1)
19-19: Updated environment variable references and new import with?reactsuffix.The import change is necessary for correct handling of SVGs with Vite. The updated environment variable references ensure compatibility with the new build system. Ensure that all such references are consistent across the application.
Also applies to: 33-52
src/features/users/MobileGnbDropdown.tsx (1)
58-58: Updated environment variable reference.This change is part of the transition to Vite and correctly updates the environment variable reference. Verify that similar updates are consistently applied across all components.
package.json (2)
57-59: Updated build and development scripts to use Vite.The scripts have been correctly updated to utilize Vite's commands (
vite,vite build,vite preview). This aligns with the PR's objective to transition to Vite. Make sure to update any CI/CD pipelines that depend on these scripts.
7-43: Dependencies and scripts updated for Vite integration.The updates in dependencies and the addition of new ones like
vite,vite-plugin-commonjs, andvite-plugin-svgrare appropriate for the transition from CreateReactApp to Vite. Ensure that the version bumps do not introduce breaking changes by thorough testing.src/App.tsx (2)
34-38: Updated import paths to use absolute paths.The changes to use absolute paths (
@/) are a good practice for clarity and maintainability, especially in larger projects. This aligns with modern JavaScript project structures.
47-47: Updated environment variable references for Vite.The transition from
process.envtoimport.meta.envis correctly implemented. Ensure that all instances where environment variables are used have been updated to reflect this new pattern.Also applies to: 67-67
src/api/index.ts (1)
31-31: Updated API base URL to use Vite environment variables.The update to use
import.meta.env.VITE_API_ADDRfor the API base URL is correctly implemented, ensuring that the API calls are aligned with the new environment variable standards introduced by Vite.src/features/projects/Overview.tsx (3)
32-32: Environment variable syntax updated correctly.The migration from
process.envtoimport.meta.envfor accessing environment variables is correctly implemented here.
50-50: Correctly updated the SDK version reference for CDN.The environment variable for the SDK version has been correctly updated to use Vite's
import.meta.envsyntax.
53-53: Consistent environment variable update in CDN script.The API address environment variable has been updated consistently with the Vite migration requirements.
src/features/users/usersSlice.ts (2)
22-22: Use of jwtDecode from jwt-decode library.The import and usage of
jwtDecodefrom thejwt-decodelibrary is correctly implemented. This is part of the update to use named imports which aligns with modern JavaScript practices.
108-108: Correct decoding of JWT to fetch username.The JWT decoding logic to extract the username is correctly implemented in both the initial state setup and within the login user fulfillment handler.
Also applies to: 180-180
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (4)
src/features/users/MobileGnbDropdown.tsx (1)
Line range hint
46-46: Add explicit button type.The button element inside the popover should have an explicit type attribute to prevent any unintended form submissions when used within a form. This is an accessibility and functionality improvement.
- <button className="btn_menu"> + <button type="button" className="btn_menu">src/features/projects/Overview.tsx (1)
Line range hint
85-90: Specify button types to prevent form submission issues.The default type of a button is 'submit', which can unintentionally submit forms. To prevent this, explicitly set the button type to 'button'.
- <button className={classNames('item', {is_active: snippetType === 'npm'})} onClick={() => setSnippetType('npm')}> + <button type="button" className={classNames('item', {is_active: snippetType === 'npm'})} onClick={() => setSnippetType('npm')}> - <button className={classNames('item', {is_active: snippetType === 'cdn'})} onClick={() => setSnippetType('cdn')}> + <button type="button" className={classNames('item', {is_active: snippetType === 'cdn'})} onClick={() => setSnippetType('cdn')}>Also applies to: 93-98
src/features/users/usersSlice.ts (2)
Line range hint
54-54: Consider using optional chaining for safer code.Using optional chaining (
?.) can help prevent runtime errors when accessing properties on objects that might be null or undefined.- if (initialState.token) { + if (initialState.token?) {
Line range hint
226-243: Remove unnecessary else clause for cleaner code.The else clause is unnecessary after early return statements in the previous branches. Removing it can simplify the control flow and improve code readability.
- } else if (statusCode === RPCStatusCode.INVALID_ARGUMENT) { + if (statusCode === RPCStatusCode.INVALID_ARGUMENT) {
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (7)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/assets/fonts/Pretendard-ExtraBold.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-Light.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-Medium.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-Regular.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-SemiBold.woffis excluded by!**/*.woffpublic/assets/fonts/RobotoMono-Regular.woffis excluded by!**/*.woff
Files selected for processing (28)
- .env (1 hunks)
- .env.development (1 hunks)
- .env.production (1 hunks)
- .github/workflows/ghpages-publish.yml (2 hunks)
- .gitignore (1 hunks)
- MAINTAINING.md (1 hunks)
- index.html (3 hunks)
- package.json (3 hunks)
- src/App.tsx (3 hunks)
- src/api/index.ts (1 hunks)
- src/app/appThunk.ts (1 hunks)
- src/app/middleware.ts (1 hunks)
- src/app/store.ts (1 hunks)
- src/components/CodeBlock/CodeBlock.tsx (3 hunks)
- src/components/Icons/Icon.tsx (1 hunks)
- src/features/projects/Overview.tsx (2 hunks)
- src/features/users/MobileGnbDropdown.tsx (1 hunks)
- src/features/users/usersSlice.ts (3 hunks)
- src/main.tsx (1 hunks)
- src/pages/CommunityPage.tsx (1 hunks)
- src/pages/Footer.tsx (1 hunks)
- src/pages/Header.tsx (2 hunks)
- src/pages/NotFoundPage.tsx (1 hunks)
- src/pages/PrivateRoute.tsx (1 hunks)
- src/pages/ProjectsPage.tsx (3 hunks)
- src/serviceWorker.ts (2 hunks)
- tsconfig.json (2 hunks)
- vite.config.ts (1 hunks)
Files not reviewed due to errors (1)
- src/serviceWorker.ts (no review received)
Files skipped from review due to trivial changes (13)
- .env
- .env.development
- .env.production
- .github/workflows/ghpages-publish.yml
- .gitignore
- index.html
- src/App.tsx
- src/app/appThunk.ts
- src/app/middleware.ts
- src/pages/CommunityPage.tsx
- src/pages/Footer.tsx
- src/pages/NotFoundPage.tsx
- vite.config.ts
Additional context used
LanguageTool
MAINTAINING.md
[style] ~9-~9: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym. (ENGLISH_WORD_REPEAT_BEGINNING_RULE)
Context: ...e-team/dashboard/blob/main/.env#L2). 3. Update version of Yorkie image in [docker/dock...
[uncategorized] ~11-~11: You might be missing the article “a” here. (AI_EN_LECTOR_MISSING_DETERMINER_A)
Context: ... any necessary modifications. 5. Create Pull Request and merge it into main.
Biome
src/pages/ProjectsPage.tsx
[error] 24-24: Unnecessary use of boolean literals in conditional expression. (lint/complexity/noUselessTernary)
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression withsrc/features/users/MobileGnbDropdown.tsx
[error] 46-46: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetsrc/serviceWorker.ts
[error] 81-81: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 91-91: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
src/features/projects/Overview.tsx
[error] 85-90: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 93-98: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetsrc/features/users/usersSlice.ts
[error] 54-54: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 226-243: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
Additional comments not posted (16)
MAINTAINING.md (1)
8-8: Update environment variable reference in documentation.The documentation has been updated to reflect the new environment variable naming convention, which is crucial for maintaining consistency across the project documentation and actual codebase.
tsconfig.json (1)
4-4: Update TypeScript configuration for Vite.The TypeScript configuration has been updated to support JSX and include Vite-specific types, enhancing compatibility with the new build tool. These changes are necessary for the TypeScript compiler to correctly understand the new project structure and JSX syntax.
Also applies to: 17-17, 25-25
src/main.tsx (1)
19-19: Update rendering method to usecreateRoot.The rendering method has been updated to use
createRootfromreact-dom/client, which is a necessary change to support React 18's new root API. This update ensures that the application takes advantage of React 18's improved handling of rendering and state updates.Also applies to: 25-26
src/pages/PrivateRoute.tsx (1)
31-31: Update environment variable access for redirection URL.The redirection URL now correctly uses
import.meta.env.VITE_SERVICE_URLfrom Vite's environment handling, aligning with the new project setup. This is crucial for ensuring that environment variables are handled consistently in the new Vite environment.src/app/store.ts (1)
18-18: LGTM! Simplified import paths using aliases.The use of alias '@' in import paths enhances readability and maintainability. Ensure that the alias is correctly configured in your build system (e.g.,
tsconfig.jsonorwebpack.config.js).src/components/CodeBlock/CodeBlock.tsx (2)
18-19: Improved import statements for better modularity and potential bundle size reduction.The use of more specific imports can help in reducing the final bundle size. Verify that your bundler is configured to take advantage of tree-shaking for these modules.
36-40: Streamlined JSX prop spreading enhances clarity and performance.The simplification of prop spreading in JSX is beneficial for clarity and might even reduce minor runtime overheads. Ensure that all required props are still correctly passed by covering this component with appropriate unit tests.
src/pages/Header.tsx (1)
34-34: Correct update of environment variable access for Vite.Transitioning from
process.envtoimport.meta.envaligns with Vite's environment handling. Confirm through functional tests that the variables are correctly loaded in different environments (development, production).
[APROVED]Also applies to: 56-56
src/pages/ProjectsPage.tsx (1)
33-33: Correct update of environment variable access for Vite.Transitioning from
process.envtoimport.meta.envis correct for Vite projects. Ensure that these environment variables are correctly defined in your Vite config.Also applies to: 43-52
src/features/users/MobileGnbDropdown.tsx (1)
58-58: Environment variable prefix updated.The update from
REACT_APP_SERVICE_URLtoVITE_SERVICE_URLaligns with the transition to Vite. This change is consistent and correctly implemented.package.json (2)
7-43: Dependencies updated for Vite compatibility.The updates to dependencies are appropriate for supporting the Vite environment. This includes adding
vitespecific plugins and updating other libraries to their latest versions which are compatible with Vite.
57-59: Scripts updated to use Vite commands.The updates to the
dev,build, andservescripts to use Vite commands are correctly implemented and necessary for the new setup.src/components/Icons/Icon.tsx (1)
19-61: SVG imports updated for Vite compatibility.The update to import SVGs with the
?reactquery ensures they are treated as React components, which is necessary for their use within JSX. This change is correctly implemented.src/api/index.ts (1)
31-31: Updated environment variable for Vite compatibility.The update from
process.env.REACT_APP_API_ADDRtoimport.meta.env.VITE_API_ADDRaligns with the transition from CRA to Vite. This change ensures that environment variables are accessed in a manner compatible with Vite's handling of such variables.src/features/projects/Overview.tsx (1)
32-32: Updated environment variable and SDK URL for Vite compatibility.The changes ensure that the application correctly accesses the API address and SDK version using Vite's environment variable handling (
import.meta.env). This is crucial for ensuring that the application remains functional after the migration from CRA to Vite.Also applies to: 50-50, 53-53
src/features/users/usersSlice.ts (1)
22-22: Updated JWT decoding function for better modularity and maintainability.The change from default import
jwt_decodeto named importjwtDecodefrom 'jwt-decode' package aligns with ES6 module best practices and ensures that only the necessary parts of the module are imported, reducing the overall bundle size.Also applies to: 108-108, 180-180
hackerwins
force-pushed
the
vite
branch
2 times, most recently
from
fc095a1 to
741244d
Compare
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
The VITE_SITE_URL in the development environment configuration file was updated to use `http` instead of `https`. This change ensures that the site URL is correctly configured for local development.
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range and nitpick comments (4)
src/features/users/MobileGnbDropdown.tsx (1)
Line range hint
46-46: Specify the button type for accessibility.For better accessibility and to prevent unexpected form submissions, specify the button type explicitly.
- <button className="btn_menu"> + <button className="btn_menu" type="button">src/features/users/SignupForm.tsx (1)
Line range hint
80-80: Suggestion: Use optional chaining for safer code.Consider using optional chaining when accessing deeply nested properties to prevent runtime errors if any intermediate property is undefined.
- helperText={(formErrors.username && formErrors.username.message) || ''} + helperText={formErrors.username?.message || ''}Repeat similar changes for other instances.
Also applies to: 102-102, 121-121
src/features/projects/Overview.tsx (1)
Line range hint
85-90: Add explicittypeattribute to buttons to prevent form submission.The buttons are missing the
typeattribute, which can lead to unintended form submissions as the default type for button elements issubmit. Specifyingtype="button"will prevent this behavior.- <button className={classNames('item', {is_active: snippetType === 'npm'})} onClick={() => setSnippetType('npm')}> + <button type="button" className={classNames('item', {is_active: snippetType === 'npm'})} onClick={() => setSnippetType('npm')}>Apply similar changes to other button elements.
Also applies to: 93-98
src/features/users/usersSlice.ts (1)
Line range hint
226-243: Remove unnecessaryelseclause.The
elseclause in the error handling logic is unnecessary because the previous branches already handle all cases early. Removing this clause can simplify the code and improve its readability.- } else if (statusCode === RPCStatusCode.INVALID_ARGUMENT) { + if (statusCode === RPCStatusCode.INVALID_ARGUMENT) {Remove the
elsekeyword to simplify the control flow.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (8)
package-lock.jsonis excluded by!**/package-lock.jsonpublic/assets/fonts/Pretendard-ExtraBold.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-Light.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-Medium.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-Regular.woffis excluded by!**/*.woffpublic/assets/fonts/Pretendard-SemiBold.woffis excluded by!**/*.woffpublic/assets/fonts/RobotoMono-Regular.woffis excluded by!**/*.woffpublic/assets/icons/icon_line.svgis excluded by!**/*.svg
Files selected for processing (35)
- .env (1 hunks)
- .env.development (1 hunks)
- .env.production (1 hunks)
- .github/workflows/ci.yml (1 hunks)
- .github/workflows/ghpages-publish.yml (2 hunks)
- .gitignore (1 hunks)
- MAINTAINING.md (1 hunks)
- index.html (3 hunks)
- package.json (3 hunks)
- src/App.tsx (2 hunks)
- src/api/index.ts (1 hunks)
- src/app/appThunk.ts (2 hunks)
- src/app/middleware.ts (1 hunks)
- src/components/CodeBlock/CodeBlock.tsx (2 hunks)
- src/components/Icons/Icon.tsx (1 hunks)
- src/components/SearchBar/SearchBar.tsx (1 hunks)
- src/features/documents/DocumentList.tsx (2 hunks)
- src/features/documents/documentSlice.spec.ts (1 hunks)
- src/features/documents/documentsSlice.ts (2 hunks)
- src/features/globalError/globalErrorSlice.ts (2 hunks)
- src/features/projects/Overview.tsx (2 hunks)
- src/features/projects/ProjectList.tsx (1 hunks)
- src/features/users/MobileGnbDropdown.tsx (1 hunks)
- src/features/users/SignupForm.tsx (2 hunks)
- src/features/users/usersSlice.ts (4 hunks)
- src/main.tsx (1 hunks)
- src/pages/CommunityPage.tsx (1 hunks)
- src/pages/Footer.tsx (1 hunks)
- src/pages/Header.tsx (2 hunks)
- src/pages/NotFoundPage.tsx (1 hunks)
- src/pages/PrivateRoute.tsx (1 hunks)
- src/pages/ProjectsPage.tsx (3 hunks)
- tsconfig.json (2 hunks)
- vite.config.ts (1 hunks)
- vitest.config.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- .github/workflows/ci.yml
- src/components/SearchBar/SearchBar.tsx
Files skipped from review as they are similar to previous changes (20)
- .env
- .env.development
- .env.production
- .github/workflows/ghpages-publish.yml
- .gitignore
- index.html
- src/App.tsx
- src/api/index.ts
- src/app/appThunk.ts
- src/app/middleware.ts
- src/components/CodeBlock/CodeBlock.tsx
- src/components/Icons/Icon.tsx
- src/main.tsx
- src/pages/CommunityPage.tsx
- src/pages/Footer.tsx
- src/pages/Header.tsx
- src/pages/NotFoundPage.tsx
- src/pages/PrivateRoute.tsx
- tsconfig.json
- vite.config.ts
Additional context used
LanguageTool
MAINTAINING.md
[style] ~9-~9: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym. (ENGLISH_WORD_REPEAT_BEGINNING_RULE)
Context: ...e-team/dashboard/blob/main/.env#L2). 3. Update version of Yorkie image in [docker/dock...
Biome
src/pages/ProjectsPage.tsx
[error] 24-24: Unnecessary use of boolean literals in conditional expression. (lint/complexity/noUselessTernary)
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression withsrc/features/users/MobileGnbDropdown.tsx
[error] 46-46: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetsrc/features/users/SignupForm.tsx
[error] 80-80: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 102-102: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 121-121: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
src/features/projects/Overview.tsx
[error] 85-90: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 93-98: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetsrc/features/users/usersSlice.ts
[error] 54-54: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 226-243: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
src/features/documents/DocumentList.tsx
[error] 133-143: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
Additional comments not posted (13)
vitest.config.ts (1)
4-9: Configuration for Vitest looks good.The setup includes appropriate test patterns and the use of
tsconfigPathsto handle TypeScript configurations, which is essential for a smooth transition from Jest.MAINTAINING.md (1)
8-8: Update to release instructions is clear and precise.The change from
REACT_APP_JS_SDK_VERSIONtoVITE_JS_SDK_VERSIONis correctly documented, ensuring maintainers are aware of the new environment variable conventions.src/features/globalError/globalErrorSlice.ts (1)
Line range hint
17-37: Enhancements to global error handling are well-implemented.The addition of specific error codes and messages in
setGlobalErrorimproves clarity and user experience during error scenarios.src/pages/ProjectsPage.tsx (1)
Line range hint
33-52: Use of environment variables in URLs is correctly implemented.The transition to
import.meta.env.VITE_SERVICE_URLfor constructing URLs is appropriate and aligns with the modern practices introduced by Vite.src/features/users/MobileGnbDropdown.tsx (1)
58-58: Correct implementation of environment variable in dropdown links.The use of
import.meta.env.VITE_SERVICE_URLinDropdown.Itemis correctly implemented, ensuring that the links are dynamically set based on the environment.package.json (2)
7-43: Updated dependencies and added Vite-specific packages.The dependencies have been updated to include Vite and related plugins (
@vitejs/plugin-react,vite-plugin-commonjs, etc.). This is consistent with the migration from CreateReactApp to Vite. Also, the versions of existing libraries like React and TypeScript have been updated to their latest versions to ensure compatibility with Vite.
57-60: Updated script commands for Vite compatibility.The script commands have been updated to utilize Vite for development, building, and serving the application, replacing the previous scripts that were configured for CreateReactApp. This change is necessary for the integration with Vite and should streamline the build process.
src/features/documents/documentSlice.spec.ts (1)
17-17: Updated imports for Vitest.The imports for
describe,it, andexpecthave been updated to use Vitest instead of Jest. This change aligns with the PR’s objective to replace Jest with Vitest.src/features/users/SignupForm.tsx (1)
22-22: Refactored to use Redux hooks and improved form handling.The use of
useAppDispatchanduseAppSelectorhooks from Redux Toolkit is appropriate and follows best practices for state management in React-Redux applications. The form handling logic has been encapsulated within theuseFormhook fromreact-hook-form, which is a modern approach to managing form state and validation in React applications.Also applies to: 25-25, 37-37
src/features/projects/Overview.tsx (1)
32-32: Dynamically set API and SDK versions using environment variables.The use of environment variables (
VITE_API_ADDRandVITE_JS_SDK_VERSION) to dynamically set the API address and SDK version in the script tags is a good practice. It ensures that the application can be configured externally without needing to rebuild or modify the source code directly.Also applies to: 50-50, 53-53
src/features/users/usersSlice.ts (1)
17-17: Updated state management logic and JWT handling.The updates to the
usersSliceinclude improved JWT handling and state management logic. The use ofjwtDecodeto extract the username from the JWT token is appropriate and enhances the security by not storing sensitive user information in the state.Also applies to: 22-22, 108-108, 141-141, 180-180
src/features/documents/documentsSlice.ts (1)
190-190: Type Safety Improvement ApprovedThe explicit typing of the action parameter using
PayloadAction<number>enhances type safety and ensures that the payload is expected to be a number. This is a good practice in TypeScript for reducing runtime errors and improving code maintainability.src/features/projects/ProjectList.tsx (1)
110-110: Type Annotations Added to Event HandlersAdding type annotations to the event handlers (
handleProjectSort,handleChangeQuery, andhandleSearch) improves type safety and is a best practice in TypeScript. This helps in catching potential bugs during development rather than at runtime.Also applies to: 118-118, 123-123
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/features/documents/DocumentList.tsx (3 hunks)
- src/pages/ProjectsPage.tsx (3 hunks)
Files skipped from review as they are similar to previous changes (2)
- src/features/documents/DocumentList.tsx
- src/pages/ProjectsPage.tsx
This commit updates libraries and replaces CreateReactApp with Vite. Currently dashboard uses React 17, and after being in use for approximately two years, there is a need to upgrade the stack. CreateReactApp is not the recommended approach by React team for now, and Vite is considered the most direct alternative to replace it. Additionally, Jest is replaced by Vitest to align with the technology upgrade. --------- Co-authored-by: Yourim Cha <yourim.cha@navercorp.com>
What this PR does / why we need it?
Replace CreateReactApp with Vite
This commit updates libraries and replaces CreateReactApp with Vite.
Currently dashboard uses React 17, and after being in use for
approximately two years, there is a need to upgrade the stack.
CreateReactApp is not the recommended approach by React team for now,
and Vite is considered the most direct alternative to replace it.
Additionally, Jest is replaced by Vitest to align with the technology
upgrade.
Any background context you want to provide?
What are the relevant tickets?
Fixes #
Checklist
Summary by CodeRabbit
New Features
Improvements
DocumentListcomponent.ProjectsPagecomponent.