beacon-frontend's Issues
The message composing box looks kinda funky in chrome
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
Add ability for user to create new channels
This functionality should be limited to admins/moderators
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
Create a 'create a new tower' button and modal
This should allow a user to create a Tower on any City they specify.
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
.
Retrieve user profile pictures where applicable
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.
Implement tower customization controls
Join multiple messages from the same user into a single message component
Same way Discord does it - makes messages take up way less space
Create invite customization screen
Add the ability for a user to create a Tower
The default path should be for the user to create that Tower on our central City while providing an option to specify the URL of their own City.
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:
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.
The members list doesn't update when a user joins or leaves
We'll have to add websocket code to handle that. This requires backend changes as well.
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.
Tower members list
Verify that file attachments work
This doesn't need a whole uploading utility, just a test to make sure the backend stuff is working
Mark edited messages as saying they're edited
Switch STOMP libraries or fix lifecycle warning
This issue exists to document the fact that we currently have to expect to see the following warning in the console due to lahsivjar/react-stomp#173.
As an alternative, we could use react-stomp-hooks or react-use-stomp.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.