├── .gitignore
├── LICENSE
├── README.md
├── assets
└── react-messenger-screen.png
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── manifest.json
├── react-messenger.png
└── react-messenger.svg
├── src
├── assets
│ ├── index.css
│ └── logo.svg
├── components
│ ├── App
│ │ ├── App.test.js
│ │ └── index.js
│ ├── Compose
│ │ ├── Compose.css
│ │ └── index.js
│ ├── ConversationList
│ │ ├── ConversationList.css
│ │ └── index.js
│ ├── ConversationListItem
│ │ ├── ConversationListItem.css
│ │ └── index.js
│ ├── ConversationSearch
│ │ ├── ConversationSearch.css
│ │ └── index.js
│ ├── Message
│ │ ├── Message.css
│ │ └── index.js
│ ├── MessageList
│ │ ├── MessageList.css
│ │ └── index.js
│ ├── Messenger
│ │ ├── Messenger.css
│ │ └── index.js
│ ├── Toolbar
│ │ ├── Toolbar.css
│ │ └── index.js
│ └── ToolbarButton
│ │ ├── ToolbarButton.css
│ │ └── index.js
├── index.js
└── serviceWorker.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Sam Roth
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
React Messenger
4 |
5 |
6 | > This project uses React and CSS to recreate the Facebook Messenger web application. It is in its early stages but most of the building blocks are in place. **THIS IS NOT AN OFFICIAL FACEBOOK PRODUCT NOR IS IT MAINTAINED BY ANY FACEBOOK EMPLOYEES.**
7 |
8 |
13 |
14 |
15 |
16 | ## Available Components
17 |
18 | When using these components it is important to keep in mind that we are utilizing a few different dependencies to achieve a better user experience. Specifically:
19 |
20 | - [Moment](https://momentjs.com/) for parsing JavaScript dates and printing them in a readable way.
21 | - [Shave](https://github.com/dollarshaveclub/shave) to trim long messages to maintain consistency amongst `ConversationListItem`.
22 | - [Axios](https://github.com/axios/axios) to facilitate HTTP requests (for messages, users, etc).
23 |
24 | ### Compose
25 |
26 | The Compose component allows the user to send messages and attachments.
27 |
28 | | props | type | description |
29 | |-------|------|-------------|
30 | | `rightItems` | `ToolbarButton[]` | Icons that appear to the right of the `input` element allowing users to send more than text (e.g. photos, cash, location, etc). |
31 |
32 | ### ConversationList
33 |
34 | This is a simple component that renders `ConversationSearch` and uses `axios` to fetch users from the [Random User API](https://randomuser.me/).
35 |
36 | ### ConversationListItem
37 |
38 | This component provides an overview of a single conversation, including a photo, name (or group title), and a snippet of the most recent message. We use `shave` to trim the displayed message so that all instances of `ConversationListItem` take up the same amount of vertical space.
39 |
40 | | props | type | description |
41 | |-------|------|-------------|
42 | | `photo` | `String` | The URL of a photo to be displayed for the conversation. The demo uses the photo provided by the Random User API. |
43 | | `name` | `String` | The name of the conversation, whether it is a group or individual. |
44 | | `text` | `String` | The text of the most recent message; you do not have to truncate this yourself. |
45 |
46 | ### ConversationSearch
47 |
48 | This is a simple `input` element that is styled to resemble the Facebook Messenger search bar. Its placeholder is centered until the input is focused, moving the placeholder to the left.
49 |
50 | ### Message
51 |
52 | Because most of the work is done by `MessageList`, this component is pretty straight-forward. As stated below, there are a lot of `props` which allow you to style distinct groups of messages.
53 |
54 | | props | type | description |
55 | |-------|------|-------------|
56 | | `data` | `Object` | An object containing information about the message. We use `data.message` for the message body and `data.timestamp` for the JavaScript Date object representing the time at which the message was sent. |
57 | | `isMine` | `Boolean` | Applies a tint to the message (`#007aff` in demo) and aligns it to the right, indicating that the message was sent by you. |
58 | | `startsSequence` | `Boolean` | Indicates that the message represents the start of a sequence of messages. This sets the appropriate top border radius, depending on whether the message was sent by you or someone else. |
59 | | `endsSequence` | `Boolean` | Indicates that the message represents the end of a sequence of messages. This sets the appropriate bottom border radius, depending on whether the message was sent by you or someone else. |
60 | | `showTimestamp` | `Boolean` | Determines whether or not the timestamp of the message should be shown. The demo app sets this value to `true` if more than one hour has passed between messages. |
61 |
62 | ### MessageList
63 |
64 | This is a deceptively-simple component that does a lot of the heavy lifting for rendering sequences of messages with appropriate styling (see `MessageList.renderMessages`). Specifically, we use information about the messages (`author` and `timestamp`) to render groups of messages closer together with modified border-radii and margin. This is not just present in Facebook Messenger, but in other apps like iMessage as well. You can remove this functionality if you want to.
65 |
66 | ### Messenger
67 |
68 | This component is essentially the wrapper for the web application. It defines a [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) layout and exposes some helper classes (e.g. `scrollable`, allowing us to separate scrolling between the sidebar and content panes).
69 |
70 | ### Toolbar
71 |
72 | The demo uses two toolbars which sit above the sidebar and content panes. This component displays a title and can also include buttons. The title remains centered within the Toolbar regardless of whether elements are present on either side.
73 |
74 | | props | type | description |
75 | |-------|------|-------------|
76 | | `title` | `String` | The title to be displayed in the center of the toolbar. |
77 | | `leftItems` | `ToolbarButton[]` | The `ToolbarButton` elements that should appear on the left side of the toolbar. |
78 | | `rightItems` | `ToolbarButton[]` | The `ToolbarButton` elements that should appear on the right side of the toolbar. |
79 |
80 |
81 | ### ToolbarButton
82 |
83 | Probably better described as an "icon button," it is just that -- a button that shows an icon. I will add accessibility considerations in time.
84 |
85 | | props | type | description |
86 | |-------|------|-------------|
87 | | `icon` | `String` | The name of the icon to be represented via an icon font. I use [Ionicons](https://ionicons.com/) in the demo but this could easily be swapped out for [FontAwesome](https://fontawesome.com/) or a similar library. You can even make your own icon font at [Icomoon](https://icomoon.io/). |
88 |
89 |
90 |
91 | ## Roadmap
92 |
93 | This is a rather straight-forward library but I do plan to continue making improvements and adding features. If you would like to contribute, you are more than welcome to.
94 |
95 | - [ ] Media messages (e.g. photos, videos)
96 | - [ ] Tooltips, popovers, modals (for viewing options, sending new messages, etc)
97 | - [ ] Graceful degradation (network status indicator, loading spinners, etc)
98 | - [ ] Responsiveness
99 |
100 |
101 |
102 | ## Available Scripts
103 |
104 | In the project directory, you can run:
105 |
106 | ### `npm start`
107 |
108 | Runs the app in the development mode.
109 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
110 |
111 | The page will reload if you make edits.
112 | You will also see any lint errors in the console.
113 |
114 | ### `npm test`
115 |
116 | Launches the test runner in the interactive watch mode.
117 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
118 |
119 | ### `npm run build`
120 |
121 | Builds the app for production to the `build` folder.
122 | It correctly bundles React in production mode and optimizes the build for the best performance.
123 |
124 | The build is minified and the filenames include the hashes.
125 | Your app is ready to be deployed!
126 |
127 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
128 |
129 | ### `npm run eject`
130 |
131 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
132 |
133 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
134 |
135 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
136 |
137 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
138 |
139 | ## Learn More
140 |
141 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
142 |
143 | To learn React, check out the [React documentation](https://reactjs.org/).
144 |
145 | ### Code Splitting
146 |
147 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
148 |
149 | ### Analyzing the Bundle Size
150 |
151 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
152 |
153 | ### Making a Progressive Web App
154 |
155 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
156 |
157 | ### Advanced Configuration
158 |
159 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
160 |
161 | ### Deployment
162 |
163 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
164 |
165 | ### `npm run build` fails to minify
166 |
167 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
168 |
--------------------------------------------------------------------------------
/assets/react-messenger-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sejr/react-messenger/09922cd13218922d584a5bdc01707f9b981dd700/assets/react-messenger-screen.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "messenger-ui",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "axios": "^0.21.1",
7 | "moment": "^2.23.0",
8 | "react": "^16.10.1",
9 | "react-dom": "^16.10.1",
10 | "react-scripts": "2.1.3"
11 | },
12 | "scripts": {
13 | "start": "react-scripts start",
14 | "build": "react-scripts build",
15 | "test": "react-scripts test",
16 | "eject": "react-scripts eject"
17 | },
18 | "eslintConfig": {
19 | "extends": "react-app"
20 | },
21 | "browserslist": [
22 | ">0.2%",
23 | "not dead",
24 | "not ie <= 11",
25 | "not op_mini all"
26 | ],
27 | "devDependencies": {
28 | "shave": "^2.5.4"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sejr/react-messenger/09922cd13218922d584a5bdc01707f9b981dd700/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
15 |
16 |
25 | Messages
26 |
27 |
28 |
29 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/public/react-messenger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sejr/react-messenger/09922cd13218922d584a5bdc01707f9b981dd700/public/react-messenger.png
--------------------------------------------------------------------------------
/public/react-messenger.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | background: #eeeef0;
10 | }
11 |
12 | code {
13 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
14 | monospace;
15 | }
16 |
17 | * {
18 | -webkit-appearance: none;
19 | }
20 |
21 | *:focus {
22 | outline: none;
23 | }
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/components/App/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/src/components/App/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Messenger from '../Messenger';
3 |
4 | export default function App() {
5 | return (
6 |
12 | );
13 | }
--------------------------------------------------------------------------------
/src/components/ToolbarButton/ToolbarButton.css:
--------------------------------------------------------------------------------
1 | .toolbar-button {
2 | color: #007aff;
3 | font-size: 28px;
4 | transition: all 0.1s;
5 | }
6 |
7 | .toolbar-button:hover {
8 | cursor: pointer;
9 | color: #0063ce;
10 | }
11 |
12 | .toolbar-button:active {
13 | color: #007aff;
14 | opacity: 0.25;
15 | }
--------------------------------------------------------------------------------
/src/components/ToolbarButton/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './ToolbarButton.css';
3 |
4 | export default function ToolbarButton(props) {
5 | const { icon } = props;
6 | return (
7 |
8 | );
9 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './assets/index.css';
4 | import App from './components/App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: http://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read http://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
3 | 
12 |