Merge pull request #2 from ADORSYS-GIS/feat/showcase-message-exchange…

…-functionality Showcase Message Exchange Functionality
ADORSYS-GIS · Nov 19, 2024 · 839af96 · 839af96
2 parents 7384109 + 94755b8
commit 839af96
Show file tree

Hide file tree

Showing 10 changed files with 1,331 additions and 441 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/App.tsx b/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,35 @@ 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>
+      {/* Render Navbar on all pages */}
+      {<Navbar />}
+
+      {/* Main content area */}
+      <Routes>
+        {/* 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 />} />
+                <Route path="/chat/:contactId" element={<ChatPage />} />
+                <Route
+                  path="/contact-info/:contactId"
+                  element={<ContactInfoPage />}
+                />
+              </Routes>
+            </MainSection>
+          }
+        />
+      </Routes>
+      {/* Render BottomNav on all pages */}
+      <BottomNav />
     </ThemeProvider>
   );
 }

diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx
@@ -9,15 +9,12 @@ 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)',
-        zIndex: 1000,
+        position: 'sticky',
+        bottom: 0,
+        width: '100%',
       }}
     >
       <NavLink to="/wallet" style={{ textDecoration: 'none' }}>

diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx
@@ -13,14 +13,13 @@ const MainSection: React.FC<MainSectionProps> = ({ children }) => {
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'column',
-        width: '100%',
         backgroundColor: '#F4F7FC',
         padding: { xs: '20px', sm: '30px' },
         textAlign: 'center',
         boxSizing: 'border-box',
-        overflow: 'auto',
+        overflow: 'hidden',
         flexGrow: 1,
-        height: 'calc(100vh - 150px)',
+        height: 'calc(100vh - 190px)',
         marginTop: '0',
         marginBottom: '0',
       }}

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,23 +2,58 @@ 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';
+import { useEffect } from 'react';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 
 function TempApp() {
+  // Dynamically update --vh for mobile devices
+  useEffect(() => {
+    const handleResize = () => {
+      document.documentElement.style.setProperty(
+        '--vh',
+        `${window.innerHeight * 0.01}px`,
+      );
+    };
+
+    handleResize(); // Initial run
+    window.addEventListener('resize', handleResize); // Update on resize
+
+    return () => {
+      window.removeEventListener('resize', handleResize); // Cleanup listener
+    };
+  }, []);
+
   return (
     <Router>
-      {/* Wrap App with InstallPWAContextProvider */}
-      <InstallPWAContextProvider
-        component={isIosOrSafariDesktop() ? 'tooltip' : 'banner'}
+      <Box
+        sx={{
+          mx: 'auto',
+          position: 'sticky',
+          gridTemplateRows: 'auto 1fr auto',
+          maxWidth: { xs: '100%', sm: 600, md: 800 },
+          height: { xs: 'calc(var(--vh, 1vh) * 100)', sm: '98vh' },
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+        }}
       >
-        <App />
-      </InstallPWAContextProvider>
+        {' '}
+        {/* Wrapper to limit width */}
+        <InstallPWAContextProvider
+          component={isIosOrSafariDesktop() ? 'tooltip' : 'banner'}
+          installPromptTimeout={30000}
+        >
+          <App />
+        </InstallPWAContextProvider>
+      </Box>
     </Router>
   );
 }