Attention please, Important Updates

- Updated all the Api calls with online mock Api
- Few css changes in AddNewCourse and  About pages

Author: zafeirisdimi

src/Pages/About.js

@@ -4,7 +4,7 @@ import TeamSection from '../components/Others/Team';
 
 export default function About(){
     return(
-        <div className="container mt-2 bg-white text-slate-700 flex flex-wrap items-center px-5 mx-auto">
+        <div className="container mt-5 bg-white text-slate-700 flex flex-wrap items-center px-5 mx-auto rounded-lg">
              <div className="flex flex-col">
                 <Link to='/' className='text-black-50 px-2 col-md-5'>Back | <i className="fa fa-home-alt"></i></Link>
             </div>

src/Pages/CourseDetails.js

@@ -6,15 +6,15 @@ import Buttons from "../components/Utilities/Buttons/buttons";
 
 export default function CourseDetails(){
 
-    const API = 'http://localhost:3001/courses/';
+    const API = 'https://chain-legendary-strawflower.glitch.me/courses';
     const params = useParams();
     const [course,setCourse]= useState(null);
     // const navigate = useNavigate();
 
     const fetchDetails = () =>{
         setTimeout(function() 
         {
-        fetch(`${API}${params.id}`)
+        fetch(`${API}/${params.id}`)
         .then((res)=> res.json())
         .then((data) => setCourse(data))
 
@@ -34,7 +34,7 @@ export default function CourseDetails(){
         return(
             <>
             <div className="flex flex-wrap items-center my-5 p-5 rounded-2xl shadow-3xl bg-white selection:bg-fuchsia-200 selection:text-fuchsia-900">
-                <div className="max-w-full md:w-6/12 ml-auto mr-auto mt-auto flex flex-col">
+                <div className="max-w-full md:w-6/12 ml-auto mr-auto flex flex-col">
                     <img src={course.imagePath ? `/images${course.imagePath}` : `/images/courses/notfound.png`} alt={course.title} className='object-cover object-center rounded-lg shadow-lg' />
                     </div>
                         <div className="w-full md:w-5/12 ml-auto mr-auto flex flex-col">

src/Pages/cards.js

@@ -8,7 +8,7 @@ const Cards = () => {
     const [coursesLoading, setCoursesLoading] = useState(true)
 
     useEffect(() => {
-        axios.get("http://localhost:3001/courses")
+        axios.get("https://chain-legendary-strawflower.glitch.me/courses")
         .then(res => {
         setCoursesLoading(false)
         setData(res.data);

src/components/CourseTable.js

@@ -2,7 +2,7 @@ import React, { useEffect,useState } from 'react';
 import CourseItem from '../components/Utilities/Cards/CourseItem.js';
 
 export default function CourseTable({id,title,online,start_date,end_date,imagePath,duration}){
-    const url = 'http://localhost:3001/courses/';
+    const url = 'https://chain-legendary-strawflower.glitch.me/courses';
     const [courses,setCourses]= useState([]);
 
 

src/components/Others/Team.js

@@ -4,8 +4,6 @@ import TeamUserCard from '../Utilities/Cards/TeamUserCard';
 export default function Team(){
     const UserApi = 'https://chain-legendary-strawflower.glitch.me/teamusers';
     const [teamusers,setTeamusers] = useState(null);
-
-
     const getTeamUser = () =>{
         fetch(UserApi)
         .then((res)=> res.json())

src/components/Utilities/Buttons/buttondelete.js

@@ -11,7 +11,7 @@ export default function ButtonDelete(props){
     function deleteUser(id){
         var answer = window.confirm("Delete data?");
         if (answer) {
-            let link = 'http://localhost:3001/courses/'+id;
+            let link = 'https://chain-legendary-strawflower.glitch.me/courses'+id;
             //console.log("Try delete",answer, link);
             //console.log(typeof link);
             axios.delete(link)

src/components/Utilities/Cards/TeamUserCard.js

@@ -9,11 +9,9 @@ export default function TeamUserCard({title,fname,lname,bio,github,linkedin,emai
          <div className="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-indigo-600 dark:border-slate-700 dark:hover:border-transparent">
                 <img className="object-cover w-32 h-32 rounded-full ring-4 ring-slate-300" src={`${github}.png`} alt={`${fname} ${lname}`} title={`${fname} ${lname}`}/>
                 <h1 className="mt-4 text-2xl font-semibold text-slate-700 capitalize dark:text-white group-hover:text-white">{fname} {lname}</h1>
-                <p className="mt-2 text-slate-500 capitalize dark:text-slate-300 group-hover:text-slate-300">{title}</p>
-                <p className="mt-2 text-slate-500 capitalize dark:text-slate-300 group-hover:text-slate-300">{bio}</p>
+                <p className="mt-2 text-slate-600 capitalize font-semibold dark:text-slate-200 group-hover:text-slate-200 group-hover:border-b-2">{title}</p>
                 <div className="flex mt-3 -mx-2 ">
                     <a href={`mailto:${email}`} title="email" className="mx-2 text-slate-600 dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-300 group-hover:text-white" aria-label="Email">
-                        
                     <FontAwesomeIcon icon={faAt} />
                     </a>
                     <a href={linkedin} title="linkedin" className="mx-2 text-slate-600 dark:text-slate-300 hover:text-slate-500 dark:hover:text-slate-300 group-hover:text-white" aria-label="LinkedIn">
@@ -23,6 +21,8 @@ export default function TeamUserCard({title,fname,lname,bio,github,linkedin,emai
                         <FontAwesomeIcon icon={faCodeCompare} />
                     </a>
                 </div>
+                <p className="mt-3 text-slate-500  text-center capitalize dark:text-slate-300 group-hover:text-slate-300 ">{bio}</p>
+               
                 </div>
         </>
 

src/components/editPage.js

@@ -1,26 +1,13 @@
 import React, { useState } from 'react';
-import {Link} from 'react-router-dom';
-
-
 import axios from "axios";
-//import { render } from 'react-dom';
-
 console.clear();
-
 export default function EditPage(props)  {
-    <div className="row">
-        <Link to='/' className='text-black-50 p-2 col-md-5'>Go Back</Link>
-    </div>
-
-    
-    
    // const [post, setPost] = useState(null);
     const [title, setTitle] = useState(props.data.title);
     const [duration, setDuration] = useState(props.data.duration);
     const [imagePath, setImagePath] = useState(props.data.imagePath);
     const [online, setOnline] = useState(props.data.online);
     const [description, setDescription] = useState(props.data.description);
- 
     const [start_date, setStart_date] = useState(props.data.dates.start_date);
     const [end_date, setEnd_date] = useState(props.data.dates.end_date);
     const [early_bird, setEarly_bird] = useState(props.data.price.early_bird);
@@ -40,23 +27,18 @@ export default function EditPage(props)  {
             online,
             description,
         };
-            
-        console.log('Link http://localhost:3001/courses/'+props.idNumber);
-        axios.put('http://localhost:3001/courses/'+props.idNumber, data)
+        console.log('Link https://chain-legendary-strawflower.glitch.me/courses'+props.idNumber);
+        axios.put('https://chain-legendary-strawflower.glitch.me/courses'+props.idNumber, data)
         .then((response) => {
             console.log("THE END",response)
             }
         )
         .catch((error) => console.log(error));
-            
         props.close();
         props.fetchDetails();
     }
- 
     if (!props.open) return null;
-   
     return (
-        
         // <div className="z-10 " aria-labelledby="modal-title" role="dialog" aria-modal="true">      
         // <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>  
         <div className="overflow-scroll">
@@ -134,11 +116,8 @@ export default function EditPage(props)  {
                     </div>
                 </div>
                 <p className="m-3 font-bold font-weight: 700"> Price </p>
-
                 <div className="flex flex-wrap -mx-2">
                     <div className="w-full md:w-1/2 px-2 mb-4 md:mb-0">
-
-
                         <label className="m-3 block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" >
                             Early Bird
                         </label>
@@ -155,8 +134,6 @@ export default function EditPage(props)  {
                 </div>
                 <button  className="m-2 float-right bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-right " type='submit'> Update Course </button>
             </form>
-
-
         </div>
         // </div>
  );