parzhitsky / public-chat Goto Github PK

Create components for displaying and configuring the name of the current user.

See [Sketch] Main page, [Chat username] Get automatically, and [Chat username] Change manually

<UsernameDisplay /> component

• the username (together with a short, but descript message) is shown below <MessageCompose /> component;

  Blocked by #10

• if the combined text is too long to display in one line, the … is added at the end;
• username itself has a clickable style (i.e., it is bold, it has an underline, the cursor changes on hover, etc.);
• clicking on the username renders the component for changing the username;
• clicking on any text other than username does not do anything;

<UsernameChangeDialogBox /> component

See [Chat username] Change manually for the most detailed description of the component's behavior.

• it looks like a dialog box:
  • it is positioned at the center of the viewport (both horizontally and vertically);
  • as long as the component is visible, the elements outside of it are slightly dimmed and are not interactive;

    See backdrop-filter property.

  • clicking outside of the component does not close the component;
• it behaves as described here;

Create the layout for the main page.

See [Sketch] Main page.

• the layout is flexible; it looks basically the same on all screens of all sizes;
• the layout always takes 100% of both viewport width and height; there are no scrollbars around the page;
• the layout may impose reasonable lower limits on viewport size (e.g., min-width: 400px); in this case, scrollbars are allowed on smaller screens;
• the layout must be implemented as a React component, to support other layouts in the future, if needed;

Create a React component for displaying chat message history.

• messages are displayed old-to-new: the most recent messages are at the bottom of the view;
• <MessageHistory /> delegates displaying separate messages to <MessageDisplay />

  Blocked by #9.

• setup production environment
• setup staging environment
• setup pull-request environments

From the public-chat repo, remove all the unused functionality, such as:

• tests;
• SPA configurations;
• maybe something else;

In the username change dialog box, allow closing the dialog box without applying any changes to username

Not all of the unused code is removed.

• non-existent files are referenced:
  • https://github.com/public-chat-team/public-chat/blob/1b6ea4f0dded54731fff5ccba28b0494e7fdef46/public/index.html#L5
  • https://github.com/public-chat-team/public-chat/blob/1b6ea4f0dded54731fff5ccba28b0494e7fdef46/public/index.html#L12
  • https://github.com/public-chat-team/public-chat/blob/1b6ea4f0dded54731fff5ccba28b0494e7fdef46/public/index.html#L17
• the file public/manifest.json is unused;
• the src/App.css and reference to it are not needed

Check and fix codestyle automatically

Create a component for composing new messages.

See [Sketch] Main page

• it contains an editable <textarea> for message body;
  • the size of the input is fixed (see this);
  • the message body is trimmed (on input event) from leading and trailing whitespace;
• it contains a button to submit new messages;
  • the button is disabled, if:
    • the message body is empty (whitespace-only messages are considered empty);
    • the app is not ready (see state.app.ready);
    • there's an app-wide error (see state.app.error);
• on submit (if the submit button is enabled):
  • the component outputs message body in plain text (primitive string);
  • the <textarea> is cleared (this disables the submit button, and maybe has some other effects);

Add unit / integration tests, and setup CI to automatically run them on rull requests

Create a component for displaying a message.

• it contains message author name;
  • author name is displayed in single line, without character overflow;
  • too long names end with …;
• it contains message timestamp in human-readable form, considering device's locale (see Date.toLocaleString());
• it contains the message body (read-only);
  • the main message text is displayed as-is, and not being parsed as HTML, Markdown, Pug, etc.

Improve add infinite scroll functionality to <MessageHistory /> component.

• component uses existing implementation of <MessageHistory />

  Blocked by #7

• only a handful of message-related DOM elements are displayed at a time;
  • this allows for a smooth, non-chunky UI;
• component uses an existing third-party React module for the infinite scroll to happen;