Merge pull request #78 from CassandraGoose/62-accept-new-pathway

setup allow user to accept new pathway

app/actions/pathwayActions.ts

@@ -0,0 +1,22 @@
+'use server';
+import {
+  addPathwayToUser
+} from '@/app/lib/queries';
+import { checkUser } from '@/app/actions/actions';
+import { Pathway } from '../lib/interface';
+
+interface Message {
+  id?: string | number;
+  error?: string;
+}
+export async function connectPathway(pathwayId: number): Promise<Message> {
+  const user = await checkUser();
+
+  if (!user) {
+    return { error: 'You must be signed in to complete this action.'};
+  }
+
+  const newPathway = await addPathwayToUser(pathwayId) as Pathway;
+
+  return { id: newPathway.id };
+}

app/dashboard/[pathway]/[competencyId]/_components/NewProofForm.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { submitProof } from '@/app/actions/proofActions';
 
@@ -9,11 +9,11 @@ export default function NewProofForm({
   competencyId: string;
 }) {
   const router = useRouter();
-  const [titleError, setTitleError] = React.useState<string>('');
-  const [descriptionError, setDescriptionError] = React.useState<string>('');
+  const [titleError, setTitleError] = useState<string>('');
+  const [descriptionError, setDescriptionError] = useState<string>('');
   const [justificationError, setJustificationError] =
-    React.useState<string>('');
-  const [generalError, setGeneralError] = React.useState<string>('');
+    useState<string>('');
+  const [generalError, setGeneralError] = useState<string>('');
 
   type zodError = {
     title?: string[] | undefined;

app/dashboard/[pathway]/page.tsx

@@ -25,6 +25,7 @@ export default async function Page({
   }
 
   const selectedPathway = userPathway.pathways[0] as Pathway;
+
   const progress = caluclateProgress(selectedPathway);
 
   return (

app/lib/queries.ts

@@ -272,3 +272,29 @@ export async function getSinglePathway(pathwayId: string) {
     console.error(error);
   }
 }
+
+export async function addPathwayToUser(pathwayId: number) {
+  const user = await checkUser();
+
+  if (!user) {
+    return { message: 'You must be signed in to complete this action.'};
+  }
+
+  try {
+    return await prisma.pathway.update({
+      where: {id: pathwayId},
+      data: {
+        persons: {
+          connect: [
+            {
+              id: user.id,
+            }
+          ]
+        }
+      }
+    })
+  } catch (error) {
+    return error;
+    console.error(error);
+  }
+}

app/lib/utilities.ts

@@ -4,7 +4,7 @@ export const caluclateProgress = (pathway: Pathway) => {
   let totalCompetencies = 0;
   const total = pathway.competencies.reduce((acc, competency) => {
     totalCompetencies++;
-    return competency.proofs.length > 0 ? acc + 1 : acc;
+    return competency.proofs!.length > 0 ? acc + 1 : acc;
   }, 0);
   return (total / totalCompetencies) * 100;
 };

app/page.tsx

@@ -25,7 +25,6 @@ function TryButton() {
 }
 
 export default function Page() {
-  const { pending } = useFormStatus();
 
   return (
     <section className="flex flex-col pb-20">

app/pathways/[pathway]/page.tsx

@@ -1,8 +1,9 @@
 import React, { Fragment } from 'react';
 import { notFound, redirect } from 'next/navigation';
-import { getSinglePathway } from '../../lib/queries';
-import { Pathway } from '../../lib/interface';
+import { getSinglePathway, getSingleUserPathway } from '../../lib/queries';
 import CompetencyCard from '@/app/_components/CompetencyCard';
+import FollowPathwayButton from '../_components/FollowPathwayButton';
+import { checkUser } from '@/app/actions/actions';
 
 export default async function Page({
   params,
@@ -16,13 +17,24 @@ export default async function Page({
     notFound();
   }
 
+  const user = await checkUser();
+  let userPathways;
+  let hasPathway;
+  if (!!user) {
+    userPathways = await getSingleUserPathway(singlePathway.id.toString());
+    hasPathway = userPathways?.pathways.find((pathway) => pathway.id === singlePathway.id);
+  }
+
   return (
     <section className="mx-12 my-12 flex flex-col items-center">
       <div className="border-black flex w-full justify-between rounded-md border p-8">
         <div className="flex w-full flex-col space-y-8">
-          <h1 className="text-2xl" data-testid="pathway-title">
-            {singlePathway.title}
-          </h1>
+          <div className="w-ful flex items-center justify-between">
+            <h1 className="text-2xl" data-testid="pathway-title">
+              {singlePathway.title}
+            </h1>
+            {!!user && <FollowPathwayButton pathway={singlePathway} hasPathway={!!hasPathway}/>}
+          </div>
           <p data-testid="pathway-description">{singlePathway.description}</p>
           <div className="flex flex-col items-center justify-center space-y-8">
             <h2 className="text-xl ">What will you learn?</h2>
@@ -33,7 +45,7 @@ export default async function Page({
               below by uploading artifacts (called &apos;proofs&apos;) to act as
               proof of your skills and knowledge.
             </p>
-            <div className="card-body flex flex-row flex-wrap w-full">
+            <div className="card-body flex w-full flex-row flex-wrap">
               {singlePathway.competencies.map((competency) => {
                 return (
                   <Fragment key={competency.id}>

app/pathways/_components/FollowPathwayButton.tsx

@@ -0,0 +1,46 @@
+'use client';
+import { useState } from 'react';
+import { redirect } from 'next/navigation';
+import { User } from 'lucia';
+import { Pathway } from '@/app/lib/interface';
+import { useFormStatus } from 'react-dom';
+import { connectPathway } from '@/app/actions/pathwayActions';
+
+export default function FollowPathwayButton({
+  pathway,
+  hasPathway,
+}: {
+  pathway: Pathway;
+  hasPathway: boolean;
+}) {
+  const { pending } = useFormStatus();
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  return  !hasPathway && (
+    <form
+      action={async () => {
+        const message = await connectPathway(pathway.id);
+        if (message.error) {
+          setErrorMessage(message.error);
+        } else {
+          return redirect(`/dashboard/${message.id}`);
+        }
+      }}
+    >
+      <button
+        className="btn btn-secondary text-bright"
+        type="submit"
+        aria-disabled={pending}
+      >
+        {pending ? (
+          <span className="loading loading-spinner loading-sm bg-loading"></span>
+        ) : (
+          'Follow This Pathway'
+        )}
+      </button>
+      <div className="label">
+        <span className="label-text-alt text-error">{errorMessage}</span>
+      </div>
+    </form>
+  );
+}

app/profile/_components/ProofButtons.tsx

@@ -11,10 +11,10 @@ export default function ProofButtons({
 }) {
   const pathname = usePathname();
 
-  return competency.proofs.length > 0 ? (
+  return competency.proofs && competency.proofs.length > 0 ? (
     <div>
       <ul className="flex flex-wrap justify-start">
-        {competency.proofs.map((proof) => {
+        {competency.proofs?.map((proof) => {
           return (
             <li key={proof.id} className="mr-2 mt-2">
               <Link

prisma/data/contentAreas.json

@@ -63,6 +63,18 @@
     {
       "title": "Metacognition",
       "description": "Engaging in metacognition involves developing an awareness and understanding of one's own thought processes. This cognitive skill encompasses the ability to reflect on and regulate one's thinking, learning strategies, and problem-solving approaches, fostering a deeper understanding of how to learn effectively and continuously improve cognitive abilities."
+    },
+    {
+      "title": "Programming",
+      "description": "Programming involves understanding how to write code to create software applications, websites, and other digital tools. It includes exploring programming languages, gaining technical skills, critically analyzing code, and developing the ability to communicate ideas effectively, fostering a comprehensive approach to problem-solving and creative expression."
+    },
+    {
+      "title": "Mathematics",
+      "description": "Mathematics involves understanding the relationships between numbers, shapes, and quantities. It includes exploring mathematical concepts, gaining technical skills, critically analyzing mathematical problems, and developing the ability to communicate ideas effectively, fostering a comprehensive approach to problem-solving and creative expression."
+    },
+    {
+      "title": "Web Development",
+      "description": "Web development involves understanding how to create websites and web applications. It includes exploring web technologies, gaining technical skills, critically analyzing web design, and developing the ability to communicate ideas effectively, fostering a comprehensive approach to problem-solving and creative expression."
     }
   ]
 }