Style for webpush

OneSignalDevelopers · Mar 29, 2023 · 0133252 · 0133252
1 parent 307a94c
commit 0133252
Show file tree

Hide file tree

Showing 9 changed files with 399 additions and 399 deletions.
diff --git a/package.json b/package.json
@@ -20,5 +20,10 @@
     "react-dom": "18.2.0",
     "react-onesignal": "^2.0.4",
     "typescript": "4.9.5"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.3.0"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,5 +1,5 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import "@/styles/globals.css"
+import type { AppProps } from "next/app"
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />

diff --git a/pages/hooks/onesignal.tsx b/pages/hooks/onesignal.tsx
@@ -1,9 +1,10 @@
 import { OnesignalAppId } from "@/common/config"
-import React, { useRef } from "react"
+import React, { useRef, useState } from "react"
 import OneSignal from "react-onesignal"
 
 const useOneSignal = () => {
   const onesignalInitializingRef = useRef(false)
+  const userId = useState("")
 
   React.useEffect(() => {
     const init = async () => {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,10 +1,24 @@
-import styles from "@/styles/Home.module.css"
 import Head from "next/head"
 import useOneSignal from "./hooks/onesignal"
+import OneSignal from "react-onesignal"
+import { useEffect, useState } from "react"
 
 export default function Home() {
+  const [osUser, setOsUser] = useState("")
   useOneSignal()
 
+  useEffect(() => {
+    const loadOneSignalUser = async () => {
+      const userId = await OneSignal.getUserId()
+      if (userId) {
+        setOsUser(userId)
+      }
+    }
+
+    loadOneSignalUser()
+  })
+
+  OneSignal.getUserId()
   return (
     <>
       <Head>
@@ -13,10 +27,13 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className={styles.main}>
-        <div className={styles.description}>
-          <p>OneSignal Hook with Next.js 13</p>
-        </div>
+      <main className="container mx-auto sm:px-6 lg:px-8 mt-4 mb-4 h-screen flex flex-col gap-4">
+        <h1 className="text-3xl text-center">OneSignal Next.js 13</h1>
+
+        <pre>{osUser}</pre>
+        <button className="p-2 border border-slate-50 w-48 justify-center mx-auto hover:border-red-500">
+          Send notification...
+        </button>
       </main>
     </>
   )

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/styles/Home.module.css b/styles/Home.module.css