Skip to content

Commit

Permalink
Added file share feature
Browse files Browse the repository at this point in the history 
Signed-off-by: Marlon Baeten <[email protected]>
  • Loading branch information
@marlonbaeten
marlonbaeten committed Jul 23, 2024
1 parent dcc3b68 commit 0569704
Show file tree
Hide file tree
Showing 9 changed files with 772 additions and 499 deletions.
15 changes: 8 additions & 7 deletions demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"dependencies": {
"@mantine/core": "7.11.2",
"@mantine/dropzone": "^7.11.2",
"@mantine/hooks": "7.11.2",
"@tabler/icons-react": "^3.7.0",
"html5-qrcode": "^2.3.8",
Expand All @@ -20,18 +21,18 @@
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.13.1",
"@typescript-eslint/parser": "^7.13.1",
"@typescript-eslint/eslint-plugin": "^7.17.0",
"@typescript-eslint/parser": "^7.17.0",
"@vitejs/plugin-react": "^4.3.1",
"eslint": "^8.57.0",
"eslint": "^9.7.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"eslint-plugin-react-refresh": "^0.4.9",
"postcss": "^8.4.39",
"postcss-preset-mantine": "^1.15.0",
"postcss-preset-mantine": "^1.17.0",
"postcss-simple-vars": "^7.0.1",
"typescript": "^5.2.2",
"typescript": "^5.5.4",
"vite": "^5.3.1",
"vite-plugin-top-level-await": "^1.4.1",
"vite-plugin-top-level-await": "^1.4.2",
"vite-plugin-wasm": "^3.3.0"
}
}
5 changes: 5 additions & 0 deletions demo/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ interface ContentProps {
id: Identity | null;
initialized: boolean;
openScan: () => void;
sendFile: (vid: string, file: File) => void;
sendMessage: (vid: string, message: string) => void;
verifyContact: (vid: string) => void;
}
Expand All @@ -34,6 +35,7 @@ function Content({
initialized,
openScan,
sendMessage,
sendFile,
verifyContact,
}: ContentProps) {
if (!initialized) {
Expand All @@ -47,6 +49,7 @@ function Content({
mobile={mobile}
contact={contacts[active]}
sendMessage={sendMessage}
sendFile={sendFile}
verifyContact={verifyContact}
deleteContact={deleteContact}
deleteMessage={deleteMessage}
Expand All @@ -71,6 +74,7 @@ export default function App() {
id,
initialized,
sendMessage,
sendFile,
setActive,
verifyContact,
} = useStore();
Expand Down Expand Up @@ -133,6 +137,7 @@ export default function App() {
id,
initialized,
sendMessage,
sendFile,
openScan,
verifyContact,
}}
Expand Down
133 changes: 10 additions & 123 deletions demo/src/Chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,141 +5,47 @@ import {
Flex,
Menu,
Stack,
TextInput,
Title,
Text,
rem,
Modal,
Center,
Button,
} from '@mantine/core';
import { Contact } from './useStore';
import {
IconSend,
IconMessages,
IconDotsVertical,
IconTrash,
IconCode,
IconCodeCircle,
IconAlertTriangle,
IconChecklist,
} from '@tabler/icons-react';
import { useState } from 'react';
import { useDisclosure, useFocusTrap, useHover } from '@mantine/hooks';
import { useDisclosure } from '@mantine/hooks';
import ChatMessage from './ChatMessage';
import ChatInput from './ChatInput';

interface ChatProps {
contact: Contact;
mobile: boolean;
sendMessage: (vid: string, message: string) => void;
sendFile: (vid: string, file: File) => void;
deleteContact: (index: number) => void;
deleteMessage: (contactIndex: number, index: number) => void;
index: number;
verifyContact: (vid: string) => void;
}

interface ChatMessageProps {
date: string;
me: boolean;
deleteMessage: () => void;
message: string;
encoded: string;
}

function ChatMessage({
date,
me,
message,
encoded,
deleteMessage,
}: ChatMessageProps) {
const { hovered, ref } = useHover();
const [opened, { open, close }] = useDisclosure(false);

return (
<Stack align={me ? 'flex-end' : 'flex-start'}>
<Alert
miw={200}
variant="light"
color={me ? 'green' : 'blue'}
style={{ textAlign: 'right' }}
pr={24}
py="sm"
ref={ref}
>
<Flex align="center" justify="flex-end">
<Text c="gray" size="xs">
{date.slice(11, 16)}
</Text>
<Modal
opened={opened}
onClose={close}
title={<strong>CESR encoded message</strong>}
size="lg"
>
<code style={{ wordWrap: 'break-word', wordBreak: 'break-all' }}>
{encoded}
</code>
</Modal>
<Menu shadow="md" width={180}>
<Menu.Target>
<ActionIcon
variant="transparent"
color="light"
size="md"
style={{
position: 'absolute',
top: 0,
right: 0,
visibility: hovered ? 'visible' : 'hidden',
}}
>
<IconDotsVertical size={14} />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
onClick={open}
leftSection={
<IconCode style={{ width: rem(14), height: rem(14) }} />
}
>
CESR message
</Menu.Item>
<Menu.Item
color="red"
onClick={() => deleteMessage()}
leftSection={
<IconTrash style={{ width: rem(14), height: rem(14) }} />
}
>
Delete message
</Menu.Item>
</Menu.Dropdown>
</Menu>
</Flex>
{message}
</Alert>
</Stack>
);
}

export default function Chat({
contact,
index,
mobile,
sendMessage,
sendFile,
deleteContact,
deleteMessage,
verifyContact,
}: ChatProps) {
const focusTrapRef = useFocusTrap();
const [opened, { open, close }] = useDisclosure(false);
const [message, setMessage] = useState<string>('');
const onSubmit = (e: React.FormEvent) => {
e.preventDefault();
sendMessage(contact.vid.id, message);
setMessage('');
};

return (
<Stack h="100dvh" justify="space-between" gap={0} align="stretch">
Expand Down Expand Up @@ -237,30 +143,11 @@ export default function Chat({
))}
</Flex>
</Box>
<Box bg="gray.2" p="md">
<form onSubmit={onSubmit} ref={focusTrapRef}>
<Flex gap="md" align="stretch">
<TextInput
size="md"
radius="md"
placeholder="Type a message..."
flex={1}
data-autofocus
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<ActionIcon
variant="filled"
size="42"
radius="md"
disabled={message.length === 0}
type="submit"
>
<IconSend size="20" />
</ActionIcon>
</Flex>
</form>
</Box>
<ChatInput
contact={contact}
sendMessage={sendMessage}
sendFile={sendFile}
/>
</>
) : (
<Box flex={1}>
Expand Down
Loading

0 comments on commit 0569704

Please sign in to comment.