add sagas for all data layer methods #662

gonpombo8 · 2023-06-21T19:03:30Z

Remove all event emitters for fileChange and dirty state (canSave)
Add sagas for each rpc method (save, undo, redo, importAsset, etc)
Move assets catalog and dirty engine state to redux (app store)
Fix types for data-layer rpc host

cloudflare-workers-and-pages · 2023-06-21T19:03:48Z

Deploying with Cloudflare Pages

Latest commit:	`4e1b50a`
Status:	✅ Deploy successful!
Preview URL:	https://19c2ba55.js-sdk-toolchain.pages.dev
Branch Preview URL:	https://feat-data-layer-sagas.js-sdk-toolchain.pages.dev

View logs

gonpombo8 · 2023-06-21T19:05:18Z

packages/@dcl/inspector/src/redux/data-layer/index.ts

+  SetPreferences = 'set-preferences'
+}
+
+let dataLayerInterface: DataLayerRpcClient | undefined


the idea of this is to not serialize the dataLayer at all.
All the methods should be called via sagas

gonpombo8 · 2023-06-21T19:05:39Z

packages/@dcl/inspector/src/redux/data-layer/index.ts

      state.reconnectAttempts = 0
      state.error = undefined
    },
    error: (state, { payload }: PayloadAction<{ error: ErrorType }>) => {
      console.log('[WS] Error', payload.error)
      state.error = payload.error
-    }
+    },
+    save: () => {},


we will have an action/saga for each method of the dataLayer

gonpombo8 · 2023-06-21T19:06:13Z

packages/@dcl/sdk-commands/src/commands/start/data-layer/rpc.ts


-  async function rpcHandler(serverPort: RpcServerPort<DataLayerContext>) {
-    // TODO: dataLayer as any


any type fixed

github-actions · 2023-06-21T19:08:51Z

Test this pull request

The @dcl/sdk package can be tested in scenes by running

npm install "https://sdk-team-cdn.decentraland.org/@dcl/js-sdk-toolchain/branch/feat/data-layer-sagas/dcl-sdk-7.2.5-5413626063.commit-01cabb6.tgz"

To test with npx init

export SDK_COMMANDS="https://sdk-team-cdn.decentraland.org/@dcl/js-sdk-toolchain/branch/feat/data-layer-sagas/dcl-sdk-commands-7.2.5-5413626063.commit-01cabb6.tgz"
npx $SDK_COMMANDS init

The @dcl/inspector package can be tested by visiting this url

Or by installing it via NPM

npm install "https://sdk-team-cdn.decentraland.org/@dcl/js-sdk-toolchain/branch/feat/data-layer-sagas/@dcl/inspector/dcl-inspector-7.2.5-5413626063.commit-01cabb6.tgz"

The /changerealm command to test test in-world

/changerealm https://sdk-team-cdn.decentraland.org/ipfs/feat/data-layer-sagas-e2e

You can preview this build entering:
https://playground.decentraland.org/?sdk-branch=feat/data-layer-sagas

cazala · 2023-06-21T19:08:34Z

packages/@dcl/inspector/src/components/Toolbar/Preferences/Preferences.tsx


+  const FreeCameraInvertRotationIcon = preferences.freeCameraInvertRotation ? BiCheckboxChecked : BiCheckbox
+  const AutosaveEnabledIcon = preferences.autosaveEnabled ? BiCheckboxChecked : BiCheckbox
+  console.log('BOEDO: Changed', preferences)


cazala · 2023-06-21T19:09:41Z

packages/@dcl/inspector/src/hooks/sdk/useSdkContext.ts

@@ -23,9 +25,9 @@ export const useSdkContext = () => {
  }, [dispatch])

  useEffect(() => {
-    if (!catalog || !canvas || sdk || isLoading || !dataLayer) return
+    if (!catalog || !canvas || sdk || isLoading || !dataLayer || !preferences) return


do we need the !dataLayer if it's not used anymore by createSdkContext?

nope, i think that we are covered with the prefences. good catch

cazala · 2023-06-21T19:09:55Z

packages/@dcl/inspector/src/hooks/sdk/useSdkContext.ts

@@ -35,7 +37,7 @@ export const useSdkContext = () => {
        setError(e)
      })
      .finally(() => setIsLoading(false))
-  }, [catalog, canvas, sdk, isLoading, dispatch, dataLayer])
+  }, [catalog, canvas, sdk, isLoading, dispatch, dataLayer, preferences])


Same as above with the dataLayer here

cazala · 2023-06-21T19:11:00Z

packages/@dcl/inspector/src/redux/app/index.ts

+      state.canSave = isDirty
+    },
+    updatePreferences: (state, { payload }: PayloadAction<{ preferences: InspectorPreferences }>) => {
+      console.log(' UPDATED ', payload.preferences)


cazala · 2023-06-21T19:11:05Z

packages/@dcl/inspector/src/redux/app/index.ts

+export const getInspectorPreferences = (state: RootState): InspectorPreferences => {
+  if (!state.app.preferences) {
+    // TODO: send to sentry
+    console.log('invalid inspector preferences')


codecov · 2023-06-21T19:18:26Z

Codecov Report

Patch coverage: 57.27% and project coverage change: -0.09 ⚠️

Comparison is base (f97bfb9) 73.46% compared to head (4e1b50a) 73.37%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #662      +/-   ##
==========================================
- Coverage   73.46%   73.37%   -0.09%     
==========================================
  Files         289      296       +7     
  Lines        9661     9815     +154     
  Branches     1274     1277       +3     
==========================================
+ Hits         7097     7202     +105     
- Misses       2443     2491      +48     
- Partials      121      122       +1

Impacted Files	Coverage Δ
...s/@dcl/inspector/src/hooks/catalog/useAssetTree.ts	`0.00% <0.00%> (ø)`
...spector/src/redux/data-layer/sagas/remove-asset.ts	`0.00% <0.00%> (ø)`
.../inspector/src/redux/data-layer/sagas/undo-redo.ts	`17.07% <17.07%> (ø)`
packages/@dcl/inspector/src/lib/sdk/context.ts	`47.82% <20.00%> (+1.15%)`	⬆️
...ages/@dcl/inspector/src/hooks/sdk/useSdkContext.ts	`25.49% <22.22%> (+1.96%)`	⬆️
...edux/data-layer/sagas/set-inspector-preferences.ts	`24.00% <24.00%> (ø)`
.../sdk-commands/src/commands/start/data-layer/rpc.ts	`41.66% <28.57%> (ø)`
...spector/src/redux/data-layer/sagas/import-asset.ts	`29.41% <29.41%> (ø)`
.../@dcl/inspector/src/redux/data-layer/sagas/save.ts	`33.33% <33.33%> (ø)`
...or/src/redux/data-layer/sagas/get-asset-catalog.ts	`37.50% <37.50%> (ø)`
... and 17 more

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

cazala · 2023-06-28T20:54:24Z

packages/@dcl/inspector/src/components/Renderer/Renderer.tsx


 const fixedNumber = (val: number) => Math.round(val * 1e2) / 1e2

 const Renderer: React.FC = () => {
  const canvasRef = React.useRef<HTMLCanvasElement>(null)
  useRenderer(() => canvasRef)
  const sdk = useSdk()
-  const dataLayer = useAppSelector(getDataLayer)
-
+  const dispatch = useAppDispatch()
  const [isLoading, setIsLoading] = useState(false)


This loading state might need to be controlled from the saga, otherwise right now it set to true and then to false right after the action is dispatched (because the dispatch does not await)

will do it in another pr :)

cazala · 2023-06-28T20:56:40Z

packages/@dcl/inspector/src/redux/data-layer/index.ts

+    undo: () => {},
+    redo: () => {},
+    importAsset: (_state, _payload: PayloadAction<ImportAssetRequest>) => {},
+    removeAsset: (_state, _payload: PayloadAction<Asset>) => {}


are these above unsued?

no, this generates the action with that payload type.
So then in the saga you can listen to this importAsset action

gonpombo8 force-pushed the feat/data-layer-sagas branch from 08c2811 to 72e95f4 Compare June 21, 2023 19:03

gonpombo8 commented Jun 21, 2023

View reviewed changes

cazala approved these changes Jun 21, 2023

View reviewed changes

gonpombo8 force-pushed the feat/data-layer-sagas branch 2 times, most recently from 0d9c17f to dcba58f Compare June 27, 2023 16:27

gonpombo8 changed the title ~~add sagas for InspectorPreferences and Save methods~~ add sagas for all data layer methods Jun 27, 2023

gonpombo8 marked this pull request as ready for review June 27, 2023 18:42

cazala reviewed Jun 28, 2023

View reviewed changes

gonpombo8 added 8 commits June 29, 2023 11:21

add sagas for InspectorPreferences and Save methods

c24eb1a

remove logs

4a1ad08

fix skd context initialization

e8b22d0

add missing rpc methods

e1d19b1

remove log

3e11511

fix linter

2d7dcbf

fix duplicate engines

5a853a4

fix build

4e1b50a

gonpombo8 force-pushed the feat/data-layer-sagas branch from e40f5b5 to 4e1b50a Compare June 29, 2023 14:50

gonpombo8 merged commit d72f900 into main Jun 29, 2023

gonpombo8 deleted the feat/data-layer-sagas branch June 29, 2023 15:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add sagas for all data layer methods #662

add sagas for all data layer methods #662

gonpombo8 commented Jun 21, 2023 •

edited

Loading

cloudflare-workers-and-pages bot commented Jun 21, 2023 •

edited

Loading

gonpombo8 Jun 21, 2023

gonpombo8 Jun 21, 2023

gonpombo8 Jun 21, 2023

github-actions bot commented Jun 21, 2023 •

edited

Loading

cazala Jun 21, 2023

cazala Jun 21, 2023

gonpombo8 Jun 21, 2023

cazala Jun 21, 2023

cazala Jun 21, 2023

cazala Jun 21, 2023

codecov bot commented Jun 21, 2023 •

edited

Loading

cazala Jun 28, 2023

gonpombo8 Jun 29, 2023

cazala Jun 28, 2023

gonpombo8 Jun 29, 2023


		async function rpcHandler(serverPort: RpcServerPort<DataLayerContext>) {
		// TODO: dataLayer as any

add sagas for all data layer methods #662

add sagas for all data layer methods #662

Conversation

gonpombo8 commented Jun 21, 2023 • edited Loading

cloudflare-workers-and-pages bot commented Jun 21, 2023 • edited Loading

Deploying with Cloudflare Pages

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jun 21, 2023 • edited Loading

Test this pull request

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Jun 21, 2023 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gonpombo8 commented Jun 21, 2023 •

edited

Loading

cloudflare-workers-and-pages bot commented Jun 21, 2023 •

edited

Loading

github-actions bot commented Jun 21, 2023 •

edited

Loading

codecov bot commented Jun 21, 2023 •

edited

Loading