Giter Site home page Giter Site logo

beacon-frontend's Issues

Clean frontend CSS

Ideally somehow split CSS into multiple files, and remove redundant classes. Some research will be required on how to do this

Create generic modal system

Modals should be able to display

  • Title
  • Description
  • Arbitrary number of buttons (Ok, yes, no, cancel, etc)
  • Arbitrary number of text fields with names and placeholders

The goal is to use this wherever a popup is needed

New messages don't update position of the scrollbar

When a new message is sent or received in a channel, it will appear below the bottom of the visible region and require the user to scroll down. Ideally, the window should automatically scroll, if the user is already close to the bottom. Otherwise, display some kind of prompt that new messages have arrived

Rewrite sign in to use modified endpoint

I've also figured out when a good time to call that would be. In signInContext.js, the way we check the user's credentials is just by sending a request to any random CIS endpoint and making sure it comes back with a 200. At the moment, we call CityManagementApi.listRegisteredCities() and do nothing with the value because we don't really care what Cities the CIS knows about. We just wanna make sure that we can talk to the CIS. What we can do instead is call the /account{user-account-id} endpoint in the screenshot above and omit the ID. Then it will return information about ourselves which would include our ID which we can potentially save in the SignInContext.

Perform authentication properly

Hanging onto some kind of session would be a more ideal way of performing authentication. Currently, credentials are sent with every request and those credentials are kept in local storage. This is taboo because of how much of a security risk it poses.

We might want to go about it in a way similar to this. If we wanted to get really fancy, we could use JWT. This might also help.

This is a problem for if we want to further develop this project. Right now, it just needs to work.

Background is white when no channel is selected

Since #4, when viewing a tower without having selected a channel, the background of the empty area is white like below:
image

Before #4, in App.js (now removed), the return statement looked like the following.

return (
      <div className='appContainer'>
        <TowerList towers={DUMMY_DATA.towers} selected={this.state.towerId} onClick={this.selectTower}/>
        {channelList}
        <MessagePane messages={(this.state.towerId !== "" && this.state.channelId !== "") ? DUMMY_DATA.towers[this.state.towerId].channels[this.state.channelId].messages : []}/>
      </div>
    );

With the usage of React Router, the components above are no longer shown unless relevant. The MessagePane component used to always be shown even if no channel was selected. It would simply have no list elements. This would allow for the messagePane styling to exist regardless of if messages were being displayed. Now that the MessagePane is only shown if on a channel view, the component isn't rendered until a channel is selected.

I'm not sure what the best method would be to fix it. I'm not sure if it's possible to fix entirely in CSS or if we should have an empty <div> or something with the messagePane styling applied to it that will be rendered only when there is no channel selected.

Return to the last viewed channel in a Tower

It would be nice, when switching between Towers, for the interface to return to whatever channel was being viewed last in the Tower we click on. That way we wouldn't have to click a tower and then the channel name every single time we switch.

Implement message deletion/editing

Currently there is no way to delete messages or edit their contents after being sent. Deletion is possible with the API currently, but editing might require back end edits.
If possible, it would be nice to be able to view the edit history of a message.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.