Move new course button

Author: zachspang

frontend/src/components/pages/CourseDashboard.js

@@ -92,76 +92,68 @@ export function CourseDashboard() {
     if (!courseInfo) return <p>Loading...</p>;
     if (!userInfo) return <p>Loading...</p>;
 
-    var courseList = [];
-    //Push all courses into courseList
+    let createButton = null;
     if (userInfo.role === "educator"){
-        courseInfo.forEach(course => {
-            courseList.push(
-                <a href={`/courses/${course.ID}`}>
-                    <div className="bg-gray-100 p-4 rounded shadow hover:bg-gray-300" >
-                        <h3 className="text-xl font-semibold" >{course.title}</h3>
-                        <p className="mt-2">{course.description}</p>
+        createButton =
+        <Popup trigger={<div className="bg-blue-500 p-2 rounded shadow hover:bg-blue-700 text-center text-sm text-white font-semibold hover:cursor-pointer" > 
+            <div>+ New Course</div> </div>} modal nested>
+            {close => (
+                <div className="flex-auto">
+                    <h3 className="font-semibold">
+                        Create New Course
+                    </h3>
+                    <div className="p-2">
+                        <label>Course Name: </label>
+                        <input className="border-2 border-black rounded p-2 size-11/12"
+                        type="text"
+                        name="title"
+                        onChange={handleChange}
+                        />
                     </div>
-                </a>
-            )
-        });
-        //Push the create course button at the end of courses
-        courseList.push(
-            <Popup trigger={<div className="bg-blue-500 p-4 rounded shadow hover:bg-blue-700 m-auto text-center text-xl text-white font-semibold hover:cursor-pointer" > 
-                <div>+ New Course</div> </div>} modal nested>
-                {close => (
-                    <div className="flex-auto">
-                        <h3 className="font-semibold">
-                            Create New Course
-                        </h3>
-                        <div className="p-2">
-                            <label>Course Name: </label>
-                            <input className="border-2 border-black rounded p-2 size-11/12"
-                            type="text"
-                            name="title"
-                            onChange={handleChange}
-                            />
-                        </div>
-                        <div className="p-2">
-                            <label>Course Description: </label>
-                            <input className="border-2 border-black rounded p-2 size-11/12"
-                            type="text"
-                            name="description"
-                            onChange={handleChange}
-                            />
-                        </div>
-                        <div className="grid grid-rows-1 grid-cols-2">
-                            <button className="justify-self-start border-2 border-black p-1 rounded" onClick=
-                                {() => close()}>
-                                    Cancel
-                            </button>
-                            <button className="justify-self-end border-2 border-black p-1 rounded bg-green-400" 
-                                onClick={handleCreateCourse}>
-                                    Create
-                            </button>
-                        </div>
+                    <div className="p-2">
+                        <label>Course Description: </label>
+                        <input className="border-2 border-black rounded p-2 size-11/12"
+                        type="text"
+                        name="description"
+                        onChange={handleChange}
+                        />
                     </div>
-                    )
-                }
-            </Popup>
-        )
-    }
-    else{
-        courseInfo.forEach(course => {
-            courseList.push(
-                <a href={`/courses/${course.ID}`}>
-                    <div className="bg-gray-100 p-4 rounded shadow hover:bg-gray-300" >
-                        <h3 className="text-xl font-semibold" >{course.title}</h3>
-                        <p className="mt-2">{course.description}</p>
+                    <div className="grid grid-rows-1 grid-cols-2">
+                        <button className="justify-self-start border-2 border-black p-1 rounded" onClick=
+                            {() => close()}>
+                                Cancel
+                        </button>
+                        <button className="justify-self-end border-2 border-black p-1 rounded bg-green-400" 
+                            onClick={handleCreateCourse}>
+                                Create
+                        </button>
                     </div>
-                </a>
-            )
-        });
+                </div>
+                )
+            }
+        </Popup>
+        
     }
 
+    var courseList = [];
+    //Push all courses into courseList
+    courseInfo.forEach(course => {
+        courseList.push(
+            <a href={`/courses/${course.ID}`}>
+                <div className="bg-gray-100 p-4 rounded shadow hover:bg-gray-300" >
+                    <h3 className="text-xl font-semibold" >{course.title}</h3>
+                    <p className="mt-2">{course.description}</p>
+                </div>
+            </a>
+        )
+    });
+    
     return (
         <div className="p-6">
-            <h1 className="text-2xl font-bold mb-4">Courses</h1>
+            <div className="flex justify-between flex-wrap  mb-5">
+                <h1 className="text-2xl font-bold">Courses</h1>
+                {createButton}
+            </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {courseList}
             </div>