Link inbox page

backend/inbox/backend.py

@@ -9,4 +9,13 @@ def get_inbox(user_id, id=0):
     if id != 0:
         return InboxEntry.objects.get(pk=id, user=user)
 
-    return InboxEntry.objects.filter(user=user)
+    ibox_entry = InboxEntry.objects.filter(user=user)
+    ibox_list = []
+
+    for i in ibox_entry:
+        user_from = User.objects.get(pk=i.userFrom_id)
+        i = model_to_dict(i)
+        i["userFrom"] = model_to_dict(user_from)
+        ibox_list.append(i)
+
+    return ibox_list

backend/inbox/migrations/0005_inboxentry_userfrom_alter_inboxentry_user.py

@@ -0,0 +1,25 @@
+# Generated by Django 5.0 on 2024-01-25 02:03
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('inbox', '0004_inboxentry_title'),
+        ('users', '0014_user_dateofbirth'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='inboxentry',
+            name='userFrom',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, to='users.user'),
+        ),
+        migrations.AlterField(
+            model_name='inboxentry',
+            name='user',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='user', to='users.user'),
+        ),
+    ]

backend/inbox/models.py

@@ -5,7 +5,8 @@
 class InboxEntry(models.Model):
     message = models.TextField()
     title = models.TextField(null=True)
-    user = models.ForeignKey(User, on_delete=models.CASCADE)
+    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='user')
+    userFrom = models.ForeignKey(User, on_delete=models.CASCADE, null=True)
     timestamp = models.DateTimeField(auto_now_add=True)
 
     class Meta:

backend/inbox/views.py

@@ -33,4 +33,4 @@ def get_inbox_entry(request, id):
 def get_inbox(request):
     inbox = backend.get_inbox(request.user.id, 0)
 
-    return Response(list(inbox.values()))
+    return Response(inbox)

backend/wills/backend.py

@@ -49,12 +49,14 @@ def date_check():
 
                 InboxEntry.objects.create(
                         user=inheritor,
+                        userFrom=owner,
                         message=i.message,
                         title=i.title
                     )
 
                 Notification.objects.create(
                         user=inheritor,
+                        userFrom=user,
                         message=f"You have new will from {owner.email}. Check your inbox."
                     )
 
@@ -102,6 +104,7 @@ def update_will(data, user, id):
 
         InboxEntry.objects.create(
                 user=inheritor,
+                userFrom=owner,
                 message=will.message,
                 title=will.title
             )
@@ -162,6 +165,7 @@ def add_new_will(data, user):
 
         InboxEntry.objects.create(
                 user=inheritor,
+                userFrom=owner,
                 message=will.message,
                 title=will.title
             )

frontend/src/components/InboxEntry.jsx

@@ -0,0 +1,16 @@
+
+
+export default function InboxEntry(props) {
+
+    return(
+        <>
+            <div onClick={() => props.click(props.id)} className="flex gap-3 hover:scale-105 duration-75 active:scale-100 select-none cursor-pointer">
+                <img src={`https://ui-avatars.com/api/?name=${props.user.name}&size=40`} className="rounded-full" alt="" width={40} />
+                <div className="self-center flex grow basis-[0%] flex-col items-stretch my-auto">
+                    <div className="text-zinc-500 text-xs font-medium">{props.user.name}</div>
+                    <div className="text-white text-sm font-medium whitespace-nowrap mt-1.5">{props.user.username}</div>
+                </div>
+            </div>
+        </>
+    )
+}

frontend/src/routes/Inbox.jsx

@@ -1,18 +1,25 @@
 import { useState, useEffect } from "react"
 import axios from "axios"
-import Nav from "../components/Nav" 
+import Nav from "../components/Nav"
+import InboxEntry from "../components/InboxEntry"
 
 export default function Inbox() {
-    let [user, setUser] = useState({})
+    let [inbox, setInbox] = useState([{userFrom: "None"}])
+    let [inboxIndex, setInboxIndex] = useState(0)
 
     useEffect(() => {
-        axios.get(`${import.meta.env.VITE_BASE_URL_BACKEND}/api/v1/users/current`, {withCredentials: true}).then((res) => {
-            setUser(res.data)
+        axios.get(`${import.meta.env.VITE_BASE_URL_BACKEND}/api/v1/inbox/get`, { withCredentials: true }).then((res) => {
+            setInbox(res.data.reverse())
         })
-        
+
     }, [])
+
+    const selectInbox = (index) => {
+        setInboxIndex(index)
+    }
+
     return (
-        <> 
+        <>
             <img src="/finalize3.png" className="fixed right-0 bottom-0 select-none" draggable={false} alt="" />
             <img src="/finalize2.png" className="fixed left-[25%] bottom-0 select-none" draggable={false} alt="" />
             <img src="/Eclipse.png" className="fixed left-[25%] top-0 select-none" draggable={false} alt="" />
@@ -22,66 +29,54 @@ export default function Inbox() {
 
                 <div className="w-full min-h-screen bg-[#030016] flex flex-col max-lg:mt-[80px]">
                     <h1 className="self-stretch flex w-[full] shrink-0 h-[full] flex-col" />
-                
+
                     <div className="self-center z-10">
                         <h1 className="z-10 text-6xl mt-[60px] font-bold">
                             Dashboard
                         </h1>
 
                         <div className="bg-[#1C1C1C60] z-10 mt-12 px-6 py-8 rounded-2xl max-md:max-w-full max-md:mt-10 max-md:px-5">
-
                             <div className="gap-5 flex max-md:flex-col max-md:items-stretch max-md:gap-0">
                                 <div className="flex flex-col items-stretch w-[33%] max-md:w-full max-md:ml-0">
                                     <div className="bg-[#ffffff05] z-10 flex grow flex-col w-full pl-7 pr-6 pt-8 pb-12 rounded-xl max-md:max-w-full max-md:mt-10 max-md:px-5"                                  >
-                                        <h2 className="text-white font-bold text-2xl whitespace-nowrap self-start max-md:ml-2.5">
-                                            Inbox
-                                        </h2>
-
-                                        <p className="text-white font-semibold text-sm leading-7 whitespace-nowrap ml-6 mt-6 self-start max-md:ml-2.5">
-                                                Recent
-                                        </p>
-
-                                        <div className="self-stretch flex items-stretch justify-between gap-3.5 mt-5">
-                                        <img src={`https://ui-avatars.com/api/?name=${user.name}&size=60`} className="rounded-full" alt="" width={40} />
-                                                <div className="self-center flex grow basis-[0%] flex-col items-stretch my-auto">
-                                                    <div className="text-zinc-500 text-xs font-medium">{user.name}</div>
-                                                <div className="text-white text-sm font-medium whitespace-nowrap mt-1.5">{user.username}</div>
-                                        </div>
+                                        <h2 className="text-white font-bold text-2xl whitespace-nowrap self-start max-md:ml-2.5">Inbox</h2>
 
-                                <div className="text-slate-500 text-xs font-medium whitespace-nowrap bg-gray-700 justify-center items-stretch mt-1 pl-3.5 pr-5 py-1.5 rounded-2xl self-start">2:12 PM</div>
-                            </div>
-
-                        </div>
-                    </div>
+                                        <p className="text-white font-semibold text-sm leading-7 whitespace-nowrap ml-6 mt-6 self-start max-md:ml-2.5">Recent </p>
 
-                    <section className="bg-[#ffffff05] z-10 flex grow flex-col w-full pl-16 pr-20 py-12 rounded-xl items-start max-md:max-w-full max-md:mt-10 max-md:px-5">
-                        <div className="flex w-[117px] max-w-full items-stretch gap-4">
-                            <img src={`https://ui-avatars.com/api/?name=${user.name}&size=60`} className="rounded-full" alt="" width={60} />
+                                        <div className="self-stretch flex flex-col items-stretch justify-between gap-8 mt-5">
+                                            {
+                                                inbox.map((ib, index) => {
+                                                    return <InboxEntry click={selectInbox} id={index} user={ib.userFrom}/>
+                                                })
+                                            }
+                                        </div>
+                                    </div>
+                                </div>
 
-                            <div className="text-white font-medium text-sm mt-3.5 self-start">
-                            {user.name}
-                            </div>
+                                <section className="bg-[#ffffff05] z-10 flex grow flex-col w-full pl-16 pr-20 py-12 rounded-xl items-start max-md:max-w-full max-md:mt-10 max-md:px-5">
+                                    <div className="flex w-[117px] max-w-full items-stretch gap-4">
+                                        <img src={`https://ui-avatars.com/api/?name=${inbox[inboxIndex]["userFrom"].name}&size=60`} className="rounded-full" alt="" width={60} />
 
-                        </div>
+                                        <div className="text-white font-medium text-sm mt-3.5 self-start">
+                                            {inbox[inboxIndex]["userFrom"].name}
+                                        </div>
 
-                        <div className="text-gray-600 text-xs font-medium mt-6 max-md:max-w-full">
-                            3:30 PM
-                        </div>
+                                    </div>
 
-                        <h2 className="text-white text-2xl font-bold mt-6 max-md:max-w-full">
-                            Main theme
-                        </h2>
+                                    <h2 className="text-white text-2xl font-bold mt-6 max-md:max-w-full">
+                                        {inbox[inboxIndex].title}
+                                    </h2>
 
-                        <div className="text-neutral-400 text-sm leading-7 w-[726px] ml-3 mt-3.5 max-md:ml-2.05 font-semibold">
-                            Message
-                        </div>
+                                    <div className="text-neutral-400 text-sm leading-7 w-[726px] ml-3 mt-3.5 max-md:ml-2.05 font-semibold">
+                                        {inbox[inboxIndex].message}
+                                    </div>
 
-                    </section>
-                </div>  
-                </div>
+                                </section>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </>
     );
-}
+}