docs-plus · HMarzban · Apr 3, 2023 · Mar 17, 2023 · Mar 21, 2023 · Mar 21, 2023
diff --git a/packages/next.js/.env.example b/packages/next.js/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_PROVIDER_URL='ws://localhost:2300/collaboration'
+NEXT_PUBLIC_RESTAPI_URL='http://localhost:2300/api'
diff --git a/packages/next.js/.gitignore b/packages/next.js/.gitignore
@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env*.production
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# next-pwa
+/public/precache.*.*.js
+/public/sw.js
+/public/workbox-*.js
+/public/worker-*.js
+/public/fallback-*.js
+/public/precache.*.*.js.map
+/public/sw.js.map
+/public/workbox-*.js.map
+/public/worker-*.js.map
+/public/fallback-*.js
diff --git a/packages/next.js/README.md b/packages/next.js/README.md
@@ -0,0 +1,23 @@
+# Progressive Web App Example
+
+This example uses [`next-pwa`](https://github.com/shadowwalker/next-pwa) to create a progressive web app (PWA) powered by [Workbox](https://developers.google.com/web/tools/workbox/).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app&project-name=progressive-web-app&repository-name=progressive-web-app)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example progressive-web-app progressive-web-app
+# or
+yarn create next-app --example progressive-web-app progressive-web-app
+# or
+pnpm create next-app --example progressive-web-app progressive-web-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/packages/next.js/components/Button.jsx b/packages/next.js/components/Button.jsx
@@ -0,0 +1,21 @@
+const Button = ({ children, style, onClick: click, loading, className }) => {
+  return (
+    <button className={'w-full text-center flex justify-center items-center px-4 py-2 leading-6 border rounded-md transition ease-in-out duration-150' + className}
+      disabled={loading}
+      style={style}
+      type="button"
+      onClick={click}>
+      {loading
+        ? <>
+          <svg className="animate-spin -ml-1 mr-3 h-5 w-5 " fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" fill="currentColor"></path>
+          </svg>
+          Processing...
+        </>
+        : children}
+    </button>
+  )
+}
+
+export default Button
diff --git a/packages/next.js/components/Counter.jsx b/packages/next.js/components/Counter.jsx
@@ -0,0 +1,37 @@
+
+import { useEffect, useRef, useState } from 'react'
+
+const Counter = ({ seconds, callback, stopTimer }) => {
+  const [timeLeft, setTimeLeft] = useState(+seconds)
+  const intervalRef = useRef()
+
+  useEffect(() => {
+    intervalRef.current = setInterval(() => {
+      setTimeLeft((t) => t - 1)
+    }, 1000)
+
+    return () => {
+      console.log('aklsdlaks;dlk close')
+      clearInterval(intervalRef.current)
+    }
+  }, [])
+
+  // useEffect(() => {
+  //   console.log("stopTimer changed", stopTimer)
+  // }, [stopTimer])
+
+  useEffect(() => {
+    if (timeLeft <= 0) {
+      clearInterval(intervalRef.current)
+      if (callback) callback()
+    }
+  }, [timeLeft])
+
+  return (
+    <>
+      <div>{timeLeft}s</div>
+    </>
+  )
+}
+
+export default Counter
diff --git a/packages/next.js/components/ReloadPrompt.jsx b/packages/next.js/components/ReloadPrompt.jsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react'
+import Counter from './Counter'
+const intervalMS = 1000 * 60 // 1min
+
+const PwaUpdater = () => {
+    const wb = window?.workbox
+
+    const [isOpen, setIsOpen] = useState(false);
+    const onConfirmActivate = () => wb.messageSkipWaiting();
+
+
+    if (typeof window !== 'undefined' && 'serviceWorker' in navigator && window.workbox !== undefined) {
+
+    useEffect(() => {
+
+            console.log("ReloadPrompt", wb)
+            // add event listeners to handle any of PWA lifecycle event
+            // https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-window.Workbox#events
+            wb.addEventListener('installed', event => {
+              console.log(`Event ${event.type} is triggered.`)
+              console.log(event)
+            })
+
+            wb.addEventListener('controlling', event => {
+              console.log(`Event ${event.type} is triggered.`)
+              console.log(event)
+              window.location.reload();
+            })
+
+            wb.addEventListener('activated', event => {
+              console.log(`Event ${event.type} is triggered.`)
+              console.log(event)
+            })
+
+            // A common UX pattern for progressive web apps is to show a banner when a service worker has updated and waiting to install.
+            // NOTE: MUST set skipWaiting to false in next.config.js pwa object
+            // https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users
+            const promptNewVersionAvailable = event => {
+                console.log("promptNewVersionAvailable", event)
+              // `event.wasWaitingBeforeRegister` will be false if this is the first time the updated service worker is waiting.
+              // When `event.wasWaitingBeforeRegister` is true, a previously updated service worker is still waiting.
+              // You may want to customize the UI prompt accordingly.
+              if (confirm('A newer version of this web app is available, reload to update?')) {
+                wb.addEventListener('controlling', event => {
+                //   window.location.reload()
+                    console.log("new version is available")
+                })
+
+                // Send a message to the waiting service worker, instructing it to activate.
+                // wb.messageSkipWaiting()
+              } else {
+                console.log(
+                  'User rejected to reload the web app, keep using old version. New version will be automatically load when user open the app next time.'
+                )
+              }
+            }
+
+            // wb.addEventListener('waiting', promptNewVersionAvailable)
+            wb.addEventListener('waiting', () => setIsOpen(true));
+            wb.register();
+
+            // ISSUE - this is not working as expected, why?
+            // I could only make message event listenser work when I manually add this listenser into sw.js file
+            wb.addEventListener('message', event => {
+              console.log(`Event ${event.type} is triggered.`)
+              console.log(event)
+            })
+
+    }, []);
+
+  }
+
+
+    return (
+        <div className={`${isOpen? 'visible': 'hidden'} fixed bottom-2 left-2 p-3 z-50 rounded-md shadow bg-white`}>
+        <p>
+          Hey, a new version is available! Please click below to update.
+        </p>
+        <div className='pt-2 flex'>
+            <button
+                className="border outline mr-2 px-3 py-1 outline-none rounded-md bg-blue-500 text-white hover:bg-blue-600"
+                onClick={onConfirmActivate}
+            >
+                Reload and update
+            </button>
+            <button 
+                className="border outline mr-2 px-3 py-1 outline-none rounded-md hover:bg-slate-500  hover:text-white"
+                onClick={() => setIsOpen(false)}
+            >
+                Cancel
+            </button>
+        </div>
+
+      </div>
+    );
+  }
+
+  export default PwaUpdater;
diff --git a/packages/next.js/components/TipTap/OnlineIndicator.jsx b/packages/next.js/components/TipTap/OnlineIndicator.jsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react'
+
+import { OfflineCloud, OnlineCloud } from '../icons/Icons'
+
+const OnlineIndicator = () => {
+  const [isOnline, setIsOnline] = useState(false)
+  const [showStatus, setShowStatus] = useState(true)
+
+
+    useEffect(() => {
+      const handleOnlineStatus = () => {
+        setIsOnline(true)
+        setShowStatus(true)
+      }
+      const handleOfflineStatus = () => {
+        setIsOnline(false)
+        setShowStatus(true)
+      }
+
+      window.addEventListener('online', handleOnlineStatus)
+      window.addEventListener('offline', handleOfflineStatus)
+
+      return () => {
+        window.removeEventListener('online', handleOnlineStatus)
+        window.removeEventListener('offline', handleOfflineStatus)
+      }
+    }, [])
+
+    useEffect(() => {
+      if (showStatus) {
+        const timer = setTimeout(() => {
+          setShowStatus(false)
+        }, 5000)
+
+        return () => clearTimeout(timer)
+      }
+    }, [showStatus])
+
+  return (
+    <div className=''>
+      {showStatus && (
+        <div className={` flex align-baseline justify-center status ${isOnline ? 'online' : 'offline'}`}>
+          {isOnline
+            ? <span className='flex align-baseline justify-center text-xs font-medium text-gray-500'>
+            <OnlineCloud className="mr-2" /> Saved to docsplus
+            </span>
+            : <span className='flex align-baseline justify-center text-xs font-medium text-gray-500'>
+              <OfflineCloud className="mr-2"/>Working offline
+              </span>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default OnlineIndicator
diff --git a/packages/next.js/components/TipTap/PadTitle.jsx b/packages/next.js/components/TipTap/PadTitle.jsx
@@ -0,0 +1,72 @@
+import Link from 'next/link'
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import {
+  DocsPlus
+} from '../icons/Icons'
+
+import OnlineIndicator from './OnlineIndicator'
+
+const PadTitle = ({ docTitle, docId,docSlug, provider }) => {
+  const queryClient = useQueryClient()
+
+  const { isLoading, isSuccess, mutate } = useMutation({
+    mutationKey: ['updateDocumentMetadata'],
+    mutationFn: ({ title, docId }) => {
+      // NOTE: This is a hack to get the correct URL in the build time
+      const url = `${process.env.NEXT_PUBLIC_RESTAPI_URL}/documents/${docId.split('.').at(-1)}`
+
+
+      return fetch(url, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ title })
+      })
+        .then(res => res.json())
+    },
+    onSuccess: (data) => {
+      queryClient.setQueryData(['getDocumentMetadataByDocName'], data)
+    }
+  })
+
+  const saveData = (e) => {
+    if (e.target.innerText === docTitle) return
+    mutate({
+      title: e.target.innerText,
+      docId: docId.split('.').at(-1)
+    })
+  }
+
+
+  return (
+    <div className='flex flex-row items-center'>
+      <div className='padLog'>
+        <Link href="/">
+          <DocsPlus size="34" />
+        </Link>
+      </div>
+      <div className='ml-3'>
+       {isLoading
+         ? 'Loading...'
+         : <div dangerouslySetInnerHTML={{ __html: docTitle }}
+        contentEditable
+         className="border border-transparent px-2 py-0 rounded-sm text-lg font-medium min-w-[14rem] hover:border-slate-300" type="text"
+         onBlur={saveData}
+         onKeyDown={(e) => {
+           if (event.key === 'Enter') {
+             e.preventDefault()
+             e.target.blur()
+           }
+         }}
+         >
+        </div>}
+      </div>
+        <OnlineIndicator/>
+    </div>
+  )
+}
+
+export default PadTitle
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		NEXT_PUBLIC_PROVIDER_URL='ws://localhost:2300/collaboration'
		NEXT_PUBLIC_RESTAPI_URL='http://localhost:2300/api'