1st push

pages/_app.js

@@ -0,0 +1,102 @@
+import { initializeApp } from "firebase/app"
+import React, { useContext, useEffect, useState } from "react"
+
+//Auth imports
+import { AuthContext } from "../context"
+import "firebase/auth"
+import { getAuth } from "firebase/auth"
+
+//server side rendring things
+import { SSRProvider } from "react-bootstrap"
+
+import { ChakraProvider } from "@chakra-ui/react"
+import customTheme from "../utils/themes"
+
+function MyApp({ Component, pageProps }) {
+  /**Initailize the states
+   * Important for keeping data over pages
+   */
+  const [modelopen, setModelopen] = React.useState(false)
+  const [loggedIn, setLoggedIn] = React.useState(false)
+  const [acctype, setAcctype] = React.useState(false)
+  const [loaded, setLoaded] = React.useState(false)
+
+  ///**This place is for firebase Auth  */
+
+  //initialize firebase
+  const firebaseConfig = {
+    apiKey: "AIzaSyARcLufTeUZbGue0-k9iZJVxmKlp0l0HQU",
+    authDomain: "freebees-24743.firebaseapp.com",
+    projectId: "freebees-24743",
+    storageBucket: "freebees-24743.appspot.com",
+    messagingSenderId: "1084271040061",
+    appId: "1:1084271040061:web:91df1dc11b58f5a4807c54",
+    measurementId: "G-6Z61GFCN05",
+  }
+
+  const app = initializeApp(firebaseConfig)
+
+  const auth = getAuth()
+
+  const setModel = (data) => {
+    setModelopen(data)
+  }
+
+  const login = () => {
+    setLoggedIn(true)
+  }
+
+  const logout = () => {
+    setLoggedIn(false)
+    auth.signOut().then(() => {
+      console.log("successfully signed out")
+    })
+    localStorage.clear()
+  }
+
+  const checkType = () => {
+    console.log("check")
+    if (typeof window != undefined) {
+    }
+  }
+
+  /////////
+
+  /**
+   * useEffect has been uesd to take actions on the first rendering
+   */
+  useEffect(() => {
+    const app = initializeApp(firebaseConfig)
+
+    if (!loaded) {
+      console.log("1st check", firebaseConfig)
+
+      setLoaded(true)
+    }
+  })
+
+  ///// Manual test with console
+  const getLayout = Component.getLayout ?? ((page) => page)
+  return (
+    <SSRProvider>
+      <ChakraProvider theme={customTheme}>
+        <AuthContext.Provider
+          value={{
+            isLoggedIn: loggedIn,
+            firebase: app,
+            login: login,
+            logout: logout,
+            accounttype: acctype,
+            modelopen: modelopen,
+            setModel: setModel,
+            checkType: checkType,
+          }}
+        >
+          {getLayout(<Component {...pageProps} />)}
+        </AuthContext.Provider>
+      </ChakraProvider>
+    </SSRProvider>
+  )
+}
+
+export default MyApp

pages/api/login.js

@@ -0,0 +1,38 @@
+import { createTokens, hashPassword, verifyPassword } from "../../utils/auth"
+
+export default async function handler(req, res) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ message: "Method Not Allowed" })
+  }
+
+  const { email, password } = req.body
+  console.log(password)
+
+  // You'd need to fetch user details from your database or any data source
+  //fetch data from postgres database where we store password as hash
+
+  // Here, for demonstration, let's assume a hardcoded user
+  const user = {
+    id: 1,
+    email: "user@example.com",
+    passwordHash: "$2a$10$Zy/TYg6WwOOctCQ6e/KOXebvH3AliSDjdopPxrIUWELVJBf/KE.iq", // hashed password: "password123"
+  }
+
+  const isValid = await verifyPassword(password, user.passwordHash)
+
+  if (!isValid) {
+    return res.status(401).json({ message: "Invalid credentials" })
+  }
+
+  const token = await createTokens(user.id)
+
+  res.setHeader("Set-Cookie", [
+    `token=${token.accessToken};  Path=/; HttpOnly`,
+    `rtoken=${token.refreshToken}; Path=/; HttpOnly`,
+  ])
+
+  return res.status(200).json({ token })
+}
+
+//user@example.com
+//password123

pages/api/logout.js

@@ -0,0 +1,7 @@
+export default async function handler(req, res) {
+  // if (req.method === 'POST') {
+  //     cookies().delete('token');
+  //   } else {
+  //     throw new NotFoundError();
+  //   }
+}

pages/api/refreshtoken.js

@@ -0,0 +1,35 @@
+import { issueAccessToken, verifyRefreshToken } from "../../utils/auth"
+
+// Example middleware to attach access token to outgoing requests
+async function attachAccessToken(req, res, next) {
+  const accessToken = req.cookies.accessToken
+  if (!accessToken) {
+    return res.status(401).json({ message: "Access token missing" })
+  }
+
+  // You might want to check token expiration here and refresh if necessary
+
+  req.headers.Authorization = `Bearer ${accessToken}`
+  next()
+}
+
+export default async function handler(req, res) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ message: "Method Not Allowed" })
+  }
+
+  const { refreshToken } = req.body
+
+  try {
+    const decoded = await verifyRefreshToken(refreshToken.value)
+    // Check if refresh token is valid, then issue a new access token
+    const accessToken = await issueAccessToken(decoded.userId)
+    console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
+    res.setHeader("Set-Cookie", [`token=${accessToken};  Path=/; HttpOnly`])
+
+    return res.status(200).json({ accessToken })
+  } catch (error) {
+    console.error("Error refreshing token:", error)
+    return res.status(401).json({ message: "Invalid refresh token" })
+  }
+}

pages/content.js

@@ -0,0 +1,35 @@
+import Head from "next/head"
+import React, { useContext, useEffect, useState } from "react"
+import MyButton from "../components/button"
+import Header from "../components/headbar"
+import Logincomponent from "../components/logincomponent"
+import Signupcomponent from "../components/signupcomponent"
+
+export default function Content(props) {
+  const [isloaded, setIsLoaded] = React.useState(false)
+
+  useEffect(() => {
+    if (!isloaded) {
+      console.log("isloaded called")
+
+      setIsLoaded(true)
+    }
+  })
+
+  return (
+    <>
+      <Header />
+    </>
+  )
+}
+
+/**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" } }
+}

pages/home.js

@@ -0,0 +1,37 @@
+import { useRouter } from "next/router"
+import React, { useContext, useEffect, useState } from "react"
+import Layout from "../components/layout"
+
+export default function Home(props) {
+  const [isloaded, setIsLoaded] = React.useState(false)
+
+  useEffect(() => {
+    if (!isloaded) {
+      console.log("isloaded called")
+
+      setIsLoaded(true)
+    }
+  })
+
+  const router = useRouter()
+  return (
+    <>
+      <button onClick={() => router.push("/menu")}>Click here to read menu</button>
+    </>
+  )
+}
+
+/**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" } }
+}
+
+Home.getLayout = function getLayout(page) {
+  return <Layout>{page}</Layout>
+}

pages/index.js

@@ -0,0 +1,30 @@
+import { Box, Center, Flex, Heading, Text } from "@chakra-ui/react"
+import React, { useEffect } from "react"
+
+function App() {
+  const [isloaded, setIsLoaded] = React.useState(false)
+
+  useEffect(() => {
+    if (!isloaded) {
+      console.log("isloaded called")
+
+      setIsLoaded(true)
+    }
+  })
+
+  return (
+    <Center bg="gray.200" height="100vh">
+      <Box textAlign="center">
+        <Heading size="4xl" color={"blue.500"}>
+          Coming Soon
+        </Heading>
+        <Text fontSize="2xl" mt="4">
+          ⚠ We are working on it! ⚠
+        </Text>
+        <Flex justifyContent="center" mt="8"></Flex>
+      </Box>
+    </Center>
+  )
+}
+
+export default App

pages/learningpage/[page].js

@@ -0,0 +1,28 @@
+import * as me from "melonjs"
+import { useRouter } from "next/router"
+import React, { useContext, useEffect, useState } from "react"
+
+import Layout from "../../components/layout"
+
+export default function Page(props) {
+  const [isloaded, setIsLoaded] = React.useState(false)
+
+  useEffect(() => {
+    if (!isloaded) {
+      console.log("isloaded called")
+
+      setIsLoaded(true)
+    }
+  })
+  const router = useRouter()
+
+  return <></>
+}
+
+/**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  */
+
+Page.getLayout = function getLayout(page) {
+  return <Layout>{page}</Layout>
+}

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>
+}

pages/login.js

@@ -0,0 +1,41 @@
+import { useRouter } from "next/router"
+import React, { useContext, useEffect, useState } from "react"
+import Layout from "../components/layout"
+
+import Logincomponent from "../components/logincomponent"
+import Signupcomponent from "../components/signupcomponent"
+
+export default function Login(props) {
+  const [isloaded, setIsLoaded] = React.useState(false)
+
+  useEffect(() => {
+    if (!isloaded) {
+      console.log("isloaded called")
+
+      setIsLoaded(true)
+    }
+  })
+
+  const router = useRouter()
+  return (
+    <>
+      <Logincomponent />
+      <button onClick={() => router.push("/menu")}>Click here to read menu</button>
+    </>
+  )
+}
+
+/**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" } }
+}
+
+Login.getLayout = function getLayout(page) {
+  return <Layout>{page}</Layout>
+}

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>
+}