From f073235372cc8905b2f476c00884f5b1ae5889e1 Mon Sep 17 00:00:00 2001
From: Vuyisile Ndlovu <terrameijar@gmail.com>
Date: Sat, 27 Jan 2024 00:07:29 +0200
Subject: [PATCH 1/3] Start work on user list view in the frontend

---
 backend/api/serializers.py       | 22 ++++++++++++++++------
 backend/api/views.py             |  2 +-
 backend/chitchat/settings.py     |  9 ++++++++-
 frontend/src/App.jsx             |  2 ++
 frontend/src/pages/UsersList.jsx | 25 +++++++++++++++++++++++++
 5 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/pages/UsersList.jsx

diff --git a/backend/api/serializers.py b/backend/api/serializers.py
index 3c41dc0..0b560f2 100644
--- a/backend/api/serializers.py
+++ b/backend/api/serializers.py
@@ -19,17 +19,27 @@ class Meta:
         ]
 
 
+class FollowerSerializer(serializers.ModelSerializer):
+    url = serializers.HyperlinkedIdentityField(
+        view_name="api:profile-detail", lookup_field="pk"
+    )
+    username = serializers.SerializerMethodField()
+
+    def get_username(self, obj):
+        return f"{obj.user.username}"
+
+    class Meta:
+        model = Profile
+        fields = ["username", "url"]
+
+
 class ProfileSerializer(serializers.ModelSerializer):
     url = serializers.HyperlinkedIdentityField(
         view_name="api:profile-detail", lookup_field="pk"
     )
     user = serializers.SerializerMethodField()
-    follows = serializers.HyperlinkedIdentityField(
-        view_name="api:profile-detail", lookup_field="pk", many=True
-    )
-    followers = serializers.HyperlinkedIdentityField(
-        view_name="api:profile-detail", lookup_field="pk", many=True
-    )
+    follows = FollowerSerializer(many=True, read_only=True)
+    followers = FollowerSerializer(many=True, read_only=True)
 
     def get_user(self, obj):
         return obj.user.username
diff --git a/backend/api/views.py b/backend/api/views.py
index aa07165..8d2971c 100644
--- a/backend/api/views.py
+++ b/backend/api/views.py
@@ -58,7 +58,7 @@ class ProfileList(generics.ListAPIView):
 
     queryset = Profile.objects.all()
     serializer_class = ProfileSerializer
-    permission_classes = [permissions.IsAuthenticated]
+    # permission_classes = [permissions.IsAuthenticated]
 
 
 class ProfileDetail(generics.RetrieveAPIView):
diff --git a/backend/chitchat/settings.py b/backend/chitchat/settings.py
index f0aff5a..804c188 100644
--- a/backend/chitchat/settings.py
+++ b/backend/chitchat/settings.py
@@ -42,6 +42,7 @@
     "django.contrib.staticfiles",
     # Third Party apps
     "rest_framework",
+    "corsheaders",
     # Local apps
     "api",
     "accounts",
@@ -51,6 +52,7 @@
 
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
+    "corsheaders.middleware.CorsMiddleware",  # CORS
     "django.contrib.sessions.middleware.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",
@@ -139,6 +141,11 @@
     # Use Django's standard `django.contrib.auth` permissions,
     # or allow read-only access for unauthenticated users.
     "DEFAULT_PERMISSION_CLASSES": [
-        "rest_framework.permissions.IsAuthenticated",
+        # "rest_framework.permissions.IsAuthenticated",
     ]
 }
+
+
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:5173",
+]
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a99d674..74f0482 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,10 +1,12 @@
 import Login from "./pages/auth";
+import UsersList from "./pages/UsersList";
 import { Routes, Route } from "react-router-dom";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Login />} />;
+      <Route path="/users" element={<UsersList />} />
     </Routes>
   );
 }
diff --git a/frontend/src/pages/UsersList.jsx b/frontend/src/pages/UsersList.jsx
new file mode 100644
index 0000000..e81c3ce
--- /dev/null
+++ b/frontend/src/pages/UsersList.jsx
@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react";
+
+function UsersList() {
+    const [users, setUsers] = useState([]);
+
+    useEffect(() => {
+        fetch('http://127.0.0.1:9000/api/profiles/')
+            .then(response => response.json())
+            .then(data => setUsers(data));
+
+    }, []);
+
+    return (
+        <div>
+            <h1>Users</h1>
+            <ul>
+                {users.map(user => (
+                    <li key={user.id}>{user.user}</li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+export default UsersList;
\ No newline at end of file

From f1ac37d5bc045347ca3ab97e25894950112eeb51 Mon Sep 17 00:00:00 2001
From: Vuyisile Ndlovu <terrameijar@gmail.com>
Date: Sat, 27 Jan 2024 00:09:50 +0200
Subject: [PATCH 2/3] add dummy db

---
 backend/db.sqlite3.bak | Bin 0 -> 155648 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 backend/db.sqlite3.bak

diff --git a/backend/db.sqlite3.bak b/backend/db.sqlite3.bak
new file mode 100644
index 0000000000000000000000000000000000000000..0bb7db1dc04e27503d544107312947b280945c98
GIT binary patch
literal 155648
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

literal 0
HcmV?d00001


From 274f8fe1c1c3544c9bc136ba7b65025b9acd829d Mon Sep 17 00:00:00 2001
From: Vuyisile Ndlovu <terrameijar@gmail.com>
Date: Sat, 27 Jan 2024 14:16:39 +0200
Subject: [PATCH 3/3] Added sign up view

---
 Contributors.md                               |  3 +
 README.md                                     | 13 ++++
 backend/accounts/admin.py                     |  1 +
 .../migrations/0003_alter_profile_follows.py  | 19 ++++++
 backend/accounts/models.py                    |  3 +
 backend/api/serializers.py                    | 16 +----
 backend/api/urls.py                           |  1 +
 backend/api/views.py                          | 15 +++++
 frontend/src/App.jsx                          |  2 +
 frontend/src/components/auth/index.jsx        | 14 ++++-
 .../src/components/registration/index.jsx     | 59 ++++++++++++++++++-
 frontend/src/pages/Signup/index.jsx           |  6 ++
 12 files changed, 136 insertions(+), 16 deletions(-)
 create mode 100644 Contributors.md
 create mode 100644 backend/accounts/migrations/0003_alter_profile_follows.py
 create mode 100644 frontend/src/pages/Signup/index.jsx

diff --git a/Contributors.md b/Contributors.md
new file mode 100644
index 0000000..302b67f
--- /dev/null
+++ b/Contributors.md
@@ -0,0 +1,3 @@
+# Contributors 
+
+## This project is a result of the hard work of the following volunteers
diff --git a/README.md b/README.md
index fb9a0bc..91fa6f8 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@ ChitChat is a Python-powered Social Network.
 
 ## Installation
 
+### Backend
+
 1. cd into backend folder
     ```cd backend```
 
@@ -38,6 +40,17 @@ To run this project do the following:
     ```python manage.py runserver```
 
 
+### FrontEnd
+1. cd into the frontend folder
+```cd frontend```
+
+2. Install dependencies
+```npm install```
+
+3. Run the development server
+```npm run dev```
+
+
 
 ## Contributing
 
diff --git a/backend/accounts/admin.py b/backend/accounts/admin.py
index b989fff..8a2651f 100644
--- a/backend/accounts/admin.py
+++ b/backend/accounts/admin.py
@@ -21,3 +21,4 @@ class CustomUserAdmin(UserAdmin):
 
 admin.site.register(CustomUser, CustomUserAdmin)
 admin.site.unregister(Group)
+admin.site.register(Profile)
diff --git a/backend/accounts/migrations/0003_alter_profile_follows.py b/backend/accounts/migrations/0003_alter_profile_follows.py
new file mode 100644
index 0000000..f11234c
--- /dev/null
+++ b/backend/accounts/migrations/0003_alter_profile_follows.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.2.4 on 2024-01-26 20:49
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("accounts", "0002_profile"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="profile",
+            name="follows",
+            field=models.ManyToManyField(
+                blank=True, related_name="followers", to="accounts.profile"
+            ),
+        ),
+    ]
diff --git a/backend/accounts/models.py b/backend/accounts/models.py
index e298736..57f0d88 100644
--- a/backend/accounts/models.py
+++ b/backend/accounts/models.py
@@ -17,3 +17,6 @@ class Profile(models.Model):
 
     def __str__(self):
         return f" {self.user.username} - Profile"
+
+    class Meta:
+        ordering = ["-pk"]
diff --git a/backend/api/serializers.py b/backend/api/serializers.py
index 0b560f2..479e2f5 100644
--- a/backend/api/serializers.py
+++ b/backend/api/serializers.py
@@ -2,21 +2,11 @@
 from rest_framework import serializers
 
 
-class UserSerializer(serializers.HyperlinkedModelSerializer):
-    url = serializers.HyperlinkedIdentityField(
-        view_name="api:user-detail",
-        lookup_field="pk",
-    )
-
+class UserSerializer(serializers.ModelSerializer):
     class Meta:
         model = CustomUser
-        lookup_field = "pk"
-        fields = [
-            "username",
-            "email",
-            "pk",
-            "url",
-        ]
+        # lookup_field = "pk"
+        exclude = ["password", "groups", "user_permissions", "is_staff", "is_active"]
 
 
 class FollowerSerializer(serializers.ModelSerializer):
diff --git a/backend/api/urls.py b/backend/api/urls.py
index 5e67e03..2f808bb 100644
--- a/backend/api/urls.py
+++ b/backend/api/urls.py
@@ -10,6 +10,7 @@
     path("api/users/", views.CustomUserList.as_view(), name="users"),
     path("api/users/<int:pk>/", views.CustomUserDetail.as_view(), name="user-detail"),
     path("api/profiles/", views.ProfileList.as_view(), name="profiles"),
+    path("api/signup", views.SignUpView.as_view(), name="signup-view"),
     path(
         "api/profiles/<int:pk>/", views.ProfileDetail.as_view(), name="profile-detail"
     ),
diff --git a/backend/api/views.py b/backend/api/views.py
index 8d2971c..41d5782 100644
--- a/backend/api/views.py
+++ b/backend/api/views.py
@@ -116,3 +116,18 @@ def post(self, request, username):
             {"message": f"you're no longer following {profile.user.username}"},
             status=200,
         )
+
+
+class SignUpView(APIView):
+    """
+    username: str
+    email: str
+    password: str
+    """
+
+    def post(self, request):
+        serializer = UserSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=201)
+        return Response(serializer.errors, status=400)
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 74f0482..dfae9d2 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,4 +1,5 @@
 import Login from "./pages/auth";
+import SignUpView from "./pages/Signup";
 import UsersList from "./pages/UsersList";
 import { Routes, Route } from "react-router-dom";
 
@@ -7,6 +8,7 @@ function App() {
     <Routes>
       <Route path="/" element={<Login />} />;
       <Route path="/users" element={<UsersList />} />
+      <Route path="/signup" element={<SignUpView />} />
     </Routes>
   );
 }
diff --git a/frontend/src/components/auth/index.jsx b/frontend/src/components/auth/index.jsx
index 633ec01..7259a9d 100644
--- a/frontend/src/components/auth/index.jsx
+++ b/frontend/src/components/auth/index.jsx
@@ -1,14 +1,23 @@
 import { Button, Card, TextInput, Avatar } from "flowbite-react";
+import { useState } from "react";
 
 export default function Login() {
-  return (
+  const [data, setData] = useState({
+    email: "",
+    password: ""
+  })
+
+  const onChange = (e) => {
+    setData({ ...data, [e.target.id]: e.target.value })
+  }
+  return (<>
     <center style={{ marginTop: "250px" }}>
       <Card className="max-w-md">
         <Avatar img="/user.png" rounded size="xl" />
         <h3 className="text-center text-xl mb-4 mt-4">Welcome to Chit-Chat</h3>
         <form className="flex flex-col gap-4">
           <div>
-            <TextInput id="email" placeholder="Email" required type="email" />
+            <TextInput id="email" placeholder="Email" required type="email" onChange={onChange} />
           </div>
           <div>
             <TextInput
@@ -23,5 +32,6 @@ export default function Login() {
         </form>
       </Card>
     </center>
+  </>
   );
 }
diff --git a/frontend/src/components/registration/index.jsx b/frontend/src/components/registration/index.jsx
index 1ad3195..2c065d6 100644
--- a/frontend/src/components/registration/index.jsx
+++ b/frontend/src/components/registration/index.jsx
@@ -1,3 +1,60 @@
+import { Button, Card, TextInput, Avatar } from "flowbite-react";
+import { useState } from "react";
+import axios from "axios"
+
 export default function Registration() {
-  return <div>Registration</div>;
+  const [data, setData] = useState({
+    email: "",
+    password: "",
+    first_name: "",
+    last_name: "",
+    username: "",
+  })
+
+  const onChange = (e) => {
+    setData({ ...data, [e.target.id]: e.target.value })
+  }
+
+  const onSubmit = () => {
+    if (data.email === "" || data.password === "" || data.first_name === "" || data.last_name === "" || data.username === "") (
+      alert("All fields are required")
+    )
+    axios.post("http://localhost:8000/api/signup", data).then((res) => {
+      alert("Successfully signed up")
+    }).catch((err) => {
+      alert("Failed to submit")
+    })
+  }
+
+  return <center style={{ marginTop: "250px" }}>
+    <Card className="max-w-md">
+      <Avatar img="/user.png" rounded size="xl" />
+      <h3 className="text-center text-xl mb-4 mt-4">Welcome to Chit-Chat</h3>
+      <form className="flex flex-col gap-4">
+        <div>
+          <TextInput id="first_name" placeholder="First Name" required type="text" onChange={onChange} />
+        </div>
+        <div>
+          <TextInput id="last_name" placeholder="Last Name" required type="text" onChange={onChange} />
+        </div>
+        <div>
+          <TextInput id="username" placeholder="Username" required type="text" onChange={onChange} />
+        </div>
+        <div>
+          <TextInput id="email" placeholder="Email" required type="email" onChange={onChange} />
+        </div>
+        <div>
+          <TextInput
+            id="password"
+            required
+            type="password"
+            placeholder="Password"
+            onChange={onChange}
+          />
+        </div>
+
+        <Button onClick={onSubmit}>Register</Button>
+      </form>
+    </Card>
+  </center>
 }
diff --git a/frontend/src/pages/Signup/index.jsx b/frontend/src/pages/Signup/index.jsx
new file mode 100644
index 0000000..ced247a
--- /dev/null
+++ b/frontend/src/pages/Signup/index.jsx
@@ -0,0 +1,6 @@
+import Registration from "../../components/registration";
+
+
+export default function SignUpView() {
+    return <Registration />
+}
\ No newline at end of file