Takeaways from the Smack-Chat-App project
Saturday, April 09, 2022
Takeaways from the Smack-Chat-App project
Devslopes Academy; Module 12 Assignment: Publish an article on Medium.
Article about “something I learned this week”.
Module 12: React 104.
Here are some of the takeaways I learned from doing the Smack Chat App project, in no particular order.
1) If we use rounded parentheses, we can only return jsx.
If we use curly parentheses, we can add logic as well.
2) const handleCountClicked = (param) => () => {
setCount(param);
}
when we want to call a function this way:
onClick={handleCountClicked(1)} and
not having to use:
onClick={() => handleCountCliked(1)}
and because using:
onClick={handleCountClicked(1)}
will cause an infinite rendering if we didn’t use (param) => () => {…}, and use (param) => {…}.
3) The special prop named “children” allows us to pass as a prop whatever html code that is in between the opening and closing component tags:
<SomeComponent prop1={someData} prop2={otherData}>
html code
.
.
.
</SomeComponent>
And in the component itself:
const SomeComponent = ({prop1, prop2, children}) => {
.
.
{children} // the code that is between the component opening and closing tags in // the parent component
.
}
4) The unreadChannels array is created and updated for active users only. Meaning that if someone is inactive, other users posting messages will not create a notification of unread channels when the user returns on-line later on. It’s only when the user is active that the app will show a notification (in the form of bolding the channel name) of an unread message in that particular channel.
5) The setUnreadChannel(channel) method remove a channel from the unread channels array, it doesn’t add to it. That is set when the user logs in into the app.
6) The state isTyping is for when 2 or more users are on the same channel. If they are on different channels, isTyping is not displayed in the UI.
7) A socket is for all users what a state is for 1 user, a global, dynamic variable (except the socket will affect all the current active users).
8) A call back function is just a function used as argument of another function, ex:
declaration : func2() {some code}
declaration : func1(func) {
some code
func
}
Then, in the call: func1(func2). func2 is a callback function in this scenario.
9) Socket.emit:
the client is emitting to the API.
Ex: this.socket.emit(“newChannel”, name, description);
Client.on:
the API is listening to what the client is emitting.
Ex: client.on(“newChannel”, function (name, description) {…
Io.emit:
the API is emitting to all the active clients.
Ex: io.emit(“channelCreated”, channel.name, channel.description, channel.id);
Socket.on:
all the active clients are listening to what the API is emitting.
Ex: this.socket.on(“channelCreated”, (name, description, id) => {…
10) When you want to compare 2 objects we use JSON.stringify:
Ex.: setDisabled(JSON.stringify(initState) === JSON.stringify(userInfo));
11) And lastly, here’s an explanation of a regular expression I used to validate an email:
(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)):
/ beginning of the regular expression
^ beginning of the string
[^\s@]+ anything but (^) the space character (\s) or the @ character, 1 or more times (+)
@ then the @ character
[^\s@]+ anything but (^) the space character (\s) or the @ character, 1 or more times (+)
\. then the dot character
[^\s@]+ anything but (^) the space character (\s) or the @ character, 1 or more times (+)
$ end of the string
/ end of the regular expression
Michel Milmore
