Refactor & migration (Vite, MUI v5, Jest, Babel, etc.)#35
Merged
Conversation
…ponent - Updated package.json to use react-swipeable instead of react-swipeable-views. - Refactored Gallery component to utilize the new SwipeableView for image sliding. - Enhanced Status component to handle fetch errors more gracefully with AbortController. - Created SwipeableView component to manage swipe functionality and transitions. - Updated Home component to use useEffect for delayed rendering logic. - Refactored sections to use the new SwipeableView component for tab transitions. - Updated snapshots to reflect changes in component structure and styles.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR performs a broad front-end migration/refactor, moving the app from CRA-era tooling to a Vite + React 18 + MUI v5 stack, while updating build/test setup and refactoring multiple UI components/sections to match the new ecosystem.
Changes:
- Introduces Vite build configuration (including bundle analysis and build-date injection) and updates project scripts/output paths (dist).
- Migrates Material-UI v4 usage to MUI v5 across pages/components/sections and refreshes theming.
- Updates Jest tests/snapshots to be more stable under MUI v5/Emotion output and refactors some UI behaviors (lazy loading, swipe views, analytics).
Reviewed changes
Copilot reviewed 60 out of 75 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
vite.config.mjs |
Adds Vite config, build-date define, analyzer mode, and manual chunking. |
src/utils.jsx |
Adds shared utility helpers and generators. |
src/Theme.jsx |
Replaces legacy theme with MUI v5 createTheme and component overrides. |
src/Theme.js |
Removes legacy Material-UI v4 theme. |
src/test/Utilities.test.jsx |
Adds Jest tests for new utilities. |
src/test/Components.test.jsx |
Migrates/expands component tests and stabilizes snapshots. |
src/test/Components.test.js |
Removes legacy component test file. |
src/test/__snapshots__/Components.test.jsx.snap |
Adds new snapshot baseline for updated tests. |
src/test/__snapshots__/Components.test.js.snap |
Removes legacy snapshot baseline. |
src/sitemap-builder.js |
Updates sitemap builder to read index.jsx routes. |
src/setupTests.js |
Removes CRA-era Jest setup file. |
src/sections/Webserver.jsx |
Migrates Grid import to MUI v5. |
src/sections/WayneHacks2.jsx |
Migrates Grid import to MUI v5. |
src/sections/WayneHacks1.jsx |
Migrates Grid import to MUI v5. |
src/sections/WanyeHacksWebsite.jsx |
Migrates MUI imports; simplifies Markdown usage. |
src/sections/University.jsx |
Adds new Education section content and components. |
src/sections/Template.jsx |
Adds a template for new sections. |
src/sections/Spartahack8.jsx |
Migrates Grid import to MUI v5. |
src/sections/School.jsx |
Migrates MUI imports to v5 explicit imports. |
src/sections/SCD.jsx |
Migrates Grid import to MUI v5. |
src/sections/PFG.jsx |
Migrates MUI imports to v5 explicit imports. |
src/sections/MarketPulse.jsx |
Migrates Grid import to MUI v5. |
src/sections/Jeva.jsx |
Migrates MUI imports and adds image lazy/async hints. |
src/sections/index.jsx |
Replaces swipeable views impl and refactors badge rendering. |
src/sections/Hackathon2.jsx |
Migrates MUI imports to v5 explicit imports. |
src/sections/Hackathon.jsx |
Migrates MUI imports to v5 explicit imports. |
src/sections/GDSC.jsx |
Migrates Grid import to MUI v5. |
src/sections/Garage.jsx |
Adds new “Garage” section using Status/Gallery. |
src/sections/FiveM.jsx |
Migrates MUI imports and adds image lazy/async hints. |
src/sections/Doxim.jsx |
Migrates MUI imports to v5 explicit imports. |
src/reportWebVitals.js |
Updates web-vitals integration for newer API surface. |
src/pages/Portfolio.jsx |
Migrates Grid import to MUI v5. |
src/pages/index.jsx |
Adds lazy-loaded route declarations for pages. |
src/pages/Home.jsx |
Migrates MUI imports; fixes timeout usage with useEffect. |
src/pages/Experience.jsx |
Migrates MUI imports and minor JSX formatting. |
src/pages/Education.jsx |
Migrates MUI imports. |
src/index.jsx |
Migrates to React 18 createRoot, MUI v5 providers, Vite env usage, and vitals/gtag logic. |
src/contexts/viewport.jsx |
Adds debounced resize handling and updates effect deps. |
src/contexts/reducer.jsx |
Introduces a reducer + initial UI state for context. |
src/contexts/index.jsx |
Introduces UserContext + provider wiring around reducer. |
src/components/YouTubeEmbed.jsx |
Adds iframe loading and stricter referrer policy. |
src/components/Timeline.jsx |
Replaces timeline UI with MUI v5 Stepper-based component. |
src/components/Tags.jsx |
Migrates to MUI v5 and updates icon usage. |
src/components/SwipeableView.jsx |
Adds custom swipe/autoplay wrapper using react-swipeable. |
src/components/Status.jsx |
Migrates to MUI v5, improves pattern handling, and adds abortable fetch cleanup. |
src/components/SocialMedia.jsx |
Migrates to MUI v5 and switches analytics calls to gtag when available. |
src/components/Section.jsx |
Migrates to MUI v5 and updates expand icon implementation. |
src/components/Scroll.jsx |
Adds a simple scroll container component. |
src/components/Objectives.jsx |
Migrates to MUI v5; adjusts styling. |
src/components/Nav.jsx |
Migrates to MUI v5, updates build date handling, and refines styling with sx. |
src/components/Modal.jsx |
Refactors imports to explicit MUI v5 paths. |
src/components/MediaCard.jsx |
Migrates to MUI v5, adds media aspect ratio and image lazy/async hints, and updates analytics calls. |
src/components/Markdown.jsx |
Migrates Typography import and adds richer heading/paragraph rendering + image lazy/async hints. |
src/components/MainDialog.jsx |
Migrates to MUI v5 imports/colors. |
src/components/Lecture.jsx |
Migrates MUI imports to v5 explicit imports. |
src/components/Hover.jsx |
Adds a hover-toggle component (currently marked broken). |
src/components/Generic.jsx |
Migrates MUI imports and memoizes component. |
src/components/Gallery.jsx |
Migrates to custom swipe view; adds image lazy/async hints and memoization. |
src/components/Footer.jsx |
Migrates to MUI v5 explicit imports. |
src/components/Delayed.jsx |
Adds a delayed-render helper component. |
src/components/DateRange.jsx |
Migrates Typography import to MUI v5. |
src/components/Contributions.jsx |
Migrates MUI imports and adds image lazy/async hints. |
src/components/BackdropProgress.jsx |
Migrates CircularProgress import to MUI v5. |
src/components/AlertDialog.jsx |
Migrates dialog imports/colors to MUI v5. |
src/App.jsx |
Introduces lazy-loaded layout components and switches analytics to gtag when available. |
README.md |
Updates TODO/FIXME lists for post-migration cleanup. |
public/service-worker.js |
Refactors Workbox caching strategies and routes. |
package.json |
Switches scripts to Vite, updates deps/devDeps, and adjusts Jest transform settings. |
index.html |
Migrates CRA placeholders to Vite entrypoint and static paths. |
babel.config.js |
Updates Babel presets for JSX automatic runtime. |
.gitignore |
Updates build output ignore from build to dist. |
.babelrc |
Removes legacy Babel config file. |
Comments suppressed due to low confidence (5)
src/App.jsx:26
import pages from './pages/index'is placed after executable statements (const Nav = React.lazy(...), etc.). Staticimportstatements must be at the top-level before other statements; this will cause a syntax error during build/test transpilation.
src/sections/FiveM.jsx:92- This
<img>is rendered withoutsrc/alt(line 91), so it will request the current document URL as an image in some browsers and fails accessibility. It looks like it was meant to be the Top.gg status widget that existed previously.
src/sections/FiveM.jsx:111 - This
<img>includes duplicatedsrcandaltprops (both appear twice). JSX will take the last occurrence, but this is easy to miss and should be cleaned up.
src/contexts/viewport.jsx:12 - The debounced resize handler can still have a pending
setTimeoutwhen the provider unmounts. That timeout can fire after unmount and callsetWidth/setHeight, causing React warnings about state updates on unmounted components.
src/sections/index.jsx:39 Tooltipdoesn't support atargetprop; it will be forwarded to the underlying DOM element and end up as an invalid attribute (and it won't make the link open in a new tab). If you want new-tab behavior, settarget/relon theLinkinstead.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #35 +/- ##
==========================================
+ Coverage 68.58% 71.63% +3.05%
==========================================
Files 16 18 +2
Lines 226 342 +116
Branches 65 104 +39
==========================================
+ Hits 155 245 +90
- Misses 67 94 +27
+ Partials 4 3 -1 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
comprehensive migration and refactoring pass across the entire codebase:
This includes jest snapshot and test(s) migrations, deprecated theming, babel cfg update, and future todo(s) for actual content updates (you know...the thing i need to actually be doing).
This massive refactor needed to be done sooner or later, and i figured I needed to get more comfortable in burning tokens so why not start here :)