added PWA

pages/_app.js

@@ -1,4 +1,5 @@
 import { initializeApp } from "firebase/app"
+import Head from 'next/head'
 import React, { useContext, useEffect, useState } from "react"
 
 //Auth imports
@@ -61,15 +62,28 @@ function MyApp({ Component, pageProps }) {
   }
 
   /////////
+  const [registration, setRegistration] = useState(null)
 
   /**
    * useEffect has been uesd to take actions on the first rendering
    */
   useEffect(() => {
-    const app = initializeApp(firebaseConfig)
+    // const app = initializeApp(firebaseConfig)
 
     if (!loaded) {
-      console.log("1st check", firebaseConfig)
+      // console.log("1st check", firebaseConfig)
+      
+      if ("serviceWorker" in navigator) {
+        window.addEventListener("load", function () {
+          navigator.serviceWorker.register("/sw.js").then(
+            function (registration) {
+              setRegistration(registration)
+              console.log("Service Worker registration successful with scope: ", registration.scope)
+            },
+            function (err) {}
+          )
+        })
+      }
 
       setLoaded(true)
     }
@@ -78,7 +92,6 @@ function MyApp({ Component, pageProps }) {
   ///// Manual test with console
   const getLayout = Component.getLayout ?? ((page) => page)
   return (
-    <SSRProvider>
       <ChakraProvider theme={customTheme}>
         <AuthContext.Provider
           value={{
@@ -95,7 +108,6 @@ function MyApp({ Component, pageProps }) {
           {getLayout(<Component {...pageProps} />)}
         </AuthContext.Provider>
       </ChakraProvider>
-    </SSRProvider>
   )
 }
 

pages/_document.js

@@ -0,0 +1,25 @@
+import { Head, Html, Main, NextScript } from 'next/document'
+ 
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+          <link rel="manifest" href="/manifest.json" />
+          <link rel="apple-touch-icon" href="/icon.png"></link>
+          <meta name="theme-color" content="#fff" />
+          <meta name='application-name' content={"pwa test"} />
+          <meta name='apple-mobile-web-app-capable' content='yes' />
+          <meta name='apple-mobile-web-app-status-bar-style' content='default' />
+          <meta name='apple-mobile-web-app-title' content={"pwa test"} />
+          <meta name='description' content={"fuck me whattttt"} />
+          <meta name='format-detection' content='telephone=no' />
+          <meta name='mobile-web-app-capable' content='yes' />
+          <meta name='theme-color' content='#FFFFFF' />
+        </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

pages/api/login.js

@@ -12,19 +12,16 @@ export default async function handler(req, res) {
   //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 response = await fetch(`http://localhost:3001/user`)
+  const user_data = await response.json()
 
-  const isValid = await verifyPassword(password, user.passwordHash)
+  const isValid = await verifyPassword(password, user_data.password)
 
   if (!isValid) {
     return res.status(401).json({ message: "Invalid credentials" })
   }
 
-  const token = await createTokens(user.id)
+  const token = await createTokens(user_data.id)
 
   res.setHeader("Set-Cookie", [
     `token=${token.accessToken};  Path=/; HttpOnly`,

pages/content.js

@@ -1,6 +1,5 @@
 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"

pages/learningpage/[page].js

@@ -1,28 +0,0 @@
-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/learningpage/[page].tsx

@@ -0,0 +1,105 @@
+"use client"
+import { Box, Editable, Flex, FormLabel, Input, Spacer } from "@chakra-ui/react"
+import { Container, Sprite, Stage, Text } from "@pixi/react"
+import dynamic from "next/dynamic"
+import { useRouter } from "next/router"
+
+import React, { useContext, useEffect, useMemo, useReducer, useState } from "react"
+import Layout from "../../components/layout"
+// import PixiApp from "../../components/PixiApp"
+
+const PixiApp = dynamic(() => import("../../components/PixiApp"), { ssr: false })
+
+export default function Page(props: any) {
+  const [isloaded, setIsLoaded] = React.useState(false)
+
+  const [name, setName] = React.useState("app")
+  const [scale, setScale] = React.useState(0.5)
+  const [directions, setDirections] = React.useState(["up", "down", "up", "down", "up", "down", "up", "down"])
+
+  const [screenSize, setScreenSize] = useState({
+    width: 0,
+    height: 0,
+  })
+
+  useEffect(() => {
+    // Function to update the screen size
+    const updateScreenSize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    // Update screen size upon mount to capture the initial values
+    updateScreenSize()
+
+    // Add event listener for resize events
+    window.addEventListener("resize", updateScreenSize)
+    console.log("screenSize", screenSize)
+    return () => window.removeEventListener("resize", updateScreenSize)
+  }, [])
+
+  function handleClick() {}
+
+  const router = useRouter()
+  const handleupdate = () => {
+    setIsLoaded(!isloaded)
+  }
+
+  // console.log("Asdasdasd");
+  function cal_screen_size() {}
+
+  function convertStringToArray(rangeString: string) {
+    var range: string[] = rangeString.split("-")
+
+    return range
+  }
+
+  const dire = ["up", "right", "down", "right", "left"]
+
+  const direstr = dire.join("-")
+  return (
+    <>
+      <Box h={30} backgroundColor={"pink"}></Box>
+      <Flex direction={"row-reverse"} alignItems="center">
+        <Box flexBasis={0} flexGrow={1} alignContent={"right"}>
+          <PixiApp
+            n={name}
+            scale={scale}
+            width={screenSize.width / 2}
+            height={screenSize.height - 30}
+            directions={directions}
+          />
+        </Box>
+
+        <Box flexBasis={0} flexGrow={1} scrollBehavior={"smooth"}>
+          <div style={{ height: screenSize.height - 30, width: screenSize.width / 2, overflowY: "scroll" }}>
+            <Input
+              onChange={(e) => {
+                setName(e.target.value)
+              }}
+              value={name}
+              placeholder="name"
+            />
+            <button
+              onClick={() => {
+                setDirections(convertStringToArray(name))
+              }}
+            >
+              change
+            </button>
+          </div>
+        </Box>
+      </Flex>
+    </>
+  )
+}
+
+/**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: any) {
+  return page
+}

pages/menu.js

@@ -26,8 +26,8 @@ function Menubox(props) {
             id={item.id}
             itemid={item.userId}
             title={item.title}
-            summary={item.body}
-            image_url="https://example.com/image1.jpg"
+            summary={item.summary}
+            image_url={"https://i.etsystatic.com/41743066/r/il/51b87b/5227514595/il_1140xN.5227514595_gkk6.jpg"}
           />
         ))}
       </Grid>