update row yMap onBlur

NGimbal · Mar 9, 2021 · 240680e · 240680e
1 parent 9d3353a
commit 240680e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 102 deletions.
diff --git a/src/App.js b/src/App.js
@@ -37,15 +37,6 @@ const Styles = styled.div`
   }
 `
 
-// const ydoc = new Y.Doc()
-
-// const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-roomname', ydoc)
-
-// wsProvider.on('status', event => {
-//   window.alert(event.status)
-//   console.log(event.status) // logs "connected" or "disconnected"
-// })
-
 const blankRow = {
   format: 'lala',
   divNum: '1235',
@@ -67,7 +58,7 @@ const blankRow = {
 
 const connectDoc = (doc) => {
   console.log('connect to a provider with room', doc.guid)
-  const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-room2', doc)
+  const wsProvider = new WebsocketProvider('ws://localhost:1234', 'my-room3', doc)
 
   wsProvider.on('status', event => {
     // window.alert(event.status)
@@ -80,7 +71,7 @@ const connectDoc = (doc) => {
 function App() {
 
   const ydoc = useYDoc('docguid', connectDoc)
-  const {data: table, push: yPush, insert: yInsert} = useYArray(ydoc.getArray('table1'))
+  const {data, push: yPush, insert: yInsert} = useYArray(ydoc.getArray('table1'))
 
   const columns = React.useMemo(() => [
     {
@@ -148,7 +139,7 @@ function App() {
   return (
     <div className="App" style={{width:250}}>
       <Styles>
-        <DataTable columns={columns} table={table}/>
+        <DataTable columns={columns} data={data}/>
       </Styles>
       <input type="button" value="+" onClick={addRow}/>
       <ImportCSV doc={ydoc} yPush={yPush} yInsert={yInsert}/>

diff --git a/src/Components/DataTable/DataTable.js b/src/Components/DataTable/DataTable.js
@@ -1,83 +1,38 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { useTable, useGroupBy, useExpanded, useRowState } from 'react-table'
 import { useYDoc, useYArray, useYMap } from 'zustand-yjs'
 
-// TODO:
-// Cell is rendered normally, except when click, turns to editable cell
-//
-
-// Create an editable cell renderer
-// const EditableCell = ({
-//   // value: initialValue,
-//   row: { original },
-//   // row: { index },
-//   column: { id },
-// }) => {
-
-//   // Keep and update the state of the cell
-//   const { set, data } = useYMap(original)
-
-//   const onChange = e => {
-//     console.log("onChange")
-//     // setValue(e.target.value)
-//     set(id, `${e.target.value}`)
-//   }
-
-//   // We'll only update the external data when the input is blurred
-//   // const onBlur = () => {
-//   //   console.log("blur")
-//   // }
-
-//   return <input value={data[id]} onChange={onChange} />
-// }
-
 const SimpleEditableCell = ({
   value: initialValue,
   set: set,
   column: { id },
 }) => {
+
+  const [val, setVal] = React.useState(initialValue)
 
-  // Keep and update the state of the cell
-  // const { set, data } = useYMap(original)
+  useEffect(() => {
+    setVal(initialValue)
+  },[initialValue])
 
   const onChange = e => {
-    console.log("onChange")
-    // setValue(e.target.value)
-    set(id, `${e.target.value}`)
+    setVal(`${e.target.value}`)
   }
 
-  // We'll only update the external data when the input is blurred
-  // const onBlur = () => {
-  //   console.log("blur")
-  // }
+  const onBlur = e => {
+    set(id, `${e.target.value}`)
+  }
 
-  return <input value={initialValue} onChange={onChange} />
+  return <input value={val} onChange={onChange} onBlur={onBlur} />
 }
 
 const EditableRow = ({
-  // value: initialValue,
-  // row: { original },
   row: row,
-  // row: { index },
-  // column: { id },
 }) => {
 
   // Keep and update the state of the cell
   const { set, data } = useYMap(row.original)
 
-  // const onChange = e => {
-  //   console.log("onChange")
-  //   console.log(e)
-    // setValue(e.target.value)
-    // set(id, `${e.target.value}`)
-  // }
-
-  // We'll only update the external data when the input is blurred
-  // const onBlur = () => {
-  //   console.log("blur")
-  // }
-
   return (
     <tr {...row.getRowProps()}>
       {row.cells.map(cell => {
@@ -116,32 +71,12 @@ const EditableRow = ({
 }
 
 const GroupedRow = ({
-  // value: initialValue,
-  // row: { original },
   row: row,
-  // row: { index },
-  // column: { id },
 }) => {
-
-  // Keep and update the state of the cell
-  // const { set, data } = useYMap(row.original)
-
-  // const onChange = e => {
-  //   console.log("onChange")
-  //   console.log(e)
-    // setValue(e.target.value)
-    // set(id, `${e.target.value}`)
-  // }
-
-  // We'll only update the external data when the input is blurred
-  // const onBlur = () => {
-  //   console.log("blur")
-  // }
 
   return (
     <tr {...row.getRowProps()}>
       {row.cells.map(cell => {
-        // console.log(cell)
         return (
           <td 
             {...cell.getCellProps()}
@@ -164,7 +99,7 @@ const GroupedRow = ({
                 </>
                 ) : cell.isAggregated ? (
                   cell.render('Aggregated')
-                ) : cell.isPlaceholder? null : (
+                ) : cell.isPlaceholder ? null : (
                   cell.render('Cell') // this shouldn't happen?
                 )
               }
@@ -175,11 +110,7 @@ const GroupedRow = ({
   )
 }
 
-function DataTable({ columns, table: data }) {
-  // const data = React.useMemo(() =>
-  //   table.map(row => row.toJSON())
-  // , [table])
-
+function DataTable({ columns, data }) {
   // Use the state and functions returned from useTable to build your UI
   const {
     getTableProps,
@@ -195,13 +126,8 @@ function DataTable({ columns, table: data }) {
     },
     useGroupBy,
     useExpanded,
-    // useRowState,
   )
 
-
-  // console.log(data)
-
-  // Render the UI for your table
   return (
     <table {...getTableProps()}>
       <thead>
@@ -222,14 +148,14 @@ function DataTable({ columns, table: data }) {
       </thead>
       <tbody {...getTableBodyProps()}>
         {rows.map((row, i) => {
-          // is this going to be rly slow?
+
+          // is there a better place to do this?
           if(!row.canExpand){
             row.values = row.original.toJSON()
           }
-          // console.log(prepareRow)
+
           prepareRow(row)
 
-          // row.canExpand ? renderGrouped(row) : renderEditable(row)
           return (            
             <>
             {row.canExpand ? <GroupedRow row={row}/> : <EditableRow row={row}/>}