Recent Activity - API

Author: shadowctrl

src/app/api/discord/route.ts

@@ -39,7 +39,12 @@ export const POST = async (request: Request) => {
   var channelData = await fs.readFile(channelDataPath, "utf8");
   const { discordId }: { discordId: string } = JSON.parse(channelData);
   const { text, date, msgChannel, msgId } = await request.json();
-  const updateData = { msgId, text, date, msgChannel };
+  const dateLocale = new Date(date * 1000).toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+  const updateData = { msgId, text, dateLocale, msgChannel };
   try {
     await fetch(discordId, {
       method: "POST",

src/app/api/recentMessage/route.ts

@@ -5,6 +5,6 @@ const recentMsgPath = path.join(process.cwd(), "src/logs/recentMsg.json");
 export const GET = async (request: Request) => {
   const recentMsg = await fs.readFile(recentMsgPath, "utf8");
   const recentMsgJson = JSON.parse(recentMsg);
-  console.log(recentMsg, recentMsgJson);
-  return new Response("hello", { status: 200 });
+
+  return Response.json(recentMsgJson, { status: 200 });
 };

src/app/globals.css

@@ -210,9 +210,27 @@ body {
   display: flex;
   flex-direction: column;
   gap: 3vh;
-  padding-left: 10px;
+  padding: 0 10px;
 }
 
+.recents-item-container {
+  display: flex;
+  gap: 5vw;
+  align-items: center;
+  justify-content: space-between;
+  transition: all 0.2s ease-in-out;
+}
+
+.recents-text {
+  font-weight: 700;
+  opacity: 0.7;
+  max-height: 3vh;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  text-align: center;
+}
 .recents-item-head {
   display: flex;
   gap: 1vw;

src/app/page.tsx

@@ -8,17 +8,11 @@ const Timer = dynamic(() => import("@/lib/timer"), {
   loading: () => <p>Loading...</p>,
 });
 
-const data = [
-  { content: "Hello", status: "success" },
-  { content: "hi", status: "success" },
-  { content: "hello", status: "success" },
-  { content: "hi", status: "failed" },
-  { content: "hello", status: "success" },
-];
-
 export default async function Home() {
-  // await fetch("http://localhost:3000/api/recentMessage");
-
+  const res = await fetch("http://localhost:3000/api/recentMessage", {
+    cache: "no-cache",
+  });
+  const Data = await res.json();
   return (
     <div className="App-main">
       <div className="hero-head">
@@ -56,32 +50,24 @@ export default async function Home() {
             <span>Handled 265 messages Last month</span>
           </h2>
           <div className="recents-components">
-            <div className="recents-item-head">
-              <Avatar>
-                <AvatarImage
-                  style={{ scale: 1.3 }}
-                  src="https://i.pinimg.com/originals/cc/6a/f2/cc6af2b47a62e61e1154a4726299ba46.jpg"
-                />
-                <AvatarFallback>CN</AvatarFallback>
-              </Avatar>
-              <div>
-                <h2>Raghav</h2>
-                <p>admin@shadowctrl.me</p>
-              </div>
-            </div>
-            <div className="recents-item-head">
-              <Avatar>
-                <AvatarImage
-                  style={{ scale: 1.3 }}
-                  src="https://i.pinimg.com/originals/cc/6a/f2/cc6af2b47a62e61e1154a4726299ba46.jpg"
-                />
-                <AvatarFallback>CN</AvatarFallback>
-              </Avatar>
-              <div>
-                <h2>Raghav</h2>
-                <p>admin@shadowctrl.me</p>
+            {Data.map((data: any, key: number) => (
+              <div key={key} className="recents-item-container">
+                <div className="recents-item-head">
+                  <Avatar>
+                    <AvatarImage
+                      style={{ scale: 1.3 }}
+                      src="https://i.pinimg.com/originals/cc/6a/f2/cc6af2b47a62e61e1154a4726299ba46.jpg"
+                    />
+                    <AvatarFallback>CN</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <h2>{data.msgChannel}</h2>
+                    <p>{data.dateLocale}</p>
+                  </div>
+                </div>
+                <h2 className="recents-text">{data.text}</h2>
               </div>
-            </div>
+            ))}
           </div>
         </div>
       </div>

src/lib/telegramHelper.json

@@ -1,3 +1,3 @@
 {
-  "update_id": 19846357
+  "update_id": 19846376
 }

src/logs/recentMsg.json

@@ -1,32 +1,31 @@
 [
   {
-    "msgId": 19846353,
-    "text": "2",
-    "date": 1721287164,
+    "msgId": 19846369,
+    "text": "Hmm",
+    "dateLocale": "09:41:30 PM",
     "msgChannel": "MirrorBridge"
   },
   {
-    "msgId": 19846354,
-    "text": "3",
-    "date": 1721287165,
+    "msgId": 19846372,
+    "text": "Hi",
+    "dateLocale": "09:44:04 PM",
     "msgChannel": "MirrorBridge"
   },
   {
-    "msgId": 19846355,
-    "text": "4",
-    "date": 1721287166,
+    "msgId": 19846374,
+    "text": "Dear Applicant,\n\nWelcome to ONLINE ADMISSION PORTAL.\n\nExisting Users:\n\nLogin with the username (Application Number)\nPassword is your date of birth in format DDMMYYYY.\n(Eg. If your date of birth is 3rd April 2002 password format is 03042002).",
+    "dateLocale": "09:48:13 PM",
     "msgChannel": "MirrorBridge"
   },
   {
-    "msgId": 19846356,
-    "text": "5",
-    "date": 1721287167,
+    "msgId": 19846375,
+    "dateLocale": "09:48:41 PM",
     "msgChannel": "MirrorBridge"
   },
   {
-    "msgId": 19846357,
-    "text": "6",
-    "date": 1721287169,
+    "msgId": 19846376,
+    "text": "Is there any one who got the losss please send me the screen shot",
+    "dateLocale": "09:49:26 PM",
     "msgChannel": "MirrorBridge"
   }
 ]