Post, Update, Delete Projects Frontend

backend/bitmatch/settings.py

@@ -30,7 +30,7 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ["*"]
+ALLOWED_HOSTS = ["localhost", "127.0.0.1", "bitmatchapp.com", "www.bitmatchapp.com"]
 
 REST_FRAMEWORK = {
     "DEFAULT_AUTHENTICATION_CLASSES": (

backend/projects/migrations/0014_alter_project_id.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.1.7 on 2025-03-31 06:06
+
+import uuid
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('projects', '0013_rename_project_id_project_id'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='project',
+            name='id',
+            field=models.CharField(default=uuid.uuid4, editable=False, max_length=36, primary_key=True, serialize=False),
+        ),
+    ]

backend/projects/models.py

@@ -5,7 +5,7 @@
 # PROJECTS MODEL
 class Project(models.Model):
     # Auto generated
-    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)  
+    id=models.CharField(primary_key=True,default=uuid.uuid4, editable=False, max_length=36)
 
     # REQUIRED
     title = models.CharField(max_length=255, blank=False, null=False)

backend/projects/views.py

@@ -27,7 +27,13 @@ def post(self, request):
         if serializer.is_valid():
             serializer.save()
             return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        else:
+            print(serializer.errors)
+            error_details = {
+                "message": "Invalid project data provided.",
+                "errors": serializer.errors,
+            }
+            return Response(error_details, status=status.HTTP_400_BAD_REQUEST)
 
     # Get a single project by ID (GET)
     def get(self, request, pk):
@@ -42,7 +48,13 @@ def put(self, request, pk):
         if serializer.is_valid():
             serializer.save()
             return Response(serializer.data)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        else:
+            print(serializer.errors)
+            error_details = {
+                "message": "Invalid project data provided.",
+                "errors": serializer.errors,
+            }
+            return Response(error_details, status=status.HTTP_400_BAD_REQUEST)
 
     # Delete a project by ID (DELETE)
     def delete(self, request, pk):

frontend/bitmatch/eslint.config.js

@@ -34,6 +34,7 @@ export default [
         "warn",
         { allowConstantExport: true },
       ],
+      "react/prop-types": "warn",
     },
   },
 ];

frontend/bitmatch/src/App.jsx

@@ -11,6 +11,7 @@ import { Button } from "./components/ui/button";
 import HomePage from "./views/HomePage";
 import ProjectListPage from "./views/ProjectListPage";
 import ProjectDetailPage from "./views/IndividualProjectPage";
+import AddProjectPage from "./views/AddProjectPage";
 import "./styles/global.css";
 
 export default function App() {
@@ -99,6 +100,7 @@ export default function App() {
             <Route path="/" element={<HomePage />} />
             <Route path="/project-list" element={<ProjectListPage />} />
             <Route path="/projects/:id" element={<ProjectDetailPage />} />
+            <Route path="/create-project" element={<AddProjectPage />} />
           </Routes>
         </SignedIn>
       </div>

frontend/bitmatch/src/components/project/DiscussionCard.jsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+export function ReplyForm({ postId, onCancel, onSubmit }) {
+  const [content, setContent] = useState("");
+
+  const handleSubmit = () => {
+    if (content.trim()) {
+      onSubmit(postId, content);
+      setContent("");
+    }
+  };
+
+  return (
+    <div className="border p-4 mb-4">
+      <div className="mb-4">
+        <textarea
+          placeholder="Add your comments here"
+          className="w-full p-4 min-h-[100px] border rounded"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+        />
+      </div>
+      <div className="flex justify-end space-x-2">
+        <Button
+          variant="secondary"
+          className="bg-gray-300 hover:bg-gray-400 text-black"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="secondary"
+          className="bg-gray-300 hover:bg-gray-400 text-black"
+          onClick={handleSubmit}
+        >
+          Comment
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function DiscussionPost({
+  id,
+  author,
+  content,
+  datePosted,
+  isReply = false,
+  parentId,
+  onReply,
+  onDelete,
+  onReaction,
+}) {
+  return (
+    <div className={`border-t py-4 ${isReply ? "ml-12 relative" : ""}`}>
+      {isReply && (
+        <div className="absolute left-[-24px] top-0 bottom-0 w-[2px] bg-gray-300"></div>
+      )}
+
+      <div className="flex">
+        <div className="mr-4 relative">
+          <div className="bg-white border rounded-lg px-3 py-1 absolute top-0 left-0 z-10">
+            <span className="font-semibold">{isReply ? "Reply" : "Post"}</span>
+          </div>
+          <div className="w-20 h-20 bg-gray-300 rounded-full flex items-center justify-center text-sm mt-8">
+            {author.profileImage ? (
+              <img
+                src={author.profileImage || "/placeholder.svg"}
+                alt={`${author.name}'s profile`}
+                width={80}
+                height={80}
+                className="rounded-full object-cover w-full h-full"
+              />
+            ) : (
+              <span className="text-center">
+                img
+                <br />
+                profile
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex-1">
+          <div className="mb-4 mt-8">
+            <h3 className="font-bold text-lg">{author.name}</h3>
+            {author.title && <p>{author.title}</p>}
+            <p className="text-sm text-gray-600">{datePosted}</p>
+          </div>
+
+          <div className="mb-4">
+            <p>{content}</p>
+          </div>
+
+          <div className="flex space-x-2">
+            <Button
+              variant="secondary"
+              className="bg-gray-300 hover:bg-gray-400 text-black"
+              onClick={() => onReply && onReply(id)}
+            >
+              Reply
+            </Button>
+            <Button
+              variant="secondary"
+              className="bg-gray-300 hover:bg-gray-400 text-black"
+              onClick={() => onDelete && onDelete(id)}
+            >
+              Delete Post
+            </Button>
+            <Button
+              variant="secondary"
+              className="bg-gray-300 hover:bg-gray-400 text-black ml-auto"
+              onClick={() => onReaction && onReaction(id)}
+            >
+              Emoji Reactions
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}