smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Clean up and typing

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-27 16:22:34 -05:00
parent b46d89721e
commit 67293b20ca
47 changed files with 450 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -25,20 +25,26 @@ import {
textClasses,
textInputClasses,
} from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
const BookmarkSettings = () => {
const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
endpoint: 'api/links',
});
const [bookmarks, setBookmarks] = useState<any>([]);
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: 'api/categories',
});
const [dragging, setDragging] = useState(false);
const [groups, setGroups] = useState<any>([]);
const [newGroup, setNewGroup] = useState<any>({});
const [groupList, setGroupList] = useState<any>([]);
const { theme, isMobile } = useCommonHooks();
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
const [newGroup, setNewGroup] = useState<BookmarkGroup>({
id: undefined,
categoryName: '',
categoryIndex: 0,
filterName: '',
});
const [groupList, setGroupList] = useState<BookmarkGroup[]>([]);
const { theme, isMobile, modalStyle } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [searchValue, setSearchValue] = useState('');
const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
@@ -80,9 +86,13 @@ const BookmarkSettings = () => {
useEffect(() => {
if (groupData && groupsIsFetched) {
setGroups(
groupData.filter((a: any) =>
a.categoryName.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
),
groupData
.filter((a: BookmarkGroup) =>
a.categoryName.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
)
.sort((a: BookmarkGroup, b: BookmarkGroup) =>
a.categoryIndex > b.categoryIndex ? 1 : -1,
),
);
}
}, [groupData, groupsIsFetched, debouncedGroupSearch]);
@@ -104,14 +114,7 @@ const BookmarkSettings = () => {
onClose={() => {
closeModal();
}}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
}}
style={modalStyle}
closeOnEscape
closeOnClickOutside
>
@@ -282,69 +285,65 @@ const BookmarkSettings = () => {
ref={provided.innerRef}
{...provided.droppableProps}
>
{groups
?.sort((a: any, b: any) =>
a.categoryIndex > b.categoryIndex ? 1 : -1,
)
.map((group: any) => (
<Draggable
key={group.id}
draggableId={`${group.id}`}
index={Number(group.categoryIndex)}
>
{(provided) => (
<Box
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
{groups?.map((group: BookmarkGroup) => (
<Draggable
key={group.id}
draggableId={`${group.id}`}
index={Number(group.categoryIndex)}
>
{(provided) => (
<Box
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Card
w={'400px'}
style={{
backgroundColor: theme.searchColor,
border: '1px solid var(--color-border)',
borderRadius: '8px',
}}
>
<Card
w={'400px'}
style={{
backgroundColor: theme.searchColor,
border: '1px solid var(--color-border)',
borderRadius: '8px',
}}
>
<Group gap={0} align='center' justify='space-between'>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{group.categoryName}
</Text>
</Stack>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Filter Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{group.filterName}
</Text>
</Stack>
</Group>
</Card>
</Box>
)}
</Draggable>
))}
<Group gap={0} align='center' justify='space-between'>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{group.categoryName}
</Text>
</Stack>
<Stack gap={0}>
<Text c={theme.accentColor} fz={14}>
Filter Name
</Text>
<Text
p={4}
style={{
borderRadius: '4px',
paddingLeft: '8px',
color: theme.primaryColor,
backgroundColor: theme.searchColor,
}}
>
{group.filterName}
</Text>
</Stack>
</Group>
</Card>
</Box>
)}
</Draggable>
))}
{provided.placeholder}
</Stack>
)}
@@ -354,17 +353,15 @@ const BookmarkSettings = () => {
) : (
<Stack w={'100%'} align='center'>
<Group w={'75%'} align='start'>
{groups
?.sort((a: any, b: any) => (a.categoryIndex > b.categoryIndex ? 1 : -1))
.map((group: any) => (
<DebouncedGroupSettingsItem
key={group.id}
bookmarkGroup={group}
bookmarks={bookmarks
.filter((a: any) => a.category === group.categoryName)
.sort((a: any, b: any) => (a.index > b.index ? 1 : -1))}
/>
))}
{groups?.map((group: BookmarkGroup) => (
<DebouncedGroupSettingsItem
key={group.id}
bookmarkGroup={group}
bookmarks={bookmarks
.filter((a: Bookmark) => a.category === group.categoryName)
.sort((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))}
/>
))}
</Group>
</Stack>
)}