feat: adding images and timestamp

apps/forum/src/components/App.tsx

@@ -11,7 +11,7 @@ import SearchTags from "./SearchTags";
 import FeedBackBox from "./FeedBackBox";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { API } from "@aws-amplify/api";
-import { getUserAttr, getIdToken } from "wasedatime-ui";
+import { getUserAttr, getIdToken, LoadingSpinner } from "wasedatime-ui";
 
 const App = () => {
   return (
@@ -25,6 +25,14 @@ const App = () => {
 
 export default App;
 
+const NotFound = () => {
+  const { theme } = React.useContext(ThemeContext);
+  const navigate = useNavigate();
+  useEffect(() => navigate("/"));
+
+  return <LoadingSpinner theme={theme} message="Not found! Redirecting..." />;
+};
+
 const InnerApp = () => {
   const { t, i18n } = useTranslation();
 
@@ -108,6 +116,7 @@ const InnerApp = () => {
                 path="forum/:boardSlug"
               />
               <Route element={<Thread />} path="forum/:boardSlug/:threadUuid" />
+              <Route element={<NotFound />} path="*" />
             </Routes>
           </div>
           <div className="flex flex-col sm:w-1/5 ">

apps/forum/src/components/Comment.tsx

@@ -7,6 +7,7 @@ import { ConfirmModal } from "@app/components/form/ConfirmModal";
 import API from "@aws-amplify/api";
 import { getIdToken } from "wasedatime-ui";
 import ThreadType from "@app/types/thread";
+import { timeFormatter } from "../utils/timeFormatter";
 
 type Props = {
   comment: CommentType;
@@ -18,7 +19,7 @@ type Props = {
 const convertUrlsToLinks = (text: string) => {
   if (!text) return null;
 
-  const urlRegex = /https?:\/\/[^\s]+/g;
+  const urlRegex: RegExp = /https?:\/\/[^\s]+/g;
   const parts = text.split(urlRegex);
   const matches = text.match(urlRegex);
 
@@ -100,8 +101,6 @@ const Comment = ({ comment, thread, setComments, setThread }: Props) => {
         }
       );
 
-      console.log(res);
-
       const action = "update_decr";
       await API.patch(
         "wasedatime-dev",
@@ -129,12 +128,15 @@ const Comment = ({ comment, thread, setComments, setThread }: Props) => {
     }
   };
 
+  const time = timeFormatter(comment);
+  console.log(comment);
+
   return (
     <Block actions={actions}>
       <div className="border-2 rounded-xl px-4 py-2 text-light-text2 mt-4 standard-style flex flex-row justify-between items-center">
         <div>
           <h2 className="text-2xl p-2">{convertUrlsToLinks(comment.body)}</h2>
-          <h2 className="text-xs my-auto"></h2>
+          <h2 className="text-xs my-auto">Posted at {time}</h2>
         </div>
         {comment.mod === true && (
           <div className="justify-end">

apps/forum/src/components/CommentForm.tsx

@@ -66,6 +66,7 @@ const CommentForm: React.FC<CommentFormProps> = ({
       );
 
       const newComment: CommentType = response.data;
+
       onNewComment(newComment);
       setComment("");
 
@@ -105,12 +106,12 @@ const CommentForm: React.FC<CommentFormProps> = ({
       }
     } catch (error) {
       console.error("An error occurred:", error);
-    } finally {
     }
   };
 
   return (
     <div className="flex justify-between">
+      {/* <div>Posted at ${time}</div> */}
       <input
         className="text-2xl text-light-text3 dark:text-dark-text1 w-full focus:text-light-text1 focus:ring border-2 mt-4 mb-2 rounded-lg px-4 py-2 standard-style"
         placeholder="Write your comment here (no more than 200 character)"
@@ -126,13 +127,11 @@ const CommentForm: React.FC<CommentFormProps> = ({
       >
         <SendIcon />
       </span>
-      {isSignInModalOpen && (
-        <SignInModal
-          isModalOpen={isSignInModalOpen}
-          closeModal={() => setSignInModalOpen(false)}
-          t={t}
-        />
-      )}
+      <SignInModal
+        isModalOpen={isSignInModalOpen}
+        closeModal={() => setSignInModalOpen(false)}
+        t={t}
+      />
     </div>
   );
 };

apps/forum/src/components/CreateThread.tsx

@@ -9,6 +9,8 @@ import SchoolFilterForm from "./common/SchoolFilter";
 import { Menu, Transition } from "@headlessui/react";
 import ThreadType from "@app/types/thread";
 import TagType from "@app/types/tag";
+import ImageIcon from "@mui/icons-material/Image";
+import threadPayload from "@app/types/threadPayload";
 
 interface CreateThreadProps {
   onNewThread: (newThread: ThreadType) => void;
@@ -29,6 +31,9 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
   const [selectedBoard, setSelectedBoard] = useState("");
   const [selectedTag, setSelectedTag] = useState<TagType | null>(null);
   const [selectedSchool, setSelectedSchool] = useState("");
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [fileType, setFileType] = useState<string | null>(null);
 
   // Tags and Group buttons might be best moved to their respective components but this is how I will leave it for now.
   const { boardSlug } = useParams();
@@ -81,6 +86,20 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
     setSelectedTag(tag);
   };
 
+  const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files ? e.target.files[0] : null;
+    if (file) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onloadend = () => {
+        const base64data = reader.result as string;
+        setSelectedFile(base64data); // Store the base64-encoded image
+        setFileType(file.type); // Store the MIME type of the file
+      };
+      setFileName(file.name); // Store the name of the selected file
+    }
+  };
+
   const handleSubmit = async () => {
     // Require a Board
     // If current board isn't chosen, then output this
@@ -125,18 +144,26 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
     }
 
     try {
+      const payload: threadPayload = {
+        body: textContent,
+        title: "default",
+        tag_id: "default",
+        group_id: selectedSchool,
+        univ_id: "1",
+        board_id: selectedBoard,
+      };
+
+      if (selectedFile) {
+        payload.image = selectedFile;
+        payload.contentType = fileType || "";
+        payload.fileName = fileName || "image";
+      }
       const response = await API.post(
         "wasedatime-dev",
         `/forum/${selectedBoard}`,
         {
           body: {
-            data: {
-              body: textContent,
-              title: "default",
-              tag_id: "default",
-              group_id: selectedSchool,
-              univ_id: "1",
-            },
+            data: payload,
           },
           headers: {
             "Content-Type": "application/json",
@@ -158,6 +185,10 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
       setTitleContent("");
       setTextContent("");
       setSelectedBoard("");
+      setSelectedSchool("");
+      setSelectedFile(null);
+      setFileType(null);
+      setFileName(null);
       setSelectedTag(null);
     } catch (error) {
       console.log(error);
@@ -308,6 +339,22 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
             ) : null}
             <p>{selectedSchool ? selectedSchool : "School"}</p>
           </button>
+          <div className="uploader">
+            <label htmlFor="imageUpload" className="cursor-pointer">
+              {fileName ? (
+                <span>{fileName}</span>
+              ) : (
+                <ImageIcon fontSize="large" />
+              )}
+            </label>
+            <input
+              type="file"
+              id="imageUpload"
+              accept="image/png, image/jpeg, image/gif" // allow only images
+              className="hidden"
+              onChange={handleImageChange}
+            />
+          </div>
         </div>
         <button
           className="border-light-main border mx-4 px-4 py-1 rounded-lg text-white bg-light-lighter hover:bg-light-darker text-3xl"

apps/forum/src/components/Thread.tsx

@@ -22,6 +22,12 @@ const Thread = () => {
       setUserToken(userId);
     }
 
+    let idToken = "";
+    if (idToken?.length <= 0) {
+      idToken = await getIdToken();
+      if (idToken?.length <= 0) return;
+    }
+
     // Wait for the state to update, then proceed with fetching
     // Fetch Threads
     await API.get(
@@ -31,6 +37,7 @@ const Thread = () => {
         headers: {
           "x-api-key": "0PaO2fHuJR9jlLLdXEDOyUgFXthoEXv8Sp0oNsb8",
           "Content-Type": "application/json",
+          Authorization: idToken,
         },
         response: true,
       }
@@ -73,6 +80,7 @@ const Thread = () => {
   return (
     <div className="border-2 mt-12 mx-auto rounded-xl shadow-lg py-6 h-fit px-4 standard-style max-w-2/5 w-5/6">
       {/* <CreateThread /> */}
+
       <ThreadBlock isPreview={false} thread={thread} />
       <CommentForm
         onNewComment={handleNewComment}

apps/forum/src/components/ThreadBlock.tsx

@@ -11,6 +11,8 @@ import TextsmsIcon from "@mui/icons-material/Textsms";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import boards from "@app/constants/boards.json";
 import ThreadType from "@app/types/thread";
+import { timeFormatter } from "@app/utils/timeFormatter";
+import ImageIcon from "@mui/icons-material/Image";
 
 type Props = {
   isPreview: boolean;
@@ -120,7 +122,6 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
         }
       );
       if (response && response.success) {
-        console.log(response);
         setUserLiked(!userLiked);
 
         if (userLiked) {
@@ -163,7 +164,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
   };
 
   const handleShare = () => {
-    const url = `${window.location.origin}/board/${thread.board_id}/${thread.thread_id}`;
+    const url = `${window.location.origin}/forum/${thread.board_id}/${thread.thread_id}`;
 
     navigator.clipboard.writeText(url).then(
       () => {
@@ -182,6 +183,7 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
 
   const navigate = useNavigate();
 
+  const time = timeFormatter(thread);
   const renderContent = () => {
     return (
       <div
@@ -202,9 +204,15 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
         {/* ^ This line goes to parent board on click while in thread */}
         <div className={`px-2`}>
           <div className="flex justify-between mt-2">
-            <h1 className="text-4xl font-bold mb-auto text-light-main dark:text-dark-main text-3xl">
-              {getTitleBySlug(thread.board_id)}
-            </h1>
+            <div className="flex items-center justify-center mb-auto gap-x-4">
+              <h1 className="text-4xl font-bold  text-light-main dark:text-dark-main text-3xl">
+                {getTitleBySlug(thread.board_id)}
+              </h1>
+
+              <ImageIcon
+                color={thread.obj_key || thread.url ? "success" : "inherit"}
+              />
+            </div>
             <div className="flex justify-center flex-col items-center">
               {/* ToDo: create component for tag within Thread Block */}
               {thread.group_id && (
@@ -229,19 +237,30 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
                   ) */}
             </div>
           </div>
+          {thread.url ? (
+            <img
+              src={thread.url}
+              alt="Thread Image"
+              className="block mx-auto p-4"
+            />
+          ) : null}
           <h2
             className="justify-left pt-4 text-light-text1 dark:text-dark-text1"
             style={{ whiteSpace: "pre-line" }}
           >
             {convertUrlsToLinks(isPreview, thread.body)}
           </h2>
+          <h2 className="text-lg mt-5">Posted at {time}</h2>
         </div>
         {/* <div className="inline-block text-blue-600 rounded-lg pl-2 pt-2">
               {" "}
               {`# ${thread.tag_id}`}
             </div> */}
         <hr className="mx-2 pt-2 mt-6" />
+        {/* horizontal line break */}
         <div className="flex flex-row justify-evenly pt-2 items-center">
+          {/* The down panel that has like button, views in total, etc...*/}
+
           <div className="flex flex-row items-center justify-center">
             <button onClick={handleLike} className="clipboard-icon group">
               <Favorite

apps/forum/src/types/thread.ts

@@ -14,6 +14,8 @@ type ThreadType = {
   total_likes?: number;
   comment_count?: number;
   new_comment?: boolean;
+  obj_key?: string;
+  url?: string;
 };
 
 export default ThreadType;

apps/forum/src/types/threadPayload.ts

@@ -0,0 +1,12 @@
+type threadPayload = {
+  body: string;
+  title: string;
+  tag_id: string;
+  group_id: string;
+  univ_id: string;
+  board_id: string;
+  image?: File;
+  contentType?: string;
+  fileName?: string;
+};
+export default threadPayload;

apps/forum/src/utils/timeFormatter.tsx

@@ -0,0 +1,28 @@
+import CommentType from "@app/types/comment";
+import ThreadType from "@app/types/thread";
+
+type threadOrComment = CommentType | ThreadType;
+
+export function timeFormatter(newComment: threadOrComment): string {
+  const utcTimestamp = newComment.created_at;
+  const date = new Date(utcTimestamp);
+
+  // Add 9 hours to UTC time
+  date.setUTCHours(date.getUTCHours() + 9);
+
+  // Extract year, month, date, hours, and minutes
+  const year = date.getUTCFullYear();
+  const month = date.getUTCMonth() + 1; // Months are 0-based, so add 1
+  const day = date.getUTCDate();
+  const hours = date.getUTCHours();
+  const minutes = date.getUTCMinutes();
+
+  // Format the components as a string
+  const formattedTimestamp = `${year}-${month.toString().padStart(2, "0")}-${day
+    .toString()
+    .padStart(2, "0")} ${hours.toString().padStart(2, "0")}:${minutes
+    .toString()
+    .padStart(2, "0")}`;
+
+  return formattedTimestamp;
+}