├── .gitignore
├── README.md
├── package.json
├── public
    ├── favicon.ico
    ├── firebase-messaging-sw.js
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── src
    ├── App.css
    ├── App.test.tsx
    ├── IsMobileViewContext.ts
    ├── assets
    │   ├── Image-518@1x.png
    │   ├── add-members.svg
    │   ├── audio-bubble.svg
    │   ├── avatar.png
    │   ├── badge.png
    │   ├── ban-members.svg
    │   ├── captainamerica_avatar.png
    │   ├── cometchat_logo.png
    │   ├── composer.png
    │   ├── contacts.svg
    │   ├── conversation.png
    │   ├── create-group.svg
    │   ├── cyclops_avatar.png
    │   ├── details.svg
    │   ├── file-bubble.svg
    │   ├── group-member.svg
    │   ├── image-bubble.svg
    │   ├── info.svg
    │   ├── ironman_avatar.png
    │   ├── list.png
    │   ├── listwrapper.png
    │   ├── loading_icon.gif
    │   ├── localize.png
    │   ├── new.svg
    │   ├── password-group.svg
    │   ├── power-off.png
    │   ├── receipt.png
    │   ├── right-arrow.png
    │   ├── sample.mp3
    │   ├── sidebar.png
    │   ├── sound-small.png
    │   ├── spiderman_avatar.png
    │   ├── status.png
    │   ├── switch-mode.png
    │   ├── text-bubble.svg
    │   ├── theme.png
    │   ├── transfer-ownership-icon.svg
    │   ├── video-bubble.svg
    │   └── wolverine_avatar.png
    ├── components
    │   ├── App
    │   │   ├── App.tsx
    │   │   └── style.ts
    │   ├── Button
    │   │   ├── effects.ts
    │   │   └── index.tsx
    │   ├── ConversationsWithMessages.tsx
    │   ├── Login
    │   │   ├── index.tsx
    │   │   └── style.ts
    │   ├── LoginSignup
    │   │   ├── index.tsx
    │   │   └── style.ts
    │   ├── Signup
    │   │   ├── index.tsx
    │   │   └── style.ts
    │   └── TextInput
    │   │   ├── index.tsx
    │   │   └── style.ts
    ├── const.ts
    ├── custom-hooks.ts
    ├── firebase.js
    ├── index.css
    ├── index.tsx
    ├── logo.svg
    ├── react-app-env.d.ts
    ├── reportWebVitals.ts
    ├── sampleApp
    │   └── sampledata.js
    ├── setupTests.ts
    └── subject.js
└── tsconfig.json


/.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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img alt="CometChat" src="https://assets.cometchat.io/website/images/logos/banner.png">
 3 | </p>
 4 | 
 5 | # React Enhanced Push notifications (Beta) Sample app
 6 | 
 7 | The CometChat React [Enhanced Push notifications (Beta)](https://www.cometchat.com/docs-beta/notifications/push-overview) Sample app is a fully functional push notification app capable of one-on-one (private) and group messaging, and Calling. This sample app enables users to send and receive push notifications for text and multimedia messages like **images, videos, documents** and **Custom Messages**.
 8 | 
 9 | > [!NOTE]
10 | > If you are using Push Notifications (Extension), please refer to our [React Push Notifications (Extension)](https://github.com/cometchat/cometchat-push-notification-app-react/tree/v4-push-notifications-extension) Sample app for guidance.
11 | 
12 | ## Pre-requisite
13 | 
14 | 1. Login to the [CometChat Dashboard](https://app.cometchat.com/).
15 | 2. Select an existing app or create a new one.
16 | 3. Click on the Notifications section from the menu on the left.
17 | 4. Enable Push Notifications by clicking on the toggle bar and configure the push notifications.
18 | 5. Add credentials for FCM and make a note of the provider id.
19 | 
20 | ## Run the Sample App
21 | 
22 | 1. Clone this repository.
23 | 2. Install the dependencies:
24 | 
25 | ```
26 | npm i
27 | ```
28 | 
29 | 3. Paste the `firebaseConfig` in the correct location as per FCM's documentation.
30 | 4. Add your app credentials like `appId`, `region`, `authKey` in the `src/const.ts`.
31 | 5. Also add the `fcmProviderId` in `src/const.ts` as that is required while registering push token.
32 | 6. Add `vapidKey` obtained from the Firebase console -> Cloud Messaging -> Web Push Certificates to the `firebase.js`.
33 | 7. Run the sample app.
34 | ```
35 | npm start
36 | ```
37 | 
38 | 8. Once the app opens up in a browser, login with a user.
39 | 9. Allow the permission to display push notifications.
40 | 10. Send a message or call to the logged in user from another browser/device.
41 | 11. You should see a push notification for a message.
42 | 12. Tap on the notification to open the Sample app for message.
43 | 
44 | ## Help and Support
45 | 
46 | For issues running the project or integrating with our UI Kits, consult our [documentation](https://www.cometchat.com/docs-beta/notifications/push-overview) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](https://app.cometchat.com/).
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v4-react-push",
 3 |   "version": "0.1.1",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@cometchat/calls-sdk-javascript": "^4.0.9",
 7 |     "@cometchat/chat-sdk-javascript": "^4.0.6",
 8 |     "@cometchat/chat-uikit-react": "^4.3.8",
 9 |     "@cometchat/uikit-elements": "^4.3.9",
10 |     "@cometchat/uikit-resources": "^4.3.8",
11 |     "@cometchat/uikit-shared": "^4.3.10",
12 |     "@testing-library/jest-dom": "^5.17.0",
13 |     "@testing-library/react": "^13.4.0",
14 |     "@testing-library/user-event": "^13.5.0",
15 |     "@types/jest": "^27.5.2",
16 |     "@types/node": "^16.18.48",
17 |     "@types/react": "^18.2.21",
18 |     "@types/react-dom": "^18.2.7",
19 |     "@types/react-router-dom": "^5.3.3",
20 |     "firebase": "^10.3.1",
21 |     "react": "^18.2.0",
22 |     "react-dom": "^18.2.0",
23 |     "react-hot-toast": "^2.4.1",
24 |     "react-router-dom": "^6.16.0",
25 |     "react-scripts": "5.0.1",
26 |     "typescript": "^4.9.5",
27 |     "web-vitals": "^2.1.4"
28 |   },
29 |   "scripts": {
30 |     "start": "react-scripts start",
31 |     "build": "react-scripts build",
32 |     "test": "react-scripts test",
33 |     "eject": "react-scripts eject"
34 |   },
35 |   "eslintConfig": {
36 |     "extends": [
37 |       "react-app",
38 |       "react-app/jest"
39 |     ]
40 |   },
41 |   "browserslist": {
42 |     "production": [
43 |       ">0.2%",
44 |       "not dead",
45 |       "not op_mini all"
46 |     ],
47 |     "development": [
48 |       "last 1 chrome version",
49 |       "last 1 firefox version",
50 |       "last 1 safari version"
51 |     ]
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/public/favicon.ico


--------------------------------------------------------------------------------
/public/firebase-messaging-sw.js:
--------------------------------------------------------------------------------
  1 | // /* eslint-disable no-restricted-globals */
  2 | // /* eslint-disable no-undef */
  3 | // // required to setup background notification handler when browser is not in focus or in background and
  4 | // // In order to receive the onMessage event,  app must define the Firebase messaging service worker
  5 | // // self.importScripts("localforage.js");
  6 | 
  7 | importScripts(
  8 |   "https://www.gstatic.com/firebasejs/9.15.0/firebase-app-compat.js"
  9 | );
 10 | importScripts(
 11 |   "https://www.gstatic.com/firebasejs/9.15.0/firebase-messaging-compat.js"
 12 | );
 13 | var TAG = "[Firebase-sw.js]";
 14 | 
 15 | self.addEventListener("notificationclick", async function (event) {
 16 |   console.log(TAG, "notificationclick", event, event.clientId);
 17 |   if (event?.notification?.data) {
 18 |     let data = event.notification.data;
 19 |     event.waitUntil(
 20 |       self.clients
 21 |         .matchAll({ type: "window", includeUncontrolled: true })
 22 |         .then((clientList) => {
 23 |           if (clientList.length > 0) {
 24 |             clientList[0].postMessage({
 25 |               message: data,
 26 |             });
 27 |             return (
 28 |               clientList[0]
 29 |                 .focus()
 30 |                 .catch((error) => {
 31 |                   console.log(error);
 32 |                   return self.clients.openWindow(clientList[0].url); // Adjust this URL as necessary for your application
 33 |                 })
 34 |             );
 35 |           } else {
 36 |             // Open a new client (tab) if there are no existing clients
 37 |             self.clients.openWindow("/");
 38 |             setTimeout(() => {
 39 |               self.clients
 40 |                 .matchAll({ type: "window", includeUncontrolled: true })
 41 |                 .then((clientList) => {
 42 |                   if (clientList.length > 0) {
 43 |                     clientList[0].postMessage({
 44 |                       message: {...data,fromBackground: true},
 45 |                     });
 46 |                   }
 47 |                   return;
 48 |                 });
 49 |             }, 1500);
 50 |           }
 51 |         })
 52 |     );
 53 |   }
 54 | 
 55 |   event.notification.close();
 56 | });
 57 | // "Default" Firebase configuration (prevents errors)
 58 | const defaultConfig = {
 59 |   apiKey: true,
 60 |   projectId: true,
 61 |   messagingSenderId: true,
 62 |   appId: true,
 63 | };
 64 | 
 65 | // Initialize Firebase app
 66 | firebase.initializeApp(self.firebaseConfig || defaultConfig);
 67 | let messaging;
 68 | try {
 69 |   messaging = firebase.messaging();
 70 |   // Customize background notification handling here
 71 |   messaging.onBackgroundMessage((payload) => {
 72 |     console.log("Background Message:", payload);
 73 |     const notificationTitle = payload.data.title;
 74 |     if (
 75 |       payload.data.type === "call" &&
 76 |       (payload.data.callAction === "unanswered" ||
 77 |         payload.data.callAction === "busy" ||
 78 |         payload.data.callAction === "ongoing")
 79 |     ) {
 80 |       return;
 81 |     }
 82 |     let body = payload.data.body;
 83 |     if (payload.data.type === "call") {
 84 |       switch (payload.data.callAction) {
 85 |         case "cancelled":
 86 |           body = `Call cancelled`;
 87 |           break;
 88 |         case "initiated":
 89 |           body = `Incoming ${payload.data.callType} call`;
 90 |           break;
 91 |         default:
 92 |           break;
 93 |       }
 94 |     }
 95 |     const notificationOptions = {
 96 |       title: payload.data.title,
 97 |       icon: payload.data.senderAvatar,
 98 |       data: payload.data,
 99 |       tag: payload.data.tag,
100 |       body: body,
101 |     };
102 |     self.registration.showNotification(notificationTitle, notificationOptions);
103 |   });
104 | } catch (err) {
105 |   console.error("Failed to initialize Firebase Messaging", err);
106 | }
107 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/public/logo512.png


--------------------------------------------------------------------------------
/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 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/App.css


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { render, screen } from "@testing-library/react";
 3 | import App from "./components/App/App";
 4 | 
 5 | test("renders learn react link", () => {
 6 |   render(<App />);
 7 |   const linkElement = screen.getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/IsMobileViewContext.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | 
3 | export const IsMobileViewContext = createContext(false);
4 | 


--------------------------------------------------------------------------------
/src/assets/Image-518@1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/Image-518@1x.png


--------------------------------------------------------------------------------
/src/assets/add-members.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>


--------------------------------------------------------------------------------
/src/assets/audio-bubble.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
 7 | 	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
 8 | </style>
 9 | <polyline class="st0" points="10,21 3,21 3,11 10,11 "/>
10 | <polyline class="st0" points="10,11 20,3.8 20,28.2 10,21 "/>
11 | <g>
12 | 	<path class="st0" d="M26.4,22c1.6-1.5,2.6-3.6,2.6-6c0-2.4-1-4.5-2.6-6"/>
13 | </g>
14 | <g>
15 | 	<path class="st0" d="M24,18.6c0.7-0.7,1.2-1.6,1.2-2.6s-0.4-2-1.2-2.6"/>
16 | </g>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/assets/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/avatar.png


--------------------------------------------------------------------------------
/src/assets/badge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/badge.png


--------------------------------------------------------------------------------
/src/assets/ban-members.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linejoin:round;stroke-width:2px;}</style></defs><title/><g data-name="210-User" id="_210-User"><circle class="cls-1" cx="16" cy="8" r="7"/><path class="cls-1" d="M23.55,18A11,11,0,0,0,5,26v5H18"/><line class="cls-1" x1="20" x2="28" y1="21" y2="29"/><line class="cls-1" x1="28" x2="20" y1="21" y2="29"/></g></svg>


--------------------------------------------------------------------------------
/src/assets/captainamerica_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/captainamerica_avatar.png


--------------------------------------------------------------------------------
/src/assets/cometchat_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/cometchat_logo.png


--------------------------------------------------------------------------------
/src/assets/composer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/composer.png


--------------------------------------------------------------------------------
/src/assets/contacts.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <title>Icons/24/Contacts</title>
 4 |     <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
 5 |         <g id="Icons/24/Contacts" stroke="#000000" stroke-width="1.5">
 6 |             <g id="Group" transform="translate(2.000000, 2.000000)">
 7 |                 <path d="M5.33333333,8 C5.33333333,10.5773288 7.42267117,12.6666667 10,12.6666667 C12.5773288,12.6666667 14.6666667,10.5773288 14.6666667,8 C14.6666667,5.42267117 12.5773288,3.33333333 10,3.33333333 C7.42267117,3.33333333 5.33333333,5.42267117 5.33333333,8 L5.33333333,8 Z" id="Path"></path>
 8 |                 <path d="M16.1448889,17.8897778 C14.5187092,16.2533858 12.3069979,15.333207 10,15.333207 C7.69300212,15.333207 5.48129083,16.2533858 3.85511111,17.8897778" id="Path"></path>
 9 |                 <path d="M0,10 C0,15.5228475 4.4771525,20 10,20 C15.5228475,20 20,15.5228475 20,10 C20,4.4771525 15.5228475,0 10,0 C4.4771525,0 0,4.4771525 0,10 Z" id="Path"></path>
10 |             </g>
11 |         </g>
12 |     </g>
13 | </svg>


--------------------------------------------------------------------------------
/src/assets/conversation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/conversation.png


--------------------------------------------------------------------------------
/src/assets/create-group.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="32px" height="32px" viewBox="0 0 24 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>group_add</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 7 |         <g id="Rounded" transform="translate(-576.000000, -4103.000000)">
 8 |             <g id="Social" transform="translate(100.000000, 4044.000000)">
 9 |                 <g id="-Round-/-Social-/-group_add" transform="translate(476.000000, 54.000000)">
10 |                     <g>
11 |                         <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
12 |                         <path d="M7,10 L5,10 L5,8 C5,7.45 4.55,7 4,7 C3.45,7 3,7.45 3,8 L3,10 L1,10 C0.45,10 0,10.45 0,11 C0,11.55 0.45,12 1,12 L3,12 L3,14 C3,14.55 3.45,15 4,15 C4.55,15 5,14.55 5,14 L5,12 L7,12 C7.55,12 8,11.55 8,11 C8,10.45 7.55,10 7,10 Z M18,11 C19.66,11 20.99,9.66 20.99,8 C20.99,6.34 19.66,5 18,5 C17.68,5 17.37,5.05 17.09,5.14 C17.66,5.95 17.99,6.93 17.99,8 C17.99,9.07 17.65,10.04 17.09,10.86 C17.37,10.95 17.68,11 18,11 Z M13,11 C14.66,11 15.99,9.66 15.99,8 C15.99,6.34 14.66,5 13,5 C11.34,5 10,6.34 10,8 C10,9.66 11.34,11 13,11 Z M13,13 C11,13 7,14 7,16 L7,17 C7,17.55 7.45,18 8,18 L18,18 C18.55,18 19,17.55 19,17 L19,16 C19,14 15,13 13,13 Z M19.62,13.16 C20.45,13.89 21,14.82 21,16 L21,17.5 C21,17.67 20.98,17.84 20.95,18 L23.5,18 C23.78,18 24,17.78 24,17.5 L24,16 C24,14.46 21.63,13.51 19.62,13.16 Z" id="🔹-Icon-Color" fill="#1D1D1D"></path>
13 |                     </g>
14 |                 </g>
15 |             </g>
16 |         </g>
17 |     </g>
18 | </svg>


--------------------------------------------------------------------------------
/src/assets/cyclops_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/cyclops_avatar.png


--------------------------------------------------------------------------------
/src/assets/details.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 5 | <g id="Layer_1">
 6 | 	<path d="M18.899,25.091C19.578,24.237,20,23.172,20,22c0-2.757-2.243-5-5-5s-5,2.243-5,5c0,1.172,0.422,2.237,1.101,3.091
 7 | 		C8.773,25.517,7,27.551,7,30v7h16v-7C23,27.551,21.227,25.517,18.899,25.091z M15,19c1.654,0,3,1.346,3,3s-1.346,3-3,3
 8 | 		s-3-1.346-3-3S13.346,19,15,19z M21,35H9v-5c0-1.654,1.346-3,3-3h6c1.654,0,3,1.346,3,3V35z"/>
 9 | 	<rect x="26" y="20" width="7" height="2"/>
10 | 	<rect x="36" y="20" width="7" height="2"/>
11 | 	<rect x="26" y="25" width="3" height="2"/>
12 | 	<rect x="32" y="25" width="11" height="2"/>
13 | 	<rect x="26" y="30" width="8" height="2"/>
14 | 	<rect x="39" y="30" width="4" height="2"/>
15 | 	<rect x="26" y="35" width="2" height="2"/>
16 | 	<rect x="30" y="35" width="2" height="2"/>
17 | 	<rect x="34" y="35" width="2" height="2"/>
18 | 	<rect x="41" y="35" width="2" height="2"/>
19 | 	<path d="M29,4h-8v6H1v36h48V10H29V4z M23,6h4v4v4h-4v-4V6z M47,12v32H3V12h18v4h8v-4H47z"/>
20 | </g>
21 | <g>
22 | </g>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/src/assets/file-bubble.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>folder, file, archive, document, office</title><path d="M21,5H11.72l-.32-1A3,3,0,0,0,8.56,2H3A3,3,0,0,0,0,5V19a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V8A3,3,0,0,0,21,5Zm1,14a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V5A1,1,0,0,1,3,4H8.56a1,1,0,0,1,.95.68L10.28,7H21a1,1,0,0,1,1,1Z"/></svg>


--------------------------------------------------------------------------------
/src/assets/group-member.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="32px" height="32px" viewBox="0 0 548.169 548.169" style="enable-background:new 0 0 548.169 548.169;"
 6 | 	 xml:space="preserve">
 7 | <g>
 8 | 	<g>
 9 | 		<path d="M109.634,164.452c20.179,0,37.402-7.135,51.674-21.411c14.277-14.275,21.416-31.503,21.416-51.678
10 | 			c0-20.173-7.139-37.401-21.416-51.678c-14.272-14.275-31.496-21.414-51.674-21.414c-20.177,0-37.401,7.139-51.676,21.414
11 | 			C43.684,53.962,36.545,71.186,36.545,91.363c0,20.179,7.139,37.403,21.413,51.678C72.233,157.313,89.457,164.452,109.634,164.452z
12 | 			"/>
13 | 		<path d="M196.569,278.519c21.413,21.406,47.248,32.114,77.516,32.114c30.269,0,56.103-10.708,77.515-32.114
14 | 			c21.409-21.42,32.117-47.258,32.117-77.52c0-30.264-10.708-56.101-32.117-77.515c-21.412-21.414-47.246-32.121-77.515-32.121
15 | 			c-30.268,0-56.105,10.709-77.516,32.121c-21.411,21.411-32.12,47.248-32.12,77.515S175.158,257.102,196.569,278.519z"/>
16 | 		<path d="M438.543,164.452c20.17,0,37.397-7.135,51.671-21.411c14.274-14.275,21.409-31.503,21.409-51.678
17 | 			c0-20.173-7.135-37.401-21.409-51.678c-14.273-14.275-31.501-21.414-51.671-21.414c-20.184,0-37.407,7.139-51.682,21.414
18 | 			c-14.271,14.277-21.409,31.501-21.409,51.678c0,20.179,7.139,37.403,21.409,51.678
19 | 			C401.136,157.313,418.359,164.452,438.543,164.452z"/>
20 | 		<path d="M512.763,164.456c-1.136,0-5.276,1.999-12.415,5.996c-7.132,3.999-16.416,8.044-27.833,12.137
21 | 			c-11.416,4.089-22.747,6.136-33.972,6.136c-12.758,0-25.406-2.187-37.973-6.567c0.945,7.039,1.424,13.322,1.424,18.842
22 | 			c0,26.457-7.71,50.819-23.134,73.089c30.841,0.955,56.056,13.134,75.668,36.552h38.256c15.605,0,28.739-3.863,39.396-11.57
23 | 			c10.657-7.703,15.989-18.986,15.989-33.83C548.172,198.047,536.376,164.452,512.763,164.456z"/>
24 | 		<path d="M470.096,395.284c-1.999-11.136-4.524-21.464-7.57-30.978c-3.046-9.521-7.139-18.794-12.271-27.836
25 | 			c-5.141-9.034-11.044-16.748-17.706-23.127c-6.667-6.379-14.805-11.464-24.414-15.276c-9.609-3.806-20.225-5.708-31.833-5.708
26 | 			c-1.906,0-5.996,2.047-12.278,6.14c-6.283,4.089-13.224,8.665-20.841,13.702c-7.615,5.037-17.789,9.609-30.55,13.702
27 | 			c-12.762,4.093-25.608,6.14-38.544,6.14c-12.941,0-25.791-2.047-38.544-6.14c-12.756-4.093-22.936-8.665-30.55-13.702
28 | 			c-7.616-5.037-14.561-9.613-20.841-13.702c-6.283-4.093-10.373-6.14-12.279-6.14c-11.609,0-22.22,1.902-31.833,5.708
29 | 			c-9.613,3.812-17.749,8.897-24.41,15.276c-6.667,6.372-12.562,14.093-17.705,23.127c-5.137,9.042-9.229,18.315-12.275,27.836
30 | 			c-3.045,9.514-5.564,19.842-7.566,30.978c-2,11.136-3.331,21.505-3.997,31.121c-0.667,9.613-0.999,19.466-0.999,29.554
31 | 			c0,22.836,6.945,40.874,20.839,54.098c13.899,13.223,32.363,19.842,55.389,19.842h249.535c23.028,0,41.49-6.619,55.392-19.842
32 | 			c13.894-13.224,20.841-31.262,20.841-54.098c0-10.088-0.335-19.938-0.992-29.554C473.418,416.789,472.087,406.419,470.096,395.284
33 | 			z"/>
34 | 		<path d="M169.303,274.088c-15.418-22.27-23.125-46.632-23.122-73.089c0-5.52,0.477-11.799,1.427-18.842
35 | 			c-12.564,4.377-25.221,6.567-37.974,6.567c-11.23,0-22.552-2.046-33.974-6.136c-11.417-4.093-20.699-8.138-27.834-12.137
36 | 			c-7.138-3.997-11.281-5.996-12.422-5.996C11.801,164.456,0,198.051,0,265.24c0,14.844,5.33,26.127,15.987,33.83
37 | 			c10.66,7.707,23.794,11.563,39.397,11.563h38.26C113.251,287.222,138.467,275.042,169.303,274.088z"/>
38 | 	</g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | <g>
45 | </g>
46 | <g>
47 | </g>
48 | <g>
49 | </g>
50 | <g>
51 | </g>
52 | <g>
53 | </g>
54 | <g>
55 | </g>
56 | <g>
57 | </g>
58 | <g>
59 | </g>
60 | <g>
61 | </g>
62 | <g>
63 | </g>
64 | <g>
65 | </g>
66 | <g>
67 | </g>
68 | <g>
69 | </g>
70 | </svg>
71 | 


--------------------------------------------------------------------------------
/src/assets/image-bubble.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g id="Image"><path d="M25,2H7A5,5,0,0,0,2,7V25a5,5,0,0,0,5,5H25a5,5,0,0,0,5-5V7A5,5,0,0,0,25,2ZM7,4H25a3,3,0,0,1,3,3v5.59l-1.88-1.88a3,3,0,0,0-4.24,0l-7.95,8-3-2.42a3,3,0,0,0-3.8,0L4,18.86V7A3,3,0,0,1,7,4ZM25,28H7a3,3,0,0,1-3-3V21.47l4.38-3.66a1,1,0,0,1,1.27,0l3.73,3a1,1,0,0,0,1.33-.07l8.58-8.59a1,1,0,0,1,1.42,0L28,15.41V25A3,3,0,0,1,25,28Z"/><path d="M10,13a3,3,0,1,0-3-3A3,3,0,0,0,10,13Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,10,9Z"/></g></svg>


--------------------------------------------------------------------------------
/src/assets/info.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <title>Icons/24/Info</title>
 4 |     <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
 5 |         <g id="Icons/24/Info" stroke="#000000" stroke-width="1.5">
 6 |             <g id="streamline-icon-information-circle@24x24" transform="translate(2.000000, 2.000000)">
 7 |                 <path d="M12,14 L11.3333333,14 C10.5969537,14 10,13.4030463 10,12.6666667 L10,9.33333333 C10,8.9651435 9.70152317,8.66666667 9.33333333,8.66666667 L8.66666667,8.66666667" id="Path"></path>
 8 |                 <path d="M9.66666667,5.33333333 C9.48257175,5.33333333 9.33333333,5.48257175 9.33333333,5.66666667 C9.33333333,5.85076158 9.48257175,6 9.66666667,6 C9.85076158,6 10,5.85076158 10,5.66666667 C10,5.48257175 9.85076158,5.33333333 9.66666667,5.33333333 L9.66666667,5.33333333" id="Path"></path>
 9 |                 <path d="M0,10 C0,15.5228475 4.4771525,20 10,20 C15.5228475,20 20,15.5228475 20,10 C20,4.4771525 15.5228475,0 10,0 C4.4771525,0 0,4.4771525 0,10 Z" id="Path"></path>
10 |             </g>
11 |         </g>
12 |     </g>
13 | </svg>


--------------------------------------------------------------------------------
/src/assets/ironman_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/ironman_avatar.png


--------------------------------------------------------------------------------
/src/assets/list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/list.png


--------------------------------------------------------------------------------
/src/assets/listwrapper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/listwrapper.png


--------------------------------------------------------------------------------
/src/assets/loading_icon.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/loading_icon.gif


--------------------------------------------------------------------------------
/src/assets/localize.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/localize.png


--------------------------------------------------------------------------------
/src/assets/new.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    <title>Icons/24/New</title>    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">        <g id="Icons/24/New" stroke="#000000" stroke-width="1.5">            <g id="Group" transform="translate(2.000000, 1.000000)">                <path d="M10.9288822,11.8990317 L7.62932866,12.3710104 L8.10043948,9.07071466 L16.5857676,0.585763632 C17.3668205,-0.195254544 18.6331574,-0.195254544 19.4142103,0.585763632 C20.1952632,1.36678181 20.1952632,2.63306247 19.4142103,3.41408064 L10.9288822,11.8990317 Z" id="Path"></path>                <line x1="15.6426571" y1="1.52883225" x2="18.4710998" y2="4.35714926" id="Path"></line>                <path d="M16,12.0003604 L16,18.6667267 C16,19.4030732 15.4030369,20 14.6666577,20 L1.33333252,20 C0.596953301,20 0,19.4030732 0,18.6667267 L0,5.33399414 C0,4.59764765 0.596953301,4.00072088 1.33333252,4.00072088 L8,4.00072088" id="Path"></path>            </g>        </g>    </g></svg>


--------------------------------------------------------------------------------
/src/assets/password-group.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 8h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h2V7a6 6 0 1 1 12 0v1zM5 10v10h14V10H5zm6 4h2v2h-2v-2zm-4 0h2v2H7v-2zm8 0h2v2h-2v-2zm1-6V7a4 4 0 1 0-8 0v1h8z" fill="#000"/></svg>


--------------------------------------------------------------------------------
/src/assets/power-off.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/power-off.png


--------------------------------------------------------------------------------
/src/assets/receipt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/receipt.png


--------------------------------------------------------------------------------
/src/assets/right-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/right-arrow.png


--------------------------------------------------------------------------------
/src/assets/sample.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/sample.mp3


--------------------------------------------------------------------------------
/src/assets/sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/sidebar.png


--------------------------------------------------------------------------------
/src/assets/sound-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/sound-small.png


--------------------------------------------------------------------------------
/src/assets/spiderman_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/spiderman_avatar.png


--------------------------------------------------------------------------------
/src/assets/status.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/status.png


--------------------------------------------------------------------------------
/src/assets/switch-mode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/switch-mode.png


--------------------------------------------------------------------------------
/src/assets/text-bubble.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 5 | <g>
 6 | 	<g>
 7 | 		<circle cx="256" cy="201.04" r="20"/>
 8 | 	</g>
 9 | </g>
10 | <g>
11 | 	<g>
12 | 		<circle cx="186" cy="201.04" r="20"/>
13 | 	</g>
14 | </g>
15 | <g>
16 | 	<g>
17 | 		<circle cx="326" cy="201.04" r="20"/>
18 | 	</g>
19 | </g>
20 | <g>
21 | 	<g>
22 | 		<path d="M434.339,82.242C386.473,52.45,323.138,36.043,256,36.043S125.527,52.45,77.661,82.242
23 | 			C27.581,113.413,0,155.604,0,201.043c0,41.235,23.293,80.566,65.587,110.749c36.838,26.289,86.136,44.211,140.033,51.082
24 | 			c-1.708,26.625-9.155,52.702-21.793,76.062l-20.03,37.021l38.928-16.011c46.355-19.065,84.424-53.563,107.98-97.647
25 | 			c53.867-7.49,103.002-26.161,139.07-52.957C489.901,279.531,512,241.07,512,201.043C512,155.604,484.419,113.413,434.339,82.242z
26 | 			 M431.885,285.26c-33.702,25.037-80.824,42.18-132.688,48.27l-8.148,0.957l-3.59,7.377c-13.93,28.626-34.804,52.916-60.48,70.856
27 | 			c5.949-19.931,9.021-40.747,9.021-61.677c0-0.397-0.007-0.793-0.015-1.188l-0.109-14.105l-13.545-1.228
28 | 			C112.684,324.585,30,267.202,30,201.043c0-34.693,22.556-67.839,63.514-93.331C136.686,80.841,194.391,66.043,256,66.043
29 | 			s119.314,14.798,162.486,41.669C459.444,133.204,482,166.35,482,201.043C482,231.342,464.202,261.251,431.885,285.26z"/>
30 | 	</g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | <g>
45 | </g>
46 | <g>
47 | </g>
48 | <g>
49 | </g>
50 | <g>
51 | </g>
52 | <g>
53 | </g>
54 | <g>
55 | </g>
56 | <g>
57 | </g>
58 | <g>
59 | </g>
60 | <g>
61 | </g>
62 | </svg>
63 | 


--------------------------------------------------------------------------------
/src/assets/theme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/theme.png


--------------------------------------------------------------------------------
/src/assets/transfer-ownership-icon.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><defs><style>.cls-1{fill:#1d75b8;}.cls-2{fill:#2d3e50;}</style></defs><title>a</title><path class="cls-1" d="M89.8229,29.16655a48.45717,48.45717,0,0,1,8.24529,15.063l-6.28575,1.11819L105.141,56.76847l3.90824-7.2791.19-.35824,4.08738-7.61564-6.11748,1.08562A56.858,56.858,0,0,0,95.71781,24.04242,56.14343,56.14343,0,0,0,71.85589,8.76234l-2.01927,5.61807A49.2684,49.2684,0,0,1,89.8229,29.16655Z"/><path class="cls-2" d="M55.13581,49.26609a5.65761,5.65761,0,0,0-3.049-4.10606c-5.30165-2.64369-16.93554-6.54814-16.93554-6.54814v-3.8413l.32385-.2444a11.11461,11.11461,0,0,0,4.22013-7.06344l.06518-.40939h.31569a4.29348,4.29348,0,0,0,3.97369-2.67221,4.67554,4.67554,0,0,0,.58454-2.26486,4.30186,4.30186,0,0,0-.30551-1.59272,2.22146,2.22146,0,0,0-.86154-1.385l-1.07337-.65175.26681-1.165C44.59973,8.86932,38.05159,1.25594,29.259,1.04615c-.21386-.00408-.42567-.00609-.63546-.002-.20979-.00405-.42161-.002-.63546.002-8.79262.20979-15.34076,7.82317-13.40178,16.27566l.26681,1.165-1.07337.65175a2.22146,2.22146,0,0,0-.86154,1.385,4.30186,4.30186,0,0,0-.30551,1.59272,4.67554,4.67554,0,0,0,.58454,2.26486,4.29348,4.29348,0,0,0,3.97369,2.67221h.31569l.06518.40939a11.11461,11.11461,0,0,0,4.22013,7.06344l.32385.2444v3.8413S10.46185,42.51634,5.1602,45.16a5.65761,5.65761,0,0,0-3.049,4.10606A123.18723,123.18723,0,0,0,1.0419,63.5111H56.2051A123.18723,123.18723,0,0,0,55.13581,49.26609Z"/><path class="cls-2" d="M125.88881,112.71309a5.65761,5.65761,0,0,0-3.049-4.10606c-5.30165-2.64369-16.93554-6.54814-16.93554-6.54814v-3.8413l.32385-.2444a11.11461,11.11461,0,0,0,4.22013-7.06344l.06518-.40939h.31569a4.29348,4.29348,0,0,0,3.97369-2.67221,4.67554,4.67554,0,0,0,.58454-2.26486,4.30186,4.30186,0,0,0-.30551-1.59272,2.22146,2.22146,0,0,0-.86154-1.385l-1.07337-.65175.26681-1.165c1.939-8.45249-4.60915-16.06587-13.40178-16.27566-.21386-.00408-.42567-.00609-.63546-.002-.20979-.00405-.42161-.002-.63546.002-8.79262.20979-15.34076,7.82317-13.40178,16.27566l.26681,1.165-1.07337.65175a2.22146,2.22146,0,0,0-.86154,1.385,4.30186,4.30186,0,0,0-.30551,1.59272,4.67554,4.67554,0,0,0,.58454,2.26486,4.29348,4.29348,0,0,0,3.97369,2.67221h.31569l.06518.40939a11.11461,11.11461,0,0,0,4.22013,7.06344l.32385.2444v3.8413s-11.63389,3.90445-16.93554,6.54814a5.65761,5.65761,0,0,0-3.049,4.10606,123.18723,123.18723,0,0,0-1.06929,14.245H126.9581A123.18724,123.18724,0,0,0,125.88881,112.71309Z"/><path class="cls-1" d="M38.21426,98.79041a48.45739,48.45739,0,0,1-7.77175-15.31269l6.31756-.92172L23.764,70.7244l-4.13326,7.15374-.201.35214-4.3228,7.48451,6.14836-.89439a56.85828,56.85828,0,0,0,10.90719,18.90788,56.14343,56.14343,0,0,0,23.374,16.01651l2.19341-5.55241A49.268,49.268,0,0,1,38.21426,98.79041Z"/></svg>


--------------------------------------------------------------------------------
/src/assets/video-bubble.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M43 15H24.02L42.9 13.01C43.0307 12.9962 43.1574 12.9569 43.2729 12.8942C43.3883 12.8314 43.4903 12.7466 43.573 12.6444C43.6556 12.5423 43.7174 12.4248 43.7546 12.2988C43.7918 12.1728 43.8039 12.0406 43.79 11.91L43.476 8.92696C43.4071 8.27368 43.2102 7.64036 42.8965 7.06321C42.5828 6.48606 42.1584 5.97639 41.6477 5.56331C41.1369 5.15024 40.5497 4.84186 39.9197 4.6558C39.2897 4.46974 38.6292 4.40965 37.976 4.47896L8.139 7.62496C6.82017 7.76529 5.61096 8.42335 4.77696 9.4546C3.94297 10.4858 3.55239 11.8059 3.691 13.125L4 16.053V39C4.00159 40.3256 4.52888 41.5964 5.46622 42.5337C6.40356 43.4711 7.67441 43.9984 9 44H39C40.3256 43.9984 41.5964 43.4711 42.5338 42.5337C43.4711 41.5964 43.9984 40.3256 44 39V16C44 15.7347 43.8946 15.4804 43.7071 15.2929C43.5196 15.1053 43.2652 15 43 15ZM42 22H33.174L37.46 17H42V22ZM19.825 8.39996L24.612 12.923L17.286 13.695L12.5 9.17596L19.825 8.39996ZM29.77 7.35496L34.557 11.878L27.231 12.65L22.445 8.12696L29.77 7.35496ZM6 17H14.826L10.54 22H6V17ZM17.46 17H24.826L20.54 22H13.174L17.46 17ZM27.46 17H34.826L30.54 22H23.174L27.46 17ZM38.183 6.46796C38.2896 6.45686 38.3968 6.45119 38.504 6.45096C39.2442 6.45257 39.9576 6.72774 40.5071 7.22356C41.0567 7.71939 41.4035 8.40086 41.481 9.13696L41.691 11.126L37.176 11.602L32.39 7.07896L38.183 6.46796ZM8.349 9.61396L9.88 9.45196L14.667 13.975L5.89 14.9L5.68 12.911C5.59686 12.1198 5.83133 11.3281 6.33184 10.7098C6.83235 10.0916 7.55792 9.69737 8.349 9.61396V9.61396ZM42 39C42 39.7956 41.6839 40.5587 41.1213 41.1213C40.5587 41.6839 39.7956 42 39 42H9C8.20435 42 7.44129 41.6839 6.87868 41.1213C6.31607 40.5587 6 39.7956 6 39V24H42V39Z" fill="black"/>
3 | <path d="M19.987 39.358C20.2865 39.5335 20.6274 39.626 20.9745 39.626C21.3217 39.626 21.6625 39.5335 21.962 39.358L30.013 34.71C30.3131 34.5366 30.5622 34.2873 30.7354 33.9871C30.9086 33.687 30.9998 33.3465 30.9998 33C30.9998 32.6534 30.9086 32.313 30.7354 32.0128C30.5622 31.7127 30.3131 31.4634 30.013 31.29L21.962 26.642C21.6618 26.4688 21.3213 26.3776 20.9748 26.3777C20.6282 26.3777 20.2877 26.469 19.9876 26.6423C19.6874 26.8155 19.4381 27.0648 19.2648 27.3649C19.0915 27.665 19.0001 28.0054 19 28.352V37.652C18.9986 37.9983 19.0892 38.3388 19.2627 38.6386C19.4361 38.9383 19.6861 39.1866 19.987 39.358V39.358ZM21 28.4L28.975 33L21 37.6V28.4Z" fill="black"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/assets/wolverine_avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cometchat/cometchat-push-notification-app-react/769451dad40e9d6f25fc7f7c27a82f2144eb8006/src/assets/wolverine_avatar.png


--------------------------------------------------------------------------------
/src/components/App/App.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @typescript-eslint/no-unused-vars */
  2 | import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
  3 | 
  4 | import { CometChatTheme } from "@cometchat/chat-uikit-react";
  5 | import { useEffect, useLayoutEffect, useState } from "react";
  6 | import { CometChat } from "@cometchat/chat-sdk-javascript";
  7 | import { Login } from "../Login";
  8 | import { IsMobileViewContext } from "../../IsMobileViewContext";
  9 | import { appStyle } from "./style";
 10 | 
 11 | import firebaseInitialize from "../../firebase";
 12 | import ConversationsWithMessages from "../ConversationsWithMessages";
 13 | function App() {
 14 |   const navigate = useNavigate();
 15 |   const [isMobileView, setIsMobileView] = useState(false);
 16 |   const [theme, setTheme] = useState(new CometChatTheme({}));
 17 | 
 18 | 
 19 |   useEffect(() => {
 20 |     // Assuming the service worker has already been registered elsewhere
 21 |     if (navigator.serviceWorker) {
 22 |       // Listen for messages from the service worker
 23 |       const handleServiceWorkerMessage = (event: any) => {
 24 |         console.log(
 25 |           "Received a message from service worker:",
 26 |           event,
 27 |           event.data.message
 28 |         );
 29 |         // Handle the message or payload here
 30 |         // You can pass the message to your component's state or context
 31 |         if (navigate) {
 32 |           navigate("/conversationsWithMessages", { state: event.data.message });
 33 |           return;
 34 |         }
 35 |       };
 36 | 
 37 |       navigator.serviceWorker.addEventListener(
 38 |         "message",
 39 |         handleServiceWorkerMessage
 40 |       );
 41 | 
 42 |       // Cleanup listener when the component unmounts
 43 |       return () => {
 44 |         navigator.serviceWorker.removeEventListener(
 45 |           "message",
 46 |           handleServiceWorkerMessage
 47 |         );
 48 |       };
 49 |     }
 50 |   }, []);
 51 | 
 52 |   useLayoutEffect(() => {
 53 |     firebaseInitialize(navigate);
 54 |   },[])
 55 | 
 56 |   useEffect(() => {
 57 |     function handleResize() {
 58 |       if (window.innerWidth <= 768) setIsMobileView(true);
 59 |       else setIsMobileView(false);
 60 |     }
 61 |     window.addEventListener("resize", handleResize);
 62 |   }, [setIsMobileView]);
 63 | 
 64 |   return (
 65 |     <div style={appStyle(theme)}>
 66 |       <div
 67 |         style={{
 68 |           height: "100px",
 69 |           width: "800px",
 70 |         }}
 71 |       >
 72 |         <div
 73 |           style={{
 74 |             boxSizing: "border-box",
 75 |             height: "100%",
 76 |             width: "100%",
 77 |             position: "absolute",
 78 |             top: "0",
 79 |             left: "0",
 80 |             backgroundColor: "white",
 81 |           }}
 82 |         >
 83 |           <IsMobileViewContext.Provider value={isMobileView}>
 84 |             <Routes>
 85 |               <Route path="/">
 86 |                 <Route path="/" element={<CheckLogin />}></Route>
 87 |                 <Route
 88 |                   path="conversationsWithMessages"
 89 |                   element={<ConversationsWithMessages />}
 90 |                 />
 91 |               </Route>
 92 |               <Route path="*" element={<Navigate to="/" />} />
 93 |             </Routes>
 94 |           </IsMobileViewContext.Provider>
 95 | 
 96 |         </div>
 97 |       </div>
 98 |     </div>
 99 |   );
100 | }
101 | 
102 | const CheckLogin = () => {
103 |   const [loggedInUser, setLoggedInUser] = useState<
104 |     CometChat.User | null | undefined
105 |   >(null);
106 |   const [interestingAsyncOpStarted, setInterestingAsyncOpStarted] = useState(
107 |     false
108 |   );
109 |   const navigate = useNavigate();
110 |   useLayoutEffect(() => {
111 |     (async () => {
112 |       try {
113 |         setLoggedInUser(await CometChat.getLoggedinUser());
114 |       } catch (error) {
115 |         console.log(error);
116 |       }
117 |     })();
118 |   }, []);
119 | 
120 |   useEffect(() => {
121 |     if (loggedInUser) {
122 |       navigate("/conversationsWithMessages");
123 |     }
124 |   }, [loggedInUser])
125 | 
126 |   return (
127 |     <Login
128 |       loggedInUser={loggedInUser}
129 |       setLoggedInUser={setLoggedInUser}
130 |       setInterestingAsyncOpStarted={setInterestingAsyncOpStarted}
131 |     />
132 |   );
133 | };
134 | 
135 | export default App;
136 | 


--------------------------------------------------------------------------------
/src/components/App/style.ts:
--------------------------------------------------------------------------------
 1 | import { CSSProperties } from "react";
 2 | import { CometChatTheme } from "@cometchat/uikit-resources";
 3 | 
 4 | const LOGGED_IN_USER_INFO_CONTAINER_HEIGHT = "48px";
 5 | const FOOTER_HEIGHT = "48px";
 6 | 
 7 | export function appStyle(theme: CometChatTheme): CSSProperties {
 8 |   return {
 9 |     height: "100%",
10 |     boxSizing: "border-box",
11 |     backgroundColor: theme.palette.getBackground(),
12 |     position: "relative",
13 |     overflowX: "hidden",
14 |   };
15 | }
16 | 
17 | export function footerStyle(): CSSProperties {
18 |   return {
19 |     display: "flex",
20 |     justifyContent: "center",
21 |     alignItems: "center",
22 |     height: FOOTER_HEIGHT,
23 |   };
24 | }
25 | 
26 | export function messageStyle(isError: boolean): CSSProperties {
27 |   return {
28 |     padding: "16px",
29 |     color: "white",
30 |     textAlign: "center",
31 |     backgroundColor: isError ? "red" : "green",
32 |     borderRadius: "8px",
33 |     width: "300px",
34 |     boxSizing: "border-box",
35 |     position: "fixed",
36 |     top: "32px",
37 |     left: "50%",
38 |     transform: "translateX(-50%)",
39 |   };
40 | }
41 | 
42 | export function loggedInUserInfoContainerStyle(): CSSProperties {
43 |   return {
44 |     height: LOGGED_IN_USER_INFO_CONTAINER_HEIGHT,
45 |     display: "flex",
46 |     justifyContent: "flex-end",
47 |     alignItems: "center",
48 |     columnGap: "8px",
49 |     padding: "0 16px",
50 |   };
51 | }
52 | 
53 | export function uidStyle(): CSSProperties {
54 |   return {
55 |     fontWeight: "600",
56 |   };
57 | }
58 | 
59 | export function logoutBtnStyle(): CSSProperties {
60 |   return {
61 |     cursor: "pointer",
62 |     backgroundColor: "transparent",
63 |     border: "none",
64 |   };
65 | }
66 | 
67 | export function logoutImgStyle(): CSSProperties {
68 |   return {
69 |     width: "24px",
70 |     height: "24px",
71 |   };
72 | }
73 | 
74 | export function loadingModalStyle(showModal: boolean): CSSProperties {
75 |   return {
76 |     display: showModal ? "flex" : "none",
77 |     width: "100vw",
78 |     height: "100vh",
79 |     backgroundColor: "#393b39",
80 |     position: "fixed",
81 |     top: "0",
82 |     left: "0",
83 |     justifyContent: "center",
84 |     alignItems: "center",
85 |   };
86 | }
87 | 
88 | export function imageStyle(): CSSProperties {
89 |   return {
90 |     backgroundSize: "cover",
91 |   };
92 | }
93 | 


--------------------------------------------------------------------------------
/src/components/Button/effects.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | 
 3 | interface IEffectsProps {
 4 |     ref : React.MutableRefObject<JSX.IntrinsicElements["cometchat-button"]>,
 5 |     onClickPropRef : React.MutableRefObject<((customEvent: CustomEvent<{event: PointerEvent}>) => void) | undefined>
 6 | };
 7 | 
 8 | export function Effects(props : IEffectsProps) {
 9 |     const {
10 |         ref,
11 |         onClickPropRef
12 |     } = props;
13 | 
14 |     useEffect(() => {
15 |         const buttonElement = ref.current;
16 |         const eventName = "cc-button-clicked";
17 |         const handleEvent = (e : CustomEvent<{event : PointerEvent}>) => onClickPropRef.current?.(e);
18 |         buttonElement.addEventListener(eventName, handleEvent);
19 |         return () => {
20 |             buttonElement.removeEventListener(eventName, handleEvent);
21 |         };
22 |     }, [onClickPropRef, ref]); // Refs are in the dependency array to satisfy ESlint
23 | }
24 | 


--------------------------------------------------------------------------------
/src/components/Button/index.tsx:
--------------------------------------------------------------------------------
 1 | import { CSSProperties, useRef } from "react";
 2 | import { useRefSync } from "../../custom-hooks";
 3 | import { Effects } from "./effects";
 4 | 
 5 | export type ButtonStyle = {
 6 |   buttonTextFont?: string;
 7 |   buttonTextColor?: string;
 8 |   buttonIconTint?: string;
 9 | } & CSSProperties;
10 | 
11 | interface IButtonProps {
12 |   text?: string;
13 |   hoverText?: string;
14 |   iconURL?: string;
15 |   disabled?: boolean;
16 |   buttonStyle?: ButtonStyle;
17 |   onClick?: (customEvent: CustomEvent<{ event: PointerEvent }>) => void;
18 | }
19 | 
20 | export function Button(props: IButtonProps) {
21 |   const { text, hoverText, iconURL, disabled, buttonStyle, onClick } = props;
22 | 
23 |   const ref = useRef<JSX.IntrinsicElements["cometchat-button"]>();
24 |   const onClickPropRef = useRefSync(onClick);
25 | 
26 |   function getDisabledPropSpreadObject(): { disabled?: true } {
27 |     return disabled ? { disabled } : {};
28 |   }
29 | 
30 |   function getStylePropSpreadObject<T1, T2 extends string>(
31 |     styleObject: T1,
32 |     stylePropName: T2
33 |   ): { T2?: string } {
34 |     return styleObject ? { [stylePropName]: JSON.stringify(styleObject) } : {};
35 |   }
36 | 
37 |   Effects({
38 |     ref,
39 |     onClickPropRef,
40 |   });
41 | 
42 |   return (
43 |     <cometchat-button
44 |       ref={ref}
45 |       text={text}
46 |       hoverText={hoverText}
47 |       iconURL={iconURL}
48 |       {...getDisabledPropSpreadObject()}
49 |       {...getStylePropSpreadObject(buttonStyle, "buttonStyle")}
50 |     />
51 |   );
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/ConversationsWithMessages.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { CometChat, CometChatNotifications } from "@cometchat/chat-sdk-javascript";
  3 | import {
  4 |   CometChatContacts,
  5 |   CometChatConversationsWithMessages,
  6 |   CometChatIncomingCall,
  7 |   CometChatTheme,
  8 |   CometChatUIKit,
  9 |   CometChatUIKitConstants,
 10 |   ConversationsConfiguration,
 11 | } from "@cometchat/chat-uikit-react";
 12 | import { useLocation, useNavigate } from "react-router-dom";
 13 | import { Button } from "./Button";
 14 | import PowerOff from "../assets/power-off.png";
 15 | import newIcon from "../assets/new.svg";
 16 | 
 17 | const incomingcallListenerId = "incomingcall_listener_id";
 18 | 
 19 | function ConversationsWithMessages() {
 20 |   const [user, setUser] = useState<any>();
 21 |   const [call, setCall] = useState<any>();
 22 |   const [theme, setTheme] = useState(new CometChatTheme({}));
 23 |   const [group, setGroup] = useState<any>();
 24 |   const [contacts, setContacts] = useState<any>(false);
 25 | 
 26 |   const navigate = useNavigate();
 27 | 
 28 |   const { state } = useLocation();
 29 | 
 30 |   const logout = () => {
 31 |     CometChatNotifications.unregisterPushToken().then((res)=>{
 32 |       console.log(res);
 33 |     })
 34 |     CometChatUIKit.logout()!.then(
 35 |       () => {
 36 |         console.log("Logout completed successfully");
 37 |         navigate("/");
 38 |       },
 39 |       (error: any) => {
 40 |         console.log("Logout failed with exception:", { error });
 41 |       }
 42 |     );
 43 |   };
 44 | 
 45 |   useEffect(() => {
 46 |     CometChat.addCallListener(
 47 |       incomingcallListenerId,
 48 |       new CometChat.CallListener({
 49 |         onIncomingCallCancelled: (call: CometChat.Call) => {
 50 |           console.log("onIncomingCallCancelled", call);
 51 |           setCall(undefined);
 52 |           CometChat.removeCallListener(incomingcallListenerId);
 53 |         },
 54 |         onOutgoingCallRejected: (call: CometChat.Call) => {
 55 |           console.log("onOutgoingCallRejected", call);
 56 |           setCall(undefined);
 57 |           CometChat.removeCallListener(incomingcallListenerId);
 58 |         },
 59 |       })
 60 |     );
 61 |     return () => {
 62 |       CometChat.removeCallListener(incomingcallListenerId);
 63 |     };
 64 |   }, []);
 65 | 
 66 |   useEffect(() => {
 67 |     if (state && state.receiverType === "user" && state.sender) {
 68 |       CometChat.getUser(state.sender).then(async (user) => {
 69 |         setGroup(null);
 70 |         setUser(user);
 71 |         if (state.fromBackground && state.type === "call") {
 72 |           let newCall = new CometChat.Call(
 73 |             state.receiver,
 74 |             state.callType,
 75 |             state.receiverType
 76 |           );
 77 |           newCall.setSessionId(state.sessionId);
 78 |           newCall.setCallInitiator(new CometChat.User(user));
 79 |           newCall.setSender(user);
 80 |           setCall(newCall);
 81 |         }
 82 |       });
 83 |     } else if (state && state.receiverType === "group") {
 84 |       CometChat.getGroup(state.receiver).then((group) => {
 85 |         setUser(null);
 86 |         setGroup(group);
 87 |       });
 88 |     }
 89 |   }, [state]);
 90 | 
 91 |   return (
 92 |     <>
 93 |       {call ? (
 94 |         <>
 95 |           <CometChatIncomingCall
 96 |             call={call}
 97 |             onDecline={() => {
 98 |               CometChat.rejectCall(
 99 |                 call.sessionId,
100 |                 CometChatUIKitConstants.calls.rejected
101 |               )
102 |                 .then((rejectedCall: CometChat.Call) => {
103 |                   console.log("rejectedCall", rejectedCall);
104 |                 })
105 |                 .finally(() => {
106 |                   setCall(undefined);
107 |                 });
108 |               CometChat.removeCallListener(incomingcallListenerId);
109 |             }}
110 |             onError={() => {
111 |               console.log("onError");
112 |               setCall(undefined);
113 |               CometChat.removeCallListener(incomingcallListenerId);
114 |             }}
115 |           />
116 |         </>
117 |       ) : (
118 |         <CometChatIncomingCall />
119 |       )}
120 |       {contacts ? (
121 |         <CometChatContacts
122 |           onItemClick={(user, group) => {
123 |             setUser(user);
124 |             setGroup(group);
125 |             setContacts(false);
126 |           }}
127 |         />
128 |       ):
129 |       <CometChatConversationsWithMessages
130 |         conversationsConfiguration={
131 |           new ConversationsConfiguration({
132 |             menu: (
133 |               <div
134 |                 style={{
135 |                   display: "flex",
136 |                   flexDirection: "row-reverse",
137 |                 }}
138 |               >
139 |                 
140 |                 <Button
141 |                   iconURL={PowerOff}
142 |                   hoverText="Logout"
143 |                   onClick={logout}
144 |                   buttonStyle={{
145 |                     backgroundColor: "transparent",
146 |                     cursor: "pointer",
147 |                     buttonIconTint: theme.palette.getAccent(),
148 |                     border: "none",
149 |                   }}
150 |                 />
151 |                 <div style={{width: 20}}/>
152 |                 <Button
153 |                   iconURL={newIcon}
154 |                   hoverText="New Conversation"
155 |                   onClick={() => {
156 |                     setContacts(true);
157 |                   }}
158 |                   buttonStyle={{
159 |                     backgroundColor: "transparent",
160 |                     cursor: "pointer",
161 |                     buttonIconTint: theme.palette.getAccent(),
162 |                     border: "none",
163 |                   }}
164 |                 />
165 |               </div>
166 |             ),
167 |           })
168 |         }
169 |         user={user ? user : null}
170 |         group={group ? group : null}
171 |       />
172 |       }
173 |     </>
174 |   );
175 | }
176 | 
177 | export default ConversationsWithMessages;
178 | 


--------------------------------------------------------------------------------
/src/components/Login/index.tsx:
--------------------------------------------------------------------------------
  1 | import { Navigate, useNavigate } from "react-router-dom";
  2 | import {
  3 |   defaultUserBtnsContainerStyle,
  4 |   errorMessageStyle,
  5 |   goToSignupContainerStyle,
  6 |   goToSignupStyle,
  7 |   loginBtnStyle,
  8 |   loginSampleUsersContainerStyle,
  9 |   loginStyle,
 10 |   loginUidFormStyle,
 11 |   noAccountStyle,
 12 |   userAvatarStyle,
 13 |   userBtnStyle,
 14 |   userNameAndUidContainerStyle,
 15 |   userNameStyle,
 16 |   userUidStyle,
 17 |   usingSampleUsersTextStyle,
 18 | } from "./style";
 19 | import { useContext, useEffect, useState } from "react";
 20 | 
 21 | import { CometChat } from "@cometchat/chat-sdk-javascript";
 22 | import { CometChatThemeContext } from "@cometchat/chat-uikit-react";
 23 | import { CometChatUIKit } from "@cometchat/chat-uikit-react";
 24 | import { LoginSignup } from "../LoginSignup";
 25 | import { TextInput } from "../TextInput";
 26 | import { users } from "../../sampleApp/sampledata";
 27 | 
 28 | interface ILoginProps {
 29 |   loggedInUser: CometChat.User | null | undefined;
 30 |   setLoggedInUser: React.Dispatch<
 31 |     React.SetStateAction<CometChat.User | null | undefined>
 32 |   >;
 33 |   setInterestingAsyncOpStarted: React.Dispatch<React.SetStateAction<boolean>>;
 34 | }
 35 | 
 36 | type User = {
 37 |   name : string,
 38 |   uid : string,
 39 |   avatar : string
 40 | };
 41 | 
 42 | type UserJson = {
 43 |   users : User[]
 44 | }
 45 | 
 46 | export function Login(props: ILoginProps) {
 47 |   const { loggedInUser, setLoggedInUser, setInterestingAsyncOpStarted } = props;
 48 | 
 49 |   const [uid, setUid] = useState("");
 50 |   const [errorMessage, setErrorMessage] = useState("");
 51 |   const navigate = useNavigate();
 52 |   const { theme } = useContext(CometChatThemeContext);
 53 |   const [defaultUsers, setDefaultUsers ] = useState<User[]>([]);
 54 | 
 55 | 
 56 |   async function fetchDefaultUsers() {
 57 |       try {
 58 |           const response = await fetch("https://assets.cometchat.io/sampleapp/sampledata.json");
 59 |           const data : UserJson = await response.json();
 60 |           setDefaultUsers(data.users);
 61 |       }
 62 |       catch(error) {
 63 |           console.log("fetching default users failed, using fallback data", error);
 64 |           setDefaultUsers(users.users);
 65 |       }
 66 |   }
 67 | 
 68 |   async function login(uid: string) {
 69 |     try {
 70 |       setInterestingAsyncOpStarted(true);
 71 |       CometChatUIKit.login(uid)?.then((loggedInUser) => {
 72 |         console.log("Login successful, loggedInUser:", loggedInUser);
 73 |         setLoggedInUser(loggedInUser);
 74 |         navigate("/");
 75 |       });
 76 |     } catch (error) {
 77 |       console.log("login failed", error);
 78 |       if (error instanceof CometChat.CometChatException && error.message) {
 79 |         setErrorMessage(error.message);
 80 |       }
 81 |       console.log(error);
 82 |     } finally {
 83 |       setInterestingAsyncOpStarted(false);
 84 |     }
 85 |   }
 86 | 
 87 |   async function handleLoginWithUidFormSubmit(
 88 |     e: React.FormEvent<HTMLFormElement>
 89 |   ) {
 90 |     e.preventDefault();
 91 |     try {
 92 |       await login(uid);
 93 |     } catch (error) {
 94 |       console.log(error);
 95 |     }
 96 |   }
 97 | 
 98 |   function getUserBtnWithKeyAdded({ name, uid, avatar }: User) {
 99 |     return (
100 |       <button key={uid} onClick={() => login(uid)} style={userBtnStyle(theme)}>
101 |         <img src={avatar} alt={`${name}'s avatar`} style={userAvatarStyle()} />
102 |         <span style={userNameAndUidContainerStyle()}>
103 |           <span style={userNameStyle(theme)}>{name}</span>
104 |           <span style={userUidStyle(theme)}>{uid}</span>
105 |         </span>
106 |       </button>
107 |     );
108 |   }
109 | 
110 |   useEffect(()=>{
111 |     fetchDefaultUsers();
112 |  return () =>{
113 |     setDefaultUsers([]);
114 |  }
115 | },[])
116 | 
117 |   function getErrorMessage() {
118 |     if (!errorMessage) {
119 |       return null;
120 |     }
121 |     return <div style={errorMessageStyle(theme)}>{errorMessage}</div>;
122 |   }
123 | 
124 |   if (loggedInUser === undefined) {
125 |     return null;
126 |   }
127 | 
128 |   if (loggedInUser) {
129 |     return <Navigate to='/' />;
130 |   }
131 |   return (
132 |     <LoginSignup title='Login to your account'>
133 |       <div style={loginStyle()}>
134 |         <div style={loginSampleUsersContainerStyle()}>
135 |           <div style={usingSampleUsersTextStyle(theme)}>
136 |             Using our sample users
137 |           </div>
138 |           <div style={defaultUserBtnsContainerStyle()}>
139 |             {defaultUsers.map(getUserBtnWithKeyAdded)}
140 |           </div>
141 |         </div>
142 |         <form
143 |           onSubmit={handleLoginWithUidFormSubmit}
144 |           style={loginUidFormStyle()}
145 |         >
146 |           <TextInput
147 |             labelText='Or else continue with login using UID'
148 |             placeholderText='Enter UID here'
149 |             value={uid}
150 |             onValueChange={setUid}
151 |             required
152 |           />
153 |           <button style={loginBtnStyle(theme)}>Login</button>
154 |         </form>
155 |         {getErrorMessage()}
156 |         <div style={goToSignupContainerStyle()}>
157 |           <div style={noAccountStyle(theme)}>Don't have an account?</div>
158 |           <button
159 |             onClick={() => navigate("/signup")}
160 |             style={goToSignupStyle(theme)}
161 |           >
162 |             sign up
163 |           </button>
164 |         </div>
165 |       </div>
166 |     </LoginSignup>
167 |   );
168 | }
169 | 


--------------------------------------------------------------------------------
/src/components/Login/style.ts:
--------------------------------------------------------------------------------
  1 | import { CSSProperties } from "react";
  2 | import { CometChatTheme, fontHelper } from "@cometchat/uikit-resources";
  3 | 
  4 | export function loginStyle(): CSSProperties {
  5 |   return {
  6 |     display: "flex",
  7 |     flexDirection: "column",
  8 |     rowGap: "48px",
  9 |   };
 10 | }
 11 | 
 12 | export function userBtnStyle(theme: CometChatTheme): CSSProperties {
 13 |   return {
 14 |     flexBasis: "48%",
 15 |     padding: "8px",
 16 |     backgroundColor: theme.palette.getAccent100("light"),
 17 |     borderRadius: "8px",
 18 |     display: "flex",
 19 |     alignItems: "center",
 20 |     columnGap: "8px",
 21 |     cursor: "pointer",
 22 |     border: `1px solid ${theme.palette.getAccent100("light")}`,
 23 |   };
 24 | }
 25 | 
 26 | export function userAvatarStyle(): CSSProperties {
 27 |   return {
 28 |     width: "32px",
 29 |     height: "32px",
 30 |     backgroundColor: "white",
 31 |     borderRadius: "24px",
 32 |   };
 33 | }
 34 | 
 35 | export function defaultUserBtnsContainerStyle(): CSSProperties {
 36 |   return {
 37 |     display: "grid",
 38 |     gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
 39 |     gap: "8px",
 40 |   };
 41 | }
 42 | 
 43 | export function loginSampleUsersContainerStyle(): CSSProperties {
 44 |   return {
 45 |     display: "flex",
 46 |     flexDirection: "column",
 47 |     rowGap: "4px",
 48 |   };
 49 | }
 50 | 
 51 | export function loginBtnStyle(theme: CometChatTheme): CSSProperties {
 52 |   return {
 53 |     backgroundColor: theme.palette.getPrimary(),
 54 |     font: fontHelper(theme.typography.subtitle1),
 55 |     color: theme.palette.getAccent900("light"),
 56 |     borderRadius: "8px",
 57 |     padding: "8px",
 58 |     border: `1px solid ${theme.palette.getAccent100("light")}`,
 59 |     width: "100%",
 60 |     cursor: "pointer",
 61 |   };
 62 | }
 63 | 
 64 | export function loginUidFormStyle(): CSSProperties {
 65 |   return {
 66 |     display: "flex",
 67 |     flexDirection: "column",
 68 |     rowGap: "8px",
 69 |   };
 70 | }
 71 | 
 72 | export function goToSignupContainerStyle(): CSSProperties {
 73 |   return {
 74 |     paddingTop: "16px",
 75 |     display: "flex",
 76 |     flexDirection: "column",
 77 |     rowGap: "16px",
 78 |     alignItems: "center",
 79 |     paddingBottom: "32px",
 80 |     textAlign: "center",
 81 |   };
 82 | }
 83 | 
 84 | export function goToSignupStyle(theme: CometChatTheme): CSSProperties {
 85 |   return {
 86 |     font: fontHelper(theme.typography.title2),
 87 |     backgroundColor: "transparent",
 88 |     borderRadius: "4px",
 89 |     color: theme.palette.getAccent600("light"),
 90 |     textTransform: "capitalize",
 91 |     border: `1px solid ${theme.palette.getAccent100("light")}`,
 92 |     cursor: "pointer",
 93 |   };
 94 | }
 95 | 
 96 | export function usingSampleUsersTextStyle(
 97 |   theme: CometChatTheme
 98 | ): CSSProperties {
 99 |   return {
100 |     font: fontHelper(theme.typography.subtitle2),
101 |     color: theme.palette.getAccent600("light"),
102 |   };
103 | }
104 | 
105 | export function noAccountStyle(theme: CometChatTheme): CSSProperties {
106 |   return {
107 |     font: fontHelper(theme.typography.subtitle1),
108 |     color: theme.palette.getAccent600("light"),
109 |   };
110 | }
111 | 
112 | export function userNameStyle(theme: CometChatTheme): CSSProperties {
113 |   return {
114 |     textTransform: "capitalize",
115 |     font: fontHelper(theme.typography.name),
116 |     color: theme.palette.getAccent("light"),
117 |     textAlign: "left",
118 |   };
119 | }
120 | 
121 | export function userUidStyle(theme: CometChatTheme): CSSProperties {
122 |   return {
123 |     font: fontHelper(theme.typography.subtitle2),
124 |     color: theme.palette.getAccent600("light"),
125 |   };
126 | }
127 | 
128 | export function userNameAndUidContainerStyle(): CSSProperties {
129 |   return {
130 |     display: "flex",
131 |     flexDirection: "column",
132 |     rowGap: "2px",
133 |     alignItems: "flex-start",
134 |   };
135 | }
136 | 
137 | export function errorMessageStyle(theme: CometChatTheme): CSSProperties {
138 |   return {
139 |     font: fontHelper(theme.typography.subtitle2),
140 |     color: theme.palette.getError(),
141 |   };
142 | }
143 | 


--------------------------------------------------------------------------------
/src/components/LoginSignup/index.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   cardStyle,
 3 |   chatHeaderTextStyle,
 4 |   contentContainerStyle,
 5 |   contentStyle,
 6 |   footerStyle,
 7 |   headerStyle,
 8 |   headerTitle,
 9 |   imageStyle,
10 |   loginSignupStyle,
11 |   mainContainerStyle,
12 |   titleStyle,
13 |   versionStyle,
14 | } from "./style";
15 | 
16 | import { CometChatThemeContext } from "@cometchat/chat-uikit-react";
17 | import Image from "../../assets/Image-518@1x.png";
18 | import { useContext } from "react";
19 | import { IsMobileViewContext } from "../../IsMobileViewContext";
20 | 
21 | interface ILoginSignupProps {
22 |   title: string;
23 |   children: JSX.Element;
24 | }
25 | 
26 | export function LoginSignup(props: ILoginSignupProps) {
27 |   const { title, children } = props;
28 | 
29 |   const { theme } = useContext(CometChatThemeContext);
30 |   const isMobileView = useContext(IsMobileViewContext);
31 | 
32 |   function getHeader() {
33 |     return (
34 |       <div style={headerStyle(theme)}>
35 |         <div style={headerTitle(theme)}>
36 |           <span>comet</span>
37 |           <span style={chatHeaderTextStyle()}>chat</span>
38 |         </div>
39 |         <div style={versionStyle(theme)}>v4.0.0</div>
40 |       </div>
41 |     );
42 |   }
43 | 
44 |   function getContent() {
45 |     return (
46 |       <div style={contentContainerStyle()}>
47 |         <div style={contentStyle(isMobileView)}>
48 |           <div style={titleStyle(theme)}>{title}</div>
49 |           <div style={cardStyle()}>{children}</div>
50 |         </div>
51 |         <img src={Image} alt='Login signup' style={imageStyle(!isMobileView)} />
52 |       </div>
53 |     );
54 |   }
55 | 
56 |   function getFooter() {
57 |     return <div style={footerStyle(theme)}>2023 ⓒ CometChat</div>;
58 |   }
59 | 
60 |   return (
61 |     <div style={loginSignupStyle()}>
62 |       <div style={mainContainerStyle()}>
63 |         {getHeader()}
64 |         {getContent()}
65 |         {getFooter()}
66 |       </div>
67 |     </div>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/src/components/LoginSignup/style.ts:
--------------------------------------------------------------------------------
  1 | import { CSSProperties } from "react";
  2 | import { CometChatTheme, fontHelper } from "@cometchat/uikit-resources";
  3 | 
  4 | export function loginSignupStyle() : CSSProperties {
  5 |     return {
  6 |         height: "100%",
  7 |         display: "flex",
  8 |         justifyContent: "center"
  9 |     };
 10 | }
 11 | 
 12 | export function mainContainerStyle() : CSSProperties {
 13 |     return {
 14 |         width: "min(100%, 1400px)",
 15 |         height: "100%",
 16 |         display: "flex",
 17 |         flexDirection: "column",
 18 |         alignItems: "center",
 19 |         rowGap: "8px",
 20 |         boxSizing: "border-box",
 21 |         padding: "8px"
 22 |     };
 23 | }
 24 | 
 25 | export function headerStyle(theme : CometChatTheme) : CSSProperties {
 26 |     return {
 27 |         width: "100%",
 28 |         padding: "16px",
 29 |         display: "flex",
 30 |         justifyContent: "space-between",
 31 |         borderBottom: `1px solid ${theme.palette.getAccent100()}`
 32 |     };
 33 | }
 34 | 
 35 | export function contentContainerStyle() : CSSProperties {
 36 |     return {
 37 |         width: "100%",
 38 |         display: "flex",
 39 |         justifyContent: "center",
 40 |         alignItems: "center",
 41 |         columnGap: "8px"
 42 |     };
 43 | }
 44 | 
 45 | export function footerStyle(theme : CometChatTheme) : CSSProperties {
 46 |     return {
 47 |         padding: "16px",
 48 |         flexGrow: "1",
 49 |         font: fontHelper(theme.typography.subtitle2),
 50 |         color: theme.palette.getAccent500(),
 51 |         display: "flex",
 52 |         alignItems: "flex-end"
 53 |     };
 54 | }
 55 | 
 56 | export function chatHeaderTextStyle() : CSSProperties {
 57 |     return {
 58 |         fontWeight: "bold"
 59 |     };
 60 | }
 61 | 
 62 | export function contentStyle(isMobileView : boolean) : CSSProperties {
 63 |     return {
 64 |         display: "flex",
 65 |         flexDirection: "column",
 66 |         rowGap: "8px",
 67 |         width: isMobileView ? "80%" : "50%"
 68 |     };
 69 | }
 70 | 
 71 | export function titleStyle(theme : CometChatTheme) : CSSProperties {
 72 |     return {
 73 |         font: fontHelper(theme.typography.heading),
 74 |         color: theme.palette.getAccent()
 75 |     };
 76 | }
 77 | 
 78 | export function cardStyle() : CSSProperties {
 79 |     return {
 80 |         backgroundColor: "white",
 81 |         borderRadius: "8px",
 82 |         boxShadow: "0 0 8px rgb(20, 20, 20, 0.33)",
 83 |         padding: "16px"
 84 |     };
 85 | }
 86 | 
 87 | export function imageStyle(showImage : boolean) : CSSProperties {
 88 |     return {
 89 |         display: showImage ? "inline" : "none",
 90 |         width: "50%",
 91 |         backgroundSize: "contain"
 92 |     };
 93 | }
 94 | 
 95 | export function headerTitle(theme : CometChatTheme) : CSSProperties {
 96 |     return {
 97 |         font: fontHelper(theme.typography.name)
 98 |     };
 99 | }
100 | 
101 | export function versionStyle(theme : CometChatTheme) : CSSProperties {
102 |     return {
103 |         font: fontHelper(theme.typography.subtitle2),
104 |         color: theme.palette.getAccent400()
105 |     };
106 | }
107 | 


--------------------------------------------------------------------------------
/src/components/Signup/index.tsx:
--------------------------------------------------------------------------------
  1 | import { Navigate, useNavigate } from "react-router-dom";
  2 | import {
  3 |   checkboxTextStyle,
  4 |   errorMessageStyle,
  5 |   formStyle,
  6 |   generateUidCheckboxStyle,
  7 |   generateUidStyle,
  8 |   submitBtnStyle,
  9 | } from "./style";
 10 | import { useContext, useState } from "react";
 11 | 
 12 | import { CometChat } from "@cometchat/chat-sdk-javascript";
 13 | import { CometChatConstants } from "../../const";
 14 | import { CometChatThemeContext } from "@cometchat/chat-uikit-react";
 15 | import { LoginSignup } from "../LoginSignup";
 16 | import { TextInput } from "../TextInput";
 17 | 
 18 | interface ISignUp {
 19 |   loggedInUser: CometChat.User | null | undefined;
 20 |   setLoggedInUser: React.Dispatch<
 21 |     React.SetStateAction<CometChat.User | null | undefined>
 22 |   >;
 23 |   setInterestingAsyncOpStarted: React.Dispatch<React.SetStateAction<boolean>>;
 24 | }
 25 | 
 26 | export function Signup({
 27 |   loggedInUser,
 28 |   setLoggedInUser,
 29 |   setInterestingAsyncOpStarted,
 30 | }: ISignUp) {
 31 |   const [name, setName] = useState("");
 32 |   const [uid, setUid] = useState("");
 33 |   const [generateUid, setGenerateUid] = useState(false);
 34 |   const [errorMessage, setErrorMessage] = useState("");
 35 |   const navigate = useNavigate();
 36 |   const { theme } = useContext(CometChatThemeContext);
 37 | 
 38 |   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 39 |     e.preventDefault();
 40 |     console.log("Form submitted");
 41 |     let newUserUid = uid;
 42 |     if (generateUid) {
 43 |       newUserUid = `${name.replaceAll(" ", "")}_${Date.now()}`;
 44 |     }
 45 |     const newUser = new CometChat.User(newUserUid);
 46 |     newUser.setName(name);
 47 |     try {
 48 |       setInterestingAsyncOpStarted(true);
 49 |       const createdUser = await CometChat.createUser(
 50 |         newUser,
 51 |         CometChatConstants.authKey
 52 |       );
 53 |       console.log("User created:", createdUser);
 54 |       console.log(
 55 |         `User having uid: ${createdUser.getUid()} created successfully.`
 56 |       );
 57 |       setLoggedInUser(createdUser);
 58 | 
 59 |       setName("");
 60 |       setUid("");
 61 |       setGenerateUid(false);
 62 |       navigate("/home");
 63 |     } catch (error) {
 64 |       if (error instanceof CometChat.CometChatException && error.message) {
 65 |         setErrorMessage(error.message);
 66 |       }
 67 |       console.log(error);
 68 |     } finally {
 69 |       setInterestingAsyncOpStarted(false);
 70 |     }
 71 |   }
 72 | 
 73 |   if (loggedInUser === undefined) {
 74 |     return null;
 75 |   }
 76 | 
 77 |   if (loggedInUser) {
 78 |     return <Navigate to='/home' />;
 79 |   }
 80 | 
 81 |   return (
 82 |     <LoginSignup title='Sign Up'>
 83 |       <form onSubmit={handleSubmit} style={formStyle()}>
 84 |         <TextInput
 85 |           labelText='UID'
 86 |           placeholderText='Enter UID here'
 87 |           value={uid}
 88 |           onValueChange={setUid}
 89 |         />
 90 |         <TextInput
 91 |           labelText='Name'
 92 |           placeholderText='Enter name here'
 93 |           value={name}
 94 |           onValueChange={setName}
 95 |           required={true}
 96 |         />
 97 |         <div style={generateUidStyle()}>
 98 |           <input
 99 |             type='checkbox'
100 |             checked={generateUid}
101 |             onChange={() => setGenerateUid(!generateUid)}
102 |             style={generateUidCheckboxStyle()}
103 |           />
104 |           <span style={checkboxTextStyle(theme)}>
105 |             By clicking on this checkbox, UID will be generated automatically.
106 |           </span>
107 |         </div>
108 |         <div style={errorMessageStyle(theme)}>{errorMessage}</div>
109 |         <button type='submit' style={submitBtnStyle(theme)}>
110 |           Submit
111 |         </button>
112 |       </form>
113 |     </LoginSignup>
114 |   );
115 | }
116 | 


--------------------------------------------------------------------------------
/src/components/Signup/style.ts:
--------------------------------------------------------------------------------
 1 | import { CSSProperties } from "react";
 2 | import { CometChatTheme, fontHelper } from "@cometchat/uikit-resources";
 3 | 
 4 | export function formStyle() : CSSProperties {
 5 |     return {
 6 |         display: "flex",
 7 |         flexDirection: "column",
 8 |         rowGap: "16px"
 9 |     };
10 | }
11 | 
12 | export function generateUidCheckboxStyle() : CSSProperties {
13 |     return {
14 |         width: "24px",
15 |         height: "24px",
16 |         cursor: "pointer"
17 |     };
18 | }
19 | 
20 | export function generateUidStyle() : CSSProperties {
21 |     return {
22 |         display: "flex",
23 |         columnGap: "4px",
24 |         alignItems: "center",
25 |         marginBottom: "16px"
26 |     };
27 | }
28 | 
29 | export function checkboxTextStyle(theme : CometChatTheme) : CSSProperties {
30 |     return {
31 |         font: fontHelper(theme.typography.subtitle2),
32 |         color: theme.palette.getAccent600("light")
33 |     };
34 | }
35 | 
36 | export function submitBtnStyle(theme : CometChatTheme) : CSSProperties {
37 |     return {
38 |         font: fontHelper(theme.typography.subtitle1),
39 |         color: theme.palette.getAccent900("light"),
40 |         backgroundColor: theme.palette.getPrimary(),
41 |         padding: "8px 4px",
42 |         borderRadius: "8px",
43 |         border: `1px solid ${theme.palette.getAccent100("light")}`,
44 |         cursor: "pointer"
45 |     };
46 | }
47 | 
48 | export function errorMessageStyle(theme : CometChatTheme) : CSSProperties {
49 |     return {
50 |         font: fontHelper(theme.typography.subtitle2),
51 |         color: theme.palette.getError(),
52 |         height: "48px",
53 |         overflowY: "auto"
54 |     };
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/TextInput/index.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   inputStyle,
 3 |   labelContainerStyle,
 4 |   labelStyle,
 5 |   labelTextStyle,
 6 |   requiredSymbolStyle,
 7 | } from "./style";
 8 | 
 9 | import { CometChatThemeContext } from "@cometchat/chat-uikit-react";
10 | import { useContext } from "react";
11 | 
12 | interface ITextInputProps {
13 |   labelText: string;
14 |   placeholderText: string;
15 |   value: string;
16 |   onValueChange: (newValue: string) => void;
17 |   required?: boolean;
18 | }
19 | 
20 | export function TextInput(props: ITextInputProps) {
21 |   const {
22 |     labelText,
23 |     placeholderText,
24 |     value,
25 |     onValueChange,
26 |     required = false,
27 |   } = props;
28 | 
29 |   const { theme } = useContext(CometChatThemeContext);
30 | 
31 |   function getLabel() {
32 |     let labelJSX = <span style={labelTextStyle(theme)}>{labelText}</span>;
33 |     if (required) {
34 |       labelJSX = (
35 |         <span style={labelContainerStyle()}>
36 |           {labelJSX}
37 |           <span style={requiredSymbolStyle()}>*</span>
38 |         </span>
39 |       );
40 |     }
41 |     return labelJSX;
42 |   }
43 | 
44 |   return (
45 |     <label style={labelStyle()}>
46 |       {getLabel()}
47 |       <input
48 |         type='text'
49 |         placeholder={placeholderText}
50 |         value={value}
51 |         onChange={(e) => onValueChange(e.target.value)}
52 |         required={required}
53 |         style={inputStyle(theme)}
54 |       />
55 |     </label>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/src/components/TextInput/style.ts:
--------------------------------------------------------------------------------
 1 | import { CSSProperties } from "react";
 2 | import { CometChatTheme, fontHelper } from "@cometchat/uikit-resources";
 3 | 
 4 | export function labelStyle() : CSSProperties {
 5 |     return {
 6 |         display: "flex",
 7 |         flexDirection: "column",
 8 |         rowGap: "4px"
 9 |     };
10 | }
11 | 
12 | export function labelTextStyle(theme : CometChatTheme) : CSSProperties {
13 |     return {
14 |         font: fontHelper(theme.typography.subtitle2),
15 |         color: theme.palette.getAccent600("light")
16 |     };
17 | }
18 | 
19 | export function inputStyle(theme : CometChatTheme) : CSSProperties {
20 |     return {
21 |         padding: "8px",
22 |         border: `1px solid ${theme.palette.getAccent100("light")}`,
23 |         borderRadius: "8px",
24 |         font: fontHelper(theme.typography.subtitle2)
25 |     };
26 | }
27 | 
28 | export function requiredSymbolStyle() : CSSProperties {
29 |     return {
30 |         color: "red"
31 |     };
32 | }
33 | 
34 | export function labelContainerStyle() : CSSProperties {
35 |     return {
36 |         display: "flex",
37 |         columnGap: "1px"
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/const.ts:
--------------------------------------------------------------------------------
1 | export const CometChatConstants = {
2 |   appId: "xxxxxxxxxxxxx",
3 |   region: "xx",
4 |   authKey: "xxxxxxxxxxxxxxxx",
5 |   fcmProviderId: "xxxxxxxxxxx",
6 | };
7 | 


--------------------------------------------------------------------------------
/src/custom-hooks.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, useState } from "react";
 2 | 
 3 | /**
 4 |  * Sets the created ref to the `value` passed
 5 |  *
 6 |  * @remarks
 7 |  * After the initial call of this hook, the internal ref is set to the `value` passed to this hook after the component has rendered completely.
 8 |  * So the returned ref will not have the updated value while the component renders
 9 |  */
10 | export function useRefSync<T>(value: T): React.MutableRefObject<T> {
11 |   const res = useRef(value);
12 |   res.current = value;
13 |   return res;
14 | }
15 | 
16 | /**
17 |  * Custom React hook for managing and retrieving query parameters from the current URL.
18 |  *
19 |  * @returns {Record<string, string>} An object containing the query parameters where keys are parameter names and values are parameter values.
20 |  *
21 |  * @remarks
22 |  * This hook parses the query parameters from the current URL and returns them as an object. It also removes the query parameters from the URL without affecting the browser history.
23 |  * The returned object reflects the current query parameters after the component has rendered.
24 |  */
25 | 
26 | export function useQueryParams(): Record<string, string> {
27 |   const [queryParams, setQueryParams] = useState<Record<string, string>>({});
28 | 
29 |   useEffect(() => {
30 |     const searchParams = new URL(window.location.href).searchParams;
31 |     const params: Record<string, string> = {};
32 | 
33 |     searchParams.forEach((value, key) => {
34 |       params[key] = value;
35 |     });
36 | 
37 |     if (Object.keys(params).length > 0) {
38 |       // Remove the query parameters from the URL without affecting the browser history
39 |       const urlWithoutQueryParams = window.location.href.replace(
40 |         window.location.search,
41 |         ""
42 |       );
43 | 
44 |       window.history.replaceState({}, document.title, urlWithoutQueryParams);
45 |     }
46 | 
47 |     setQueryParams(params);
48 |   }, []);
49 | 
50 |   return queryParams;
51 | }
52 | 


--------------------------------------------------------------------------------
/src/firebase.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { initializeApp } from "firebase/app";
 3 | import { getMessaging, getToken, onMessage } from "firebase/messaging";
 4 | import { CometChatNotifications } from "@cometchat/chat-sdk-javascript";
 5 | import { CometChatConstants } from "./const";
 6 | export default async function firebaseInitialize(navigate) {
 7 |   const firebaseConfig = {
 8 |     apiKey: "xxxxxxxxxxxxxxxxxxxxx",
 9 |     authDomain: "xxxxxxxxxxxxxxxxxxxxx",
10 |     projectId: "xxxxxxxxxxxxxxxxxxxxx",
11 |     storageBucket: "xxxxxxxxxxxxxxxxxxxxx",
12 |     messagingSenderId: "xxxxxxxxxxxxxxxxxxxxx",
13 |     appId: "xxxxxxxxxxxxxxxxxxxxx",
14 |     measurementId: "xxxxxxxxxxxxxxxxxxxxx"
15 |   };
16 | 
17 |   const app = initializeApp(firebaseConfig); // Initialize Firebase App
18 |   const messaging = getMessaging(app); // Initialize Firebase Messaging
19 | 
20 |   getToken(messaging, {
21 |     vapidKey:
22 |       "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
23 |   })
24 |     .then((currentToken) => {
25 |       if (currentToken) {
26 |         CometChatNotifications.registerPushToken(
27 |           currentToken,
28 |           CometChatNotifications.PushPlatforms.FCM_WEB,
29 |           CometChatConstants.fcmProviderId
30 |         )
31 |           .then((payload) => {
32 |             console.log("from comet", payload);
33 |             console.log("curr token", currentToken);
34 |           })
35 |           .catch((err) => {
36 |             console.log(err);
37 |           });
38 |       } else {
39 |         console.log(
40 |           "No registration token available. Request permission to generate one."
41 |         );
42 |       }
43 |     })
44 |     .catch((err) => {
45 |       console.log("An error occurred while retrieving token. ", err);
46 |     });
47 | 
48 |   onMessage(messaging, function (payload) {
49 |     console.log("Got message",payload)
50 |   });
51 | }
52 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | #root {
 4 |   height: 100%;
 5 | }
 6 | 
 7 | body {
 8 |   margin: 0;
 9 |   font-family: sans-serif;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import "./index.css";
 2 | 
 3 | import App from "./components/App/App";
 4 | import { BrowserRouter } from "react-router-dom";
 5 | import { CometChat } from "@cometchat/chat-sdk-javascript";
 6 | import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
 7 | import { CometChatConstants } from "./const";
 8 | import { CometChatUIKit } from "@cometchat/chat-uikit-react";
 9 | import React from "react";
10 | import ReactDOM from "react-dom/client";
11 | import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";
12 | import reportWebVitals from "./reportWebVitals";
13 | 
14 | (async () => {
15 |   const uiKitSettings = new UIKitSettingsBuilder()
16 |     .setAppId(CometChatConstants.appId)
17 |     .setRegion(CometChatConstants.region)
18 |     .setAuthKey(CometChatConstants.authKey)
19 |     .subscribePresenceForFriends()
20 |     .build();
21 | 
22 |   const callAppSetting = new CometChatCalls.CallAppSettingsBuilder()
23 |     .setAppId(CometChatConstants.appId)
24 |     .setRegion(CometChatConstants.region)
25 |     .build();
26 | 
27 |   try {
28 |     CometChat.setDemoMetaInfo({
29 |       name: "push-notification-sample-app-javascript",
30 |       platform: "react",
31 |       type: "push-notification-sample-app-javascript",
32 |       version: "0.1.1",
33 |     });
34 |     await CometChatUIKit.init(uiKitSettings);
35 |     await CometChatCalls.init(callAppSetting);
36 |     console.log("Initialization completed successfully");
37 | 
38 |     const root = ReactDOM.createRoot(
39 |       document.getElementById("root") as HTMLElement
40 |     );
41 | 
42 |     root.render(
43 |       <BrowserRouter>
44 |         <App />
45 |       </BrowserRouter>
46 |     );
47 |     askPermission();
48 |   } catch (error) {
49 |     console.log("Initialization failed with error:", error);
50 |   }
51 | })();
52 | 
53 | if ("serviceWorker" in navigator) {
54 |   console.log("serviceWorker");
55 |   navigator.serviceWorker
56 |     .register("/firebase-messaging-sw.js")
57 | 
58 |     .then(function (registration) {
59 |       console.log("registration", registration);
60 |       console.log("Registration succlgcessful, scope is:", registration.scope);
61 |     })
62 |     .catch((error) => console.log("Registration error", error));
63 | }
64 | 
65 | async function askPermission() {
66 |   return new Promise(function (resolve, reject) {
67 |     const permissionResult = Notification.requestPermission(function (result) {
68 |       resolve(result);
69 |     });
70 | 
71 |     if (permissionResult) {
72 |       permissionResult.then(resolve, reject);
73 |     }
74 |   }).then(function (permissionResult) {
75 |     if (permissionResult !== "granted") {
76 |       console.log("Permission not granted");
77 |     }
78 |   });
79 | }
80 | 
81 | reportWebVitals();
82 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals';
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | };
14 | 
15 | export default reportWebVitals;
16 | 


--------------------------------------------------------------------------------
/src/sampleApp/sampledata.js:
--------------------------------------------------------------------------------
 1 | import CaptainAmericaAvatar from "../assets/captainamerica_avatar.png";
 2 | import CyclopsAvatar from "../assets/cyclops_avatar.png";
 3 | import IronManAvatar from "../assets/ironman_avatar.png";
 4 | import SpidermanAvatar from "../assets/spiderman_avatar.png";
 5 | import WolverineAvatar from "../assets/wolverine_avatar.png";
 6 | 
 7 | export const users = {
 8 |     "users":[
 9 |         {
10 |             "uid": "superhero1",
11 |             "name": "Iron Man",
12 |             "avatar": IronManAvatar
13 |         },
14 |         {
15 |             "uid": "superhero2",
16 |             "name": "Captain America",
17 |             "avatar": CaptainAmericaAvatar
18 |         },
19 |         {
20 |             "uid": "superhero3",
21 |             "name": "Spiderman",
22 |             "avatar": SpidermanAvatar
23 |         },
24 |         {
25 |             "uid": "superhero4",
26 |             "name": "Wolverine",
27 |             "avatar": WolverineAvatar
28 |         },
29 |         {
30 |             "uid": "superhero5",
31 |             "name": "Cyclops",
32 |             "avatar": CyclopsAvatar
33 |         }
34 |     ]
35 | }


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/subject.js:
--------------------------------------------------------------------------------
1 | import { Subject } from 'rxjs';
2 | export const subject = new Subject();
3 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "esModuleInterop": true,
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "noFallthroughCasesInSwitch": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["src"]
20 | }
21 | 


--------------------------------------------------------------------------------