fixed spa

Backend/Apps/SocialMedia/urls.py

@@ -0,0 +1,8 @@
+
+from django.urls import path
+
+from . import views
+
+urlpatterns = [
+    path('',views.index, name='socialmedia'),
+]

Backend/Backend/settings.py

@@ -39,7 +39,8 @@
     'django.contrib.staticfiles',
     "Apps.Auth.apps.AuthConfig",
     'Apps.Home.apps.HomeConfig',
-    "Apps.Profile.apps.ProfileConfig"
+    "Apps.Profile.apps.ProfileConfig",
+    "Apps.SocialMedia.apps.SocialMediaConfig"
 ]
 
 MIDDLEWARE = [

Backend/Backend/urls.py

@@ -22,4 +22,5 @@
     path('auth/', include('Apps.Auth.urls')),
     path('', include('Apps.Home.urls')),
     path('profile/', include('Apps.Profile.urls')),
+    path('socialmedia/', include('Apps.SocialMedia.urls')),
 ]

Backend/static/scripts/login.js

@@ -1,4 +1,5 @@
 import {loadPage, API_URL,getCookie, setCookie} from "./spa.js";
+import {notify} from "../components/Notification.js";
 
 async function loginForm(event)
 {
@@ -39,6 +40,7 @@ const App = async () => {
     {
         console.log('tokens exist')
         loadPage('home');
+        notify('Already logged in', 3, 'success')
     }
     const form = document.getElementById('login-form');
     form.addEventListener('submit', loginForm);

Backend/static/scripts/social.js

@@ -0,0 +1,82 @@
+import {API_URL, getCookie, loadPage} from "./spa.js";
+import {notify} from "../components/Notification.js";
+import BaseComponent from "../components/Component.js";
+import {request} from "./Request.js";
+class ChatFriendsComponent extends  BaseComponent{
+    constructor(state,parentElement = null) {
+        super(state,parentElement);
+        this.html = this.handleHTML()
+    }
+    handleHTML()
+    {
+        return `
+              ${this.state.friends.map(friend => `
+                <div class="user-wrapper">
+                  <div class="user-pic-wrapper">
+                    <img
+                      src="https://picsum.photos/seed/picsum/200/300"
+                      alt=""
+                    />
+                  </div>
+                  <div class="user-info-wrapper">
+                    <div
+                      class="d-flex align-items-center justify-content-center gap-2"
+                    >
+                      <h6>${friend.nickname.length <=0 ? friend.user.username: friend.nickname}</h6>
+                      <div class="online-icon"></div>
+                    </div>
+                    <span>Active Now</span>
+            </div>
+            </div>
+              `).join('')}
+`
+    }
+    render() {
+        super.render();
+    }
+    setState(newState)
+    {
+        this.state = {...this.state, ...newState};
+        this.html = this.handleHTML();
+        this.render();
+    }
+}
+const fetchChatFriends = async () => {
+    const endpoint = `${API_URL}/profile/friends`;
+    try {
+        let response = await request(endpoint, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${JSON.parse(getCookie('tokens')).access}`
+            }
+        });
+        let parentElement = document.getElementById('user-data-wrapper');
+        let chatFriendsComponent = new ChatFriendsComponent({friends: response},parentElement);
+        let input = document.getElementById('friend-search-input');
+        input.addEventListener('keyup', async (event) => {
+            let value = event.target.value;
+               let filteredFriends = response.filter(friend => {
+        let nameToCheck = friend.nickname.length > 0 ? friend.nickname : friend.user.username;
+        return nameToCheck.toLowerCase().includes(value.toLowerCase());
+    });
+            chatFriendsComponent.setState({friends: filteredFriends});
+        });
+        chatFriendsComponent.render();
+
+    }
+    catch (error) {
+        console.error('Error:', error);
+    }
+
+}
+const App = async () => {
+    if(!getCookie("tokens"))
+    {
+        loadPage('login');
+        notify('Please login to continue', 3, 'error')
+    }
+    await fetchChatFriends();
+}
+
+document.addEventListener('DOMContentLoaded', App);

Backend/static/styles/social.css

@@ -1,6 +1,6 @@
 .social-background {
   background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
-    url("/public/inside.jpg") !important;
+    url("/static/public/inside.jpg") !important;
 }
 .users-wrapper {
   height: 100%;

Backend/templates/home/home.html

@@ -55,7 +55,9 @@ <h1>WELCOME TO PONG</h1>
                 MULTIPLAYER
               </button>
               <button class="play-button">SINGLEPLAYER</button>
-              <button class="play-button">SOCIAL</button>
+              <pong-redirect href="social">
+                  <button class="play-button">SOCIAL</button>
+              </pong-redirect>
             </div>
           </div>
         </div>