Added fetch request in react for projects

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),
+        ),
+    ]

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)
+    image = models.ImageField(null=True, blank=True)
-    rtd_url = models.CharField(max_length=200, null=True)
+    rtd_url = models.CharField(max_length=200, null=True, blank=True)
-    url = models.CharField(max_length=200, null=True)
+    url = models.CharField(max_length=200, null=True, blank=True)
     visible = models.BooleanField(default=False)
 
     def _str_(self):

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')
+        fields = ('id' ,'title', 'description', 'status', 'image', 'rtd_url', 'url')

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="projects-grid-container">
-                    <div className="col-md-6 col-sm-10 mx-auto p-0">
+                    {this.state.projectItems.map(item => (
-                        <div className="card p-3">
+                        <div className="projects-grid-item">
-                            <ul className="list-group list-group-flush">
+                            <h1>{item.title}</h1>
-                                {this.state.projectItems.map(item => (
+                            <span>{item.description}</span>
-                                    <div>
+                            <span>{item.rtd_url}</span>
-                                        <h1>{item.title}</h1>
-                                        <span>{item.description}</span>
-                                    </div>
-                                ))}
-                            </ul>
                         </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>
         )
     }
 }

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;
+}