1st push

pages/learningpath/[learningpath].js

@@ -0,0 +1,77 @@
+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>
+}