hackerwins / codepair-old Goto Github PK

Add Github Template

https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/creating-a-template-repository

Sentry Issue: CODEPAIR-P

Error: YORKIE F: out of bound of text index: pos: 132 > node.length: 1
  at fatal (../yorkie/src/util/logger.ts:103:15)
  at find (../yorkie/src/util/splay_tree.ts:202:14)
  at getByIndex (../yorkie/src/document/json/rga_tree_list.ts:295:48)
  at getByIndex (../yorkie/src/document/json/array.ts:82:32)
  at arr (../yorkie/src/document/proxy/array_proxy.ts:99:42)
...
(11 additional frame(s) were not displayed)

What happened:
I am getting script errors intermittently: YORKIE F: out of bound of text index: pos: 1 > node.length: 0

What you expected to happen:

How to reproduce it (as minimally and precisely as possible):

I couldn't find a pattern to reproduce the bug.

Anything else we need to know?:

Yorkie's Documents seem to be synchronizing properly between peers. The problem is caused by a content mismatch between CodeMirror and Document.

Client1:                      Client2: 
[CodeMirror <-> Document] <-> [Document <-> CodeMirror]

Environment:
Operating system: macOS Big Sur, Version 11.1
Browser and version: Chrome Version 88.0.4324.96

Description:

Focus on Code Editor when clicking on an empty space in Code Editor Area.

Why:

Users can conveniently focus on the code editor.

Description:

We need to set release tracking provided by Sentry.

Why:

We can determine issues and regressions introduced in releases.

Sentry Issue: CODEPAIR-8

ReferenceError: TouchEvent is not defined
  at getMouse (components/Editor/Board/Canvas/Container.ts:99:9)
  at apply (components/Editor/Board/Canvas/Container.ts:126:24)
  at n (../../src/helpers.ts:87:17)

Sentry Issue: CODEPAIR-6

TypeError: Cannot read property 'getValue' of undefined
  at get (../yorkie/src/document/json/rga_tree_list.ts:207:56)
  at get (../yorkie/src/document/json/array.ts:57:26)
  at getElementByID (../yorkie/src/document/proxy/array_proxy.ts:54:44)
  at updater (components/Editor/Board/Canvas/worker.ts:69:41)
  at update (../yorkie/src/document/document.ts:126:7)
...
(3 additional frame(s) were not displayed)

Description:

Add eraser to Drawing Board.
The UI that deletes the line that touches the eraser like Zoom's Annotation tool looks good.

Why:

It is difficult to draw something because users cannot delete lines.

We haven't yet chosen the TypeScript style guide, so the discussion of style in PR is growing unnecessarily.
Like this: #10 (comment)

We have to decide on a style guide.

Description:

Calculate shapes into a matrix

Why:

We need to do matrix calculations to deal with shapes in depth

What happened:

I am getting script errors intermittently: Error: YORKIE F: the node of the given id should be found

What you expected to happen:

How to reproduce it (as minimally and precisely as possible):

Anything else we need to know?:

Environment:

• Operating system: macOS Big Sur, Version 11.1
• Browser and version: Chrome Version 88.0.4324.96

How about the printWidth size of 120?

.prettierrc.js

module.exports = {
  bracketSpacing: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 120,
  tabWidth: 2,
};

```

Users can see other people's cursors in the code editor.

I think it's a bug in the code below that handles position fixed.
This doesn't take into account when the user is scrolling, so we have to handle it differently..!

76df820#diff-2ac834b2fd748560fbce5f2c546e39e543d22edbd12fc769cc4f3ab389a66e6aR48

Codemirror default style is preventing a number of solutions, and changing the default styling seems to be a problem.

.CodeMirror {
  overflow: hidden !important;
}
.CodeMirror-scroll {
  overflow: scroll !important;
}

So, how about this..? giving padding size

Description: it looks great to support authorizaiton by password on CodePair console.

Why:

1. Someone wants to block public access to their CodePair.
2. Password authorization is a proper authorization method because CodePair is not a complicated but a simple service.

For example, Go Playground lets us share codes in a simple way. Although there is no password, they create a unique link to share on every click on the "share" button. I don't suggest a complex authorization but a minimal security (e.g. password) which is proper to CodePair because it is a simple pair programming service.

Description:

Create notifications to announce new features and more to users

Notion sends a notification like a message at the bottom of the app.

Why:

• It is one-way, but we can communicate with users.

Description:

Change the color of a rectangle like a line.

Why:

• We can better display rectangles as the user intended.

Sentry Issue: CODEPAIR-7

TypeError: e.toggleComment is not a function
  at HTMLTextAreaElement.n (../../src/helpers.ts:87:17)
...
(6 additional frame(s) were not displayed)

Description:
Use the type provided by yorkie-js-sdk

Why:
we can code by knowing the parts provided by yorkie-js-sdk better.

Description: CodePair set the username of each user as a random anonymous name. (e.g. well-made giraffe). If uses can modify their name after getting a random name, it will be useful.

Why:
When many people access same document, the names of all users are completely anonymous and random so we can't infer who the anonymous user is in real world.

Supposing there is three members named "David", "Mike", "Sarah", they will get random names like "occasional monkey", "funny puppy", "happy giraffee" on CodePair. In this case, members can't infer who "occasional monkey" is.

Description:

Display network status. Google Docs is expressed as follows:

Offline

Online, synced

Why:

Editing works normally even when offline, but the changes are not saved on the server. We need to display to users that it is offline and that the network will need to be recovered before it will sync.

Description:

We added basic features, line drawing and an eraser to the drawing board.
We need to add features such as line style or shapes so that users can draw more various content.

I think it will be helpful to refer to the UI of Jamboard or Zoom's annotation tool.

Why:

Users can draw various contents on the drawing board.

What happened:

When a communication error with Agent occurs, the error tooltip does not appear.

What you expected to happen:

A tooltip should appear for the error.

How to reproduce it (as minimally and precisely as possible):

Connect to codepair with agent turned off.

Anything else we need to know?:

It is assumed that it does not work after refactoring. #43

Environment:

• Operating system: macOS Big Sur, Version 11.2.1
• Browser and version: Version 88.0.4324.182 (Official Build) (x86_64)

Description:

How about providing the app itself in light and dark mode rather than the theme of the code editor in settings?

GitHub dark mode

Why:

In light mode, the code editor is dark and the difference in brightness from other layers is so high that it hurts my eyes a little.

Description:

implement a backend

Why:

• To know what yorkie-sdk-js needs from a users' point of view
• To manage by user, backend is required. (authentication)

best practice
#13

Description:

Brush button circle looks distorted.

Brush button:

Rect button

Why:

It looks low in completeness.

Description:

Provide a share button for users to share document.

Why:

It is difficult for users to know if they can share through URLs. By providing the share button, it lets users know that it's available for sharing.

@hackerwins
When currently connected, sync is called before subscribe, so the initial peers are not known.

To Get To Know Early Peers
we need to do client.subscribe execution before client.sync

ref client.sync
ref client.subscribe

So I think there are two ways

1. Add a function before sync in attach Doc
2. separate sync from attachDoc

I think (2) is better
I think sync is different from attach..

what do you think?

If we run it(1) in attachDoc, it will look like this

export const attachDoc = createAsyncThunk<AttachDocResult, AttachDocProps, { rejectValue: string }>(
  'doc/attach',
  async ({ docKey, subscribeClient }: AttachDocProps, thunkApi) => {
    try {
      const client = yorkie.createClient(`${process.env.REACT_APP_YORKIE_RPC_ADDR}`);
      const document = yorkie.createDocument('codepairs', docKey);

      await client.activate();
      await client.attach(document);

      document.update((root: any) => {
        if (!root.content) {
          root.createText('content');
        }
      });

      let unSubscribeClient;
      if (subscribeClient) {
        unSubscribeClient = subscribeClient(client);
      }

      await client.sync();
      return { document, client, unSubscribeClient };
    } catch (err) {
      return thunkApi.rejectWithValue(err);
    }
  },
);

Description:

While using the drawing board, I noticed some usability problems.

1. When the user first accesses the document, the drawing board is folded, so there is no way to know if there is any content.
   • I think we need a way to tell if there is content on the drawing board.
2. The width of the drawing board has a fixed size, and it is difficult to use the code and the drawing board together in a narrow window.
   • I think it looks good to introduce a handle that can adjust the width of the drawing board.
   • How about putting the drawing board on the code editor?

Why:

It is difficult to use in some cases.

Description:

Codepair is displaying the coordinates of the screen as absolute values

We need to show dots on the screen according to the viewport.

Why:

All recorded dots must be displayed on the mobile environment and on screens with different resolution

If the resolution is different, the recorded point may not be visible.

Description:

Make Drawing Board support Retina display.

Why:

Users can see sharper lines on the drawing board.

What happened: Drag part of other person's opacity is too high. So It's hard to recognize letters.

What you expected to happen: Darg part of other person should be near 0.1.

How to reproduce it (as minimally and precisely as possible): When drags text, text on another browser is dragged.

Environment:

• Operating system: Ubuntu 20.04
• Browser and version: Chrome 92 and Firefox 90

What happened:

When deleting a line, a script error occurs in the remote clients.

What you expected to happen:

How to reproduce it (as minimally and precisely as possible):

Anything else we need to know?:

I guess there is no exception handling when the remote clients only get one point.

Environment:

• Operating system: macOS Big Sur, Version 11.1
• Browser and version: Chrome Version 88.0.4324.96

Sentry Issue: CODEPAIR-3

Error: YORKIE F: insPrev should be presence
  at fatal (../yorkie/src/util/logger.ts:99:11)
  at findFloorNodePreferToLeft (../yorkie/src/document/json/rga_tree_split.ts:512:16)
  at findIdxFromNodePos (../yorkie/src/document/json/rga_tree_split.ts:386:14)
  at findIndexesFromRange (../yorkie/src/document/json/rga_tree_split.ts:376:12)
  at updateSelectionPriv (../yorkie/src/document/json/plain_text.ts:183:44)
...
(31 additional frame(s) were not displayed)

What happened:

Inconsistency between CodeMirror and Document receiving changes from remote.

• Documents between peers are properly synced.
• There was no discrepancy between SplayTree and RGATreeSplit.

Client1:                            Client2:
[CodeMirror <-✅-> Document] <-✅-> [Document <-❌-> CodeMirror]

What you expected to happen:

Inconsistency should not occur.

How to reproduce it (as minimally and precisely as possible):

Occurs when repeating copy&paste.

Anything else we need to know?:

Environment:

• Operating system: macOS Big Sur, Version 11.1
• Browser and version: Chrome Version 88.0.4324.96

Sentry Issue: CODEPAIR-6

Error: YORKIE F: fail to execute, only object can execute set
  at fatal (../yorkie/src/util/logger.ts:103:11)
  at execute (../yorkie/src/document/operation/set_operation.ts:66:14)
  at execute (../yorkie/src/document/change/change.ts:93:17)
  at applyChanges (../yorkie/src/document/document.ts:362:14)
  at applyChangePack (../yorkie/src/document/document.ts:187:12)
...
(11 additional frame(s) were not displayed)

What happened:

We can't erase little dots.

What you expected to happen:

It is erased normally.

How to reproduce it (as minimally and precisely as possible):

• Draw a small dot.
• Select the eraser and try to erase it.

Anything else we need to know?:

Environment:

• Operating system: macOS Big Sur, Version 11.1
• Browser and version: Chrome Version 88.0.4324.96

Description:

Employ Google Analytics.

Why:

In the current age of information, every successful business needs to know about their customers, what they care about the most. and the easiest way of doing this is to track them when they visit your website.
https://javascript.plainenglish.io/how-to-setup-and-add-google-analytics-to-your-react-app-fd361f47ac7b

It will be pulled from https://github.com/yorkie-team/yorkie-js-sdk/blob/master/CONTRIBUTING.md

Description:

GitHub Pages is not designed for SPA.

GitHub Pages doesn't natively support single page apps. When there is a fresh page load for a url like example.tld/foo, where /foo is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /foo.

from https://github.com/rafgraph/spa-github-pages

However, there seems to be a hack to solve this problem.

Why:

• Users can use cleaner URLs. e.g) https://codepair.yorkie.dev/#/8zrto9 to https://codepair.yorkie.dev/8zrto9

Description:

Support multiple code tabs.

Why:

Users can edit codes for multiple languages ​​in one URL.

Description:

Improving repainting for the drawing board.

Currently, we are repainting all objects when changes are made from the remotes to the drawing objects. We only have to draw the changed objects.

Why:

Users can edit the drawing board in a comfortable environment.

Description:

We need to support mobile devices to enables drawing on the board on the mobile device.
We can refer to the following code: yorkie-team/yorkie-team.github.io@5f0191f

Why:

Users can use CodePair on a variety of devices.

https://github.com/typicode/husky#readme

Description:

Feature to clear all shapes on drawing board.

Why:

There are opinions from users that they wanted to clear the shapes during meetings.

• Save it on Local storage

Description:

We plan to introduce an application monitoring system. We can easily achieve this by using services like Sentry.

Why:

We need to find the cause of a problem with the service and make the application robust. And we will be able to more easily track problems with JS SDK as well.

Description:

• Add test codes for unit functions.
• Measure code coverage.
• Introduce CI to automatically test PRs.
• Add comments where we need explanation.
• Add more lint rules.

Why:

• It makes maintaining the source code for a long time easy.

Description:

When the user draws a path on the drawing board, too many operations are created because all points for the path are stored in the document. We can reduce the number of operations by introducing Douglas Peucker's algorithm that can reduce the given points.

EasyLogic Studio also uses the algorithm for path editing.

When users drawing a path, instead of inserting it directly into Yorkie's Document, the steps should be separated:

• Drawing: every point must be in memory and must be directly represented on the canvas.
• After drawing: the algorithm is applied to the points then reduced points are added to the Yorkie Document.

Why:

We can solve the problem of unnecessarily growing data when the user draws a path on the drawing board.

I used the following structure.
https://github.com/madhums/node-express-mongoose-demo

other structure
https://github.com/w3tecch/express-typescript-boilerplate
https://github.com/afteracademy/nodejs-backend-architecture-typescript
https://github.com/maximegris/typescript-express-sequelize

guide
https://github.com/mattdesl/module-best-practices

https://github.com/goldbergyoni/javascript-testing-best-practices