Skip to content

Commit

Permalink
Fix: Move chapter page to index in coursename
Browse files Browse the repository at this point in the history 
-  add a type prop to change according to the type of page - chapters / courses
Feat: show only few chapters initially, clicking on view more should show more chapters
- scroll to the section for chapters and courses
  • Loading branch information
@akhilalekha
akhilalekha committed May 21, 2021
1 parent 384c650 commit 9b53409
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 145 deletions.
90 changes: 56 additions & 34 deletions component/layout/ChapterList/ChapterList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,59 @@
import styles from './ChapterList.module.scss';
import Link from "next/link";
import { useEffect, useState } from "react";
import styles from "./ChapterList.module.scss";

export default function ChapterList(){
export default function ChapterList({ chapters, courseUrl }) {
// console.log({ chapters });
const [chaptersToShow, setChaptersToShow] = useState([]);
const [next, setNext] = useState(3);
const chaptersPerPage = 3;
let tempChapterList = [];

return(
<section className={styles.section}>
<div className="container container--small">
<ul className={styles.list}>
<li>
<div className={styles.text}>
<h3>Syntax and Selectors</h3>
<p>Learn how to add styles websites with CSS and how to use selectors to apply styles to specific elements.</p>
<a href="" className="btn btn--purple">
<span className="btn__text">Start</span>
</a>
</div>
</li>
<li>
<div className={styles.text}>
<h3>Syntax and Selectors</h3>
<p>Learn how to add styles websites with CSS and how to use selectors to apply styles to specific elements.</p>
<a href="" className="btn btn--purple">
<span className="btn__text">Start</span>
</a>
</div>
</li>
</ul>
<div className="cta text-center">
<a href="" className="btn">
<span className="btn__text">VIEW MORE</span>
</a>
</div>
</div>
</section>
);
const getSlicedChapters = (start, end) => {
const slicedChapters = chapters.slice(start, end);
console.log({ slicedChapters });
tempChapterList = [...chaptersToShow, ...slicedChapters];
console.log({ tempChapterList });
setChaptersToShow(tempChapterList);
};

}
useEffect(() => {
getSlicedChapters(0, chaptersPerPage);
}, []);

const handleViewMore = () => {
getSlicedChapters(next, next + chaptersPerPage);
setNext(next + chaptersPerPage);
};
return (
<section id="chapters" className={styles.section}>
<div className="container container--small">
<ul className={styles.list}>
{chaptersToShow.map((chapter) => (
<li key={chapter.chapterUrl} className="">
<div className={styles.text}>
<h3>{chapter.chapterName}</h3>
<p>
Learn how to add styles websites with CSS and how to use
selectors to apply styles to specific elements.
</p>
<Link href={`/curriculum/${courseUrl}/${chapter.chapterUrl}`}>
<a className="btn btn--purple">
<span className="btn__text">Start</span>
</a>
</Link>
</div>
</li>
))}
</ul>
<div className="cta text-center">
{chaptersToShow.length !== chapters.length && (
<button className="btn" onClick={handleViewMore}>
<span className="btn__text">VIEW MORE</span>
</button>
)}
</div>
</div>
</section>
);
}
79 changes: 45 additions & 34 deletions component/layout/ChapterOverview/ChapterOverview.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,47 @@
import styles from './ChapterOverview.module.scss';
import styles from "./ChapterOverview.module.scss";

export default function ChapterOverview(){

return(
<section className="pb-10 lg:pb-20" style={{ color: "#202020" }}>
<div className="container">
<h2 className="text-gray-01 font-darker font-extrabold text-64 mb-10 xl:mb-14">Overview</h2>
<div className="row md:flex">
<div className="md:w-8/12 pt-5 text-18 font-semibold leading-loose mb-10 md:mb-0">
<p className="mb-10">Without CSS, every web page would be drab plain text and images that flowed straight down the page. With CSS, you can add color and background images and change the layout of your page — your web pages can feel like works of art!</p>
<h3 className="text-25 font-extrabold mb-5">Take-Away Skills:</h3>
<p>You will learn many aspects of styling web pages! You’ll be able to set up the correct file structure, edit text and colors, and create attractive layouts. With these skills, you’ll be able to customize the appearance of your web pages to suit your every need!</p>
</div>
<div className="md:w-4/12">
<div className={styles.overview}>
<div className={styles.item}>
<h3>Certificate</h3>
<p>of completion for free</p>
</div>
<div className={styles.item}>
<h3>490,362</h3>
<p>People who have taken this course</p>
</div>
<div className={styles.item}>
<p>Time to Complete</p>
<h3>10 Hours</h3>
</div>
</div>
</div>
</div>
export default function ChapterOverview() {
return (
<section className="pb-10 lg:pb-20" style={{ color: "#202020" }}>
<div className="container">
<h2 className="text-gray-01 font-darker font-extrabold text-64 mb-10 xl:mb-14">
Overview
</h2>
<div className="row md:flex">
<div className="md:w-8/12 pt-5 text-18 font-semibold leading-loose mb-10 md:mb-0">
<p className="mb-10">
Without CSS, every web page would be drab plain text and images
that flowed straight down the page. With CSS, you can add color
and background images and change the layout of your page — your
web pages can feel like works of art!
</p>
<h3 className="text-25 font-extrabold mb-5">Take-Away Skills:</h3>
<p>
You will learn many aspects of styling web pages! You’ll be able
to set up the correct file structure, edit text and colors, and
create attractive layouts. With these skills, you’ll be able to
customize the appearance of your web pages to suit your every
need!
</p>
</div>
<div className="md:w-4/12">
<div className={styles.overview}>
<div className={styles.item}>
<h3>Certificate</h3>
<p>of completion for free</p>
</div>
<div className={styles.item}>
<h3>490,362</h3>
<p>People who have taken this course</p>
</div>
<div className={styles.item}>
<p>Time to Complete</p>
<h3>10 Hours</h3>
</div>
</div>
</section>
);

}
</div>
</div>
</div>
</section>
);
}
5 changes: 4 additions & 1 deletion component/layout/CourseSpotlight/CourseSpotlight.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ export default function CourseSpotlight({ contents }) {
<h3 className="my-4 font-darker font-black text-5xl">
{contents.subtitle}
</h3>
<a href="#courses" className="btn btn--purple">
<a
href={contents.type === "courses" ? "#courses" : "#chapters"}
className="btn btn--purple"
>
<span className="btn__text">{contents.buttonText}</span>
</a>
</div>
Expand Down
120 changes: 71 additions & 49 deletions pages/curriculum/[courseName]/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,86 @@
import { getAllCourseIds, getCourseData } from "../../../lib/jslist";
import { getCourse } from "../../../lib/getCourse";
import Navbar from "../../../component/layout/NavBar/NavBar";
// import Navbar from "../../../component/layout/NavBar/NavBar";
import Head from "next/head";
import Link from "next/link";
import SiteHeader from "../../../component/layout/SiteHeader/SiteHeader";
import CourseSpotlight from "../../../component/layout/CourseSpotlight/CourseSpotlight";
import ChapterOverview from "../../../component/layout/ChapterOverview/ChapterOverview";
import ChapterList from "../../../component/layout/ChapterList/ChapterList";
import SiteFooter from "../../../component/layout/SiteFooter/SiteFooter";
import SectionSwag from "../../../component/layout/SectionSwag/SectionSwag";

export async function getStaticPaths() {
const paths = await getAllCourseIds();
return {
paths,
fallback: false
};
const paths = await getAllCourseIds();
return {
paths,
fallback: false
};
}

export async function getStaticProps({ params }) {
const courseData = await getCourseData(params.courseName);
// console.log(courseData);
return {
props: {
params,
courseData
}
};
const courseData = await getCourseData(params.courseName);
// console.log(courseData);
return {
props: {
params,
courseData
}
};
}

export default function CourseName({ courseData, params }) {
// console.log(courseData, params);
const currentCourseName = params.courseName;
// console.log(courseData, params);
const currentCourseName = params.courseName;

let currentCourse = getCourse(currentCourseName);
// console.log(currentCourse);
let currentCourse = getCourse(currentCourseName);
// console.log(currentCourse);

let { courseName, courseUrl } = currentCourse;
let currentChapters = currentCourse.chapters;
// console.log(courseName, currentChapters);
let { courseName, courseUrl } = currentCourse;
let currentChapters = currentCourse.chapters;
// console.log(courseName, currentChapters);

return (
<div>
<Head>
<title> {courseName} | Curriculum</title>
</Head>
<Navbar showMenuIcon={false} showTitle={false} />
<div className="bg-gray-50 h-screen">
<h1 className="uppercase text-2xl tracking-widest text-center p-8">
{courseName}
</h1>
<div className="flex flex-col items-center justify-center">
{currentChapters.map((chapter) => (
<div
key={chapter.chapterUrl + courseUrl}
className="bg-white m-2 px-12 h-14 w-2/4 flex flex-row items-center shadow-md text-xl tracking-wider hover:shadow-lg"
>
<Link href={`/curriculum/${courseUrl}/${chapter.chapterUrl}`}>
<a className="text-gray-700 font-medium hover:text-purple-800">
{chapter.chapterName}
</a>
</Link>
</div>
))}
</div>
</div>
</div>
);
const contents = {
type: "chapters",
title: `Learn ${courseName}`,
buttonText: "Start",
image: "/images/illustration-1.svg",
alt: `Learn ${courseName}`,
imageWidth: 482,
imageHeight: 377,
bgcolor: "#083644",
bgimage: "bg2"
};
return (
<div>
<Head>
<title> {courseName} | Curriculum</title>
</Head>
<SiteHeader />
<CourseSpotlight contents={contents} />
<ChapterOverview />
<ChapterList chapters={currentChapters} courseUrl={courseUrl} />
<SectionSwag />
<SiteFooter />
{/* <Navbar showMenuIcon={false} showTitle={false} />
<div className="bg-gray-50 h-screen">
<h1 className="uppercase text-2xl tracking-widest text-center p-8">
{courseName}
</h1>
<div className="flex flex-col items-center justify-center">
{currentChapters.map((chapter) => (
<div
key={chapter.chapterUrl + courseUrl}
className="bg-white m-2 px-12 h-14 w-2/4 flex flex-row items-center shadow-md text-xl tracking-wider hover:shadow-lg"
>
<Link href={`/curriculum/${courseUrl}/${chapter.chapterUrl}`}>
<a className="text-gray-700 font-medium hover:text-purple-800">
{chapter.chapterName}
</a>
</Link>
</div>
))}
</div>
</div> */}
</div>
);
}
29 changes: 2 additions & 27 deletions pages/curriculum/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default function Courses() {
// addCourses();

const contents = {
type: "courses",
title: "School of Ducks",
subtitle: "Want to be a Mighty Duck?",
buttonText: "Get Started for free",
Expand All @@ -29,36 +30,10 @@ export default function Courses() {
</Head>
<SiteHeader />
<CourseSpotlight contents={contents} />
<CourseList />
<CourseList courses={courses} />
<CourseJourney />
<SectionSwag />
<SiteFooter />
{/* <Navbar showMenuIcon={false} showTitle={false} /> */}
{/* <div className="bg-gray-50 flex flex-col items-center text-gray-700 pb-14">
<h1 className="text-center text-gray-700 text-4xl uppercase tracking-wider p-8">
Courses
</h1>
<div className="text-xl w-2/3">
{courses.map((course) => (
<div
key={course.courseUrl}
className="p-8 shadow-xl bg-white my-4 hover:shadow-2xl "
>
<Link href={`/curriculum/${course.courseUrl}`}>
<a className="p-4 text-3xl hover:text-purple-800">
{course.courseName}
</a>
</Link>
<div className="border-t border-gray-300 m-4 py-4">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Laudantium atqu explicabo quam odio ducimus nobis labore
architecto. Explicabo cumque culpa impedit magni dignissimos
ipsa omnis eius! Tempora facilis dolor qui?
</div>
</div>
))}
</div>
</div> */}
</div>
);
}

0 comments on commit 9b53409

Please sign in to comment.