fix context not working on loader functions

Web-BDE · Feb 24, 2022 · c9d0d45 · c9d0d45
1 parent cba4933
commit c9d0d45
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 29 deletions.
diff --git a/app/components/challenge/grids/accomplishmentGrid.tsx b/app/components/challenge/grids/accomplishmentGrid.tsx
@@ -56,7 +56,7 @@ export default function AccomplishmentsGrid({
     validateForm?: ValidateAccomplishmentFormData;
   };
 }) {
-  const userInfo = useOutletContext<ContextData>().userInfo;
+  const {userInfo} = useOutletContext<ContextData>();
 
   return (
     <Grid

diff --git a/app/components/goodies/grids/purchaseGrid.tsx b/app/components/goodies/grids/purchaseGrid.tsx
@@ -12,7 +12,7 @@ export default function PurchasesGrid({
   purchases: Purchase[];
   formData?: RefundGoodiesFormData;
 }) {
-  const userInfo = useOutletContext<ContextData>().userInfo;
+  const {userInfo} = useOutletContext<ContextData>();
 
   return (
     <Grid

diff --git a/app/routes/challenges/$challengeId.tsx b/app/routes/challenges/$challengeId.tsx
@@ -6,7 +6,7 @@ import {
   useActionData,
   useCatch,
   useLoaderData,
-  useOutletContext
+  useOutletContext,
 } from "remix";
 
 import {
@@ -48,6 +48,7 @@ import {
 } from "~/models/Accomplishment";
 import { ContextData } from "~/root";
 import { Params } from "react-router";
+import { getSelft } from "~/services/user";
 
 type LoaderData = {
   challengeResponse?: {
@@ -124,25 +125,17 @@ async function loadChallenge(
   return loadAccomplishment(token, challengeResponse, code, userId);
 }
 
-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(
@@ -455,7 +448,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" }}>

diff --git a/app/routes/goodies/$goodiesId.tsx b/app/routes/goodies/$goodiesId.tsx
@@ -44,7 +44,7 @@ import {
 import { Params } from "react-router";
 import { ContextData } from "~/root";
 import { User } from "~/models/User";
-import { getUser } from "~/services/user";
+import { getSelft, getUser } from "~/services/user";
 
 type LoaderData = {
   goodiesResponse?: {
@@ -126,24 +126,16 @@ async function loadGoodies(token: string, goodiesId: number, userId?: number) {
   );
 }
 
-export const loader: LoaderFunction = async ({
-  request,
-  params,
-  context,
-}: {
-  request: Request;
-  params: Params<string>;
-  context: ContextData;
-}) => {
+export const loader: LoaderFunction = async ({ request, params }) => {
   if (!params.goodiesId) {
     throw json("Invalid goodies query", 404);
   }
 
   const token = await requireAuth(request, `/goodies/${params.goodiesId}`);
 
-  const userInfo = context.userInfo;
+  const { user } = await getSelft(token);
 
-  return await loadGoodies(token, parseInt(params.goodiesId), userInfo?.id);
+  return await loadGoodies(token, parseInt(params.goodiesId), user?.id);
 };
 
 async function handleCreatePurchase(token: string, goodiesId: number) {
@@ -233,7 +225,7 @@ async function handleRefundGoodies(token: string, purchaseId: number) {
   return json({ refundGoodiesResponse } as ActionData, code);
 }
 
-export const action: ActionFunction = async ({ request, params, context }) => {
+export const action: ActionFunction = async ({ request, params }) => {
   if (!params.goodiesId) {
     return json(
       {
@@ -366,7 +358,7 @@ export default function Goodies() {
   const loaderData = useLoaderData<LoaderData>();
   const actionData = useActionData<ActionData>();
 
-  const userInfo = useOutletContext<ContextData>().userInfo;
+  const { userInfo } = useOutletContext<ContextData>();
 
   return (
     <Container style={{ marginTop: "50px" }} component="main">