feat: tutorials implement invitations #154

GrazianoRamiro · 2021-06-18T21:00:32Z

Intention

Integrate invitations flow into the tutorials task-app
Take the necessary components from react-appkit and replicate them into react-ux

Description

React Client

Translate invite.js file into a Typescript file and adjust corresponding typings.

React UX

Replicate the following components from react-appkit into react-ux:
- RedeemDialog
- DialogHeading
- PartySharingDialog
- BotDialog
- MemberAvatar
- Theme
Extract the following components into their own file:
- PendingInvitation
- PendingOfflineInvitation
- TableCell
Replicate the following hooks from react-appkit into react-ux:
- useKeywords
- useMembers
Update compilerOptions to point to es2019 to support Array.flat method.

Tutorials Tasks App

Implement PartySharingDialog and RedeemDialog in order to support invitations
Add REACT_APP_SWARM_SIGNAL environment variable in the tasks-app to be able to customize it.
Remove sentry commented stuff
Add documentation to be able to use a local signal server to test invitations
Leave a comment of open issue related StrictMode and some MaterialUI components: Tutorials - React StrictMode triggers warnings #157

Open tasks

Make Braneframe use PartySharingDialog and RedeemDialog from react-ux instead of their own copy of the components
Tidy up existing documentation and prepare a proper walkthrough of the tutorials app
Implement Storybooks within the tutorials app?

…alog

packages/sdk/react-client/src/hooks/invitations/invite.js

rzadp · 2021-06-23T08:31:08Z

Implement Storybooks within the tutorials app?

I'm not sure if we want that. We had some hard time configuring Storybooks, the fact that there is a webpack with a hidden config inside the storybooks is not helping. So maybe it will be better to keep the tutorials app as lean as possible.

rzadp · 2021-06-23T08:34:42Z

packages/sdk/tutorials/apps/tasks-app/src/config.js

+    persistent: true,
+  },
+  swarm: {
+    signal: REACT_APP_SWARM_SIGNAL,


The app is going to silently not work if the user forgots to take care of .env file.
Maybe it would be a good idea to throw an error if REACT_APP_SWARM_SIGNAL is not present, or provide a default?
A default would be wss://apollo3.kube.moon.dxos.network/dxos/signal (note: not apollo1 which is not there atm)

Ah, that's why apollo1 was not working for me. Great then. Yup, I agree with you, I'll add that sanity check of the variable to #158 to work on it later.

User (developer) config should be via a YML file. The SDK should read this file and augment it.
No constants (e.g., apollo1, 2, 3) should be in code.
We should not introduce ENV variables for individual properties (it becomes really complicated). If we need something like that then we COULD have the .env point to a different config file.

rzadp · 2021-06-23T08:44:07Z

This is a first step of #158

richburdon · 2021-06-23T12:34:48Z

packages/sdk/react-client/src/hooks/invitations/invite.ts

+};
+
+// Hook to redeem an invitation Code and provide the PIN authentication if needed.
+export function useInvitationRedeemer ({


/** */ comment.
Use arrow functions.

richburdon · 2021-06-23T12:36:48Z

packages/sdk/react-ux/src/components/PartySharingDialog.tsx

+import React, { useState, useEffect } from 'react';
+
+import { makeStyles } from '@material-ui/core';
+import Button from '@material-ui/core/Button';


Let's move to?

import { A, B, C } from '.../core'

richburdon · 2021-06-23T12:37:25Z

packages/sdk/react-ux/src/components/PartySharingDialog.tsx

+  const [inviteRequestTime, setInviteRequestTime] = useState<number>();
+
+  const [contacts] = useContacts();
+  const invitableContacts = contacts?.filter((c) => !members.some((m) => m.publicKey.toHex() === c.publicKey.toHex())); // contacts not already in this party


"Contacts not already in this party." (Capitalized, period)

richburdon · 2021-06-23T12:42:48Z

packages/sdk/tutorials/apps/tasks-app/src/config.js

+    persistent: true,
+  },
+  swarm: {
+    signal: REACT_APP_SWARM_SIGNAL,


User (developer) config should be via a YML file. The SDK should read this file and augment it.
No constants (e.g., apollo1, 2, 3) should be in code.
We should not introduce ENV variables for individual properties (it becomes really complicated). If we need something like that then we COULD have the .env point to a different config file.

richburdon · 2021-06-23T12:44:16Z

packages/sdk/tutorials/docs/getting-started/index.md

@@ -35,7 +35,7 @@ import { Client } from '@dxos/client';

 const client = new Client({
  swarm: {
-    signal: 'wss://apollo1.kube.moon.dxos.network/dxos/signal'
+    signal: 'wss://apollo3.kube.moon.dxos.network/dxos/signal'


We need to figure out how to deal with constants for tutorials.

Maybe we want to change the tutorial and make the user run his own signal server locally?
We could completely get rid of this constant.

richburdon · 2021-06-23T12:44:45Z

packages/sdk/tutorials/docs/tasks-app/index.md

+cp .env.example .env
+```
+
+Next, edit the `.env` file, and set `REACT_APP_SWAM_SIGNAL` variable as:


As above, all config from the YML file.

richburdon · 2021-06-23T12:45:41Z

packages/sdk/tutorials/docs/tasks-app/index.md

+1. Run the local signal server
+
+```bash
+npx @dxos/signal


Create TODO for someone: this should be @dxos/signal-server

richburdon · 2021-06-23T12:47:16Z

Please add BASIC storybooks for any components that are added here.

rzadp · 2021-06-23T13:01:25Z

About the code style suggestions - If possible, these should be expressed as rules in our eslint config. We use that config everywhere so that the code style is consistent in every repo.

Ramiro Graziano added 13 commits June 18, 2021 16:21

feat(react-ux): create RedeemDialog component

a24629c

feat(react-client): include param in docs for ts support

4644333

feat(tutorials): implement redeem dialog component

b86c0e0

feat(react-ux): add new corresponding dependencies for PartySharingDi…

a11a24b

…alog

feat(react-ux): add party sharing dialog components

a2a4015

feat(react-ux): add neccesary hooks

271a752

feat(react-ux): export PartySharingDialog

e293ae9

feat(react-ux): declare react-copy-to-clipboard package

98ad2cf

feat(react-ux): use es2019 to be able to use flat method

6718151

feat(rush): update pnpm dependencies

4fe64f6

feat(tutorials): implement PartySharingDialog

86fc3a7

feat(react-ux): include Theme component

ef54e0a

feat(tutorials): implement theme from react-ux

c18e4f7

rzadp reviewed Jun 21, 2021

View reviewed changes

packages/sdk/react-client/src/hooks/invitations/invite.js Outdated Show resolved Hide resolved

Ramiro Graziano added 14 commits June 22, 2021 13:48

feat(react-ux): create withThemeProvider hoc to be able to inject theme

7f696c8

refactor(theme): rename to ReactUXTheme to differentiate it

654de78

feat(tutorials): implement react-ux theme and own theme provider

b76c651

feat(sentry): remove sentry commented stuff

7efa3ea

feat(react-ux): remove no longer needed HOC

a37aa5c

feat(tutorials): move swarm_signal to env variable

215871a

docs(tutorials): add walkthrough to use logal signal server

253fedb

feat(sentry): remove sentry commented stuff

d34fcba

docs(tutorials): leave comment of open issue with strict mode

3906b4c

fix(react-ux): fix lint issues

07035ab

feat(react-client): convert invite file to ts

6ea8558

feat(react-client): adjust invite with ts typing

058b128

refactor(react-ux): rename context from appkit to ux

86c87fd

fix(react-client): adjust lint issues

2b96710

GrazianoRamiro marked this pull request as ready for review June 22, 2021 20:23

rzadp reviewed Jun 23, 2021

View reviewed changes

rzadp approved these changes Jun 23, 2021

View reviewed changes

Use apollo3

acfcff3

rzadp merged commit b9c7427 into main Jun 23, 2021

rzadp deleted the feature/tutorials-implement-invitations branch June 23, 2021 09:18

richburdon reviewed Jun 23, 2021

View reviewed changes

GrazianoRamiro mentioned this pull request Jun 28, 2021

refactor(tutorials): add pending improvements to tutorials #165

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: tutorials implement invitations #154

feat: tutorials implement invitations #154

GrazianoRamiro commented Jun 18, 2021 •

edited

rzadp commented Jun 23, 2021

rzadp Jun 23, 2021

GrazianoRamiro Jun 23, 2021

richburdon Jun 23, 2021

rzadp commented Jun 23, 2021

richburdon Jun 23, 2021

richburdon Jun 23, 2021

richburdon Jun 23, 2021

richburdon Jun 23, 2021

richburdon Jun 23, 2021

rzadp Jun 23, 2021

richburdon Jun 23, 2021

richburdon Jun 23, 2021

richburdon commented Jun 23, 2021

rzadp commented Jun 23, 2021

feat: tutorials implement invitations #154

feat: tutorials implement invitations #154

Conversation

GrazianoRamiro commented Jun 18, 2021 • edited

Intention

Description

React Client

React UX

Tutorials Tasks App

Open tasks

rzadp commented Jun 23, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rzadp commented Jun 23, 2021

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

richburdon commented Jun 23, 2021

rzadp commented Jun 23, 2021

GrazianoRamiro commented Jun 18, 2021 •

edited