1st push

pages/menu.js

@@ -0,0 +1,67 @@
+import { Button, Error, Grid, Spinner } from "@chakra-ui/react"
+import React, { useContext, useEffect, useState } from "react"
+import Layout from "../components/layout"
+
+import MenuItem from "../components/menuitem"
+
+import { menuitemfetcher } from "../datafetch/datafetch"
+
+function Menubox(props) {
+  const { data, isLoading, isError } = menuitemfetcher()
+  const [showedcount, setShowedcount] = React.useState(40)
+
+  if (isLoading) return <Spinner />
+  if (isError) return <Error />
+
+  const container = (
+    <>
+      <Grid
+        templateColumns={["repeat(1, 1fr)", "repeat(1, 1fr)", "repeat(2, 1fr)", "repeat(3, 1fr)", "repeat(4, 1fr)"]}
+        padding={["4%", "5%", "6%", "7%"]}
+        gap={6}
+      >
+        {data.slice(1, showedcount).map((item) => (
+          <MenuItem
+            key={item.id}
+            id={item.id}
+            itemid={item.userId}
+            title={item.title}
+            summary={item.body}
+            image_url="https://example.com/image1.jpg"
+          />
+        ))}
+      </Grid>
+      <Button onClick={() => setShowedcount(showedcount + 40)}></Button>
+    </>
+  )
+  return container
+}
+
+export default function MenuPage(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" } }
+}
+
+MenuPage.getLayout = function getLayout(page) {
+  return <Layout>{page}</Layout>
+}