Showcase Message Exchange Functionality

package.json

@@ -4,18 +4,25 @@
   "private": true,
   "dependencies": {
     "@adorsys-gis/contact-service": "^1.0.4",
+    "@adorsys-gis/message-service": "^1.0.1",
     "@adorsys-gis/usepwa": "^1.0.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.1.4",
     "@mui/material": "^6.1.4",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.113",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "source-map-loader": "^5.0.0",
     "typescript": "^4.9.5",
+    "uuid": "^11.0.3",
     "web-vitals": "^2.1.4",
     "webpack": "^5.95.0"
   },
@@ -52,11 +59,6 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.113",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
     "eslint": "^8.57.1",

src/App.tsx

@@ -6,7 +6,9 @@ import BottomNav from './components/BottomNav';
 import MainSection from './components/MainSection';
 import Navbar from './components/Navbar';
 import ActivitiesPage from './pages/ActivitiesPage';
+import ChatPage from './pages/ChatPage';
 import ContactForm from './pages/ContactForm';
+import ContactInfoPage from './pages/ContactInfoPage';
 import ContactsPage from './pages/ContactsPage';
 import SettingsPage from './pages/SettingsPage';
 import Wallet from './pages/Wallet';
@@ -27,20 +29,34 @@ function App() {
 
   return (
     <ThemeProvider theme={theme}>
-      <div className="App">
-        <Navbar />
-        <MainSection>
-          <Routes>
-            <Route path="/" element={<MainSection />} />
-            <Route path="/contacts" element={<ContactsPage />} />
-            <Route path="/wallet" element={<Wallet />} />
-            <Route path="/activities" element={<ActivitiesPage />} />
-            <Route path="/settings" element={<SettingsPage />} />
-            <Route path="/ContactForm" element={<ContactForm />} />
-          </Routes>
-        </MainSection>
-        <BottomNav />
-      </div>
+      {/* Navbar at the top */}
+      <Navbar />
+
+      {/* Main content area */}
+      <Routes>
+        {/* Routes that don't include Navbar and BottomNav */}
+        <Route path="/chat/:contactId" element={<ChatPage />} />
+        <Route path="/contact-info/:contactId" element={<ContactInfoPage />} />
+
+        {/* Routes that include Navbar and BottomNav */}
+        <Route
+          path="*"
+          element={
+            <MainSection>
+              <Routes>
+                <Route path="/" element={<MainSection />} />
+                <Route path="/contacts" element={<ContactsPage />} />
+                <Route path="/wallet" element={<Wallet />} />
+                <Route path="/activities" element={<ActivitiesPage />} />
+                <Route path="/settings" element={<SettingsPage />} />
+                <Route path="/ContactForm" element={<ContactForm />} />
+              </Routes>
+            </MainSection>
+          }
+        />
+      </Routes>
+      {/* Bottom navigation at the bottom */}
+      <BottomNav />
     </ThemeProvider>
   );
 }

src/components/BottomNav.tsx

@@ -9,11 +9,6 @@ const BottomNav: React.FC = () => {
       sx={{
         display: 'flex',
         justifyContent: 'space-around',
-        alignItems: 'center',
-        position: 'fixed',
-        bottom: 0,
-        width: '100%',
-        padding: '12px 0',
         backgroundColor: '#ffffff',
         borderTop: '1px solid #E1E1E1',
         boxShadow: '0 -4px 10px rgba(0, 0, 0, 0.1)',

src/components/MainSection.tsx

@@ -13,7 +13,6 @@ const MainSection: React.FC<MainSectionProps> = ({ children }) => {
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'column',
-        width: '100%',
         backgroundColor: '#F4F7FC',
         padding: { xs: '20px', sm: '30px' },
         textAlign: 'center',

src/index.tsx

@@ -2,6 +2,7 @@ import {
   InstallPWAContextProvider,
   isIosOrSafariDesktop,
 } from '@adorsys-gis/usepwa';
+import { Box } from '@mui/material';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
@@ -13,12 +14,21 @@ const root = ReactDOM.createRoot(
 function TempApp() {
   return (
     <Router>
-      {/* Wrap App with InstallPWAContextProvider */}
-      <InstallPWAContextProvider
-        component={isIosOrSafariDesktop() ? 'tooltip' : 'banner'}
+      <Box
+        sx={{
+          mx: 'auto',
+          gridTemplateRows: 'auto 1fr auto',
+          maxWidth: { xs: '100%', sm: 600, md: 800 },
+        }}
       >
-        <App />
-      </InstallPWAContextProvider>
+        {' '}
+        {/* Wrapper to limit width */}
+        <InstallPWAContextProvider
+          component={isIosOrSafariDesktop() ? 'tooltip' : 'banner'}
+        >
+          <App />
+        </InstallPWAContextProvider>
+      </Box>
     </Router>
   );
 }