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

@@ -60,7 +60,7 @@ export function getStudentAssignments(slug) {
       })
       .then((response) => response.json())
       .then((results) => {
-        const grouped = results.reduce((acc, obj) => {
+        const grouped = results && results.reduce && results.reduce((acc, obj) => {
           // const key = obj.piece_name;
           const key = obj.piece_slug;
           if (!acc[key]) {
@@ -71,7 +71,11 @@ export function getStudentAssignments(slug) {
           return acc;
         }, {});
         // FIXME: this should respect order from server/pieceplan and mayeb do this as a backup?
-        Object.values(grouped).forEach(pieceAssignments=>pieceAssignments.sort(activitySort));
+        if (grouped) {
+          Object.values(grouped).forEach(pieceAssignments => pieceAssignments.sort(activitySort));
+        } else {
+          return results
+        }
         return grouped;
       });
 }
@@ -95,14 +99,14 @@ export function getAllPieces(courseSlug) {
         .then((response) => response.json())
         .then((json) => {
           const result = json;
-          return result.map((r) => ({...r.piece, piece_plan_id: r.id}));
+          return result.map((r) => ({ ...r.piece, piece_plan_id: r.id }));
         });
     });
 }
 export function getAssignedPieces(assignments) {
   return () => {
     const pieces = {};
-    if (Object.values(assignments).length > 0) {
+    if (assignments && Object.values(assignments).length > 0) {
       for (const pieceKey of Object.keys(assignments)) {
         for (const pieceAssignment of assignments[pieceKey]) {
           //   pieces[pieceAssignment.part.piece.id] = pieceAssignment.part.piece;

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

@@ -50,7 +50,7 @@ function PieceAssignments({piece}) {
             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>

components/teacher/course.js

@@ -30,7 +30,7 @@ export default function TeacherCourseView() {
   const { slug } = router.query;
   const [assignError, setAssignError] = useState(null);
   const {
-    isLoading,
+    isLoadingPieces,
     error,
     data: allPieces,
   } = useQuery(['allPieces', slug], getAllPieces(slug), {
@@ -115,7 +115,7 @@ export default function TeacherCourseView() {
     },
   });
   const assign = (piecePlan) => assignMutation.mutate(piecePlan);
-  if (isLoading || isLoadingAssignedActs || !assignedPieces)
+  if (isLoadingPieces || isLoadingAssignedActs)
     return 'Loading...';
   if (error || errorAssignedActs)
     return `An error has occurred: ${
@@ -148,15 +148,21 @@ export default function TeacherCourseView() {
             {allPieces &&
               allPieces
                 .filter(
-                  (piece) =>
-                    assignedPieces &&
+                  (piece) =>{
+                    let reslt = true
+                    if (assignedPieces &&
                     Object.values(assignedPieces).findIndex(
                       (assignedPiece) => assignedPiece.id === piece.id
-                    ) === -1
+                    ) !== -1) {
+                      reslt = false;
+                    }
+                    return reslt;
+                  }
+
                 )
-                .map((piece) => (
+                .map((piece, pidx) => (
                   <ListGroupItem
-                    key={piece.id}
+                    key={`${piece.id}-${pidx}`}
                     className="d-flex justify-content-between align-items-center"
                   >
                     <div>{piece.name}</div>
@@ -194,7 +200,7 @@ export default function TeacherCourseView() {
                                     <span className="me-auto">{`${piece.activities[activityKey].category} ${piece.activities[activityKey].name}`}</span>
                                     <Link
                                       href={`/courses/${slug}/${piece.slug}/${piece.activities[activityKey].category}/${piece.activities[activityKey].name}/grade`}
-                                      passHref
+                                      passHref legacyBehavior
                                     >
                                       <a className="btn btn-primary">
                                         Grade <FaMarker />

components/teacher/grade/rte.js

@@ -18,9 +18,9 @@ export default function RTE({ submission, submitAction, autoFocus = false }) {
   const userInfo = useSelector((state) => state.currentUser);
   const { slug } = router.query;
   const [isFormFocused, setFormFocus] = useState(false);
-  const [rhythm, setRhythm] = useState(submission?.grade?.rhythm ?? 0);
-  const [tone, setTone] = useState(submission?.grade?.tone ?? 0);
-  const [expression, setExpression] = useState(submission?.grade?.expression ?? 0);
+  const [rhythm, setRhythm] = useState(submission?.grade?.rhythm ?? '');
+  const [tone, setTone] = useState(submission?.grade?.tone ?? '');
+  const [expression, setExpression] = useState(submission?.grade?.expression ?? '');
   const audioRef = useRef();
   const dispatch = useDispatch();
   const queryClient = useQueryClient();