From c34e1b072555a6e2032422fe0414c1a47c2f4809 Mon Sep 17 00:00:00 2001
From: Eljakim Herrewijnen <eljakim.herrewijnen@gmail.com>
Date: Thu, 29 Dec 2022 00:32:13 +0100
Subject: [PATCH] Added fetch request in react for projects

---
 ...ct_image_alter_project_rtd_url_and_more.py | 28 +++++++++
 herreweb_backend/project/models.py            |  6 +-
 herreweb_backend/project/serializers.py       |  2 +-
 herreweb_backend/project/views.py             |  2 +-
 herreweb_frontend/src/components/Projects.js  | 57 ++++++++-----------
 herreweb_frontend/src/static/Projects.css     | 14 +++++
 6 files changed, 72 insertions(+), 37 deletions(-)
 create mode 100644 herreweb_backend/project/migrations/0002_alter_project_image_alter_project_rtd_url_and_more.py

diff --git a/herreweb_backend/project/migrations/0002_alter_project_image_alter_project_rtd_url_and_more.py b/herreweb_backend/project/migrations/0002_alter_project_image_alter_project_rtd_url_and_more.py
new file mode 100644
index 0000000..406443b
--- /dev/null
+++ b/herreweb_backend/project/migrations/0002_alter_project_image_alter_project_rtd_url_and_more.py
@@ -0,0 +1,28 @@
+# Generated by Django 4.1.4 on 2022-12-28 18:57
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('project', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='project',
+            name='image',
+            field=models.ImageField(blank=True, null=True, upload_to=''),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='rtd_url',
+            field=models.CharField(blank=True, max_length=200, null=True),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='url',
+            field=models.CharField(blank=True, max_length=200, null=True),
+        ),
+    ]
diff --git a/herreweb_backend/project/models.py b/herreweb_backend/project/models.py
index 33de7bd..571b747 100644
--- a/herreweb_backend/project/models.py
+++ b/herreweb_backend/project/models.py
@@ -5,9 +5,9 @@ class Project(models.Model):
     title = models.CharField(max_length=100)
     description = models.TextField(default="No description added")
     status = models.IntegerField(default=ProjectStatus.RUNNING)
-    image = models.ImageField(null=True)
-    rtd_url = models.CharField(max_length=200, null=True)
-    url = models.CharField(max_length=200, null=True)
+    image = models.ImageField(null=True, blank=True)
+    rtd_url = models.CharField(max_length=200, null=True, blank=True)
+    url = models.CharField(max_length=200, null=True, blank=True)
     visible = models.BooleanField(default=False)
 
     def _str_(self):
diff --git a/herreweb_backend/project/serializers.py b/herreweb_backend/project/serializers.py
index 30a56bf..fb70210 100644
--- a/herreweb_backend/project/serializers.py
+++ b/herreweb_backend/project/serializers.py
@@ -4,4 +4,4 @@ from .models import Project
 class ProjectSerializer(serializers.ModelSerializer):
     class Meta:
         model = Project
-        fields = ('id' ,'title', 'description', 'status')
\ No newline at end of file
+        fields = ('id' ,'title', 'description', 'status', 'image', 'rtd_url', 'url')
\ No newline at end of file
diff --git a/herreweb_backend/project/views.py b/herreweb_backend/project/views.py
index a384dfa..38e9ca3 100644
--- a/herreweb_backend/project/views.py
+++ b/herreweb_backend/project/views.py
@@ -5,4 +5,4 @@ from .models import Project
 
 class ProjectView(viewsets.ModelViewSet):
     serializer_class = ProjectSerializer  
-    queryset = Project.objects.all()
+    queryset = Project.objects.all()
\ No newline at end of file
diff --git a/herreweb_frontend/src/components/Projects.js b/herreweb_frontend/src/components/Projects.js
index 3f5191e..8e12a84 100644
--- a/herreweb_frontend/src/components/Projects.js
+++ b/herreweb_frontend/src/components/Projects.js
@@ -1,26 +1,7 @@
 import React, { Component } from "react"
+import '../static/Projects.css';
 
 const projectItems = [
-    {
-        id: 1,
-        title: "Thelendar",
-        description: "Stronghold Kingdoms",
-        completed: 1
-    },
-
-    {
-        id: 2,
-        title: "Ghidra Assistant",
-        description: "Reversing tools for Ghidra",
-        completed: 0
-    },
-
-    {
-        id: 3,
-        title: "Kerk Tallies",
-        description: "Creating Tally lights for Church",
-        completed: 0
-    },
 ];
 
 class Projects extends Component {
@@ -43,21 +24,33 @@ class Projects extends Component {
     render() {
         return (
             <main className="content">
-                <div className="row">
-                    <div className="col-md-6 col-sm-10 mx-auto p-0">
-                        <div className="card p-3">
-                            <ul className="list-group list-group-flush">
-                                {this.state.projectItems.map(item => (
-                                    <div>
-                                        <h1>{item.title}</h1>
-                                        <span>{item.description}</span>
-                                    </div>
-                                ))}
-                            </ul>
+                <div className="projects-grid-container">
+                    {this.state.projectItems.map(item => (
+                        <div className="projects-grid-item">
+                            <h1>{item.title}</h1>
+                            <span>{item.description}</span>
+                            <span>{item.rtd_url}</span>
                         </div>
-                    </div>
+                    ))}
                 </div>
             </main>
+            // <main className="content">
+            //     <div className="row">
+            //         <div className="col-md-6 col-sm-10 mx-auto p-0">
+            //             <div className="card p-3">
+            //                 <ul className="list-group list-group-flush">
+            //                     {this.state.projectItems.map(item => (
+            //                         <div>
+            //                             <h1>{item.title}</h1>
+            //                             <span>{item.description}</span>
+            //                             <span>{item.rtd_url}</span>
+            //                         </div>
+            //                     ))}
+            //                 </ul>
+            //             </div>
+            //         </div>
+            //     </div>
+            // </main>
         )
     }
 }
diff --git a/herreweb_frontend/src/static/Projects.css b/herreweb_frontend/src/static/Projects.css
index e69de29..4e0f256 100644
--- a/herreweb_frontend/src/static/Projects.css
+++ b/herreweb_frontend/src/static/Projects.css
@@ -0,0 +1,14 @@
+.projects-grid-container {
+    display: grid;
+    grid-template-columns: auto;
+    gap: 1%;
+    padding: 1%;
+    margin-top: 70px;
+}
+
+.projects-grid-item {
+    background-color: rgba(255, 255, 255, 0.8);
+    margin: 1%;
+    border: 1px solid black;
+    text-align: center;
+}
\ No newline at end of file