implement temporary ui and api routes to fix
Change-Id: Idb07d146f11d2f11f3ad2323a5c18fc125a91e73
diff --git a/client/src/App.js b/client/src/App.js
index d0043df..b10d303 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -18,6 +18,14 @@
import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
import WelcomeAnimation from './components/welcome'
import defaultTheme from './themes/default'
+import ContactList from './components/ContactList';
+
+const theme = createTheme();
+const useStyles = makeStyles((theme) => {
+ root: {
+ // some CSS that access to theme
+ }
+})
// import { useSelector, useDispatch } from 'react-redux'
// import { useAppSelector, useAppDispatch } from '../redux/hooks'
@@ -79,6 +87,7 @@
<Route path="/newAccount" element={<AccountCreationDialog />}>
<Route path="jami" element={<JamiAccountDialog />} />
</Route>
+ <Route path="/Contacts" element={<ContactList />} />
<Route path="/setup" element={<ServerSetup />} />
<Route path="/" index element={<Home />} />
<Route path="*" element={<NotFoundPage />} />
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index 2020a6e..73950a2 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,12 +1,35 @@
-import List from '@mui/material/List'
-import React from 'react'
+import List from "@mui/material/List";
+import authManager from "../AuthManager";
+import React, { useState, useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+
export default function ContactList() {
- return (
- <div className="rooms-list">
- <List>
+ const { accountId } = useAppSelector((state) => state.app);
+ const dispatch = useAppDispatch();
- </List>
- </div>
- )
+ const [contacts, setContacts] = useState([]);
+
+ useEffect(() => {
+ const controller = new AbortController();
+ authManager
+ .fetch(`/api/accounts/${accountId}/contacts/`, {
+ method: "GET",
+ header: { "Content-Type": "application/json" },
+ // signal: controller.signal,
+ })
+ .then((res) => {
+ res.json();
+ })
+ .then((result) => {
+ console.log(result);
+ });
+ return () => controller.abort();
+ }, []);
+
+ return (
+ <div className="rooms-list">
+ <List></List>
+ </div>
+ );
}
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index ed69a77..26736e9 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,29 +1,211 @@
import { ListItem, ListItemAvatar, ListItemText } from '@mui/material'
-import React from 'react'
+import React, { useState } from "react";
import Conversation from '../../../model/Conversation'
import { useNavigate, useParams } from "react-router-dom"
import ConversationAvatar from './ConversationAvatar'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Modal from 'react-modal';
+import { Person } from "@mui/icons-material";
+import authManager from '../AuthManager'
+
+const customStyles = {
+ content: {
+ top: "50%",
+ left: "50%",
+ right: "auto",
+ bottom: "auto",
+ marginRight: "-50%",
+ transform: "translate(-50%, -50%)",
+ },
+};
export default function ConversationListItem(props) {
- const { conversationId, contactId } = useParams()
- const conversation = props.conversation
- const pathId = conversationId || contactId
- const isSelected = conversation.getDisplayUri() === pathId
- const navigate = useNavigate()
+ const { conversationId, contactId } = useParams();
+ const conversation = props.conversation;
+ console.log(
+ "XXX",
+ conversation,
+ conversation.id,
+ conversation.getAccountId()
+ );
- const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`
- if (conversation instanceof Conversation) {
- return (
- <ListItem
- button
- alignItems="flex-start"
- selected={isSelected}
- onClick={() => navigate(`/account/${conversation.getAccountId()}/${uri}`)}>
- <ListItemAvatar><ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} /></ListItemAvatar>
- <ListItemText
- primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
- </ListItem>
- )
- } else
- return null
+ const pathId = conversationId || contactId;
+ const isSelected = conversation.getDisplayUri() === pathId;
+ const navigate = useNavigate();
+
+ let subtitle;
+ const [modalIsOpen, setIsOpen] = useState(false);
+ const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
+ const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
+
+ const openModal = () => setIsOpen(true);
+ const openModalDetails = () => setModalDetailsIsOpen(true);
+ const openModalDelete = () => setModalDeleteIsOpen(true);
+
+ const closeModal = () => setIsOpen(false);
+
+ const closeModalDetails = () => setModalDetailsIsOpen(false);
+ const closeModalDelete = () => setModalDeleteIsOpen(false);
+
+ function afterOpenModal() {
+ // references are now sync'd and can be accessed.
+ subtitle.style.color = "#f00";
+ }
+
+ const getAccountDetails = (accountId) => {
+ // useEffect(() => {
+ const controller = new AbortController();
+ authManager
+ .fetch(`/api/accounts/${conversation.getAccountId()}`, {
+ method: "GET",
+ headers: {
+ Accept: "application/json",
+ "Content-Type": "application/json",
+ },
+ // body: JSON.stringify(newDetails)
+ // {
+ // uri: conversation.getFirstMember()?.contact?.getUri(),
+ // signal: controller.signal,
+ // },
+ })
+ .then((res) => {
+ console.log("YYY 0", res);
+ res.json();
+ })
+ .then((result) => {
+ console.log("YYY 1", result);
+ // setState({ loaded: true, account: Account.from(result) });
+ })
+ .catch((e) => console.log("YYY 2", e));
+ // return () => controller.abort()
+ // }, [accountId])
+ };
+
+ const [userName, setUserName] = useState("User name");
+ const [userId, setUserId] = useState("User id");
+ const [codeQr, setVodeQr] = useState("QR");
+ const [isSwarm, setIsSwarm] = useState(true);
+
+ const uri = conversation.getId()
+ ? `conversation/${conversation.getId()}`
+ : `addContact/${conversation.getFirstMember().contact.getUri()}`;
+ if (conversation instanceof Conversation) {
+ return (
+ <div>
+ <button onClick={openModal}>Open Modal</button>
+ <Modal
+ isOpen={modalIsOpen}
+ // onAfterOpen={afterOpenModal}
+ onRequestClose={closeModal}
+ style={customStyles}
+ contentLabel="Example Modal"
+ >
+ {/* <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2> */}
+ <button onClick={closeModal}>close</button>
+
+ <div>
+ <Person /> Démarrer appel vidéo
+ </div>
+ <br />
+
+ <div>
+ <Person /> Démarrer appel audio
+ </div>
+ <br />
+
+ <div
+ onClick={() => {
+ console.log("open dialog Supprimer: ");
+ closeModal();
+ openModalDelete();
+ }}
+ >
+ <Person /> Supprimer contact
+ </div>
+ <br />
+
+ <div
+ onClick={() => {
+ console.log("open dialog BLOCK: ");
+ closeModal();
+ openModalDelete();
+ }}
+ >
+ <Person /> Bloquer le contact
+ </div>
+ <br />
+
+ <div
+ onClick={() => {
+ console.log("open details contact for: ");
+ closeModal();
+ openModalDetails();
+ getAccountDetails(conversation.getAccountId());
+ }}
+ >
+ <Person /> Détails de la conversation
+ </div>
+ </Modal>
+
+ <Modal
+ isOpen={modalDetailsIsOpen}
+ // onAfterOpen={afterOpenModalDetails}
+ onRequestClose={closeModalDetails}
+ style={customStyles}
+ contentLabel="Détails contact"
+ >
+ <div>
+ <Person /> {userName}
+ </div>
+ <br />
+
+ <div>Nom d'utilisateur {userName}</div>
+ <br />
+
+ <div>Identifiant {userId}</div>
+ <br />
+
+ <div>Code QR {codeQr}</div>
+ <br />
+
+ <div>est un swarm {isSwarm}</div>
+ <br />
+
+ <button onClick={closeModalDetails}>Fermer</button>
+ </Modal>
+
+ <Modal
+ isOpen={modalDeleteIsOpen}
+ // onAfterOpen={afterOpenModalDetails}
+ onRequestClose={closeModalDelete}
+ style={customStyles}
+ contentLabel="Merci de confirmer"
+ >
+ Voulez vous vraiment supprimer ce contact?
+ <button onClick={closeModalDelete}>Bloquer</button>
+ <button onClick={closeModalDelete}>Annuler</button>
+ </Modal>
+
+ <ListItem
+ button
+ alignItems="flex-start"
+ selected={isSelected}
+ onClick={() =>
+ navigate(`/account/${conversation.getAccountId()}/${uri}`)
+ }
+ >
+ <ListItemAvatar>
+ <ConversationAvatar
+ displayName={conversation.getDisplayNameNoFallback()}
+ />
+ </ListItemAvatar>
+ <ListItemText
+ primary={conversation.getDisplayName()}
+ secondary={conversation.getDisplayUri()}
+ />
+ </ListItem>
+ </div>
+ );
+ } else return null;
}
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index 7db0dd2..c2dc29e 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -11,6 +11,7 @@
const params = useParams()
const goToAccountSelection = () => navigate(`/account`)
+ const goToContacts = () => navigate(`/Contacts`)
const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`)
return (
@@ -25,6 +26,7 @@
onClose={handleClose}
>
<MenuItem onClick={goToAccountSelection}>Change account</MenuItem>
+ <MenuItem onClick={goToContacts}>Contacts</MenuItem>
{params.accountId && <MenuItem onClick={goToAccountSettings}>Account settings</MenuItem>}
<MenuItem onClick={() => authManager.disconnect()}>Log out</MenuItem>
</Menu>
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index cb861a3..d555820 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -5,12 +5,18 @@
import AccountPreferences from '../components/AccountPreferences'
import authManager from '../AuthManager'
import Account from '../../../model/Account'
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import { setAccountId } from '../../redux/appSlice';
const AccountSettings = (props) => {
const accountId = props.accountId || useParams().accountId
+ const dispatch = useAppDispatch();
+
const [state, setState] = useState({ loaded: false })
useEffect(() => {
+ dispatch(setAccountId(accountId))
+
const controller = new AbortController()
authManager.fetch(`/api/accounts/${accountId}`, { signal: controller.signal })
.then(res => res.json())
@@ -27,7 +33,7 @@
<Container maxWidth="sm">
<Header />
{state.loaded ? <AccountPreferences account={state.account} onAccontChanged={account => setState(state => {
- state.account = account
+ state.account = account
return state
})} /> : <CircularProgress />}
</Container>