Skip to content

Commit

Permalink
feat(phone/messages): initial messages ui update
Browse files Browse the repository at this point in the history
  • Loading branch information
@itschip
itschip committed Dec 21, 2023
1 parent 0267a15 commit 7dd4110
Show file tree
Hide file tree
Showing 14 changed files with 316 additions and 275 deletions.
2 changes: 1 addition & 1 deletion apps/phone/src/apps/contacts/components/views/ContactInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ const ContactsInfoPage: React.FC = () => {

<div className="mt-8">
{contact ? (
<NPWDButton onClick={handleContactUpdate} className={classes.button} className="bg-blue-500 hover:bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-600 dark:text-white">
<NPWDButton onClick={handleContactUpdate} className="bg-blue-500 hover:bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-600 dark:text-white">
{t('GENERIC.UPDATE')}
</NPWDButton>
) : (
Expand Down
81 changes: 41 additions & 40 deletions apps/phone/src/apps/messages/components/MessagesApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,49 @@
import React from 'react';
import { AppWrapper } from '@ui/components';
import { AppTitle } from '@ui/components/AppTitle';
import { AppContent } from '@ui/components/AppContent';
import { useApp } from '@os/apps/hooks/useApps';
import {AppWrapper} from '@ui/components';
import {AppTitle} from '@ui/components/AppTitle';
import {AppContent} from '@ui/components/AppContent';
import {useApp} from '@os/apps/hooks/useApps';
import MessageGroupModal from './modal/MessageGroupModal';
import MessagesList from './list/MessagesList';
import { Route, Switch, useHistory } from 'react-router-dom';
import { MessageModal } from './modal/MessageModal';
import {Route, Switch, useHistory, useLocation} from 'react-router-dom';
import {MessageModal} from './modal/MessageModal';
import NewMessageGroupButton from './form/NewMessageGroupButton';
import { MessagesThemeProvider } from '../providers/MessagesThemeProvider';
import { LoadingSpinner } from '@ui/components/LoadingSpinner';
import { WordFilterProvider } from '@os/wordfilter/providers/WordFilterProvider';
import {MessagesThemeProvider} from '../providers/MessagesThemeProvider';
import {LoadingSpinner} from '@ui/components/LoadingSpinner';
import {WordFilterProvider} from '@os/wordfilter/providers/WordFilterProvider';

export const MessagesApp = () => {
const messages = useApp('MESSAGES');
const history = useHistory();
const messages = useApp('MESSAGES');
const history = useHistory();
const {pathname} = useLocation();

return (
<MessagesThemeProvider>
<AppWrapper id="messages-app">
<WordFilterProvider>
<AppTitle app={messages} />
<AppContent>
<React.Suspense fallback={<LoadingSpinner />}>
<Switch>
<Route path="/messages/conversations/:groupId">
<MessageModal />
</Route>
<Route exact path="/messages">
<MessagesList />
</Route>
</Switch>
<Switch>
<Route exact path={['/messages/new/:phoneNumber', '/messages/new']}>
<MessageGroupModal />
</Route>
</Switch>
</React.Suspense>
</AppContent>
<Route exact path="/messages">
<NewMessageGroupButton onClick={() => history.push('/messages/new')} />
</Route>
</WordFilterProvider>
</AppWrapper>
</MessagesThemeProvider>
);
return (
<MessagesThemeProvider>
<AppWrapper id="messages-app">
<WordFilterProvider>
{pathname === '/messages' && <AppTitle app={messages}/>}
<AppContent>
<React.Suspense fallback={<LoadingSpinner/>}>
<Switch>
<Route path="/messages/conversations/:groupId">
<MessageModal/>
</Route>
<Route exact path="/messages">
<MessagesList/>
</Route>
</Switch>
<Switch>
<Route exact path={['/messages/new/:phoneNumber', '/messages/new']}>
<MessageGroupModal/>
</Route>
</Switch>
</React.Suspense>
</AppContent>
<Route exact path="/messages">
<NewMessageGroupButton onClick={() => history.push('/messages/new')}/>
</Route>
</WordFilterProvider>
</AppWrapper>
</MessagesThemeProvider>
);
};
60 changes: 32 additions & 28 deletions apps/phone/src/apps/messages/components/form/MessageInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@ import { Paper, Box, Button, ButtonGroup } from '@mui/material';
import SendIcon from '@mui/icons-material/Send';
import MicIcon from '@mui/icons-material/Mic';
import IosShareIcon from '@mui/icons-material/IosShare';
import { TextField } from '@ui/components/Input';
import { NPWDInput, NPWDTextarea, TextField } from '@ui/components/Input';
import { useMessageAPI } from '../../hooks/useMessageAPI';
import { MessageConversation } from '@typings/messages';
import useMessages from '../../hooks/useMessages';
import { useWordFilter } from '@os/wordfilter/hooks/useWordFilter';
import { useConfig } from '@os/phone/hooks';
import { Image, Mic, SendHorizonal, SendHorizontal } from 'lucide-react';

interface IProps {
onAddImageClick(): void;

onVoiceClick: () => void;
messageConversation: MessageConversation | undefined;
messageGroupName: string | undefined;
Expand Down Expand Up @@ -43,8 +45,10 @@ const MessageInput = ({
}
};

const handleKeyPress = async (event: React.KeyboardEvent<HTMLDivElement>) => {
const handleKeyPress = async (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
event.stopPropagation();
await handleSubmit();
}
};
Expand All @@ -56,38 +60,38 @@ const MessageInput = ({
if (!messageConversation.id) return null;

return (
<Paper
variant="outlined"
sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
>
<Box pt={1} pl={1} pb={1} flexGrow={1}>
<TextField
onKeyPress={handleKeyPress}
multiline
maxRows={4}
aria-multiline="true"
inputProps={{ style: { fontSize: '1.3em' } }}
<div className="px-2">
<div className="flex items-center space-x-2 rounded-md px-2 dark:bg-neutral-800">
<button
onClick={onAddImageClick}
className="h-14 dark:text-white hover:dark:text-green-500"
>
<Image size={24} />
</button>
<NPWDTextarea
rows={1}
className="resize-none"
onKeyDown={handleKeyPress}
value={message}
onChange={handleChange}
placeholder={t('MESSAGES.NEW_MESSAGE')}
/>
</Box>
<Box pr={1}>
<ButtonGroup size="small">
<div className="flex items-center space-x-2">
{voiceEnabled && (
<Button size="small" onClick={onVoiceClick}>
<MicIcon />
</Button>
<button onClick={onVoiceClick} className="hover:text-green-500">
<Mic size={24} />
</button>
)}
<Button size="small" onClick={onAddImageClick}>
<IosShareIcon />
</Button>
<Button size="small" onClick={handleSubmit}>
<SendIcon />
</Button>
</ButtonGroup>
</Box>
</Paper>

<button
onClick={handleSubmit}
className="rounded-lg bg-green-600 p-2 text-white hover:bg-green-700"
>
<SendHorizontal size={24} />
</button>
</div>
</div>
</div>
);
};

Expand Down
7 changes: 3 additions & 4 deletions apps/phone/src/apps/messages/components/form/NewMessageGroupButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ interface NewMessageGroupButtonProps {
}

export const NewMessageGroupButton: React.FC<NewMessageGroupButtonProps> = ({ onClick }) => {
const classes = useStyles();
const checkedConversations = useCheckedConversationsValue();
const [isEditing, setIsEditing] = useIsEditing();
const { deleteConversation } = useMessageAPI();
Expand All @@ -30,16 +29,16 @@ export const NewMessageGroupButton: React.FC<NewMessageGroupButtonProps> = ({ on
};

return (
<Fab
className={classes.root}
<button
className="absolute bottom-10 right-5 flex items-center justify-center rounded-md p-2 bg-green-500 text-white hover:bg-green-600"
color="primary"
onClick={!isEditing ? onClick : handleDeleteConversations}
onMouseUp={() => {
toggleKeys(false);
}}
>
{!isEditing ? <Add /> : <Delete />}
</Fab>
</button>
);
};

Expand Down
16 changes: 7 additions & 9 deletions apps/phone/src/apps/messages/components/form/NewMessageGroupForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,22 +112,20 @@ const NewMessageGroupForm = ({ phoneNumber }: { phoneNumber?: string }) => {
/>
</Box>
)}
<Box px={2} py={3}>
<Button
<div className='py-2 px-3 space-y-2'>
<button
className='bg-green-600 w-full rounded-md py-2 text-sm font-medium disabled:bg-gray-500/50 disabled:text-gray-500 hover:bg-green-700'
onClick={handleSubmit}
disabled={disableSubmit}
variant="contained"
fullWidth
sx={{ mb: 1 }}
color="primary"
type="submit"
>
{t('MESSAGES.NEW_MESSAGE_GROUP_SUBMIT')}
</Button>
<Button onClick={handleCancel} variant="contained" fullWidth color="error">
</button>
<button onClick={handleCancel} variant="contained" className='bg-red-700 w-full text-sm font-medium py-2 rounded-md hover:bg-red-800'>
{t('GENERIC_CANCEL')}
</Button>
</Box>
</button>
</div>
</Box>
);
};
Expand Down
Loading

0 comments on commit 7dd4110

Please sign in to comment.