suncoast-devs · gstark · Jul 21, 2021 · Jul 21, 2021 · Jul 22, 2021
diff --git a/.env.development b/.env.development
@@ -1,3 +1,3 @@
-REACT_APP_PYLON_URL=http://localhost:3000
-REACT_APP_INVITATION_REDEEM_URL=http://localhost:3000/redeem?callback=http://localhost:3001/callback
-REACT_APP_LOGIN_URL=//localhost:3000/login?callback=http://localhost:3001/callback
+VITE_PYLON_URL=http://localhost:3000
+VITE_INVITATION_REDEEM_URL=http://localhost:3000/redeem?callback=http://localhost:3001/callback
+VITE_LOGIN_URL=//localhost:3000/login?callback=http://localhost:3001/callback
diff --git a/.env.production b/.env.production
@@ -1,3 +1,3 @@
-REACT_APP_PYLON_URL=https://pylon.suncoast.io
-REACT_APP_INVITATION_REDEEM_URL=https://pylon.suncoast.io/redeem?callback=https://nexus.suncoast.io/callback
-REACT_APP_LOGIN_URL=https://pylon.suncoast.io/login?callback=https://nexus.suncoast.io/callback
+VITE_PYLON_URL=https://pylon.suncoast.io
+VITE_INVITATION_REDEEM_URL=https://pylon.suncoast.io/redeem?callback=https://nexus.suncoast.io/callback
+VITE_LOGIN_URL=https://pylon.suncoast.io/login?callback=https://nexus.suncoast.io/callback
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 /node_modules
 /build
+/dist
 yarn-error.log
-.eslintcache
+.eslintcache
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>Nexus</title>
+    <link
+      rel="stylesheet"
+      href="https://pro.fontawesome.com/releases/v5.5.0/css/all.css"
+      integrity="sha384-j8y0ITrvFafF4EkV1mPW0BKm6dp3c+J9Fky22Man50Ofxo2wNe5pT1oZejDH9/Dt"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      window.global = window
+    </script>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "private": true,
   "dependencies": {
-    "@craco/craco": "^5.1.0",
-    "@github-docs/render-content": "^2.3.0",
     "@sentry/browser": "^5.2.1",
+    "@vitejs/plugin-react-refresh": "^1.3.5",
     "auth0-js": "^9.8.0",
     "bulma": "^0.9.0",
     "bulma-extensions": "^6.2.5",
     "classnames": "^2.2.6",
+    "github-markdown-render": "^2.1.0",
     "html2canvas": "^1.0.0-rc.1",
     "isomorphic-fetch": "^2.2.1",
     "moment": "^2.24.0",
@@ -17,22 +17,20 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "^4.0.1",
     "react-select": "^2.4.3",
     "sass": "^1.32.0",
     "spraypaint": "^0.10.0",
-    "video-react": "^0.14.1"
+    "video-react": "^0.14.1",
+    "vite": "^2.4.3"
   },
   "devDependencies": {
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "prettier": "^2.2.1"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "craco eject"
+    "start": "vite",
+    "build": "vite build --outDir build"
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/index.html b/public/index.html
diff --git a/src/Auth.js b/src/Auth.js
@@ -2,7 +2,7 @@ class Auth {
   userProfile
 
   login = () => {
-    window.location = process.env.REACT_APP_LOGIN_URL
+    window.location = import.meta.env.VITE_LOGIN_URL
   }
 
   get token() {

diff --git a/src/components/App.js → src/components/App.jsx b/src/components/App.js → src/components/App.jsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react'
 import { Router } from 'react-router-dom'
 
-import auth from '@/Auth'
-import history from '@/history'
-import { Layout } from '@/components/Layout'
-import useProfile from '@/hooks/useProfile'
-import { ErrorsContext } from '@/components/Errors'
+import auth from '/src/Auth'
+import history from '/src/history'
+import { Layout } from '/src/components/Layout'
+import useProfile from '/src//hooks/useProfile'
+import { ErrorsContext } from '/src/components/Errors'
 
 export function App() {
   const { profile, forceUpdateProfile } = useProfile()

diff --git a/src/components/AuthenticatedNavBar.js → src/components/AuthenticatedNavBar.jsx b/src/components/AuthenticatedNavBar.js → src/components/AuthenticatedNavBar.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Link, NavLink } from 'react-router-dom'
-import icon from '@/images/icon.svg'
+import icon from '/src//images/icon.svg'
 import cx from 'classnames'
 import { PersonImage } from './person/PersonImage'
 

diff --git a/src/components/Callback.js → src/components/Callback.jsx b/src/components/Callback.js → src/components/Callback.jsx
diff --git a/src/components/ErrorBoundary.js → src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.js → src/components/ErrorBoundary.jsx
@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/browser'
+import * as Sentry from '/src/sentry/browser'
 
 export class ErrorBoundary extends Component {
   constructor(props) {

diff --git a/src/components/Layout.js → src/components/Layout.jsx b/src/components/Layout.js → src/components/Layout.jsx
diff --git a/src/components/Routes.js → src/components/Routes.jsx b/src/components/Routes.js → src/components/Routes.jsx
@@ -12,17 +12,17 @@ import { CohortsPage } from '../pages/cohorts/CohortsPage'
 import { EditCohortPage } from '../pages/cohorts/EditCohortPage'
 import { EditHomeworksPage } from '../pages/homeworks/EditHomeworksPage'
 import { EditProfilePage } from '../pages/profile/EditProfile'
-import { GradebookPage } from '@/pages/gradebook/GradebookPage'
+import { GradebookPage } from '/src//pages/gradebook/GradebookPage'
 import { HomePage } from '../pages/home/HomePage'
 import { NewCohortPage } from '../pages/cohorts/NewCohortPage'
 import { PeoplePage } from '../pages/people/PeoplePage'
 import { ProfileLoader } from './utils/ProfileLoader'
-import { StudentGradebookPage } from '@/pages/gradebook/StudentGradebookPage'
+import { StudentGradebookPage } from '/src//pages/gradebook/StudentGradebookPage'
 import { StudentAssignmentPage } from '../pages/assignments/StudentAssignmentPage'
-import { AdminShowGradeQueuesPage } from '@/pages/gradebook/AdminShowGradeQueuesPage'
-import { LectureVideosPage } from '@/pages/lecturevideos/LectureVideosPage'
-import { LectureVideoPage } from '@/pages/lecturevideos/LectureVideoPage'
-import { ShowHomeworkPage } from '@/pages/homeworks/ShowHomeworkPage'
+import { AdminShowGradeQueuesPage } from '/src//pages/gradebook/AdminShowGradeQueuesPage'
+import { LectureVideosPage } from '/src//pages/lecturevideos/LectureVideosPage'
+import { LectureVideoPage } from '/src//pages/lecturevideos/LectureVideoPage'
+import { ShowHomeworkPage } from '/src//pages/homeworks/ShowHomeworkPage'
 import { StudentAttendancePage } from '../pages/attendance/StudentAttendancePage'
 import { EditAttendancePage } from '../pages/attendance/EditAttendancePage'
 import { AdminShowAttendancesPage } from '../pages/attendance/AdminShowAttendancesPage'
@@ -296,7 +296,9 @@ export function PublicRoutes({ profile, auth }) {
             // This might be a user re-attempting to use the same invite code.
             window.location = `/`
           } else {
-            window.location = `${process.env.REACT_APP_INVITATION_REDEEM_URL}&invitation_code=${props.match.params.invitation_code}`
+            window.location = `${import.meta.env.VITE_INVITATION_REDEEM_URL}&invitation_code=${
+              props.match.params.invitation_code
+            }`
           }
 
           return <Callback {...props} />

diff --git a/src/components/UnauthenticatedNavBar.js → src/components/UnauthenticatedNavBar.jsx b/src/components/UnauthenticatedNavBar.js → src/components/UnauthenticatedNavBar.jsx
@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
-import icon from '@/images/icon.svg'
+import icon from '/src//images/icon.svg'
 import cx from 'classnames'
-import history from '@/history'
+import history from '/src//history'
 
 export class UnauthenticatedNavBar extends Component {
   state = {

diff --git a/...ts/assignments/CreateAssignmentComment.js → ...s/assignments/CreateAssignmentComment.jsx b/...ts/assignments/CreateAssignmentComment.js → ...s/assignments/CreateAssignmentComment.jsx
diff --git a/...nts/assignments/CreateAssignmentTurnIn.js → ...ts/assignments/CreateAssignmentTurnIn.jsx b/...nts/assignments/CreateAssignmentTurnIn.js → ...ts/assignments/CreateAssignmentTurnIn.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { PersonImage } from '@/components/person/PersonImage'
+import { PersonImage } from '/src//components/person/PersonImage'
 import { GithubTurnIn } from './GithubTurnIn'
 import { GistTurnIn } from './GistTurnIn'
 import { URLTurnIn } from './URLTurnIn'

diff --git a/src/components/assignments/GistTurnIn.js → src/components/assignments/GistTurnIn.jsx b/src/components/assignments/GistTurnIn.js → src/components/assignments/GistTurnIn.jsx
@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react'
-import { LoadingIndicator } from '@/components/utils/LoadingIndicator'
-import auth from '@/Auth'
+import { LoadingIndicator } from '/src//components/utils/LoadingIndicator'
+import auth from '/src//Auth'
 
 export function GistTurnIn({ assignmentEventDetails, setAssignmentEventDetails }) {
   const [gists, setGists] = useState([])
 
   useEffect(() => {
     async function fetchGists() {
-      const response = await fetch(`${process.env.REACT_APP_PYLON_URL}/api/v1/gists`, {
+      const response = await fetch(`${import.meta.env.VITE_PYLON_URL}/api/v1/gists`, {
         headers: { Authorization: `Token token="${auth.token}"` },
       })
 

diff --git a/...ignments/GistTurnedInAssignmentDetails.js → ...gnments/GistTurnedInAssignmentDetails.jsx b/...ignments/GistTurnedInAssignmentDetails.js → ...gnments/GistTurnedInAssignmentDetails.jsx
diff --git a/src/components/assignments/GithubTurnIn.js → src/components/assignments/GithubTurnIn.jsx b/src/components/assignments/GithubTurnIn.js → src/components/assignments/GithubTurnIn.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { LoadingIndicator } from '@/components/utils/LoadingIndicator'
-import auth from '@/Auth'
+import { LoadingIndicator } from '/src//components/utils/LoadingIndicator'
+import auth from '/src//Auth'
 import moment from 'moment'
 
 export function GithubTurnIn({ assignmentEventDetails, setAssignmentEventDetails, setTurnInValid }) {
@@ -52,7 +52,7 @@ export function GithubTurnIn({ assignmentEventDetails, setAssignmentEventDetails
 
   useEffect(() => {
     async function fetchRepos() {
-      const response = await fetch(`${process.env.REACT_APP_PYLON_URL}/api/v1/repositories`, {
+      const response = await fetch(`${import.meta.env.VITE_PYLON_URL}/api/v1/repositories`, {
         headers: { Authorization: `Token token="${auth.token}"` },
       })
 

diff --git a/...nments/GithubTurnedInAssignmentDetails.js → ...ments/GithubTurnedInAssignmentDetails.jsx b/...nments/GithubTurnedInAssignmentDetails.js → ...ments/GithubTurnedInAssignmentDetails.jsx
diff --git a/...components/assignments/GradeAssignment.js → ...omponents/assignments/GradeAssignment.jsx b/...components/assignments/GradeAssignment.js → ...omponents/assignments/GradeAssignment.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { Assignment } from '@/components/models'
-import { LoadingButton } from '@/components/utils/LoadingButton'
+import { Assignment } from '/src//components/models'
+import { LoadingButton } from '/src//components/utils/LoadingButton'
 
 export function GradeAssignment({ assignment, createAssignmentEvent }) {
   const placeholder = 'https://bulma.io/images/placeholders/128x128.png'

diff --git a/...omponents/assignments/GradedAssignment.js → ...mponents/assignments/GradedAssignment.jsx b/...omponents/assignments/GradedAssignment.js → ...mponents/assignments/GradedAssignment.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Assignment } from '@/components/models'
+import { Assignment } from '/src//components/models'
 import { MarkDownDiv } from '../utils/MarkDownDiv'
 
 export function GradedAssignment({ assignmentEvent }) {

diff --git a/...ponents/assignments/ReopenedAssignment.js → ...onents/assignments/ReopenedAssignment.jsx b/...ponents/assignments/ReopenedAssignment.js → ...onents/assignments/ReopenedAssignment.jsx
diff --git a/...onents/assignments/ShowAssignmentEvent.js → ...nents/assignments/ShowAssignmentEvent.jsx b/...onents/assignments/ShowAssignmentEvent.js → ...nents/assignments/ShowAssignmentEvent.jsx
diff --git a/...ponents/assignments/TurnedInAssignment.js → ...onents/assignments/TurnedInAssignment.jsx b/...ponents/assignments/TurnedInAssignment.js → ...onents/assignments/TurnedInAssignment.jsx
diff --git a/src/components/assignments/URLTurnIn.js → src/components/assignments/URLTurnIn.jsx b/src/components/assignments/URLTurnIn.js → src/components/assignments/URLTurnIn.jsx
diff --git a/...signments/URLTurnedInAssignmentDetails.js → ...ignments/URLTurnedInAssignmentDetails.jsx b/...signments/URLTurnedInAssignmentDetails.js → ...ignments/URLTurnedInAssignmentDetails.jsx
diff --git a/src/components/attendance/AttendanceCell.js → src/components/attendance/AttendanceCell.jsx b/src/components/attendance/AttendanceCell.js → src/components/attendance/AttendanceCell.jsx
diff --git a/src/components/attendance/AttendanceModal.js → ...components/attendance/AttendanceModal.jsx b/src/components/attendance/AttendanceModal.js → ...components/attendance/AttendanceModal.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import statuses from './statuses'
-import { ModalForm } from '@/components/utils/ModalForm'
+import { ModalForm } from '/src//components/utils/ModalForm'
 import { StatusButtons } from './StatusButtons'
 
 export function AttendanceModal({ selectedAttendanceRecord, onClose }) {

diff --git a/src/components/attendance/StatusButton.js → src/components/attendance/StatusButton.jsx b/src/components/attendance/StatusButton.js → src/components/attendance/StatusButton.jsx
diff --git a/src/components/attendance/StatusButtons.js → src/components/attendance/StatusButtons.jsx b/src/components/attendance/StatusButtons.js → src/components/attendance/StatusButtons.jsx
diff --git a/src/components/attendance/statuses.js → src/components/attendance/statuses.jsx b/src/components/attendance/statuses.js → src/components/attendance/statuses.jsx
diff --git a/src/components/cohorts/CohortTable.js → src/components/cohorts/CohortTable.jsx b/src/components/cohorts/CohortTable.js → src/components/cohorts/CohortTable.jsx
diff --git a/src/components/cohorts/EditCohortCalendar.js → ...components/cohorts/EditCohortCalendar.jsx b/src/components/cohorts/EditCohortCalendar.js → ...components/cohorts/EditCohortCalendar.jsx
@@ -2,8 +2,8 @@ import React from 'react'
 import BigCalendar from 'react-big-calendar'
 import moment from 'moment'
 
-import { Cohort, CohortDate } from '@/components/models'
-import useModelData from '@/hooks/useModelData'
+import { Cohort, CohortDate } from '/src//components/models'
+import useModelData from '/src//hooks/useModelData'
 
 export function EditCohortCalendar({ cohort_id }) {
   const { loading, data: cohort, reload: reloadCohort } = useModelData(() =>

diff --git a/src/components/cohorts/EditCohortForm.js → src/components/cohorts/EditCohortForm.jsx b/src/components/cohorts/EditCohortForm.js → src/components/cohorts/EditCohortForm.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import Select from 'react-select'
 
-import { Program } from '@/components/models'
-import useModelData from '@/hooks/useModelData'
-import { InputField } from '@/components/utils/Fields'
+import { Program } from '/src//components/models'
+import useModelData from '/src//hooks/useModelData'
+import { InputField } from '/src//components/utils/Fields'
 
 function ProgramDropDown({ cohort }) {
   const { data: programs } = useModelData(() => Program.all(), [])

diff --git a/src/components/cohorts/EditEnrollment.js → src/components/cohorts/EditEnrollment.jsx b/src/components/cohorts/EditEnrollment.js → src/components/cohorts/EditEnrollment.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import cx from 'classnames'
 
-import { StudentEnrollment } from '@/components/models'
-import useModelData from '@/hooks/useModelData'
-import { DeleteButton } from '@/components//utils/Buttons'
-import { PersonDropDown } from '@/components/person/PersonDropDown'
-import { PersonComponent } from '@/components/person/PersonComponent'
-import { LoadingIndicator } from '@/components/utils/LoadingIndicator'
+import { StudentEnrollment } from '/src//components/models'
+import useModelData from '/src//hooks/useModelData'
+import { DeleteButton } from '/src//components//utils/Buttons'
+import { PersonDropDown } from '/src//components/person/PersonDropDown'
+import { PersonComponent } from '/src//components/person/PersonComponent'
+import { LoadingIndicator } from '/src//components/utils/LoadingIndicator'
 import { InvitationCode } from './InvitationCode'
 
 export function EditEnrollment({ cohort }) {

diff --git a/src/components/cohorts/InvitationCode.js → src/components/cohorts/InvitationCode.jsx b/src/components/cohorts/InvitationCode.js → src/components/cohorts/InvitationCode.jsx
diff --git a/src/components/gradebook/EnrollmentRows.js → src/components/gradebook/EnrollmentRows.jsx b/src/components/gradebook/EnrollmentRows.js → src/components/gradebook/EnrollmentRows.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import cx from 'classnames'
-import { PersonComponent } from '@/components/person/PersonComponent'
-import { InactivePerson } from '@/components/person/InactivePerson'
+import { PersonComponent } from '/src//components/person/PersonComponent'
+import { InactivePerson } from '/src//components/person/InactivePerson'
 import { HomeworkTableData } from './HomeworkTableData'
 
 function EnrollmentRow({ enrollment, assignmentLookup, homeworks, countOfHomeworksNeededForCompletion }) {

diff --git a/src/components/gradebook/GradeQueue.js → src/components/gradebook/GradeQueue.jsx b/src/components/gradebook/GradeQueue.js → src/components/gradebook/GradeQueue.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 
-import useModelData from '@/hooks/useModelData'
-import { PersonComponent } from '@/components/person/PersonComponent'
-import { LoadingIndicator } from '@/components/utils/LoadingIndicator'
-import { Cohort, Assignment } from '@/components/models'
+import useModelData from '/src//hooks/useModelData'
+import { PersonComponent } from '/src//components/person/PersonComponent'
+import { LoadingIndicator } from '/src//components/utils/LoadingIndicator'
+import { Cohort, Assignment } from '/src//components/models'
 
 export function GradeQueue({ cohort_id }) {
   const { loading, data: cohort, reload } = useModelData(() =>

diff --git a/...components/gradebook/HomeworkTableData.js → ...omponents/gradebook/HomeworkTableData.jsx b/...components/gradebook/HomeworkTableData.js → ...omponents/gradebook/HomeworkTableData.jsx
diff --git a/src/components/home/SlackInviteMessage.js → src/components/home/SlackInviteMessage.jsx b/src/components/home/SlackInviteMessage.js → src/components/home/SlackInviteMessage.jsx
diff --git a/src/components/homeworks/EditHomework.js → src/components/homeworks/EditHomework.jsx b/src/components/homeworks/EditHomework.js → src/components/homeworks/EditHomework.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import moment from 'moment'
 
-import { formToObject } from '@/utils/formToObject'
-import useModelData from '@/hooks/useModelData'
+import { formToObject } from '/src//utils/formToObject'
+import useModelData from '/src//hooks/useModelData'
 import HandbookAssignment from '../models/HandbookAssignment'
 
 export function EditHomework({ cohort, reloadCohort, homework, setHomework }) {

diff --git a/...nents/lecturevideos/LectureVideoPlayer.js → ...ents/lecturevideos/LectureVideoPlayer.jsx b/...nents/lecturevideos/LectureVideoPlayer.js → ...ents/lecturevideos/LectureVideoPlayer.jsx
diff --git a/src/components/lecturevideos/recordLectureVideoPlayback.js b/src/components/lecturevideos/recordLectureVideoPlayback.js
@@ -1,4 +1,4 @@
-import LectureVideoPlayback from '@/components/models/LectureVideoPlayback'
+import LectureVideoPlayback from '/src//components/models/LectureVideoPlayback'
 
 export function recordLectureVideoPlayback(lectureVideoId) {
   const lectureVideoPlayback = new LectureVideoPlayback({ lectureVideoId })

diff --git a/src/components/models/ApplicationRecord.js b/src/components/models/ApplicationRecord.js
@@ -1,8 +1,9 @@
 import { SpraypaintBase } from 'spraypaint'
 
+console.log(import.meta.env.VITE_PYLON_URL)
 const ApplicationRecord = SpraypaintBase.extend({
   static: {
-    baseUrl: process.env.REACT_APP_PYLON_URL,
+    baseUrl: import.meta.env.VITE_PYLON_URL,
     apiNamespace: '/api/v1',
   },
 })

diff --git a/src/components/person/InactivePerson.js → src/components/person/InactivePerson.jsx b/src/components/person/InactivePerson.js → src/components/person/InactivePerson.jsx
diff --git a/src/components/person/NewPersonModal.js → src/components/person/NewPersonModal.jsx b/src/components/person/NewPersonModal.js → src/components/person/NewPersonModal.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import cx from 'classnames'
 
-import { Person } from '@/components/models'
-import { InputField } from '@/components//utils/Fields'
-import { formToObject } from '@/utils/formToObject'
+import { Person } from '/src//components/models'
+import { InputField } from '/src//components//utils/Fields'
+import { formToObject } from '/src//utils/formToObject'
 
 export function NewPersonModal({ isActive, onSave, onClose }) {
   const person = new Person()

diff --git a/src/components/person/PersonComponent.js → src/components/person/PersonComponent.jsx b/src/components/person/PersonComponent.js → src/components/person/PersonComponent.jsx
diff --git a/src/components/person/PersonDropDown.js → src/components/person/PersonDropDown.jsx b/src/components/person/PersonDropDown.js → src/components/person/PersonDropDown.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import Select from 'react-select'
 
-import useModelData from '@/hooks/useModelData'
-import Person from '@/components//models/Person'
+import useModelData from '/src//hooks/useModelData'
+import Person from '/src//components//models/Person'
 
 export function PersonDropDown({ onSelect, placeholder, isMulti, isSearchable, excludedIDs = [] }) {
   // eslint-disable-next-line

diff --git a/src/components/person/PersonImage.js → src/components/person/PersonImage.jsx b/src/components/person/PersonImage.js → src/components/person/PersonImage.jsx
diff --git a/...ponents/progressreports/AssignmentCard.js → ...onents/progressreports/AssignmentCard.jsx b/...ponents/progressreports/AssignmentCard.js → ...onents/progressreports/AssignmentCard.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Assignment } from '@/components/models'
+import { Assignment } from '/src//components/models'
 
 export function AssignmentCard({ assignment }) {
   const scoreInfo = Assignment.scoreInfo(assignment.score)

diff --git a/src/components/progressreports/DateRange.js → src/components/progressreports/DateRange.jsx b/src/components/progressreports/DateRange.js → src/components/progressreports/DateRange.jsx
diff --git a/src/components/progressreports/Editing.js → src/components/progressreports/Editing.jsx b/src/components/progressreports/Editing.js → src/components/progressreports/Editing.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import logo from '@/images/logo.png'
+import logo from '/src//images/logo.png'
 import { AssignmentCard } from './AssignmentCard'
 
 export function Editing({ showInput, shortName, fullName, assignments, state, dispatch, title }) {

diff --git a/src/components/progressreports/Editor.js → src/components/progressreports/Editor.jsx b/src/components/progressreports/Editor.js → src/components/progressreports/Editor.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StudentProgressReport, Assignment } from '@/components/models'
+import { StudentProgressReport, Assignment } from '/src//components/models'
 import { GenerateStudentProgressReport } from './GenerateStudentProgressReport'
 
 export function Editor({ progressReport, onSaveStudentReport, index, onSkip }) {