Added CircleSpinner in Dashboard/About Pages|Insert TOC,online link in ReadMe

Author: zafeirisdimi

README.md

@@ -1,12 +1,20 @@
 ## **START School of Code: React Team Project**
 This README includes general information about the project, the methods and modules used for building it and the team behind it.
 
-You can find a live demo of this project [HERE](LINK%20HERE) and the GitHub repository [HERE](https://github.com/ssoc2dzafeiris/TeamProjectReact).
+You can find a live demo of this project [HERE]((https://whimsical-naiad-4249a5.netlify.app/)) and the GitHub repository [HERE](https://github.com/ssoc2dzafeiris/TeamProjectReact).
+
+## Table Of Contents ##
+
+- [**START School of Code: React Team Project**](#start-school-of-code-react-team-project)
+- [Table Of Contents](#table-of-contents)
+- [General Information](#general-information)
+- [Modules and Methods](#modules-and-methods)
+- [The Team](#the-team)
 
 ## General Information
 This project is a team collaboration between students of [START School of Code by SocialInnov](https://www.startproject.gr/school-of-code/).  The aim of the bootcamp is to provide young professionals with the necessary tools and skills for a Javascript Developer in today's market.
 
-The project is a React.js application that must have a Dashboard page -- listing fast stats and a quick overview of classes available, a Courses page -- the full comprehensive list of classes available, an Add Course page -- a form that allows users to add classes to the application and a Course Details page that gives indepth information about the class. The same page also allows the user to either edit or delete the currently selected course.
+The project is a React.js application that must have a Dashboard page -- listing fast stats and a quick overview of classes available, a Courses page -- the full comprehensive list of classes available, an Add Course page -- a form that allows users to add classes to the application and a Course Details page that gives in-depth information about the class. The same page also allows the user to either edit or delete the currently selected course.
 
 ## Modules and Methods
 The modules used for this project were:

src/Pages/AddNewCourse.js

@@ -1,11 +1,8 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom'
-
+// import { useNavigate } from "react-router-dom";  
 const AddNewCourse = () => {
-    <div className="row">
-        <Link to='/' className='text-black-50 p-2 col-md-5'>Go Back</Link>
-    </div>
-
+    
+    // const navigateTo = useNavigate();
     const [title, setTitle] = useState('');
     const [duration, setDuration] = useState('');
     const [imagePath, setImagePath] = useState('');
@@ -44,6 +41,7 @@ const AddNewCourse = () => {
                     setShowAlert('');
                 }, 2000);
             })
+            // .then(navigateTo('/courses/'))
             .catch(error => console.error(error));
 
     }

src/Pages/CourseDetails.js

@@ -5,12 +5,10 @@ import LoadingSpinner from '../components/Utilities/Loaders/LoadingSpinner.js';
 import Buttons from "../components/Utilities/Buttons/buttons";
 
 export default function CourseDetails(){
-    
     const API = 'https://chain-legendary-strawflower.glitch.me/courses/';
     const params = useParams();
     const [course,setCourse]= useState(null);
     // const navigate = useNavigate();
-
     const fetchDetails = () =>{
         setTimeout(function() 
         {

src/components/CourseTable.js

@@ -1,19 +1,24 @@
 import React, { useEffect,useState } from 'react';
 import CourseItem from '../components/Utilities/Cards/CourseItem.js';
+import CircleSpinner from './Utilities/Loaders/CircleSpinner';
 
 export default function CourseTable({id,title,online,start_date,end_date,imagePath,duration}){
     const url = 'https://chain-legendary-strawflower.glitch.me/courses';
     const [courses,setCourses]= useState([]);
 
+    const fetchLastCourses = () =>{
+        fetch(url)
+        .then((response)=> response.json())
+        .then((data)=> {
+            const lastCourses = data.slice(-5);
+            setCourses(lastCourses);});
+    }
 
-useEffect(()=>{
-    fetch(url)
-    .then((response)=> response.json())
-    .then((data)=> {
-        const lastCourses = data.slice(-5);
-        setCourses(lastCourses);});
-},[])
+    useEffect(()=>{
+        fetchLastCourses();
+    },[])
 
+    if( courses.length === 0) return <CircleSpinner />
     return(
         <>
              <table className="shadow-2xl font-[Poppins] border-2 border-indigo-200 overflow-hidden rounded-xl mt-2 mb-5 mx-auto">

src/components/Others/Stats.js

@@ -1,5 +1,6 @@
 import React ,{useState,useEffect}from 'react';
 import StatsItem from './StatsItem';
+import CircleSpinner from '../Utilities/Loaders/CircleSpinner';
 
 export default function Stats({title}){
     const url = "https://chain-legendary-strawflower.glitch.me/stats";
@@ -13,6 +14,7 @@ export default function Stats({title}){
         });
     },[]);
 
+    if ( stats.length === 0 ) return <CircleSpinner />
     return (
         <>
          <div className="flex flex-col py-2 mt-4 mx-auto">
@@ -24,7 +26,6 @@ export default function Stats({title}){
             (
                 <StatsItem key={id} title={title} amount={amount}/>
             ))}
-        
             </div>
         </>
 

src/components/Others/Team.js

@@ -1,5 +1,6 @@
 import React,{useState,useEffect} from 'react';
 import TeamUserCard from '../Utilities/Cards/TeamUserCard';
+import CircleSpinner from '../Utilities/Loaders/CircleSpinner'
 
 export default function Team(){
     const UserApi = 'https://chain-legendary-strawflower.glitch.me/teamusers';
@@ -16,7 +17,7 @@ export default function Team(){
         getTeamUser()
     },[]);
 
-    if (!teamusers) return <div>No one team user </div>
+    if (!teamusers) return <CircleSpinner />
     return (
         <>
         <section className="bg-white flex flex-col rounded-md mt-4 mb-4">

src/components/Utilities/Loaders/CircleSpinner.js

@@ -0,0 +1,8 @@
+export default function CircleSpinner(){
+    return(
+        <div className="flex flex-row justify-center h-screen mt-5">
+            <div className="w-20 h-20 border-4 border-dashed rounded-full animate-spin duration-150 object-center"></div>
+        </div>
+        
+    )
+}

src/components/editPage.js

@@ -1,12 +1,7 @@
 import React, { useState } from 'react';
-import {Link} from 'react-router-dom';
 import axios from "axios";
 
 export default function EditPage(props)  {
-    <div className="row">
-        <Link to='/' className='text-black-50 p-2 col-md-5'>Go Back</Link>
-    </div>
-
 
     const [title, setTitle] = useState(props.data.title);
     const [duration, setDuration] = useState(props.data.duration);