Change to Vite #28
Change to Vite #28
Conversation
WalkthroughMigrates the project from Create React App to Vite: replaces CRA tooling and env names with Vite equivalents, adds vite.config.js and index.html, introduces path alias "@", switches environment access to import.meta.env, updates SCSS to module @use, revises ESLint to flat config, and adjusts imports and minor lint/key fixes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Developer
participant Vite as Vite Dev Server
participant Browser
participant App as React App (src)
participant Apollo as Apollo Client
participant API as Backend GraphQL
Developer->>Vite: npm run dev (vite)
Browser->>Vite: GET /
Vite-->>Browser: index.html + transformed modules (alias "@", import.meta.env)
Browser->>App: load /src/index.jsx
App->>Apollo: init client (URI = import.meta.env.VITE_API_URL + "/graphql")
App->>API: GraphQL requests via Apollo
API-->>App: responses
sequenceDiagram
autonumber
participant UI as FileUploader.jsx
participant Apollo as Apollo Client
participant UploadAPI as Upload Endpoint (import.meta.env.VITE_UPLOAD_URL)
UI->>UI: apiPath = import.meta.env.VITE_UPLOAD_URL
UI->>Apollo: uploadFile(variables, context: {headers: {'apollo-require-preflight':'true'}})
Apollo->>UploadAPI: POST file with preflight header
UploadAPI-->>Apollo: upload response
Apollo-->>UI: mutation result -> update UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
# Conflicts: # .env # .eslintrc # package-lock.json # package.json # src/Router.jsx # src/pages/Auth/Activation.jsx # src/pages/Auth/Login.jsx # src/pages/Auth/ResetPassword.jsx # src/pages/Auth/Signup.jsx # src/pages/Posts/Create/Create.jsx # src/pages/Posts/List/PostList.jsx # src/pages/User/Edit.jsx
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
.env (1)
1-12: Clean up CRA leftovers and fix quoted API keyPORT, SKIP_PREFLIGHT_CHECK, and BROWSER are CRA-only. Also, quoting the key will include quotes in import.meta.env, breaking Google Maps. Reorder keys for clarity.
-PORT=4074 -VITE_ITEMS_PER_PAGE=10 -VITE_API_URL=http://localhost:7440 -VITE_UPLOAD_URL=http://localhost:5173 -VITE_FILE_URL=http://localhost:5173 +VITE_API_URL=http://localhost:7440 +VITE_FILE_URL=http://localhost:5173 +VITE_UPLOAD_URL=http://localhost:5173 +VITE_ITEMS_PER_PAGE=10 # VITE_API_URL=https://api.chamsocial.com # VITE_UPLOAD_URL=https://www.chamsocial.com # VITE_FILE_URL=https://www.chamsocial.com -SKIP_PREFLIGHT_CHECK=true -BROWSER=none -VITE_GOOGLE_MAPS_API_KEY='Replace in .local or .production' +VITE_GOOGLE_MAPS_API_KEY=Replace_in_.local_or_.productionIf you want the port configurable, use VITE_PORT and read it in vite.config.js as suggested earlier.
src/pages/User/Profile.jsx (1)
43-44: Potential crash when auth.user is undefined.Accessing
auth.user.idwithout guarding can throw for logged-out visitors.- if (user.id === auth.user.id) { + if (auth?.user?.id && user.id === auth.user.id) {
🧹 Nitpick comments (22)
src/pages/Messages/Create/Form.jsx (1)
64-67: Fix typo and improve accessibility on the error alert.Apply:
- {error && ( - <div className="alert alert--danger"> - Faild to send. Make sure you have a subject, recipient and message - </div> - )} + {error && ( + <div className="alert alert--danger" role="alert" aria-live="polite"> + Failed to send. Make sure you have a subject, recipient, and message. + </div> + )}src/pages/Messages/List.jsx (1)
44-45: Guard against null seenAt and compare Dates, not strings.If seenAt can be null/undefined, or if timestamps aren’t guaranteed ISO-ordered strings, this comparison can misclassify unread threads.
Consider:
- const hasBeenSeen = message.lastMessageAt <= message.seenAt + const hasBeenSeen = + !!message.seenAt && + new Date(message.lastMessageAt) <= new Date(message.seenAt)Verify the GraphQL schema (nullability and format of lastMessageAt/seenAt).
src/pages/Posts/Post/Post.jsx (1)
6-7: Good move to alias-based imports; consider unifying the rest of this file’s imports.For consistency and easier refactors, switch remaining relative imports to '@'.
Example import block:
import Modal from '@/components/Modal' import Bookmark from '@/components/Bookmark' import Loading from '@/components/partials/Loading' import Comments from '@/components/Comments' import Media from '@/components/Posts/Media' import { singlePostQuery } from '@/graphql/post-queries' import { dateToString } from '@/utils'src/scss/_buttons.scss (1)
17-20: Combine transitions to avoid overriding.Two transition declarations mean the second overwrites the first.
Apply:
- transition: opacity .3s; - font-weight: normal; - transition: background .2s ease-in; + transition: opacity .3s, background .2s ease-in; + font-weight: normal;src/components/Posts/Media.jsx (1)
7-8: Validate VITE_API_URL/VITE_FILE_URL exist and use URL for joins.env defines both VITE_API_URL and VITE_FILE_URL, but add a runtime guard to avoid breaking URLs if they’re ever unset, and replace string concatenation with the URL constructor for consistent slash handling.
const apiUrl = import.meta.env.VITE_API_URL const fileUrl = import.meta.env.VITE_FILE_URL if ((!apiUrl || !fileUrl) && import.meta.env.DEV) { console.warn('Missing VITE_API_URL or VITE_FILE_URL') } // elsewhere, build URLs robustly: <img src={new URL(img.url, fileUrl)} alt="Big version" /> <a href={new URL(media.url, fileUrl)}>…</a> {isImage && ( <img src={new URL( `thumb/${media.userId}/200/200/${media.filename}`, `${apiUrl}/` )} alt="Media" /> )}src/utils/apollo.js (1)
10-10: Use URL API for constructing GraphQL URI
Avoid double/missing slashes:- uri: `${VITE_API_URL}/graphql`, + uri: new URL('graphql', VITE_API_URL).toString(),Env var
VITE_API_URLis defined in.env—add it to any other mode-specific files you use (e.g..env.production). Applies also at lines 30–31.src/components/Auth/Auth.jsx (1)
21-21: Remove or gate the console log.Keep console noise out of prod builds.
- console.log('Auth data:', data) // eslint-disable-line no-console + if (import.meta.env.DEV) console.log('Auth data:', data)src/pages/User/Edit.jsx (1)
132-135: PropTypes: use oneOfType for id.
oneOfenumerates values, not types.- id: PropTypes.oneOf([PropTypes.string, PropTypes.number]).isRequired, + id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,src/pages/Map/Quarantine.jsx (1)
7-7: Guard Google Maps API key and placeholder before loading script
Add a check in theuseEffectto return early ifVITE_GOOGLE_MAPS_API_KEYis missing or still set to the template placeholder from.env:+ if (!VITE_GOOGLE_MAPS_API_KEY || VITE_GOOGLE_MAPS_API_KEY.includes('Replace in')) { + if (import.meta.env.DEV) console.warn('Missing or placeholder Google Maps API key') + return + }vite.config.js (2)
7-8: Drop redundant defaultsVite defaults root='.' and publicDir='public'; keep config lean by removing them.
- root: '.', - publicDir: 'public',
18-21: Optional: make dev port configurable via envIf you want to override the port without editing the config, read it from VITE_PORT.
-import { defineConfig } from 'vite'; +import { defineConfig, loadEnv } from 'vite'; @@ -export default defineConfig({ +export default defineConfig(({ mode }) => { + const env = loadEnv(mode, process.cwd(), ''); + const port = Number(env.VITE_PORT || 4074); + return { plugins: [react()], @@ - server: { - port: 4074, - open: true, - }, -}); + server: { port, open: true }, + }; +});index.html (2)
7-21: Remove CRA-specific comments/placeholders%PUBLIC_URL% notes are CRA-only and can confuse future edits under Vite.
- <!-- - manifest.json provides metadata used when your web app is added to the - homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ - --> + <!-- PWA manifest --> @@ - <!-- - Notice the use of %PUBLIC_URL% in the tags above. - It will be replaced with the URL of the `public` folder during the build. - Only files inside the `public` folder can be referenced from the HTML. - - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will - work correctly both with client-side routing and a non-root public URL. - Learn how to configure a non-root public URL by running `npm run build`. - --> @@ - <!-- - This HTML file is a template. - If you open it directly in the browser, you will see an empty page. - - You can add webfonts, meta tags, or analytics to this file. - The build step will place the bundled scripts into the <body> tag. - - To begin the development, run `npm start` or `yarn start`. - To create a production bundle, use `npm run build` or `yarn build`. - -->Also applies to: 36-44
45-52: Replace deprecated Universal Analytics snippetUA (analytics.js) is sunset. Remove this block and migrate to GA4 via gtag in your app entry, driven by an env var (e.g., VITE_GA_MEASUREMENT_ID).
- <script> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - ga('create', 'UA-20917377-1', 'auto'); - ga('send', 'pageview'); - </script>Follow-up: initialize GA4 in /src/index.jsx using import.meta.env.VITE_GA_MEASUREMENT_ID.
src/scss/_variables.scss (1)
1-4: Sass modules migration looks good; consider color.scale for perceptual tuningcolor.adjust matches lighten semantics. If you want proportionate lightening regardless of base lightness, color.scale($lightness: 55%) can be preferable.
package.json (1)
6-13: Add vite preview scriptHandy for testing production build locally.
"scripts": { "dev": "vite", "start": "vite", + "preview": "vite preview --port 4075", "lint": "eslint .", "lint:fix": "eslint . --fix", "build": "vite build", "test": "vitest", "eject": "echo 'Eject is not supported with Vite'" },.env (1)
1-12: (nit) dotenv key orderingIf you use dotenv-linter, the suggested order is API_URL, FILE_URL, UPLOAD_URL, ITEMS_PER_PAGE, then GOOGLE_MAPS_API_KEY.
src/components/Posts/ListItem.jsx (1)
5-6: Align utils import with alias for consistency.Minor consistency tweak to prefer '@/utils' over a relative path.
-import Bookmark from '@/components/Bookmark' -import { dateToString } from '../../utils' +import Bookmark from '@/components/Bookmark' +import { dateToString } from '@/utils'src/pages/Posts/Create/Create.jsx (1)
26-28: Fix mutation operation name typo.Spelled “deteleDraftMutation”. While harmless at runtime, it hinders debugging and tooling.
-const DELETE_DRAFT = gql` - mutation deteleDraftMutation($id: ID!) { +const DELETE_DRAFT = gql` + mutation deleteDraftMutation($id: ID!) { deletePost(id: $id) } `src/pages/Auth/Activation.jsx (1)
5-8: Alias import updates look correct; ensure tests and linter share the same mapping.If you run Vitest/Jest or ESLint with import plugins, mirror the @ → src mapping there to avoid resolution errors.
src/pages/User/Profile.jsx (1)
66-66: Avoid "false" as a CSS class from template literal coercion.
${longUsername && 'h1--long'}yields"false"when falsy.- <h1 className={`${longUsername && 'h1--long'}`}>{user.username}</h1> + <h1 className={longUsername ? 'h1--long' : undefined}>{user.username}</h1>src/scss/_layout.scss (2)
1-1: Make @use path explicit to avoid resolution drift.Using
@use "variables";depends on Sass load paths. To be resilient across tooling and file moves, prefer an explicit alias or relative path.-@use "variables"; +@use "@/scss/variables" as variables;
174-176: Co-locate adjacent hard-coded colors into variables for consistency.Near this change,
#002842is still hard-coded (e.g., border color). Consider promoting it tovariables.$...for theme consistency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (45)
.env(1 hunks).eslintignore(0 hunks).eslintrc(0 hunks)README.md(1 hunks)index.html(1 hunks)package.json(2 hunks)public/index.html(2 hunks)src/App.test.js(0 hunks)src/components/Auth/Auth.jsx(2 hunks)src/components/Auth/context.jsx(1 hunks)src/components/Comments/Comment.jsx(1 hunks)src/components/Posts/ListItem.jsx(1 hunks)src/components/Posts/Media.jsx(1 hunks)src/pages/Auth/Activation.jsx(1 hunks)src/pages/Auth/Login.jsx(2 hunks)src/pages/Auth/ResetPassword.jsx(1 hunks)src/pages/Auth/Signup.jsx(1 hunks)src/pages/Home/Sidebar.jsx(1 hunks)src/pages/Map/Quarantine.jsx(2 hunks)src/pages/Messages/Create/Form.jsx(1 hunks)src/pages/Messages/Create/SendTo.jsx(1 hunks)src/pages/Messages/List.jsx(1 hunks)src/pages/Messages/View.jsx(1 hunks)src/pages/Posts/Create/Create.jsx(1 hunks)src/pages/Posts/Create/Upload/FileUploader.jsx(2 hunks)src/pages/Posts/Create/Upload/Upload.jsx(1 hunks)src/pages/Posts/List/Group.jsx(1 hunks)src/pages/Posts/List/List.jsx(1 hunks)src/pages/Posts/List/PostList.jsx(1 hunks)src/pages/Posts/Post/Post.jsx(1 hunks)src/pages/Posts/Post/components/PrivateMessageForm.jsx(1 hunks)src/pages/User/Bookmarks.jsx(1 hunks)src/pages/User/Edit.jsx(1 hunks)src/pages/User/EmailSettings/EmailSettings.jsx(1 hunks)src/pages/User/PostsCommented.jsx(1 hunks)src/pages/User/Profile.jsx(1 hunks)src/scss/_buttons.scss(2 hunks)src/scss/_classes.scss(2 hunks)src/scss/_forms.scss(3 hunks)src/scss/_layout.scss(3 hunks)src/scss/_pages.scss(2 hunks)src/scss/_variables.scss(1 hunks)src/scss/index.scss(1 hunks)src/utils/apollo.js(2 hunks)vite.config.js(1 hunks)
💤 Files with no reviewable changes (3)
- src/App.test.js
- .eslintignore
- .eslintrc
🧰 Additional context used
🧬 Code graph analysis (2)
src/pages/Posts/Create/Upload/Upload.jsx (1)
src/pages/Posts/Create/Upload/FileUploader.jsx (1)
apiPath(10-10)
src/pages/Posts/Create/Upload/FileUploader.jsx (1)
src/pages/Posts/Create/Upload/Upload.jsx (1)
apiPath(7-7)
🪛 markdownlint-cli2 (0.17.2)
README.md
7-7: Bare URL used
(MD034, no-bare-urls)
🪛 dotenv-linter (3.3.0)
.env
[warning] 3-3: [UnorderedKey] The VITE_API_URL key should go before the VITE_ITEMS_PER_PAGE key
(UnorderedKey)
[warning] 5-5: [UnorderedKey] The VITE_FILE_URL key should go before the VITE_ITEMS_PER_PAGE key
(UnorderedKey)
[warning] 9-9: [UnorderedKey] The SKIP_PREFLIGHT_CHECK key should go before the VITE_API_URL key
(UnorderedKey)
[warning] 10-10: [UnorderedKey] The BROWSER key should go before the PORT key
(UnorderedKey)
[warning] 11-11: [UnorderedKey] The VITE_GOOGLE_MAPS_API_KEY key should go before the VITE_ITEMS_PER_PAGE key
(UnorderedKey)
🔇 Additional comments (27)
src/pages/Messages/Create/Form.jsx (1)
4-4: Alias import change is consistent with the Vite migration.src/pages/Posts/Post/components/PrivateMessageForm.jsx (1)
5-5: Alias import change looks good.src/pages/Messages/List.jsx (1)
4-4: Alias import change is correct and matches the new convention.src/pages/Messages/Create/SendTo.jsx (1)
4-4: Alias import change is correct.src/scss/_buttons.scss (1)
1-1: Sass module migration (color.adjust) looks correct.Also applies to: 73-73
src/components/Auth/Auth.jsx (1)
4-5: Alias import updates look good.src/pages/User/Edit.jsx (1)
5-7: Alias import updates look good.src/pages/Posts/Create/Upload/FileUploader.jsx (1)
10-10: Approve: VITE_UPLOAD_URL defined, preflight header set, and preview URL uses URL constructorindex.html (1)
1-55: Ensure there is no duplicate public/index.htmlVite uses the root index.html as the entry. Having a second index.html under public/ can collide during dev/production. Remove public/index.html if present.
src/scss/_classes.scss (1)
1-2: LGTM on @use migration and namespaced variable accessUsing variables.$green is correct and consistent with the module system.
Also applies to: 66-66
package.json (1)
16-18: No breaking changes for Font Awesome v7 icon imports
All imported icons (faTimes, faTrashAlt, faComment, faSearch, faBookmark, faBell, faImage, faMapSigns, faAngleRight, faAngleLeft, etc.) and their string references remain unchanged in v7.0.0—no renames or syntax updates required..env (1)
3-5: Verify local endpoints for uploads/filesBoth VITE_UPLOAD_URL and VITE_FILE_URL point to the Vite dev server (5173). Confirm these are correct targets for your backend/CDN in dev.
src/pages/Home/Sidebar.jsx (1)
3-5: LGTM on alias importsAlias usage matches vite.config.js. No functional changes.
src/components/Comments/Comment.jsx (2)
5-5: Alias import looks correct; double-check utils barrel exportsEnsure '@/utils' re-exports dateToString. If not, import from the actual file path (e.g., '@/utils/date').
60-62: No raw HTML support detected; ReactMarkdown safe by default
Search found no uses of rehypeRaw, allowDangerousHtml, or skipHtml={false}, so HTML remains disabled and XSS risk is mitigated.src/pages/User/PostsCommented.jsx (1)
3-4: Alias import switch is correct.No functional changes; matches the project-wide move to '@'. Ensure ESLint import resolver is configured to avoid false positives.
src/scss/index.scss (1)
1-10: Solid @use migration; double-check module namespacing.Since @use scopes variables, ensure all partials reference variables as
variables.$...(no lingering$...globals). Compile once withsass --load-path src/scss(or Vite build) to catch any misses.src/scss/_pages.scss (1)
1-1: Namespaced variable reference looks good.
@use "variables";+variables.$greenis the right pattern.Also applies to: 16-16
src/pages/Posts/List/List.jsx (1)
3-4: Alias imports LGTM.Consistent with the rest of the migration; no behavior changes.
src/pages/Auth/ResetPassword.jsx (1)
5-9: Auth-related alias imports look correct.Nothing else changed; works with the new '@/components' and '@/graphql' layout.
src/components/Posts/ListItem.jsx (1)
5-5: LGTM on alias import.src/pages/Posts/Create/Create.jsx (1)
4-4: LGTM on alias import.src/pages/User/Bookmarks.jsx (1)
3-4: LGTM on alias imports.No behavioral changes; matches the project-wide alias migration.
src/pages/User/Profile.jsx (1)
5-8: LGTM on alias imports.src/pages/Messages/View.jsx (1)
5-7: LGTM on alias imports.Consistent with the Vite alias rollout.
src/scss/_forms.scss (1)
1-1: All un-namespaced$lightPrimaryBgand$lightPrimaryBorderreferences removed.
No matches found across.scssfiles (excluding_variables.scssand_forms.scss).src/scss/_layout.scss (1)
174-174: Good Sass Modules migration.Consistent
variables.$lightPrimaryBgusage reads well and avoids global Sass scope leaks.Also applies to: 197-197
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
package.json (1)
6-12: ESLint scripts remain but ESLint deps/config were removedThis will fail in CI. Please restore ESLint deps/config or stub the scripts. (Same note as the prior review.)
Quick stub option:
- "lint": "eslint .", - "lint:fix": "eslint . --fix", + "lint": "echo 'ESLint disabled for now'", + "lint:fix": "echo 'ESLint disabled for now'",src/pages/Auth/ResetPassword.jsx (1)
4-8: Alias imports look fine; verify alias mapping across dev and tests.Ensure
@ → srcis configured in Vite and mirrored in the test runner to avoid resolution failures.Run:
#!/bin/bash # Vite alias fd -a 'vite.config.*' | xargs -I{} rg -nP 'resolve\s*:\s*\{\s*alias\s*:\s*\{[^}]*@' -n {} # Vitest inline alias (vite.config) or standalone vitest.config fd -a 'vite.config.*' -a 'vitest.config.*' | xargs -I{} rg -nP '(test\s*:\s*\{\s*alias|resolve\s*:\s*\{\s*alias).*@"' -n {} # Jest moduleNameMapper (if present) fd -a 'jest*.{js,ts,cjs,mjs,json}' 2>/dev/null | xargs -I{} rg -nP "'^@/(.*)'" {}src/pages/Auth/Login.jsx (1)
4-7: Alias imports OK; config/test alias mapping already flagged earlier.No changes needed here if alias is configured as per prior comment.
🧹 Nitpick comments (3)
src/pages/Auth/ResetPassword.jsx (2)
53-61: Fix label/input association and use numeric minLength; add proper autocomplete.Improves a11y and UX on password managers.
- <label htmlFor="username">New password</label> + <label htmlFor="password">New password</label> <input - className="input" + id="password" + className="input" type="password" value={password} - minLength="6" + minLength={6} + autoComplete="new-password" onChange={evt => setPassword(evt.target.value)} required />
69-70: Button loading text mismatch (“Logging in...” on reset form).Change to context-appropriate text.
- <Button type="submit" loading={mutation.loading} loadingText="Logging in...">Reset password</Button> + <Button type="submit" loading={mutation.loading} loadingText="Resetting...">Reset password</Button>src/pages/Auth/Login.jsx (1)
49-56: Add id/autoComplete to inputs to match labels and improve UX.Small a11y/UX win.
- <label htmlFor="username">Username or email</label> - <input className="input" value={username} onChange={evt => setUsername(evt.target.value)} required /> + <label htmlFor="username">Username or email</label> + <input id="username" className="input" autoComplete="username" + value={username} onChange={evt => setUsername(evt.target.value)} required /> @@ - <label htmlFor="password">Password</label> - <input className="input" type="password" value={password} onChange={evt => setPassword(evt.target.value)} required /> + <label htmlFor="password">Password</label> + <input id="password" className="input" type="password" autoComplete="current-password" + value={password} onChange={evt => setPassword(evt.target.value)} required />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (20)
package.json(2 hunks)src/components/Posts/Media.jsx(1 hunks)src/pages/Auth/Activation.jsx(1 hunks)src/pages/Auth/Login.jsx(2 hunks)src/pages/Auth/ResetPassword.jsx(1 hunks)src/pages/Auth/Signup.jsx(1 hunks)src/pages/Blog/List.jsx(1 hunks)src/pages/Blog/Single.jsx(1 hunks)src/pages/Messages/Create/Form.jsx(1 hunks)src/pages/Messages/Create/SendTo.jsx(1 hunks)src/pages/Messages/View.jsx(1 hunks)src/pages/Posts/Create/Create.jsx(1 hunks)src/pages/Posts/Create/Upload/FileUploader.jsx(2 hunks)src/pages/Posts/List/Group.jsx(1 hunks)src/pages/Posts/List/List.jsx(1 hunks)src/pages/Posts/List/PostList.jsx(1 hunks)src/pages/Posts/Post/Post.jsx(1 hunks)src/pages/User/Edit.jsx(1 hunks)src/pages/User/Profile.jsx(1 hunks)src/utils/apollo.js(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (15)
- src/pages/Posts/List/PostList.jsx
- src/pages/Posts/Create/Create.jsx
- src/pages/Posts/List/List.jsx
- src/components/Posts/Media.jsx
- src/pages/Messages/Create/SendTo.jsx
- src/pages/Posts/Post/Post.jsx
- src/pages/Auth/Signup.jsx
- src/pages/User/Profile.jsx
- src/utils/apollo.js
- src/pages/Messages/Create/Form.jsx
- src/pages/Posts/Create/Upload/FileUploader.jsx
- src/pages/Messages/View.jsx
- src/pages/User/Edit.jsx
- src/pages/Posts/List/Group.jsx
- src/pages/Auth/Activation.jsx
🧰 Additional context used
🧬 Code graph analysis (2)
src/pages/Blog/List.jsx (1)
src/components/partials/Loading.js (1)
Loading(13-21)
src/pages/Auth/Login.jsx (1)
src/pages/Auth/Login.js (1)
LoginForm(21-66)
🔇 Additional comments (5)
src/pages/Blog/List.jsx (1)
2-5: Alias import switch looks goodThe move to '@/...' is consistent and should work with Vite’s aliasing.
src/pages/Blog/Single.jsx (1)
6-7: Alias imports updated correctlyMatches the new Vite alias convention.
package.json (3)
6-12: Confirm how “start” is used in deployments“start”: "vite" launches the dev server. If any environment uses npm start for production, switch to preview and add a dedicated script.
Suggested change:
"scripts": { - "dev": "vite", - "start": "vite", + "dev": "vite", + "start": "vite preview", + "preview": "vite preview", "lint": "eslint .", "lint:fix": "eslint . --fix", "build": "vite build", "test": "vitest", "eject": "echo 'Eject is not supported with Vite'" },
16-20: Font Awesome v7 and Sentry v10 upgrades — check for breakagesBoth can have breaking changes (icons naming/imports; Sentry init/options). Run through key icon renders and error boundaries.
If issues arise, consider pinning to known-good majors or applying the vendor migration steps.
38-41: Verify alias configuration and Node version
- No
aliasblock detected invite.config.js; confirm and add path aliases if your imports rely on@/....package.jsonlacks anengines.nodeentry; specify your Node target (e.g."node": ">=18") so you can safely decide whether to upgrade Vite, @vitejs/plugin-react, and Vitest to their latest major versions.
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Messages/Create/SelectUsers.jsx (1)
39-40: Fix label/input association (a11y).Label htmlFor points to "group" but the input id is "users". Screen readers won’t associate them.
Apply:
- <label htmlFor="group">Recipients</label> + <label htmlFor="users">Recipients</label>Also applies to: 56-59
♻️ Duplicate comments (1)
README.md (1)
7-7: Confirm the dev server port matches vite.config.If vite.config.* isn’t set to 4074, either change the link or the config.
#!/bin/bash # Verify Vite port is 4074 and README link is consistent set -euo pipefail rg -nPU --glob 'vite.config.*' '(?s)\bserver\s*:\s*\{[^}]*\bport\s*:\s*4074\b' || echo "Vite port not set to 4074" rg -n 'http://localhost:4074' README.md || echo "README link not 4074"
🧹 Nitpick comments (6)
src/pages/Posts/Create/Form.jsx (1)
73-75: Avoid blocking alert; prefer non-blocking UX (toast) or at least console.error.Removes the need for no-alert suppressions and improves UX.
- window.alert(`Error: ${err.toString()}`) + // TODO: replace with app-level toast/flash message + console.error(err)src/components/Posts/Media.jsx (2)
68-87: Optional: include closeImgGallery in deps to avoid stale closure.Harmless in practice here, but keeps hooks exhaustive.
- }, [img, nextImage, previousImage]) + }, [img, nextImage, previousImage, closeImgGallery])
29-49: Optional: cycle only through images and handle “no images” case.Pre-filter images to avoid potential infinite recursion when all items are non-images.
Example approach (outside selected lines):
const images = useMemo(() => postMedia.filter(m => m.type === 'image'), [postMedia]) if (!images.length) return null // then use images and their indices in next/prev helperseslint.config.mjs (2)
8-20: Scope React rules to React files to avoid linting configs/scripts.Prevents accidental React rule application to non-React files.
- { + { + files: ["**/*.{js,jsx}"], ...pluginReact.configs.flat.recommended,
22-29: Ignore Vite build output directory.Add dist/* alongside build/*.
"build/*", + "dist/*",package.json (1)
37-45: Sentry: remove unused CLI or adopt the Vite plugin.@sentry/cli remains but the sourcemaps/upload flow is gone. Either drop the dep or wire up the Vite plugin and a build step.
Would you like a follow-up PR snippet to integrate @sentry/vite-plugin and an upload script?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (21)
README.md(1 hunks)eslint.config.mjs(1 hunks)jsconfig.json(1 hunks)package.json(2 hunks)src/components/Auth/Auth.jsx(2 hunks)src/components/Auth/context.jsx(1 hunks)src/components/Comments/Form.jsx(1 hunks)src/components/Posts/Media.jsx(3 hunks)src/components/partials/Button.jsx(0 hunks)src/graphql/fragments.js(0 hunks)src/graphql/post-queries.js(0 hunks)src/pages/Auth/Login.jsx(2 hunks)src/pages/Map/Quarantine.jsx(2 hunks)src/pages/Messages/Create/SelectUsers.jsx(1 hunks)src/pages/Posts/Create/Form.jsx(1 hunks)src/pages/Posts/Create/GroupSelect.jsx(1 hunks)src/pages/Posts/Create/Upload/Errors.jsx(0 hunks)src/pages/Posts/Create/Upload/FileUploader.jsx(4 hunks)src/pages/Posts/Post/DeletePost.jsx(1 hunks)src/utils/apollo.js(3 hunks)vite.config.js(1 hunks)
💤 Files with no reviewable changes (4)
- src/components/partials/Button.jsx
- src/pages/Posts/Create/Upload/Errors.jsx
- src/graphql/post-queries.js
- src/graphql/fragments.js
✅ Files skipped from review due to trivial changes (1)
- src/components/Comments/Form.jsx
🚧 Files skipped from review as they are similar to previous changes (7)
- src/components/Auth/context.jsx
- src/components/Auth/Auth.jsx
- vite.config.js
- src/pages/Map/Quarantine.jsx
- src/utils/apollo.js
- src/pages/Posts/Create/Upload/FileUploader.jsx
- src/pages/Auth/Login.jsx
🧰 Additional context used
🧬 Code graph analysis (5)
src/pages/Posts/Create/GroupSelect.jsx (4)
src/components/Posts/ListItem.js (1)
PostListItem(8-39)src/pages/Posts/List/PostList.js (1)
post(54-54)src/components/Groups.js (1)
group(22-26)src/pages/Blog/List.jsx (1)
blog(28-44)
src/pages/Posts/Create/Form.jsx (2)
src/pages/Posts/Create/Form.js (5)
err(72-75)Form(33-123)submitPost(65-76)prevState(69-69)onChange(78-80)src/pages/Posts/Create/Create.js (1)
CreatePost(32-55)
src/pages/Posts/Post/DeletePost.jsx (1)
src/pages/Posts/Create/Form.js (1)
err(72-75)
src/pages/Messages/Create/SelectUsers.jsx (1)
src/pages/Posts/Create/GroupSelect.js (1)
item(75-91)
src/components/Posts/Media.jsx (1)
src/components/Posts/Media.js (1)
PostMedia(25-126)
🔇 Additional comments (7)
src/pages/Posts/Create/GroupSelect.jsx (1)
85-89: Correct React key placement on. Moving the key onto the element fixes missing-key warnings and ensures stable reconciliation.
src/pages/Messages/Create/SelectUsers.jsx (2)
72-75: Correct React key placement on. Good move; this is the right place for keys with Downshift lists.
69-76: No remaining getItemProps key usages
Search acrosssrc/**/*.jsandsrc/**/*.jsxreturned no instances ofgetItemProps({ key: … }).README.md (1)
4-7: Dev quickstart reads clean.The simplified steps and explicit link are good.
src/components/Posts/Media.jsx (2)
7-8: Vite env migration looks correct.import.meta.env with VITE_* keys is the right convention.
9-10: No changes needed:<div id="portals">exists in index.html
Verified that the portal container is present (index.html, line 33), sodocument.getElementById('portals')will not be null.package.json (1)
6-12: Scripts migration to Vite looks good.dev/start/build/test/eject align with Vite/Vitest.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/Posts/Media.jsx (1)
72-80: Arrow key navigation is reversed.Left should go to previous; Right to next.
Apply:
- case 'Left': // IE/Edge specific value - case 'ArrowLeft': - return nextImage(evt) - case 'Right': // IE/Edge specific value - case 'ArrowRight': - return previousImage(evt) + case 'Left': // IE/Edge specific value + case 'ArrowLeft': + return previousImage(evt) + case 'Right': // IE/Edge specific value + case 'ArrowRight': + return nextImage(evt)
♻️ Duplicate comments (1)
src/components/Posts/Media.jsx (1)
90-109: Fix for empty JSX placeholder is correct.The invalid
{ }was removed; portal JSX now parses.
🧹 Nitpick comments (5)
src/components/Auth/Auth.jsx (1)
20-22: Split loading and error states for clearer UX.Avoid showing a spinner on error.
- if (loading || error) return <Loading error={error} /> + if (loading) return <Loading /> + if (error) return <Loading error={error} />src/components/Posts/Media.jsx (2)
90-109: Guard against missing portal root.If #portals is absent, createPortal will throw. Fallback to document.body.
- ), portalDom, + ), portalDom || document.body,
68-87: Effect deps: include closeImgGallery to avoid stale closure.It’s referenced inside keyPress; add to deps (or wrap it in useCallback).
- }, [img, nextImage, previousImage]) + }, [img, nextImage, previousImage, closeImgGallery])src/pages/Posts/Create/Upload/FileUploader.jsx (2)
62-67: Surface delete errors to users, not just console.Also set UI error so failures are visible.
- .catch(err => console.error('delete err', err)) + .catch(err => { + console.error('delete err', err) + setError({ code: 'DELETE_FAILED', message: 'File delete failed.' }) + })
95-97: Consistent upload error handling.Mirror delete error UX and show a message.
- console.error('ERROR', err) + console.error('ERROR', err) + setError({ code: 'UPLOAD_FAILED', message: 'File upload failed.' })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
eslint.config.mjs(1 hunks)jsconfig.json(1 hunks)src/components/Auth/Auth.jsx(1 hunks)src/components/Auth/context.jsx(1 hunks)src/components/Posts/Media.jsx(3 hunks)src/pages/Map/Quarantine.jsx(6 hunks)src/pages/Posts/Create/Upload/FileUploader.jsx(4 hunks)src/pages/Posts/Post/DeletePost.jsx(1 hunks)src/utils/apollo.js(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- src/components/Auth/context.jsx
- src/pages/Map/Quarantine.jsx
- src/utils/apollo.js
- jsconfig.json
- src/pages/Posts/Post/DeletePost.jsx
- eslint.config.mjs
🧰 Additional context used
🧬 Code graph analysis (1)
src/pages/Posts/Create/Upload/FileUploader.jsx (2)
src/pages/Posts/Create/Upload/Upload.jsx (1)
apiPath(7-7)src/pages/Posts/Create/Upload/Upload.js (2)
Upload(18-29)f(25-25)
🔇 Additional comments (5)
src/components/Auth/Auth.jsx (2)
9-16: No action needed—fragment name and export alignment confirmed.
4-5: Confirm alias mapping in test runner and ESLint configs
Vite alias in vite.config.js ('@' → 'src') and jsconfig.json paths ("@/*": ["*"]) are correctly set. No Vitest/Jest or ESLint alias settings were detected under the expected config filenames—ensure your test runner (e.g. in package.json or vitest.config.js/jest.config.js) and ESLint (.eslintrc.*or eslint.config.*) include the same"@/*"→"src/*"mapping.src/components/Posts/Media.jsx (1)
7-8: Verify env variables in environment-specific .env files
Confirm VITE_API_URL and VITE_FILE_URL are defined in all environment files (.env.development, .env.production, .env.local, .env.production.local) to avoid undefined URLs at runtime.Run:
#!/bin/bash # List all .env* files and check for VITE_API_URL & VITE_FILE_URL for file in .env*; do echo "Checking $file:" grep -nP "VITE_(API|FILE)_URL" "$file" || echo " ⚠️ Missing in $file" donesrc/pages/Posts/Create/Upload/FileUploader.jsx (2)
87-90: Preflight header requires CORS allow-list on server.Confirm your GraphQL server allows the apollo-require-preflight header (Access-Control-Allow-Headers), or uploads will fail.
10-10: VITE_UPLOAD_URL defined; approving code changes..env contains
VITE_UPLOAD_URL=http://localhost:5173, so the variable is set for preview builds.
Summary by CodeRabbit
New Features
Documentation
Refactor
Chores