Version updates

.env.development

@@ -1 +1,3 @@
 NEXT_PUBLIC_BACKEND_HOST="http://localhost:8000"
+SECRET=idkjustpleasehavesomethingfortesting
+NEXTAUTH_URL="http://localhost:3000"

.env.local

@@ -1,2 +1,2 @@
-SECRET=idkjustpleasehavesomethingfortesting
-NEXTAUTH_URL="http://localhost:3000"
+# this one shoudl end up in .gitignore?
+# https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#default-environment-variables

.gitignore

@@ -33,8 +33,4 @@ yarn-error.log*
 # vercel
 .vercel
 
-#stewart battle
-yarn.lock
-package-lock.json
-
 .vscode

actions.js

@@ -282,7 +282,7 @@ export function logoutUser() {
     const {
       currentUser: { token },
     } = getState();
-    fetch(`${process.env.NEXT_PUBLIC_BACKEND_HOST}/auth-token`, {
+    fetch(`${process.env.NEXT_PUBLIC_BACKEND_HOST}/auth-token/`, {
       method: 'DELETE',
       headers: {
         Authorization: `Token ${token}`,
@@ -600,6 +600,10 @@ export function postRespond({ slug, assignmentId, response }) {
     const {
       currentUser: { token },
     } = getState();
+    if (!slug || !assignmentId || !response) {
+      console.error('missing requirements to submit', slug, assignmentId, response)
+      return;
+    }
     dispatch(beginUpload(assignmentId));
     const body = JSON.stringify({ content: JSON.stringify(response) });
     return fetch(

api.js

@@ -65,15 +65,15 @@ export function getAllPieces(slug) {
 export function mutateAssignPiece(slug) {
   return async (piecePlanId) => {
     const endpoint = `courses/${slug}/assign_piece_plan/`
-    const json = await makeRequest(endpoint, method='POST', body={piece_id: piecePlanId})
+    const json = await makeRequest(endpoint, 'POST', {piece_id: piecePlanId})
     return json
   }
 }
 
 export function mutateUnassignPiece(slug) {
   return async (piece) => {
-    const endpoint = `courses/${slug}/unassign/` 
-    const json = await makeRequest(endpoint, method='POST', body={piece_id: piece.id});
+    const endpoint = `courses/${slug}/unassign/`
+    const json = await makeRequest(endpoint, 'POST', {piece_id: piece.id});
     return json
   }
 }
@@ -97,7 +97,9 @@ export function mutateGradeSubmission(slug) {
       expression,
       grader
     };
-    const json = await makeRequest(endpoint, method='POST', body=body);
+
+    const json = await makeRequest(endpoint, 'POST', body);
+
     return json;
   }
 }
@@ -106,7 +108,9 @@ export function mutateGradeSubmission(slug) {
 export function mutateCreateSubmission({ slug }) {
   return async (submission, assignmentId) => {
     const endpoint = `courses/${slug}/assignments/${assignmentId}/submissions/`
-    const json = await makeRequest(endpoint, method='POST', body=submission)
+
+    const json = await makeRequest(endpoint, 'POST', submission)
+
     return json;
   }
 }
@@ -121,15 +125,19 @@ export function mutateCourse(slug) {
   // expecting params to be any subset of name, start_date, end_date, slug
   return async (params) => {
     const endpoint = `courses/${slug}/`
-    const json = await makeRequest(endpoint, method='PATCH', body=params);
+
+    const json = await makeRequest(endpoint, 'PATCH', params);
+
     return json;
   }
 }
 
 export async function mutateAssignmentInstrument(slug, pieceId, instrument) {
   const endpoint = `courses/${slug}/change_piece_instrument/`;
   const body = {piece_id: pieceId, instrument_id: instrument.id};
-  const json = await makeRequest(endpoint, method='PATCH', body=body);
+
+  const json = await makeRequest(endpoint, 'PATCH', body);
+
   return json;
 }
 

components/enrollments.js

@@ -25,60 +25,56 @@ export default function Enrollments({ children }) {
     <div className="course-list">
       {enrollments &&
         enrollments.map((enrollment) => (
-          <Link href={`/courses/${enrollment.course.slug}`} key={enrollment.course.url}>
-            <a className="course-item">
-              <Card className={new Date(enrollment.course.end_date) < new Date() ? 'opacity-50' : ''}>
-                <Card.Img variant="top" as="div" className="card-color" />
-                <Card.Body>
-                  <Card.Title>{enrollment.course.name}</Card.Title>
-                  <Card.Text>
-                    {/* <FaCalendar /> */}
-                    <span className="ml-3">{format(new Date(enrollment.course.start_date), 'MMM d')}</span>&nbsp;-&nbsp; 
-                    {/* <br /> */}
-                    {/* <FaFlagCheckered /> */}
-                    <span className="ml-3">{format(new Date(enrollment.course.end_date), 'MMM d')}</span>
-                  </Card.Text>
-                </Card.Body>
-                {/* <Card.Footer className="text-muted d-flex justify-content-between">
-                  <Link href={`/courses/${enrollment.course.slug}`}>
-                    <Button variant="primary">
-                      View <FaLocationArrow />
-                    </Button>
-                  </Link>
-                  <Link href={`/courses/${enrollment.course.slug}/edit`}>
-                    <Button variant="primary">
-                      Edit <FaEdit />
-                    </Button>
-                  </Link>
-                </Card.Footer> */}
-              </Card>
-            </a>
+          <Link href={`/courses/${enrollment.course.slug}`} key={enrollment.course.url} className="course-item">
+            <Card className={new Date(enrollment.course.end_date) < new Date() ? 'opacity-50' : ''}>
+              <Card.Img variant="top" as="div" className="card-color" />
+              <Card.Body>
+                <Card.Title>{enrollment.course.name}</Card.Title>
+                <Card.Text>
+                  {/* <FaCalendar /> */}
+                  <span className="ml-3">{format(new Date(enrollment.course.start_date), 'MMM d')}</span>&nbsp;-&nbsp; 
+                  {/* <br /> */}
+                  {/* <FaFlagCheckered /> */}
+                  <span className="ml-3">{format(new Date(enrollment.course.end_date), 'MMM d')}</span>
+                </Card.Text>
+              </Card.Body>
+              {/* <Card.Footer className="text-muted d-flex justify-content-between">
+                <Link href={`/courses/${enrollment.course.slug}`}>
+                  <Button variant="primary">
+                    View <FaLocationArrow />
+                  </Button>
+                </Link>
+                <Link href={`/courses/${enrollment.course.slug}/edit`}>
+                  <Button variant="primary">
+                    Edit <FaEdit />
+                  </Button>
+                </Link>
+              </Card.Footer> */}
+            </Card>
           </Link>
         ))}
-      { groups && groups.some(gName=>gName==="Teacher") && <Link href="/courses/new">
-        <a className="course-item">
-          <Card>
-            <Card.Img variant="top" as="div" className="card-color" />
-            <Card.Body>
-              <Card.Title>Add New Course</Card.Title>
-              {/* <Card.Text>
-
-              </Card.Text> */}
-            </Card.Body>
-            {/* <Card.Footer className="text-muted d-flex justify-content-between">
-              <Link href={`/courses/${enrollment.course.slug}`}>
-                <Button variant="primary">
-                  View <FaLocationArrow />
-                </Button>
-              </Link>
-              <Link href={`/courses/${enrollment.course.slug}/edit`}>
-                <Button variant="primary">
-                  Edit <FaEdit />
-                </Button>
-              </Link>
-            </Card.Footer> */}
-          </Card>
-        </a>
+      {groups && groups.some(gName => gName === "Teacher") && <Link href="/courses/new" className="course-item">
+        <Card>
+          <Card.Img variant="top" as="div" className="card-color" />
+          <Card.Body>
+            <Card.Title>Add New Course</Card.Title>
+            {/* <Card.Text>
+
+            </Card.Text> */}
+          </Card.Body>
+          {/* <Card.Footer className="text-muted d-flex justify-content-between">
+            <Link href={`/courses/${enrollment.course.slug}`}>
+              <Button variant="primary">
+                View <FaLocationArrow />
+              </Button>
+            </Link>
+            <Link href={`/courses/${enrollment.course.slug}/edit`}>
+              <Button variant="primary">
+                Edit <FaEdit />
+              </Button>
+            </Link>
+          </Card.Footer> */}
+        </Card>
       </Link> }
     </div>
   );

components/layout.js

@@ -1,3 +1,4 @@
+'use client';
 import Container from 'react-bootstrap/Container';
 import Head from 'next/head';
 import { useRouter } from 'next/router';

components/loginout.js

@@ -8,15 +8,15 @@ function LoginOut() {
   const currentUserInfo = useSelector((state) => state.currentUser);
   // const loginStatus = useSelector((state) => state.loginStatus);
   return session ? (
-    <Link href="/api/auth/signout" passHref>
+    <Link href="/api/auth/signout" passHref legacyBehavior>
       <Nav.Link>Logout
         {
           currentUserInfo.loaded ? ` ${currentUserInfo.username}` : ""
         }
       </Nav.Link>
     </Link>
   ) : (
-    <Link href="/auth/signin?callbackUrl=/courses" passHref>
+    <Link href="/auth/signin?callbackUrl=/courses" passHref legacyBehavior>
       <Nav.Link>Login</Nav.Link>
     </Link>
   );

components/nav.js

@@ -1,3 +1,4 @@
+'use client';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import Container from 'react-bootstrap/Container';
@@ -27,7 +28,7 @@ function Navigation() {
           <Nav className="me-auto">
             {enrollments ? <CourseSelector /> : 
               <Nav.Item>
-                <Link href="/courses" passHref>
+                <Link href="/courses" passHref legacyBehavior>
                   <Nav.Link>Courses</Nav.Link>
                 </Link>
               </Nav.Item>
@@ -36,7 +37,7 @@ function Navigation() {
             {piece && <NavActivityPicker />}
           </Nav>
           <Nav>
-            <Link href="/about" passHref>
+            <Link href="/about" passHref legacyBehavior>
               <Nav.Link>About</Nav.Link>
             </Link>
             <LoginOut />

components/student/activityPicker.js

@@ -31,7 +31,7 @@ function ActivityPicker (assignment) {
 return <ListGroup>
   <Link
     href={`/courses/${slug}/${piece}/Perform/Melody`}
-    passHref
+    passHref legacyBehavior
   >
     <ListGroup.Item
       action
@@ -49,7 +49,7 @@ return <ListGroup>
   </Link>
   <Link
     href={`/courses/${slug}/${piece}/Perform/Bassline`}
-    passHref
+    passHref legacyBehavior
   >
     <ListGroup.Item
       action
@@ -65,7 +65,7 @@ return <ListGroup>
       </span>
     </ListGroup.Item>
   </Link>
-  <Link href={`/courses/${slug}/${piece}/Create`} passHref>
+  <Link href={`/courses/${slug}/${piece}/Create`} passHref legacyBehavior>
     <ListGroup.Item
       action
       eventKey="Create"
@@ -78,7 +78,7 @@ return <ListGroup>
       </span>
     </ListGroup.Item>
   </Link>
-  <Link href={`/courses/${slug}/${piece}/Respond`} passHref>
+  <Link href={`/courses/${slug}/${piece}/Respond`} passHref legacyBehavior>
     <ListGroup.Item
       action
       eventKey="Respond"
@@ -95,7 +95,7 @@ return <ListGroup>
   {hasCompose && (
     <Link
       href={`/courses/${slug}/${piece}/${connectLink}`}
-      passHref
+      passHref legacyBehavior
     >
       <ListGroup.Item
         action

components/student/assignment.js

@@ -54,7 +54,7 @@ export default function StudentAssignment({ children, assignment }) {
                 `${actCategory} `}
               {assignment?.activity?.activity_type?.name} Activity
             </h1>
-            <Instructions body={assignment?.activity_body} />
+            <Instructions body={assignment?.activity_body ?? assignment?.activity?.body} />
             {assignment.submissions.length > 0 ? (
               <Accordion defaultActiveKey="0" alwaysOpen className="cpr-create">
                 <Accordion.Item eventKey="0">

components/student/pieceAssignments.js

@@ -62,7 +62,7 @@ function PieceAssignments({ piece, canEditInstruments }) {
             className="d-flex justify-content-between"
           >
             <Link
-              passHref
+              passHref legacyBehavior
               href={`/courses/${slug}/${assignment.piece_slug
                 }/${assnToKey(assignment, 'debug str this is from pieceAssignments')}`}
             >

components/student/recentSubmission.js

@@ -44,8 +44,7 @@ export default function RecentSubmission(assn) {
           ) : ctgy === 'Respond' ? (
             <Row>
               <Col md={9}>
-                <textarea rows={5} readOnly className="respond-preview">
-                  {JSON.parse(content).reflection}
+                  <textarea rows={5} readOnly className="respond-preview" value={JSON.parse(content).reflection} disabled>
                 </textarea>
               </Col>
               <Col>

components/student/respond.js

@@ -27,8 +27,8 @@ export default function RespondActivity() {
   const assignmentId =
     loadedActivities &&
     activities &&
-    activities?.[slug] &&
-    activities?.[slug].filter(
+    activities?.[piece] &&
+    activities?.[piece].filter(
       (assn) =>
         assn.piece_slug === piece && assn.activity_type_category === actCategory
     )?.[0]?.id;
@@ -66,7 +66,7 @@ export default function RespondActivity() {
       />
       <RTE submission={{ id: assignmentId }} submitAction={submitAction} />
       <h3>Rating Scales</h3>
-      <Accordion defaultActiveKey="0" alwaysOpen className="cpr-create">
+      <Accordion defaultActiveKey={["0", "1", "2"]} alwaysOpen className="cpr-create">
         <Accordion.Item eventKey="0">
           <Accordion.Header>Rhythm</Accordion.Header>
           <Accordion.Body>