Merge pull request #26 from Roxxas96/details-on-routes

Details on routes

app/components/challenge/challengeDisplay.tsx

@@ -1,7 +1,14 @@
 import { Typography } from "@mui/material";
 import { Challenge } from "~/models/Challenge";
+import { User } from "~/models/User";
 
-export default function ChallengeDisplay({ challenge }: { challenge: Challenge }) {
+export default function ChallengeDisplay({
+  challenge,
+  creator,
+}: {
+  challenge: Challenge;
+  creator?: User;
+}) {
   return (
     <div>
       <Typography variant="h3" style={{ marginTop: "10px" }}>
@@ -16,6 +23,11 @@ export default function ChallengeDisplay({ challenge }: { challenge: Challenge }
       <Typography variant="body1" style={{ marginTop: "10px" }}>
         Creation date : {new Date(challenge.createdAt).toLocaleDateString()}
       </Typography>
+      {creator && (
+        <Typography variant="body1" style={{ marginTop: "10px" }}>
+          Creator : {creator?.pseudo}
+        </Typography>
+      )}
     </div>
   );
 }

app/components/challenge/forms/updateChallengeForm.tsx

@@ -1,13 +1,16 @@
 import { TextField, Button, Typography } from "@mui/material";
 import { Form } from "remix";
 import { Challenge, CreateChallengeFormData } from "~/models/Challenge";
+import { User } from "~/models/User";
 
 export default function UpdateChallengeForm({
   challenge,
   formData,
+  creator,
 }: {
   challenge: Challenge;
   formData?: CreateChallengeFormData;
+  creator?: User;
 }) {
   return (
     <Form method="patch" action={`/challenges/${challenge.id}`}>
@@ -55,6 +58,11 @@ export default function UpdateChallengeForm({
       <Typography variant="h6" align="center" style={{ marginTop: "10px" }}>
         Creation date : {new Date(challenge.createdAt).toLocaleDateString()}
       </Typography>
+      {creator && (
+        <Typography variant="h6" align="center" style={{ marginTop: "10px" }}>
+          Creator : {creator?.pseudo}
+        </Typography>
+      )}
       <Button
         type="submit"
         fullWidth

app/components/challenge/grids/accomplishmentGrid.tsx

@@ -1,15 +1,15 @@
-import { Alert, Container, Grid } from "@mui/material";
-import { useContext } from "react";
+import { Grid } from "@mui/material";
 import {
   Accomplishment,
   CreateAccomplishmentFormData,
   DeleteAccomplishmentFormData,
   ValidateAccomplishmentFormData,
 } from "~/models/Accomplishment";
-import { UserContext } from "../../userContext";
 import AccomplishmentTile from "./accomplishmentTile";
 import DeleteAccomplishmentForm from "../forms/deleteAccomplishmentForm";
 import UpdateAccomplishmentForm from "../forms/updateAccomplishmentForm";
+import { useOutletContext } from "remix";
+import { ContextData } from "~/root";
 
 function displayAccomplishment(
   accomplishment: Accomplishment,
@@ -56,7 +56,7 @@ export default function AccomplishmentsGrid({
     validateForm?: ValidateAccomplishmentFormData;
   };
 }) {
-  const userInfo = useContext(UserContext);
+  const {userInfo} = useOutletContext<ContextData>();
 
   return (
     <Grid

app/components/goodies/forms/updateGoodiesForm.tsx

@@ -1,12 +1,15 @@
 import { TextField, Button, Typography } from "@mui/material";
 import { Form } from "remix";
 import { CreateGoodiesFormData, Goodies } from "~/models/Goodies";
+import { User } from "~/models/User";
 
 export default function UpdateGoodiesForm({
   goodies,
+  creator,
   formData,
 }: {
   goodies: Goodies;
+  creator?: User;
   formData?: CreateGoodiesFormData;
 }) {
   return (
@@ -67,6 +70,11 @@ export default function UpdateGoodiesForm({
       <Typography variant="h6" align="center" style={{ marginTop: "10px" }}>
         Creation date : {new Date(goodies.createdAt).toLocaleDateString()}
       </Typography>
+      {creator && (
+        <Typography variant="h6" align="center" style={{ marginTop: "10px" }}>
+          Creator : {creator?.pseudo}
+        </Typography>
+      )}
       <Button
         type="submit"
         fullWidth

app/components/goodies/goodiesDisplay.tsx

@@ -1,7 +1,14 @@
 import { Typography } from "@mui/material";
 import { Goodies } from "~/models/Goodies";
+import { User } from "~/models/User";
 
-export default function GoodiesDisplay({ goodies }: { goodies: Goodies }) {
+export default function GoodiesDisplay({
+  goodies,
+  creator,
+}: {
+  goodies: Goodies;
+  creator?: User;
+}) {
   return (
     <div>
       <Typography variant="h3" style={{ marginTop: "10px" }}>
@@ -19,6 +26,11 @@ export default function GoodiesDisplay({ goodies }: { goodies: Goodies }) {
       <Typography variant="body1" style={{ marginTop: "10px" }}>
         Creation date : {new Date(goodies.createdAt).toLocaleDateString()}
       </Typography>
+      {creator && (
+        <Typography variant="body1" style={{ marginTop: "10px" }}>
+          Creator : {creator.pseudo}
+        </Typography>
+      )}
     </div>
   );
 }

app/components/goodies/grids/purchaseGrid.tsx

@@ -1,7 +1,8 @@
 import { Grid } from "@mui/material";
 import { useContext } from "react";
+import { useOutletContext } from "remix";
 import { Purchase, RefundGoodiesFormData } from "~/models/Purchase";
-import { UserContext } from "../../userContext";
+import { ContextData } from "~/root";
 import PurchaseTile from "./purchaseTile";
 
 export default function PurchasesGrid({
@@ -11,7 +12,7 @@ export default function PurchasesGrid({
   purchases: Purchase[];
   formData?: RefundGoodiesFormData;
 }) {
-  const userInfo = useContext(UserContext);
+  const {userInfo} = useOutletContext<ContextData>();
 
   return (
     <Grid

app/routes/challenges/$challengeId.tsx

@@ -6,7 +6,7 @@ import {
   useActionData,
   useCatch,
   useLoaderData,
-  useOutletContext
+  useOutletContext,
 } from "remix";
 
 import {
@@ -47,13 +47,15 @@ import {
   DeleteAccomplishmentFormData,
 } from "~/models/Accomplishment";
 import { ContextData } from "~/root";
-import { Params } from "react-router";
+import { getSelft, getUser } from "~/services/user";
+import { User } from "~/models/User";
 
 type LoaderData = {
   challengeResponse?: {
     challenge?: Challenge;
     error?: string;
     success?: string;
+    creatorResponse?: { error?: string; success?: string; user?: User };
   };
   accomplishmentResponse?: {
     accomplishments?: Accomplishment[];
@@ -90,28 +92,26 @@ type ActionData = {
   };
 };
 
-async function loadAccomplishment(
+async function loadAccomplishments(
   token: string,
-  challengeResponse: {
-    error?: string;
-    success?: string;
-    challenge?: Challenge;
-  },
-  challengeCode: number,
+  challengeId?: number,
   userId?: number
 ) {
   const { code, ...accomplishmentResponse } = await getManyAccomplishment(
     token,
     100,
     0,
-    challengeResponse.challenge?.id,
+    challengeId,
     userId
   );
 
-  return json(
-    { challengeResponse, accomplishmentResponse } as LoaderData,
-    challengeCode
-  );
+  return accomplishmentResponse;
+}
+
+async function loadChallengeCreator(token: string, creatorId: number) {
+  const { code, ...userResponse } = await getUser(token, creatorId);
+
+  return userResponse;
 }
 
 async function loadChallenge(
@@ -121,28 +121,38 @@ async function loadChallenge(
 ) {
   const { code, ...challengeResponse } = await getChallenge(token, challengeId);
 
-  return loadAccomplishment(token, challengeResponse, code, userId);
+  return json(
+    {
+      challengeResponse: {
+        ...challengeResponse,
+        creatorResponse:
+          challengeResponse.challenge?.creatorId &&
+          (await loadChallengeCreator(
+            token,
+            challengeResponse.challenge?.creatorId
+          )),
+      },
+      purchaseResponse: await loadAccomplishments(
+        token,
+        challengeResponse.challenge?.id,
+        userId
+      ),
+    } as LoaderData,
+    code
+  );
 }
 
-export const loader: LoaderFunction = async ({
-  request,
-  params,
-  context,
-}: {
-  request: Request;
-  params: Params<string>;
-  context: ContextData;
-}) => {
+export const loader: LoaderFunction = async ({ request, params }) => {
   if (!params.challengeId) {
     throw json("Invalid challenge query", 400);
   }
 
   //Need to provide userId to filter in jsx
   const token = await requireAuth(request, `/challenge/${params.challengeId}`);
 
-  const userInfo = context.userInfo;
+  const { user } = await getSelft(token);
 
-  return await loadChallenge(token, parseInt(params.challengeId), userInfo?.id);
+  return await loadChallenge(token, parseInt(params.challengeId), user?.id);
 };
 
 async function handleAccomplishmentCreation(
@@ -427,14 +437,16 @@ function displayChallenge(
     updateForm?: CreateChallengeFormData;
     deleteForm?: DeleteChallengeFormData;
   },
-  userId?: number
+  userId?: number,
+  creator?: User
 ) {
   if (userId === challenge.creatorId) {
     return (
       <Container maxWidth="xs">
         <UpdateChallengeForm
           challenge={challenge}
           formData={formData?.updateForm}
+          creator={creator}
         />
         <DeleteChallengeForm
           challenge={challenge}
@@ -445,7 +457,7 @@ function displayChallenge(
   } else {
     return (
       <Container maxWidth="xs">
-        <ChallengeDisplay challenge={challenge} />
+        <ChallengeDisplay creator={creator} challenge={challenge} />
       </Container>
     );
   }
@@ -455,7 +467,7 @@ export default function Challenge() {
   const loaderData = useLoaderData<LoaderData>();
   const actionData = useActionData<ActionData>();
 
-  const userInfo = useOutletContext<ContextData>().userInfo;
+  const { userInfo } = useOutletContext<ContextData>();
 
   return (
     <Container style={{ marginTop: "50px" }}>
@@ -474,7 +486,8 @@ export default function Challenge() {
                 updateForm: actionData?.updateChallengeResponse?.formData,
                 deleteForm: actionData?.deleteChallengeResponse?.formData,
               },
-              userInfo?.id
+              userInfo?.id,
+              loaderData.challengeResponse.creatorResponse?.user
             )}
             <Typography marginTop="50px" variant="h4">
               Submit Proof