78 lines
2 KiB
JavaScript
78 lines
2 KiB
JavaScript
|
import { Button, Error, Grid, Spinner } from "@chakra-ui/react"
|
||
|
|
import { useRouter } from "next/router"
|
||
|
|
import React, { useContext, useEffect, useState } from "react"
|
||
|
|
import Layout from "../../components/layout"
|
||
|
|
|
||
|
|
import { learningitemfetcher } from "../../datafetch/datafetch"
|
||
|
|
|
||
|
|
/**
|
||
|
|
* params -
|
||
|
|
* length of path - plength ( the number of tasks )
|
||
|
|
* structure of the path - DAG
|
||
|
|
* type of path to be formed - pathtype
|
||
|
|
*/
|
||
|
|
|
||
|
|
function Menubox(props) {
|
||
|
|
const { data, isLoading, isError } = learningitemfetcher()
|
||
|
|
const [showedcount, setShowedcount] = React.useState(40)
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
if (isLoading) return <Spinner />
|
||
|
|
if (isError) return <Error />
|
||
|
|
|
||
|
|
const container = (
|
||
|
|
<>
|
||
|
|
<Grid templateColumns="repeat(10, 1fr)" padding="70" gap={10}>
|
||
|
|
{data.slice(0, showedcount).map((item) => {
|
||
|
|
if ([1, 22, 3, 24, 5, 26].includes(item.id)) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={item.id}
|
||
|
|
style={{ backgroundColor: "red", height: 100 }}
|
||
|
|
onClick={() => {
|
||
|
|
router.push(`/learningpage/${item.id}`)
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
return <div key={100} style={{ backgroundColor: "white", height: 100 }}></div>
|
||
|
|
})}
|
||
|
|
</Grid>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
return container
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function LearningPath(props) {
|
||
|
|
const [isloaded, setIsLoaded] = React.useState(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!isloaded) {
|
||
|
|
console.log("isloaded called")
|
||
|
|
|
||
|
|
setIsLoaded(true)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Menubox />
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**This place should be used to get any information from the server side
|
||
|
|
* example : we need to get the session token
|
||
|
|
* or any thing related to the page */
|
||
|
|
export async function getServerSideProps() {
|
||
|
|
const data = await fetch("https://jsonplaceholder.typicode.com/todos").then((response) => {
|
||
|
|
response.json()
|
||
|
|
})
|
||
|
|
|
||
|
|
return { props: { title: "rahul" } }
|
||
|
|
}
|
||
|
|
|
||
|
|
LearningPath.getLayout = function getLayout(page) {
|
||
|
|
return <Layout>{page}</Layout>
|
||
|
|
}
|