Merge pull request #12 from tomi-amao/feat/dynamic-route-view-post-page

feat: added dynamic route for viewing a post #minor

.github/workflows/release-publish.yml

@@ -106,7 +106,7 @@ jobs:
           provenance: mode=max #create attestation for docker image
           cache-from: type=gha
           cache-to: type=gha,mode=max
-          outputs: type=image,name=target,annotation-index.org.opencontainers.image.description=Date; ${{ env.CURRENT_DATE }} Reposoitory; ${{ github.repository }} Repo URL; ${{github.repositoryUrl}} Commit SHA; ${{github.sha}} 
+          outputs: type=image,name=target,annotation-index.org.opencontainers.image.description=Date; ${{ env.CURRENT_DATE }} Reposoitory; ${{ github.repository }} Repo URL; ${{github.repositoryUrl}} Commit SHA; ${{github.sha}}
 
       - name: Generate artifact attestation
         uses: actions/attest-build-provenance@v1

README.md

@@ -1,3 +1,11 @@
 # Skillanthropy
 
 This website serves as a dynamic hub where software engineers, data scientists, UX/UI designers, and other tech professionals can discover and engage in volunteer opportunities with non-profit organizations and charities. It's essentially a task board tailored for tech-related projects that make a positive impact on society.
+
+The following environemnt variables are needed to run the docker image
+
+DATABASE_URL=
+SESSION_SECRET=
+CLOUD_NAME=
+API_KEY=
+API_SECRET=

app/components/cards/PostCard.tsx

@@ -1,4 +1,5 @@
 import type { Posts } from "@prisma/client";
+import { useNavigate } from "@remix-run/react";
 import { useEffect, useState } from "react";
 
 interface post extends Posts {
@@ -15,6 +16,7 @@ interface post extends Posts {
 }
 
 export default function PostCard({ post }: { post: post }) {
+  const navigate = useNavigate();
   const [postAge, setPostAge] = useState<string>();
   const [dateNow, setDateNow] = useState<Date>();
   const postDate = new Date(post.createdAt);
@@ -51,7 +53,20 @@ export default function PostCard({ post }: { post: post }) {
 
   return (
     <>
-      <div className="w-full h-fit bg-midGrey p-3 rounded-md grid grid-cols-[0.1fr_1fr] ">
+      <div
+        className="w-full h-fit bg-midGrey p-3 rounded-md grid grid-cols-[0.1fr_1fr]  "
+        onClick={() => {
+          navigate(`/posts/${post.id}`);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            navigate(`/posts/${post.id}`);
+          }
+        }}
+        role="button"
+        tabIndex={0}
+      >
         <div className="w-[45px] h-[45px] rounded-full bg-bgprimary m-2 row-span-2 "></div>
         <div className="flex items-center pt-2 ">
           <div className="flex flex-col">

app/models/posts.server.ts

@@ -49,3 +49,14 @@ export const deletePost = async (id: string) => {
 
   return deletePost;
 };
+
+export const getPost = async (id: string | undefined) => {
+  console.log(` Specified id : ${id}`);
+
+  if (!id) {
+    return { message: "No post found", status: 400, postData: null };
+  }
+  const postData = await prisma.posts.findFirst({ where: { id } });
+
+  return { message: "Found post", status: 200, postData };
+};

app/routes/_base.posts.$postId/route.tsx

@@ -0,0 +1,111 @@
+import { LoaderFunctionArgs } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import { getPost } from "~/models/posts.server";
+
+export default function PostPage() {
+  const loadedData = useLoaderData<typeof loader>();
+  if (!loadedData.postData) {
+    // Handle case when post is not found
+    return (
+      <div className="">
+        <h2>Post Not Found</h2>
+        <p>Sorry, the requested post could not be found.</p>
+      </div>
+    );
+  }
+  const { title, content, type, createdAt, id } = loadedData.postData;
+  return (
+    <>
+      <div className="w-full">
+        <PostBannerSummary
+          charity="Canopy"
+          deadline={createdAt}
+          title={title}
+          type={type}
+          key={id}
+        />
+        <div className="border-solid border-txtsecondary mx-36 bg-midGrey mt-4 h-fit rounded-md p-6 text-lightGrey">
+          <div className=" pb-4">
+            <h1 className="font-semibold pb-2">{title}</h1>
+            <p>{content}</p>
+          </div>
+          <div className="pb-4">
+            <h1 className="font-semibold pb-4"> Attachments</h1>
+            <div className="flex flex-row gap-4 ">
+              <button className="bg-bgprimary rounded-md w-fit p-1 px-6">
+                PDF
+              </button>
+              <button className="bg-bgprimary rounded-md w-fit p-1 px-6">
+                PNG
+              </button>
+              <button className="bg-bgprimary rounded-md w-fit p-1 px-6">
+                EXCEL
+              </button>
+              <button className="bg-bgprimary rounded-md w-fit p-1 px-6">
+                ZIP
+              </button>
+            </div>
+          </div>
+          <div className="pb-4">
+            <h1 className="font-semibold pb-4"> Status</h1>
+            <div className="flex flex-row gap-4 ">
+              <button className="bg-bgprimary rounded-md w-fit p-1 px-6">
+                Looking for volunteers
+              </button>
+            </div>
+          </div>
+          <div className=" w-fit flex flex-row m-auto gap-4">
+            <button className="text-lightGrey text-xs"> View Charity</button>
+            <button className=" w-fit bg-bgprimary p-2 px-6 rounded-md">
+              {" "}
+              Volunteer{" "}
+            </button>
+            <button className="text-lightGrey text-xs"> Bookmark</button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+interface PostBannerSummaryTitles {
+  title: string;
+  deadline: string;
+  charity: string;
+  type: string | null;
+}
+export const PostBannerSummary = ({
+  title,
+  deadline,
+  charity,
+  type,
+}: PostBannerSummaryTitles) => {
+  return (
+    <div className="mx-36 rounded-md text-lightGrey text-2xl mt-16 bg-bgsecondary flex flex-row gap-10 justify-evenly p-4">
+      <div className=" flex flex-col  ">
+        <h1 className="text-xs">Title</h1>
+        <h2 className="text-base">{title}</h2>
+      </div>
+      <div className=" flex flex-col  ">
+        <h1 className="text-xs">Deadline</h1>
+        <h2 className="text-base">{deadline}</h2>
+      </div>
+      <div className=" flex flex-col  ">
+        <h1 className="text-xs">Charity</h1>
+        <h2 className="text-base">{charity}</h2>
+      </div>
+      <div className=" flex flex-col  ">
+        <h1 className="text-xs">Type</h1>
+        <h2 className="text-base">{type}</h2>
+      </div>
+    </div>
+  );
+};
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  console.log(params);
+  const post = await getPost(params.postId);
+  console.log(post.message);
+  console.log(post);
+
+  return post;
+}

app/routes/_base.tsx → app/routes/_base/route.tsx

@@ -68,7 +68,9 @@ export default function IndexLayout() {
               </nav>
             </div>
           )}
-          <Outlet />
+          <div className="flex w-full">
+            <Outlet />
+          </div>
           <div className="w-[25%]  border-l-2  border-midGrey">
             <h1 className="text-lg text-lightGrey w-full px-4 pt-4">
               {" "}

app/routes/_base._index.ts → app/routes/_index/route.tsx

@@ -18,15 +18,3 @@ export const loader: LoaderFunction = async ({ request }) => {
     return redirect("/login");
   }
 };
-
-export default function Index() {
-  return {};
-}
-
-// export async function action({request} :ActionFunctionArgs) {
-//   const formData = await request.formData()
-//   const selectedItem =  Object.fromEntries(formData)
-//   console.log(selectedItem);
-//   // console.log('hello');
-
-// }

app/routes/login.tsx → app/routes/login/route.tsx

@@ -8,7 +8,7 @@ import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import { useEffect, useRef, useState } from "react";
 import MainHeader from "~/components/navigation/MainHeader";
 import { FormField } from "~/components/utils/FormField";
-import { logout } from "../services/session.server";
+import { logout } from "../../services/session.server";
 import { authenticator } from "~/services/auth.server";
 import { authError, createUserSession, register } from "~/models/user.server";
 import {