lot of stuff is working

Author: giacomorebonato

.eslintrc.cjs

@@ -11,33 +11,37 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
+    'plugin:valtio/recommended',
   ],
-  overrides: [],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
   settings: {
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
     },
     'import/resolver': {
       node: {
         extensions: ['.js', '.jsx'],
       },
       typescript: {
-        "project": "tsconfig.json"
+        project: 'tsconfig.json',
       },
     },
     react: {
       version: '18',
     },
   },
-  plugins: ['react', '@typescript-eslint', 'import'],
+  plugins: ['react', '@typescript-eslint', 'import', '@tanstack/query'],
+  ignorePatterns: ['.eslintrc.cjs'],
   rules: {
+    'react/prop-types': 0,
     'react/react-in-jsx-scope': 0,
     '@typescript-eslint/no-explicit-any': 0,
+    'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
   },
 }

.gitignore

@@ -106,3 +106,4 @@ dist
 dev.db
 .DS_Store
 dev-dist/
+secret-key

.node-version

@@ -0,0 +1,8 @@
+{
+  "importOrderSortSpecifiers": true,
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-packagejson"]
+}

.prettierrc

@@ -8,7 +8,6 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "prettier.enable": true,
-  "prettier.configPath": "prettier.config.cjs",
   "npm.packageManager": "pnpm",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,

.vscode/settings.json

@@ -9,6 +9,16 @@ docker run -d -p 3000:3000 --env-file ./.env --name collab-editor -d collab-edit
 
 ## Instructions
 
-* rename `.env` to `.env.example`
-* install dependencies `pnpm i`
-* run in dev mode `pnpm dev`
+- rename `.env` to `.env.example`
+- install dependencies `pnpm i`
+- run in dev mode `pnpm dev`
+
+
+## File structure
+
+* client
+* server
+* features
+  * feature-api
+  * feature-route
+  * feature-query

README.md

@@ -0,0 +1,48 @@
+import { createRef, useRef } from 'react'
+import { AudioRecorder } from 'react-audio-voice-recorder'
+import WaveSurfer from 'wavesurfer.js'
+
+export const AudioItem = () => {
+  const divRef = createRef<HTMLDivElement>()
+  const wavesurferRef = useRef<WaveSurfer>()
+
+  return (
+    <div className='flex flex-row'>
+      <AudioRecorder
+        onRecordingComplete={(blob) => {
+          const url = URL.createObjectURL(blob)
+
+          if (wavesurferRef.current) {
+            wavesurferRef.current.destroy()
+          }
+
+          const wavesurfer = WaveSurfer.create({
+            container: divRef.current!,
+            waveColor: '#4F4A85',
+            progressColor: '#383351',
+            url,
+            cursorWidth: 4,
+            height: 40,
+          })
+
+          wavesurferRef.current = wavesurfer
+
+          wavesurfer.once('interaction', () => {
+            if (wavesurfer.isPlaying()) {
+              wavesurfer.pause()
+            } else {
+              wavesurfer.play()
+            }
+          })
+        }}
+        audioTrackConstraints={{
+          noiseSuppression: true,
+          echoCancellation: true,
+        }}
+        downloadOnSavePress={false}
+        downloadFileExtension='webm'
+      />
+      <div ref={divRef} className='flex-1 pl-2' />
+    </div>
+  )
+}

client/features/editor/audio-item.tsx

@@ -2,29 +2,40 @@ import { BlockNoteEditor } from '@blocknote/core'
 import '@blocknote/core/style.css'
 import { BlockNoteView, useBlockNote } from '@blocknote/react'
 import { HocuspocusProvider } from '@hocuspocus/provider'
+import { useEffect } from 'react'
+import useContant from 'use-constant'
 import { IndexeddbPersistence } from 'y-indexeddb'
 import * as Y from 'yjs'
 
 const getRandomColor = () => Math.floor(Math.random() * 16777215).toString(16)
-const ydoc = new Y.Doc()
+
 const DOC_NAME = 'block-note-editor'
 const url =
   window.location.hostname === 'localhost'
     ? `ws://localhost:3000/api/editor/${DOC_NAME}`
     : `wss://collab-editor.fly.dev/api/editor/${DOC_NAME}`
 
-new IndexeddbPersistence(DOC_NAME, ydoc)
-const hocuspocus = new HocuspocusProvider({
-  document: ydoc,
-  url,
-  name: DOC_NAME,
-  onConnect() {
-    console.log(`${DOC_NAME} connected`)
-  },
-})
-
 export function MyBlockNoteEditor() {
-  // Creates a new editor instance.
+  const ydoc = useContant(() => new Y.Doc())
+  const hocuspocus = useContant(
+    () =>
+      new HocuspocusProvider({
+        document: ydoc,
+        url,
+        name: DOC_NAME,
+        onConnect() {
+          console.log(`${DOC_NAME} connected`)
+        },
+      }),
+  )
+  const persistence = useContant(() => new IndexeddbPersistence(DOC_NAME, ydoc))
+
+  useEffect(() => {
+    persistence.on('sync', () => {
+      console.log('synced')
+    })
+  }, [persistence])
+
   const editor: BlockNoteEditor | null = useBlockNote({
     collaboration: {
       provider: hocuspocus,
@@ -36,6 +47,5 @@ export function MyBlockNoteEditor() {
     },
   })
 
-  // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />
 }

client/features/my-block-note-editor.tsx client/features/editor/my-block-note-editor.tsx

@@ -0,0 +1,23 @@
+import { motion } from 'framer-motion'
+import { ReactNode } from 'react'
+
+export const PageAnimation: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <motion.article
+      role='main'
+      className='prose'
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{
+        type: 'spring',
+        stiffness: 260,
+        damping: 20,
+      }}
+    >
+      {children}
+    </motion.article>
+  )
+}

client/features/page-animation.tsx

@@ -1,47 +1,63 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import 'react-toastify/dist/ReactToastify.css'
 
-import { CollabEditor } from './features/collab-editor.js'
 import './features/monaco-worker.js'
 
 import './main.css'
 // eslint-disable-next-line import/no-unresolved
+import { TrpcClient } from '@client/trpc-client.js'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { httpBatchLink } from '@trpc/client'
+import { toast, ToastContainer } from 'react-toastify'
 import { registerSW } from 'virtual:pwa-register'
-import { MyBlockNoteEditor } from './features/my-block-note-editor.js'
-
-const updateSW = registerSW({
-  immediate: true,
-  onOfflineReady() {
-    alert('Offline ready')
-  },
-  onNeedRefresh() {
-    if (confirm('New content available. Reload?')) {
-      updateSW(true)
+import { routes } from './pages/__routes.js'
+
+if (import.meta.env.PROD) {
+  const updateSW = registerSW({
+    immediate: true,
+    onOfflineReady() {
+      toast('Offline ready')
+    },
+    onNeedRefresh() {
+      if (confirm('New content available. Reload?')) {
+        updateSW(true)
+      }
+    },
+  })
+}
+
+if (!import.meta.env.SSR) {
+  let name: string | null | undefined
+
+  do {
+    name = localStorage.getItem('name') ?? window.prompt('Write your name')
+
+    if (name) {
+      localStorage.setItem('name', name)
     }
-  },
-})
-
-let name: string | null | undefined
-
-do {
-  name = localStorage.getItem('name') ?? window.prompt('Write your name')
-
-  if (name) {
-    localStorage.setItem('name', name)
-  }
-} while (!name)
-
-window.name = name
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <div className='grid grid-cols-2'>
-      <div>
-        <CollabEditor />
-      </div>
-      <div className='bg-white'>
-        <MyBlockNoteEditor />
-      </div>
-    </div>
-  </React.StrictMode>,
-)
+  } while (!name)
+
+  const router = createBrowserRouter(routes)
+
+  const queryClient = new QueryClient()
+  const trpcClient = TrpcClient.createClient({
+    links: [
+      httpBatchLink({
+        url: '/trpc',
+      }),
+    ],
+  })
+
+  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+      <TrpcClient.Provider client={trpcClient} queryClient={queryClient}>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+          <ToastContainer />
+        </QueryClientProvider>
+      </TrpcClient.Provider>
+    </React.StrictMode>,
+  )
+}