The New Web: Part 3 – Setting Up The Front End As A “New Web” Application

"proxy": "http://localhost:3001",

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import 'primereact/resources/themes/nova-light/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

shared-definitions.ts

/* API endpoints for our server to respond to.  NOTE that these values are completely arbitrary. */
export const EP_GET_ALL_MESSAGES = '/api/get-all-messages';
export const EP_SEND_NEW_MESSAGE = '/api/send-message';

/* Socket.IO messages to respond to.  These values are also completely arbitrary. */
export const MSG_SEND_MESSAGE = 'send-message';
export const MSG_MESSAGE_RECEIVED = 'message-received';


/** The form of a chat message. */
export interface IChatMessage {
    /** Database ID of the message.
     *   NOTE: We're cheating a little here.  We want to share this file
     *   with the client, and the client can't reference MongoDB.  We pass this
     *   to the client as a string, and covert it back on the server to an ObjectID. */
    _id?: any;

    /** Date/Time that the message was made. */
    dateTime: Date;

    /** The name of the person who sent the message. */
    senderName: string;

    /** The message body. */
    message: string;
}

/** Returns a boolean value indicating whether or not a specified value
 *   is a string that holds a JSON date/time. */
export function isDateString(val: any): boolean {
    // It must be a string to check it.
    if (typeof val !== 'string') {
        return false;
    }

    // Check its pattern.
    return /d{4}-d{2}-d{2}Td{2}:d{2}:d{2}.d{3}Z/.test(val);
}

/** Converts any string property that is formatted date/time, on a specified object,
 *   or nested objects, to an actual date. */
export function convertDates(target: any): void {
    // Arrays work differently.  Check this explicitly.
    if (Array.isArray(target)) {
        // Convert properties on this array.
        for (var i = 0; i < target.length; i++) {
            if (isDateString(target[i])) {
                // Convert this value.
                target[i] = new Date(target[i]);
            } else if (target[i] != null && typeof target[i] === 'object') {
                // Convert dates on this this nested item.
                convertDates(target[i]);
            }
        }

        // We can only work on non-null objects.
    } else if (target != null && typeof target === 'object') {
        // Check the properties on the target.
        for (var n in target) {
            if (isDateString(target[n])) {
                // Convert it.
                target[n] = new Date(target[n]);
            } else if (typeof target[n] === 'object' && target[n] != null) {
                // Convert nested values on this object.
                convertDates(target[n]);
            }
        }
    }

}

message.client.ts

import { IChatMessage, EP_GET_ALL_MESSAGES, EP_SEND_NEW_MESSAGE, MSG_MESSAGE_RECEIVED, convertDates } from "./shared-definitions";
import io from 'socket.io-client';
import { Subject } from 'rxjs';

/** This class is responsible for all server interactions concerning messaging.
 *   Consumers of this class will be able to respond to its events. */
export class MessageClient {
    constructor() {
        // Initialize our socket for messaging.
        this.initializeSocket();
    }

    private initializeSocket(): void {
        // Initialize the socket so it will communicate with the server.
        this.socket = io('/');

        this.socket.open();

        // Add a handler for responding to new chat messages.
        this.socket.on(MSG_MESSAGE_RECEIVED, (message: IChatMessage) => {
            // Convert any date strings on this object to dates.
            convertDates(message);

            // Fire the event to inform observers that we got a new chat message.
            this.onMessageReceivedSubject.next(message);
        });
    }

    /** Private subject used to trigger events when receiving new chat messages. */
    private onMessageReceivedSubject = new Subject<IChatMessage>();

    /** Observable that fires when a new chat message is received from the server. 
     *   NOTE: By convention, observables typically end in $, but I didn't do this to avoid confusion. */
    readonly onMessageReceived = this.onMessageReceivedSubject.asObservable();

    /** The socket.io client we interact with.  This type syntax may
     *   look funny, but I think the type definitions are flawed, not emitting the
     *   type references themselves, but the function's return type.  This syntax
     *   is defining our field to be the same type as returned by the io() method.
     */
    private socket: ReturnType<typeof io>;

    /** Closes our socket connection with the server.  This should only be called when we're done with
     *   as there is no way to re-open the connection without creating a new instance. */
    close(): void {
        this.socket.close();
    }

    /** Wraps a basic server (POST) request in a promise, and returns the results from the body.  Arbitrary
     *   data may be sent with the request's body, if necessary. */
    private performRequest<T>(path: string, requestData?: object): Promise<T> {
        // If we have request data, then serialize it to JSON.
        let requestBody: string | null = null;

        if (requestData) {
            requestBody = JSON.stringify(requestData);
        }

        // Execute our request.  When it returns, parse and return the JSON object.  This is actually a Promise.
        return fetch(path, { method: 'POST', body: requestBody })
            .then(response => {
                return response.text().then(resultText => {
                    if (resultText.length > 2) {
                        let result = JSON.parse(resultText);
                        // Convert date strings on this object to dates.
                        convertDates(result);
                        return result;
                    } else {
                        return null;
                    }
                });
            });
    }

    /** Returns all messages from the server, in order of it's creation date/time. */
    getAllMessages(): Promise<Array<IChatMessage>> {
        return this.performRequest(EP_GET_ALL_MESSAGES);
    }

    /** Sends a new chat message to the server, and returns a promise that resolves when complete. */
    sendMessage(message: IChatMessage): Promise<void> {
        return this.performRequest(EP_SEND_NEW_MESSAGE, message);
    }
}

MessageList.tsx

import React from 'react';
import { IChatMessage } from './shared-definitions';
import './MessageList.scss';
import { MessageClient } from './message.client';
import { Subscription } from 'rxjs';
import { Card } from 'primereact/card';

interface IMessageListState {
    /** Holds all messages from the server, to show in the current view. */
    messages: Array<IChatMessage>;
}

export interface IMessageListProps { }

export class MessageList extends React.Component<IMessageListProps, IMessageListState>{
    constructor(props: IMessageListProps) {
        super(props);

        // Initialize the state for this component.  We'll get the message
        //  list in the mount event.
        this.state = { messages: [] };
    }

    /** Called on all React Components after they've been created and initialized. */
    componentDidMount(): void {
        // Initialize the MessageClient here (not in the constructor).
        //  This avoids attempts to update our display before it's fully setup.
        this.messageClient = new MessageClient();

        // Subscribe to its events.  Remember to keep the returned unsubscribe function
        //  so we can cleanup this component later, if it ever gets unmounted.
        this.eventSubscription = this.messageClient.onMessageReceived.subscribe(newMessage => {
            // React does not allow us to edit state objects directly.  We need to copy it, and
            //  make changes to our copy.  NOTE: It's ok to reuse state properties if they and
            //  their children are not changed.
            let newMessages = this.state.messages.slice();
            newMessages.push(newMessage);

            // Add this message to our messages list.  Though, the state only contains
            //  a messages property, using this pattern for all components every time
            //  makes future additions a trivial routine.
            //  IMPORTANT NOTE: This is a function, that returns an object!  This is why the braces are
            //   surrounded by parenthesis.
            this.setState(prevState => ({ ...prevState, messages: newMessages }), () => {
                // Wait a brief time for everything to update before we perform our scroll.
                //  If not, things may not be updated, and we won't scroll the full length.
                setTimeout(() => {
                    this.messageListRef.current.scroll({ top: this.messageListRef.current.scrollHeight, behavior: 'smooth' });
                });
            });
        });

        // Get all of the messages from the server.
        this.messageClient.getAllMessages().then(result => {
            // Set the messages in our state.  This will trigger the component to update.
            this.setState(prevState => ({ ...prevState, messages: result }), () => {
                // Wait a brief time for everything to update before we perform our scroll.
                //  If not, things may not be updated, and we won't scroll the full length.
                setTimeout(() => {
                    this.messageListRef.current.scroll({ top: this.messageListRef.current.scrollHeight, behavior: 'smooth' });
                });
            });
        });
    }

    /** Reference to the component's outer-most div element. */
    private messageListRef = React.createRef<HTMLDivElement>();

    /** Called on all React Components when they are about to be removed/destroyed. */
    componentWillUnmount(): void {
        // Cleanup our event handler (subscription).
        this.eventSubscription.unsubscribe();
    }

    /** The subscription to message events on our messageClient.
     *   This should be unsubscribed from when this component is unmounted. */
    private eventSubscription: Subscription;

    /** The MessageClient that handles all server communications for us. */
    private messageClient: MessageClient;

    /** This is the standard render method for all React Component classes, which
     *   returns the way our component looks in the browser. */
    render(): React.ReactNode {
        return (<div className="MessageList" ref={this.messageListRef}>
            {this.state.messages.map(m => <div key={m._id} className="card-wrapper">
                <Card>
                    <div className="message-wrapper">
                        <div className="message-header"> {m.dateTime.toLocaleTimeString()}: {m.senderName} </div>
                        <div className="message-body"> <pre>{m.message}</pre> </div>
                    </div>
                </Card>
            </div>)}
        </div>)
    }
}

MessageList.scss

.MessageList {
    overflow-y: auto;

    .p-card {
        border-radius: 5px;
    }

    .card-wrapper {
        margin: 10px;

        .message-wrapper {
            display: grid;
            grid-template-columns: auto 1fr;
            text-align: left;

            .message-header {
                grid-column: 1;
                font-weight: bolder;
                align-self: center;
            }
            .message-body {
                grid-column: 2;
                margin: 5px 0 5px 10px;
                align-self: center;

                pre {
                    margin: 0;
                }
            }
        }
    }
}

NewMessage.tsx

import React from 'react';
import './NewMessage.scss';
import { InputTextarea } from 'primereact/inputtextarea';
import { Button } from 'primereact/button';
import { Card } from 'primereact/card';
import { MessageClient } from './message.client';
import { IChatMessage } from './shared-definitions';

interface INewMessageState {
    /** The message being typed by the user, and sent to others when the
     *   user presses the send button. */
    newMessage: string;
}
export interface INewMessageProps {
    /** The name of the user.  This is passed to the control by the App component. */
    userName: string;
}

export class NewMessage extends React.Component<INewMessageProps, INewMessageState>{
    constructor(props: INewMessageProps) {
        super(props);

        // Initialize our state, so we have a newMessage to display (blank string).
        this.state = { newMessage: '' };
    }

    /** Called when the user changes text in our text input.  This updates our
     *   application state to reflect their changes. */
    private onMessageChanged(newValue: string): void {
        // Simply update the state on this control.
        this.setState(prevState => ({ ...prevState, newMessage: newValue }));
    }

    /** Called when the user presses the send button. */
    private onSendClicked(): void {
        // We could do this better, but keeping it simple, we'll create a client just to
        //  send our message in this scope.  NOTE: We're not subscribing to any events,
        //  so we're not going to bother closing it.
        const client = new MessageClient();

        // Create the new message to send to the server.
        let newMessage: IChatMessage = {
            dateTime: new Date(Date.now()),
            senderName: this.props.userName,
            message: this.state.newMessage
        }

        // We could block the page or something while the request is sent,
        //  but we won't do that today.
        client.sendMessage(newMessage);

        // Now that the message is sent, clear it so the user can type another one.
        this.setState(prevState => ({ ...prevState, newMessage: '' }));
    }

    render(): React.ReactNode {
        return (<div className="NewMessage">
            <Card>
                <div className="control-layout">
                    <InputTextarea cols={80} rows={4} value={this.state.newMessage} onChange={e => this.onMessageChanged((e.target as HTMLTextAreaElement).value)} />
                    <Button label="Send" onClick={e => this.onSendClicked()} />
                </div>
            </Card>
        </div>)
    }
}

NewMessage.scss

.NewMessage {
    margin: 10px 8px 0 8px;

    .control-layout {
        display: flex;
        flex-direction: column;

        button {
            margin-top: 10px;
        }
    }
}

UserNameInput.tsx

import React from 'react';
import './UserNameInput.scss';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Card } from 'primereact/card';

interface IUserNameInputState {
    /** User name the user shown in our text input. */
    newUserName: string;
}
export interface IUserNameInputProps {
    /** Callback used to tell the App component that the user has set their name, and we're done here. */
    userNameEnteredCallback: (newName: string) => void;
}

export class UserNameInput extends React.Component<IUserNameInputProps, IUserNameInputState>{
    constructor(props: IUserNameInputProps) {
        super(props);

        /** Initialize the state. */
        this.state = { newUserName: '' };
    }

    /** Called when our user name input is changed (i.e. the user is typing) */
    onUserNameChanged(newName: string): void {
        // Update our state.
        this.setState(prevState => ({ ...prevState, newUserName: newName }));
    }

    /** Called when the user clicks the OK button. */
    private onOkClicked(): void {
        // Inform the App component of the name that the user entered.
        this.props.userNameEnteredCallback(this.state.newUserName);
    }

    render(): React.ReactNode {
        return (<div className="UserNameInput">
            <Card>
                <div className="name-field">
                    <label>Your Name</label>
                    <InputText value={this.state.newUserName} onChange={e => this.onUserNameChanged((e.target as HTMLInputElement).value)} />
                </div>

                <Button label="OK" onClick={e => this.onOkClicked()} />
            </Card>
        </div>)
    }
}

UserNameInput.scss

.UserNameInput {
    label {
        margin-right: 15px;
    }
}

App.tsx

import React from 'react';
import './App.scss';
import { UserNameInput } from './UserNameInput';
import { MessageList } from './MessageList';
import { NewMessage } from './NewMessage';

export type AppViewTypes = 'user-name' | 'messages';

interface IAppState {
  /** Controls which view to show to the user. */
  viewType: AppViewTypes;

  /** The name our user entered in the UserNameInput component. */
  userName?: string;
}

export interface IAppProps { }

export default class App extends React.Component<IAppProps, IAppState>{
  constructor(props: IAppProps) {
    super(props);
    // Initialize the state.
    this.state = { viewType: 'user-name' };
  }

  /** Callback for the UserNameInput to tell us that the user has entered a name and we're ready to show messages. */
  private onNameUpdated(newName: string): void {
    // Set the user name in our state.  Then, change our view to show messages.
    this.setState(prevState => ({ ...prevState, userName: newName, viewType: 'messages' }));
  }

  render(): React.ReactNode {
    // Here, we'll show the appropriate view, based on the viewType in our state.
    return (

      <div className="App">

        <div className="app-wrapper">
          {this.state.viewType === 'messages'
            ? <React.Fragment>
              		<MessageList />
              		<NewMessage userName={this.state.userName} />
          	</React.Fragment>
            : <UserNameInput userNameEnteredCallback={newName => this.onNameUpdated(newName)} />}

        </div>
      </div>
    );
  }
}

App.scss

.App {
  width: 100vw;
  height: 100vh;
  background-color: lightblue;

  .app-wrapper {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: 100%;

    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';

import 'primereact/resources/themes/nova-light/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

index.scss

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: hidden;
}