From e0a24445b41e43531fa93967374979dfe6968a85 Mon Sep 17 00:00:00 2001 From: balzack Date: Mon, 30 Dec 2024 12:07:16 -0800 Subject: [PATCH] rendering thread --- .../mobile/src/context/useAppContext.hook.ts | 2 +- .../src/conversation/Conversation.styled.ts | 3 + .../mobile/src/conversation/Conversation.tsx | 4 +- .../mobile/src/message/Message.styled.ts | 65 ++++++++++++++++++- app/client/mobile/src/message/Message.tsx | 56 +++++++++++++++- 5 files changed, 125 insertions(+), 5 deletions(-) diff --git a/app/client/mobile/src/context/useAppContext.hook.ts b/app/client/mobile/src/context/useAppContext.hook.ts index 63bf087e..1832b0e8 100644 --- a/app/client/mobile/src/context/useAppContext.hook.ts +++ b/app/client/mobile/src/context/useAppContext.hook.ts @@ -3,7 +3,7 @@ import {DatabagSDK, Session, Focus} from 'databag-client-sdk'; import {SessionStore} from '../SessionStore'; import {NativeCrypto} from '../NativeCrypto'; import {LocalStore} from '../LocalStore'; -const DATABAG_DB = 'db_v234.db'; +const DATABAG_DB = 'db_v237.db'; const SETTINGS_DB = 'ls_v001.db'; const databag = new DatabagSDK( diff --git a/app/client/mobile/src/conversation/Conversation.styled.ts b/app/client/mobile/src/conversation/Conversation.styled.ts index 34226c9d..63348266 100644 --- a/app/client/mobile/src/conversation/Conversation.styled.ts +++ b/app/client/mobile/src/conversation/Conversation.styled.ts @@ -8,6 +8,9 @@ export const styles = StyleSheet.create({ height: '100%', minHeight: 0, }, + messageList: { + width: '100%', + }, messages: { paddingBottom: 64, }, diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx index 6b1e65ba..5fed0276 100644 --- a/app/client/mobile/src/conversation/Conversation.tsx +++ b/app/client/mobile/src/conversation/Conversation.tsx @@ -80,7 +80,7 @@ export function Conversation({close}: {close: ()=>void}) { { state.subject } )} { state.detailSet && state.host && !state.subject && state.subjectNames.length == 0 && ( - { state.strings.notes } + { state.strings.notes } )} { state.detailSet && !state.subject && state.subjectNames.length > 0 && ( { state.subjectNames.join(', ') } @@ -94,6 +94,7 @@ export function Conversation({close}: {close: ()=>void}) { void}) { )} + thread.current.scrollToEnd()}> ADD diff --git a/app/client/mobile/src/message/Message.styled.ts b/app/client/mobile/src/message/Message.styled.ts index bb1b8272..6aae6efb 100644 --- a/app/client/mobile/src/message/Message.styled.ts +++ b/app/client/mobile/src/message/Message.styled.ts @@ -2,4 +2,67 @@ import {StyleSheet} from 'react-native'; import {Colors} from '../constants/Colors'; export const styles = StyleSheet.create({ -}); + message: { + paddingTop: 8, + width: '100%', + }, + topic: { + display: 'flex', + flexDirection: 'column', + width: '100%', + paddingBottom: 8, + }, + content: { + display: 'flex', + flexDirection: 'row', + alignItems: 'flexStart', + width: '100%', + }, + logo: { + width: 32, + height: 32, + borderRadius: 2, + marginLeft: 8, + }, + body: { + display: 'flex', + flexGrow: 1, + flexDirection: 'column', + }, + header: { + display: 'flex', + flexDirection: 'row', + alignItems: 'flexStart', + width: '100%', + lineHeight: '16', + paddingBottom: '4', + gap: '16', + position: 'relative', + }, + name: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + paddingLeft: 12, + }, + handle: { + fontSize: 14, + fontWeight: 'bold', + }, + unknown: { + fontSize: 14, + color: Colors.placeholder, + }, + locked: { + fontStyle: 'italic', + color: Colors.placeholder, + }, + timestamp: { + fontSize: 12, + }, + padding: { + paddingLeft: 12, + paddingRight: 12, + paddingTop: 4, + }, +}) diff --git a/app/client/mobile/src/message/Message.tsx b/app/client/mobile/src/message/Message.tsx index f16b8765..497dde6c 100644 --- a/app/client/mobile/src/message/Message.tsx +++ b/app/client/mobile/src/message/Message.tsx @@ -1,16 +1,68 @@ import { useRef, useEffect, useState, useCallback } from 'react'; import { avatar } from '../constants/Icons' +import { View, Image } from 'react-native'; import {Icon, Text, IconButton, Divider} from 'react-native-paper'; import { Topic, Card, Profile } from 'databag-client-sdk'; -import classes from './Message.styles.ts' import { ImageAsset } from './imageAsset/ImageAsset'; import { AudioAsset } from './audioAsset/AudioAsset'; import { VideoAsset } from './videoAsset/VideoAsset'; import { BinaryAsset } from './binaryAsset/BinaryAsset'; import { useMessage } from './useMessage.hook'; +import {styles} from './Message.styled'; export function Message({ topic, card, profile, host }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean }) { const { state, actions } = useMessage(); + const { locked, data, created, topicId, status, transform } = topic; + const { name, handle, node } = profile || card || { name: null, handle: null, node: null } + const { text, textColor, textSize, assets } = data || { text: null, textColor: null, textSize: null } + const textStyle = { color: textColor ? textColor : undefined, fontSize: textSize ? textSize : undefined }; + const logoUrl = profile ? profile.imageUrl : card ? card.imageUrl : avatar; + const timestamp = actions.getTimestamp(created); + const [message, setMessage] = useState(''); + const [editing, setEditing] = useState(false); + const [editText, setEditText] = useState(''); + const [saving, setSaving] = useState(false); - return ({ JSON.stringify(topic.data) }) + return ( + + + + + + + + { name && ( + { name } + )} + { !name && handle && ( + { `${handle}${node ? '/' + node : ''}` } + )} + { !name && !handle && ( + { state.strings.unknownContact } + )} + { timestamp } + + + + {! locked && status === 'confirmed' && editing && ( + + + )} + { !locked && status === 'confirmed' && text && !editing && ( + { text } + )} + { !locked && status !== 'confirmed' && ( + + + )} + { locked && ( + { state.strings.encrypted } + )} + + + + + + + ); }