Courses API

// Custom hook — useCourses.js
import { useState, useEffect } from "react";

const BASE_URL = "https://www.edraak.org/api/marketing/courses/";

export function useCourses({ limit = 20, offset = 0 } = {}) {
  const [courses, setCourses] = useState([]);
  const [total, setTotal]     = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  useEffect(() => {
    const params = new URLSearchParams({ limit, offset });
    fetch(`${BASE_URL}?${params}`)
      .then((r) => r.json())
      .then((data) => {
        setCourses(data.results);
        setTotal(data.count);
      })
      .catch(setError)
      .finally(() => setLoading(false));
  }, [limit, offset]);

  return { courses, total, loading, error };
}


// CourseList.jsx — example component
export default function CourseList() {
  const { courses, total, loading } = useCourses({ limit: 20 });

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <h1>{total} Courses Available</h1>
      {courses.map((course) => (
        <div key={course.id}>
          <img src={course.cover_image} alt={course.name_en} />
          <h2>{course.name_en}</h2>
          <p>Level: {course.level} · Effort: {course.effort}h</p>
          <p>Enrolled: {course.enrollment_count.toLocaleString()}</p>
          <a href={course.course_url}>View Course →</a>
        </div>
      ))}
    </div>
  );
}

# First page (default 100 results)
curl -X GET \
  "https://www.edraak.org/api/marketing/courses/" \
  -H "Accept: application/json" | python3 -m json.tool

# Custom page size and offset
curl -G "https://www.edraak.org/api/marketing/courses/" \
  --data-urlencode "limit=20" \
  --data-urlencode "offset=40"

# Pretty print with jq — show course names and enrollment
curl -s "https://www.edraak.org/api/marketing/courses/" \
  | jq '.results[] | {name: .name_en, enrolled: .enrollment_count}'