martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-03-13 00:50:03 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

use base component as first run

Browse Source
This commit is contained in:
Roland Osborne 2025-02-28 13:14:12 -08:00
parent 6c8298fc33
commit 04f9a26621
3 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/client/web/src/base/Base.tsx
View File

@ -3,14 +3,11 @@ import { useBase } from './useBase.hook'
import classes from './Base.module.css'
import light from '../images/lightness.png'
import dark from '../images/darkness.png'
import { useMantineTheme, Image, Text } from '@mantine/core'
import { Image, Text } from '@mantine/core'
import { IconChevronRight } from '@tabler/icons-react'
export function Base() {
const { state } = useBase();
const theme = useMantineTheme();
console.log(theme);
return (
<div className={classes.base}>
@ -19,13 +16,19 @@ console.log(theme);
<Text className={classes.label}>{ state.strings.communication }</Text>
</div>
<Image className={classes.image} src={state.scheme === 'dark' ? dark : light} fit="contain" />
<div className={classes.steps}>
<Text className={classes.step}>{ state.strings.setupProfile }</Text>
<IconChevronRight className={classes.icon} />
<Text className={classes.step}>{ state.strings.connectPeople }</Text>
<IconChevronRight className={classes.icon} />
<Text className={classes.step}>{ state.strings.startConversation }</Text>
</div>
{ (state.profileSet === false || state.cardSet === false || state.channelSet === false) && (
<div className={classes.steps}>
{ (state.profileSet === false) && (
<Text className={classes.step}>{ state.strings.setupProfile }</Text>
)}
<IconChevronRight className={classes.icon} />
{ (state.profileSet === false || state.cardSet === false) && (
<Text className={classes.step}>{ state.strings.connectPeople }</Text>
)}
<IconChevronRight className={classes.icon} />
<Text className={classes.step}>{ state.strings.startConversation }</Text>
</div>
)}
</div>
);
}

28
app/client/web/src/base/useBase.hook.ts
View File

@ -1,12 +1,17 @@
import { useState, useContext, useEffect } from 'react'
import { AppContext } from '../context/AppContext'
import { DisplayContext } from '../context/DisplayContext'
import { ContextType } from '../context/ContextType'
export function useBase() {
const app = useContext(AppContext) as ContextType
const display = useContext(DisplayContext) as ContextType
const [state, setState] = useState({
strings: display.state.strings,
scheme: display.state.scheme,
profileSet: null as null | boolean,
cardSet: null as null | boolean,
channelSet: null as null | boolean,
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -19,6 +24,29 @@ export function useBase() {
updateState({ strings, scheme });
}, [display.state]);
useEffect(() => {
const setProfile = (profile: Profile) => {
updateState({ profileSet: Boolean(profile.name) });
}
const setCards = (cards: Card[]) => {
updateState({ cardSet: cards.length > 0 });
}
const setChannels = ({ channels, cardId }: { channels: Channel[]; cardId: string | null }) => {
updateState({ channelSet: channels.length > 0 });
}
const { identity, contact, content } = app.state.session
identity.addProfileListener(setProfile)
contact.addCardListener(setCards)
content.addChannelListener(setChannels)
return () => {
identity.removeProfileListener(setProfile);
contact.removeCardListener(setCards);
content.removeChannelListener(setChannels);
}
}, []);
const actions = {
}

6
app/client/web/src/settings/Settings.tsx
View File

@ -630,7 +630,7 @@ export function Settings({ showLogout }: { showLogout: boolean }) {
<TextInput
className={classes.input}
size="md"
value={state.name}
value={state.name || ''}
leftSectionPointerEvents="none"
leftSection={<IconIdBadge />}
placeholder={state.strings.name}
@ -639,7 +639,7 @@ export function Settings({ showLogout }: { showLogout: boolean }) {
<TextInput
className={classes.input}
size="md"
value={state.location}
value={state.location || ''}
leftSectionPointerEvents="none"
leftSection={<IconMapPin />}
placeholder={state.strings.location}
@ -651,7 +651,7 @@ export function Settings({ showLogout }: { showLogout: boolean }) {
minRows={1}
maxRows={4}
autosize={true}
value={state.description}
value={state.description || ''}
leftSectionPointerEvents="none"
leftSection={<IconBook />}
placeholder={state.strings.description}