Add conversation requests list
- Add routes to REST API for conversation requests
- Add websocket notification on new conversation requests. This is unreliable.
- Rename 'ColoredCallButton' as 'ColoredRoundButton' and move it to Buttons file for reuse
- Review logic to show conversation tabs
- Add useConversationDisplayNameShort for conversations' names in lists. Will need more work.
- Add hooks to help managing React Query's cache
- Use React Query to remove conversations and update the cache doing so.
- Add ContactService and ConversationService as a way to group reusable functions for the server. This is inspired by jami-android
Known bug: The server often freezes on getContactFromUri (in ContactService) when a new conversation request is received.
Change-Id: I46a60a401f09c3941c864afcdb2625b5fcfe054a
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 3ef3d94..92ef37d 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -31,8 +31,9 @@
RadioGroup,
RadioGroupProps,
SvgIconProps,
+ Theme,
} from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { PaletteColor, styled } from '@mui/material/styles';
import EmojiPicker, { IEmojiData } from 'emoji-picker-react';
import { ComponentType, MouseEvent, ReactNode, useCallback, useState } from 'react';
@@ -508,3 +509,34 @@
color: 'white',
fontSize: '10px',
});
+
+export const ColoredRoundButton = styled(
+ ({
+ paletteColor,
+ Icon,
+ ...props
+ }: ShapedButtonProps & {
+ paletteColor?: PaletteColor | ((theme: Theme) => PaletteColor);
+ }) => {
+ return (
+ <IconButton {...props} disableRipple={true}>
+ <Icon fontSize="inherit" />
+ </IconButton>
+ );
+ }
+)(({ theme, paletteColor = theme.palette.primary }) => {
+ if (typeof paletteColor === 'function') {
+ paletteColor = paletteColor(theme);
+ }
+
+ return {
+ color: paletteColor.contrastText,
+ backgroundColor: paletteColor.dark,
+ '&:hover': {
+ backgroundColor: paletteColor.main,
+ },
+ '&:disabled': {
+ backgroundColor: theme.palette.action.disabled,
+ },
+ };
+});