Add Theming, add test.

This commit is contained in:
Thomas Rogers
2023-09-01 17:42:19 +02:00
parent faf7880fcd
commit 08d7f4842d
2 changed files with 68 additions and 41 deletions

View File

@ -2,10 +2,10 @@ import 'mocha'
import chai, { expect } from 'chai'
import {
createTestUser,
createUserWithoutProfile,
createUserWithoutProfile, deleteFiltersFromUser,
deleteTestUser,
getProfile,
} from '../db'
getProfile
} from "../db"
import { createGroup } from '../../src/services/groups'
import {
getUserFollowers,
@ -18,10 +18,38 @@ import * as util from '../../src/utils/sendEmail'
import { MailDataRequired } from '@sendgrid/helpers/classes/mail'
import { User } from '../../src/entity/user'
import { getRepository } from '../../src/entity/utils'
import { Filter } from "../../src/entity/filter"
chai.use(sinonChai)
describe('create user', () => {
context('creates a user through manual sign up', () => {
it ('adds the default filters to the user', async () => {
after(async () => {
const testUser = await getRepository(User).findOneBy({
name: 'testuser',
})
await deleteTestUser(testUser!.id)
await deleteFiltersFromUser(testUser!.id)
})
const user = await createTestUser('filter_user');
const filters = await getRepository(Filter).findBy({ user: { id: user.id }})
expect(filters).not.to.be.empty
expect(filters.map(it => it.name)).to.include([
"Inbox",
"Continue Reading",
"Non-Feed Items",
"Highlights",
"Unlabelled",
"Archived"
])
})
})
context('create a user with an invite', () => {
it('follows the other user in the group', async () => {
after(async () => {

View File

@ -1,7 +1,7 @@
import { Dispatch, SetStateAction, useEffect, useState } from "react"
import { Dispatch, MouseEventHandler, SetStateAction, useCallback, useEffect, useState } from "react"
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { Button } from '../../components/elements/Button'
import { styled } from '../../components/tokens/stitches.config'
import { styled, theme } from '../../components/tokens/stitches.config'
import {
Box,
SpanBox,
@ -219,16 +219,18 @@ export default function SavedSearchesPage(): JSX.Element {
}
async function onDeleteSavedSearch(id: string): Promise<void> {
await deleteFilterMutation(id)
const currentElement = sortedSavedSearch?.find((it) => it.id == id);
if (currentElement) {
await deleteFilterMutation(id)
setSortedSavedSearch(
sortedSavedSearch
.filter(it => it.id !== id)
.map(it => {
return { ...it, position: currentElement?.position > it.position ? it.position : it.position - 1}
})
)
setSortedSavedSearch(
sortedSavedSearch
.filter(it => it.id !== id)
.map(it => {
return { ...it, position: currentElement.position > it.position ? it.position : it.position - 1 }
})
)
}
return
}
@ -238,18 +240,18 @@ export default function SavedSearchesPage(): JSX.Element {
}
async function updatePositionOnMouseUp(y: number): Promise<string | undefined> {
const idx = Math.floor(((y + window.scrollY - 25) - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD)
const correctedIdx = Math.min(Math.max(idx, 0), sortedSavedSearch?.length - 1)
const currentElement = sortedSavedSearch?.find(({ id }) => id == draggedElementId);
const moveUp = correctedIdx < currentElement?.position
if (currentElement) {
const idx = Math.floor(((y + window.scrollY - 25) - TOP_SETTINGS_PANEL) / HEIGHT_SETTING_CARD)
const correctedIdx = Math.min(Math.max(idx, 0), sortedSavedSearch?.length - 1)
const moveUp = correctedIdx < currentElement.position
if (correctedIdx != currentElement?.position) {
const newlyOrdered = sortedSavedSearch
if (correctedIdx != currentElement.position) {
const newlyOrdered = sortedSavedSearch
?.map((search) => {
let pos = search.position;
if (inRange(pos, Math.min(correctedIdx, currentElement.position), Math.max(correctedIdx, currentElement.position)) || search.position == correctedIdx) {
pos = search.position + (moveUp ? +1 : -1)
console.log(pos)
}
if (draggedElementId == search?.id) {
pos = correctedIdx
@ -260,9 +262,9 @@ export default function SavedSearchesPage(): JSX.Element {
}
})
?.sort((l, r) => l.position - r.position);
setSortedSavedSearch(newlyOrdered)
console.log(newlyOrdered)
return updateFilterMutation({ ...currentElement, position: correctedIdx })
setSortedSavedSearch(newlyOrdered)
return updateFilterMutation({ ...currentElement, position: correctedIdx })
}
}
return
@ -289,8 +291,8 @@ export default function SavedSearchesPage(): JSX.Element {
message={
'Are you sure?'
}
onAccept={() => {
onDeleteSavedSearch(confirmRemoveSavedSearchId)
onAccept={async () => {
await onDeleteSavedSearch(confirmRemoveSavedSearchId)
setConfirmRemoveSavedSearchId(null)
}}
onOpenChange={() => setConfirmRemoveSavedSearchId(null)}
@ -425,7 +427,7 @@ export default function SavedSearchesPage(): JSX.Element {
setDraggedElementId,
onEditPress,
setDraggedElementPosition,
isSwappedCard: draggedElementId != savedSearch.id && (draggedElementPosition?.y + window.scrollY + HEIGHT_SETTING_CARD)> positionY && draggedElementPosition?.y + window.scrollY + HEIGHT_SETTING_CARD < positionY + HEIGHT_SETTING_CARD,
isSwappedCard: (draggedElementPosition && draggedElementId != savedSearch.id && (draggedElementPosition.y + window.scrollY + HEIGHT_SETTING_CARD)> positionY && draggedElementPosition?.y + window.scrollY + HEIGHT_SETTING_CARD < positionY + HEIGHT_SETTING_CARD) || undefined,
updatePositionOnMouseUp
}
if (editingId == savedSearch.id) {
@ -472,8 +474,8 @@ type EditCardProps = {
draggedElementId: string | null
setDraggedElementId: Dispatch<SetStateAction<string | null>>
setDraggedElementPosition: Dispatch<SetStateAction<{ x: number, y: number } | null>>
isSwappedCard: boolean,
updatePositionOnMouseUp: (y: number) => Promise<void>
isSwappedCard?: boolean,
updatePositionOnMouseUp?: (y: number) => Promise<string | undefined>
}
function GenericTableCard(
@ -508,7 +510,7 @@ function GenericTableCard(
const showInput = editingId === savedSearch?.id || (isCreateMode && !savedSearch)
const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
const DEFAULT_STYLE = { position: null };
const [style, setStyle] = useState<Partial<{ position: string | null, top: string, left: string }>>(DEFAULT_STYLE)
const [style, setStyle] = useState<Partial<{ position: string | null, top: string, left: string, maxWidth: string }>>(DEFAULT_STYLE)
const handleEdit = () => {
editingId && updateSavedSearch(editingId)
setEditingId(null)
@ -581,7 +583,7 @@ function GenericTableCard(
}
const onMouseUp = async (e: MouseEvent) => {
if (draggedElementId != null && draggedElementId == savedSearch?.id) {
if (draggedElementId != null && draggedElementId == savedSearch?.id && updatePositionOnMouseUp) {
const updatePosition = updatePositionOnMouseUp(e.clientY)
setDraggedElementId(null);
setStyle(DEFAULT_STYLE);
@ -590,22 +592,22 @@ function GenericTableCard(
}
}
const onMouseMove = (e: MouseEvent) => {
const onMouseMove = useCallback((e: MouseEvent) => {
if (draggedElementId != null && draggedElementId == savedSearch?.id) {
setStyle({ position: "absolute", top: `${e.clientY - 25 + window.scrollY}px`, left: `${e.clientX - 25 + window.scrollX}px`, maxWidth: '865px' });
setDraggedElementPosition({ y: e.clientY - 25, x: e.clientX - 25});
}
}
}, [draggedElementId, savedSearch, setDraggedElementPosition])
useEffect(() => {
window.addEventListener('mousemove', onMouseMove)
return () => {
window.removeEventListener('mousemove', onMouseMove)
}
}, [draggedElementId])
}, [draggedElementId, onMouseMove])
const setVisibility = () => {
updateFilterMutation({ ...savedSearch, visible: !isVisible} )
const setVisibility = async () => {
await updateFilterMutation({ ...savedSearch, visible: !isVisible} )
setIsVisible(!isVisible);
}
@ -614,20 +616,19 @@ function GenericTableCard(
className={"tableCard"}
css={{
...style,
background: 'white',
'&:hover': {
background: 'rgba(255, 234, 159, 0.12)',
},
borderTop: isSwappedCard ? "56px solid white" : undefined,
borderTop: isSwappedCard ? `56px solid ${theme.colors.thBackground}` : undefined,
borderTopLeftRadius: isFirstChild ? '5px' : '',
borderTopRightRadius: isFirstChild ? '5px' : '',
borderBottomLeftRadius: isLastChild ? '5px' : '',
borderBottomRightRadius: isLastChild ? '5px' : '',
}}
} as never}
>
<TableCardBox
onMouseUp={onMouseUp}
onMouseUp={onMouseUp as unknown as MouseEventHandler}
css={{
display: 'grid',
width: '100%',
@ -658,7 +659,7 @@ function GenericTableCard(
padding: '0 5px',
}}
>
<ArrowsDownUp size={28} style={{ cursor: 'grab' }} onMouseDown={onMouseDown} />
<ArrowsDownUp size={28} style={{ cursor: 'grab' }} onMouseDown={onMouseDown as unknown as MouseEventHandler} />
</HStack>
<HStack
distribution="start"
@ -852,14 +853,12 @@ function MobileEditCard(props: EditCardProps) {
savedSearch,
editingId,
setEditingId,
isCreateMode,
nameInputText,
setNameInputText,
queryInputText,
setQueryInputText,
createSavedSearch,
resetState,
updateSavedSearch,
isFirstChild,
isLastChild,
} = props