Below the message window are buttons to perform various functions within the chat view including, send message, upload media items, view uploaded media items via the Image Viewer component, schedule a message and lastly send the chatters location (which as stated previously will be included in a subsequently sent message by the chatter).
Lastly if a message sent by the currently logged in chatter is clicked they will be asked if they would like to delete it or not. Above each message will have that chatters display name indicating who sent the message. The right side of each message contains a button with the chatters profile image that when clicked will navigate the chatter to that chatters profile.
The messages view is present in the center of the screen upon loading and will have the current chatters messages on the right and anyone elses on the left, each message will contain indicators alongside it indicating whether or not a message was read or not as well as if the message contains a sent location within it. It includes a scheduling message window that will allow the chatter to schedule a message for anytime between now (present day) until the end of the year 2050 for the 4 continental US timezones (this was not built to account for daylight savings time but this could very well be expanded by adding those abbreviations to the state variable 'timezones'). ChatView.jsĬontains the bulk of the features of the application, it includes the chat header indicating who you are speaking with within the given conversation (currently one on one conversations are the only ones supported but this could be expanded to support multiple users in a single conversation and if tweaked/added allow for the conversation name to be changed to whatever the users decide to set it to).
#Received text for facechat how to#
This will let users be able to interact with the bot as they need/see fit and get a better idea as to how to utilize the application itself.
BotView.jsĬurrently unutilized component but is intended to be used as a screen to show users the various commands and information associated with the bot itself. Almost every part of the application utilizes AuthContext (through AuthConsumer) in order to perform various functions. You can see an example of this in botId as the bot is registered as just a regular user like anyone else. Utilizes the React Context API to provide various data and functions to other parts of the application the documentation within the file itself should do a decent job at explaining what is going on in here however it should be noted that many of the functions are "asking for" userId's this should be user.uniqueId from the database in all cases. If you are interested in seeing the list of dependencies for this application please consult package.json Getting into the actual components now AuthContext.js NOTE: There is an additional file within the root of the source folder by the name of firebase.js which is not present in the repository for this project as it houses environment variables, if you are looking to further develop on this project and would like access to the pre-existing API key's and database email: remaining files within the root of the source folder are generated or unused.
Index.js is the root of the project and what actually mounts the project to the browser. It is laid out in a fashion that caters it to learning these technologies so if you are unfamiliar with how any of these work it would be simple to pick up and build upon in its features.Īpp.js houses the routes to all the various page views within the application, this gives you an idea of how to navigate to a particular page or variations of it (in particular for the map view) For information regarding initializing the project in a development environment see CreateReactApp.md FaceChat Project Overview (How things work and how things are set up)įaceChat is built using React, Tailwind and Firebase (for database features and authentication)
0 kommentar(er)
