From b12f19ac51b31ba41d38de564a2561377ccefcc3 Mon Sep 17 00:00:00 2001 From: dm1sh Date: Sat, 12 Aug 2023 01:32:02 +0300 Subject: [PATCH 1/4] Fixed useSend loading flow on abort Made data null on error Made it remain in loading state on refetch and remount abortion --- front/src/hooks/api/useSignIn.ts | 2 +- front/src/hooks/useFetch.ts | 16 ++++---- front/src/hooks/useSend.ts | 49 ++++++++++++++++--------- front/src/hooks/useSendButtonCaption.ts | 4 +- front/src/utils/index.ts | 18 ++++++++- 5 files changed, 60 insertions(+), 29 deletions(-) diff --git a/front/src/hooks/api/useSignIn.ts b/front/src/hooks/api/useSignIn.ts index 7cf7e32..06a5dda 100644 --- a/front/src/hooks/api/useSignIn.ts +++ b/front/src/hooks/api/useSignIn.ts @@ -20,7 +20,7 @@ function useSignIn() { body: formData, }) - if (token !== undefined) { + if (token !== null && token !== undefined) { setToken(token) return true diff --git a/front/src/hooks/useFetch.ts b/front/src/hooks/useFetch.ts index c0e9319..bcac6c5 100644 --- a/front/src/hooks/useFetch.ts +++ b/front/src/hooks/useFetch.ts @@ -20,7 +20,7 @@ type UseFetchLoading = { } & UseFetchShared type UseFetchErrored = { - data: undefined, + data: null, loading: false, error: string, } & UseFetchShared @@ -32,8 +32,7 @@ const gotError = (res: UseFetchReturn): res is UseFetchErrored => ( ) function fallbackError(res: UseFetchSucced | UseFetchErrored): T | string -function fallbackError(res: UseFetchReturn): T | string | undefined -function fallbackError(res: UseFetchReturn): T | string | undefined { +function fallbackError(res: UseFetchReturn): T | string | null | undefined { return ( gotError(res) ? res.error : res.data ) @@ -62,7 +61,6 @@ function useFetch>( needAuth, guardResponse, processResponse, - true, params, ) @@ -70,10 +68,14 @@ function useFetch>( setFetchLoading(true) doSend().then( data => { - if (data !== undefined) { + if (data !== undefined && data !== null) { setData(data) + console.log('Got data', data) + } + + if (data !== undefined) { + setFetchLoading(false) } - setFetchLoading(false) } ).catch( // must never occur err => import.meta.env.DEV && console.error('Failed to do fetch request', err) @@ -93,7 +95,7 @@ function useFetch>( if (error !== null) { return { - data: undefined, + data: null, loading: fetchLoading, error, refetch, diff --git a/front/src/hooks/useSend.ts b/front/src/hooks/useSend.ts index 1742ac5..53eec3a 100644 --- a/front/src/hooks/useSend.ts +++ b/front/src/hooks/useSend.ts @@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { useNavigate } from 'react-router-dom' import { getToken } from '../utils/auth' -import { handleHTTPErrors, isAborted } from '../utils' +import { AbortError, handleHTTPErrors, isAborted } from '../utils' function useSend>( url: string, @@ -10,17 +10,19 @@ function useSend>( needAuth: boolean, guardResponse: (data: unknown) => data is R, processResponse: (data: R) => T, - startWithLoading = false, defaultParams?: Omit, ) { - const [loading, setLoading] = useState(startWithLoading) + const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const navigate = useNavigate() const abortControllerRef = useRef() - useEffect(() => () => abortControllerRef.current?.abort(), []) + useEffect(() => () => { + const reason = new AbortError('unmount') + abortControllerRef.current?.abort(reason) + }, []) /** Don't use in useEffect. If you need request result, go with useFetch instead */ const doSend = useCallback(async (urlProps?: Record, params?: Omit) => { @@ -28,7 +30,8 @@ function useSend>( setError(null) if (abortControllerRef.current) { - abortControllerRef.current.abort() + const reason = new AbortError('resent') + abortControllerRef.current.abort(reason) } const abortController = new AbortController() @@ -45,7 +48,7 @@ function useSend>( if (token === null) { navigate('/login') - return undefined + return null } headers.append('Authorization', `Bearer ${token}`) @@ -73,21 +76,33 @@ function useSend>( return processResponse(data) } catch (err) { - if (err instanceof Error && !isAborted(err)) { - if (err instanceof TypeError) { - setError('Ошибка сети') - } else { - setError(err.message) - } + if (err instanceof Error) { + if (isAborted(err)) { + if (err.message !== 'resent') { + setLoading(false) + } - if (import.meta.env.DEV) { - console.error(url, params, err) + if (err.fallback !== undefined) { + return err.fallback + } + + return undefined + } else { + if (err instanceof TypeError) { + setError('Ошибка сети') + } else { + setError(err.message) + } + + if (import.meta.env.DEV) { + console.error(url, params, err) + } + + setLoading(false) } } - setLoading(false) - - return undefined + return null } }, [defaultParams, needAuth, navigate, url, method, guardResponse, processResponse]) diff --git a/front/src/hooks/useSendButtonCaption.ts b/front/src/hooks/useSendButtonCaption.ts index 4ab2f81..55e1fa0 100644 --- a/front/src/hooks/useSendButtonCaption.ts +++ b/front/src/hooks/useSendButtonCaption.ts @@ -11,8 +11,8 @@ function useSendButtonCaption( const [disabled, setDisabled] = useState(false) const [title, setTitle] = useState(initial) - const update = useCallback(>(data: T | undefined) => { - if (data !== undefined) { + const update = useCallback(>(data: T | null | undefined) => { + if (data !== undefined) { // not loading setCaption(result) setTitle('Отправить ещё раз') diff --git a/front/src/utils/index.ts b/front/src/utils/index.ts index e173552..4eda3eb 100644 --- a/front/src/utils/index.ts +++ b/front/src/utils/index.ts @@ -1,7 +1,21 @@ -const isAborted = (err: Error) => ( +const isAborted = (err: Error): err is AbortError => ( err.name === 'AbortError' ) +type AbortErrorMessage = 'resent' | 'unmount' | 'cancel' + +class AbortError extends DOMException { + readonly fallback: T | undefined + message: AbortErrorMessage + + constructor(message: AbortErrorMessage, fallback?: T) { + super(message, 'AbortError') + this.message = message + + this.fallback = fallback + } +} + function handleHTTPErrors(res: Response) { if (!res.ok) { switch (res.status) { @@ -16,4 +30,4 @@ function handleHTTPErrors(res: Response) { } } -export { isAborted, handleHTTPErrors } +export { isAborted, AbortError, handleHTTPErrors } From a4a6f620fb390b20b5dbde3e01f432e3e2668055 Mon Sep 17 00:00:00 2001 From: dm1sh Date: Sat, 12 Aug 2023 01:33:38 +0300 Subject: [PATCH 2/4] Added empty ann list message on stories preview Converted to use css module --- front/src/components/StoriesPreview.tsx | 119 +++++++-------------- front/src/styles/StoriesPreview.module.css | 56 ++++++++++ 2 files changed, 95 insertions(+), 80 deletions(-) create mode 100644 front/src/styles/StoriesPreview.module.css diff --git a/front/src/components/StoriesPreview.tsx b/front/src/components/StoriesPreview.tsx index 4bd6cf6..1c73357 100644 --- a/front/src/components/StoriesPreview.tsx +++ b/front/src/components/StoriesPreview.tsx @@ -1,5 +1,5 @@ import { Link } from 'react-router-dom' -import { CSSProperties, useEffect, useMemo, useRef, useState } from 'react' +import { useEffect, useLayoutEffect, useRef, useState } from 'react' import { Button } from 'react-bootstrap' import { UserCategory, composeUserCategoriesFilters, userCategoriesInfos } from '../assets/userCategories' @@ -9,64 +9,37 @@ import { URLEncodeFilters } from '../utils/filters' import rightAngleIcon from '../assets/rightAngle.svg' +import styles from '../styles/StoriesPreview.module.css' + type StoriesPreviewProps = { announcements: Announcement[], category: UserCategory, } -const styles = { - container: { - transform: 'translateX(0)', - } as CSSProperties, - ul: { - display: 'flex', - gap: 10, - listStyleType: 'none', - overflow: 'scroll', - paddingLeft: 0, - scrollBehavior: 'smooth', - } as CSSProperties, - link: { - textDecoration: 'none', - color: 'var(--bs-body-color)', - maxWidth: 'calc(25vh * 9 / 16)', - display: 'inline-block', - } as CSSProperties, - image: { - height: '25vh', - objectFit: 'contain', - borderRadius: 12, - marginBottom: 5, - maxWidth: 'inherit', - } as CSSProperties, - title: { - overflow: 'hidden', - textOverflow: 'ellipsis', - marginBottom: 5, - } as CSSProperties, - scrollButton: { - position: 'fixed', - right: 0, - top: 0, - zIndex: 100, - background: 'linear-gradient(to right, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 255) 100%)', - display: 'block', - height: '100%', - width: '10%', - border: 'none', - cursor: 'default', - borderRadius: 0, - } as CSSProperties, - leftScrollButton: { - left: 0, - transform: 'scaleX(-1)', - } as CSSProperties, - rightScrollButton: { - right: 0, - } as CSSProperties, -} +const StoriesPreview = ({ announcements, category }: StoriesPreviewProps) => ( + announcements.map((ann, i) => ( +
  • + + {ann.src?.endsWith('mp4') ? ( +
    • + )) +) -function StoriesPreview({ announcements, category }: StoriesPreviewProps) { +function StoriesPreviewCarousel({ announcements, category }: StoriesPreviewProps) { const ulElement = useRef(null) const [showScrollButtons, setShowScrollButtons] = useState({ left: false, right: false }) @@ -90,7 +63,7 @@ function StoriesPreview({ announcements, category }: StoriesPreviewProps) { } }, []) - useEffect(() => { + useLayoutEffect(() => { const ul = ulElement.current if (ul) { @@ -106,40 +79,26 @@ function StoriesPreview({ announcements, category }: StoriesPreviewProps) { } } - return
    + return
    {showScrollButtons.left && - } -
      - {useMemo(() => announcements.map((ann, i) => ( -
    • - - {ann.src?.endsWith('mp4') ? ( -
      • - )), [announcements, category])} -
    + + {announcements.length > 0 ? ( +
      + +
    + ) : ( +

    Здесь пока пусто

    + )} {showScrollButtons.right && - }
    } -export default StoriesPreview \ No newline at end of file +export default StoriesPreviewCarousel \ No newline at end of file diff --git a/front/src/styles/StoriesPreview.module.css b/front/src/styles/StoriesPreview.module.css new file mode 100644 index 0000000..769100c --- /dev/null +++ b/front/src/styles/StoriesPreview.module.css @@ -0,0 +1,56 @@ +.container { + transform: translateX(0); +} + +.list { + display: flex; + gap: 10px; + list-style-type: none; + overflow: scroll; + padding-left: 0; + scroll-behavior: smooth; +} + +.link { + text-decoration: none; + color: var(--bs-body-color); + max-width: calc(25vh * 9 / 16); + display: inline-block; +} + +.image { + height: 25vh; + object-fit: contain; + border-radius: 12px; + margin-bottom: 5px; + max-width: inherit; +} + +.title { + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 5px; +} + +.scrollButton { + position: fixed; + right: 0; + top: 0; + z-index: 100; + background: linear-gradient(to right, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 255) 100%); + display: block; + height: 100%; + width: 10%; + border: none; + cursor: default; + border-radius: 0; +} + +.leftScrollButton { + left: 0; + transform: scaleX(-1); +} + +.rightScrollButton { + right: 0; +} \ No newline at end of file From 2cfe8512f4f88c3f91355f6d76f4af9c07c2cdc0 Mon Sep 17 00:00:00 2001 From: DmitryGantimurov Date: Sat, 12 Aug 2023 01:52:47 +0300 Subject: [PATCH 3/4] delete and poem endpoints fixed --- back/api.py | 48 +++++++++++++++++++++++++---------------------- back/schemas.py | 5 +++++ back/service.py | 19 +------------------ back/utils.py | 2 +- package-lock.json | 2 +- 5 files changed, 34 insertions(+), 42 deletions(-) diff --git a/back/api.py b/back/api.py index e3fe7c8..ca359da 100644 --- a/back/api.py +++ b/back/api.py @@ -36,8 +36,8 @@ if not os.path.exists("./uploads"): os.mkdir("./uploads") app.mount("/uploads", StaticFiles(directory = "./uploads")) -# Записываем стихи в базу данных, если их еще нет (запускать только если стихов в базе нет). -# add_poems_to_db(database) +## Записываем стихи в базу данных, если их еще нет (запускать только если стихов в базе нет). +# service.add_poems_to_db(database) @app.get("/api/announcements", response_model=List[schemas.Announcement])#адрес объявлений @@ -46,7 +46,7 @@ def announcements_list(db: Annotated[Session, Depends(utils.get_db)], obsolete: # параметры для сортировки (схема pydantic schemas.SortAnnouncements) params_to_sort = schemas.SortAnnouncements(obsolete=obsolete, user_id=user_id, metro=metro, category=category) # получаем результат - result = get_query_results(db=db, schema=params_to_sort) + result = service.filter_ann(db=db, schema=params_to_sort) return result @@ -98,14 +98,20 @@ def put_in_db(name: Annotated[str, Form()], category: Annotated[str, Form()], be # Удалить объявления из базы @app.delete("/api/announcement") #адрес объявления -def delete_from_db(announcement: schemas.DelAnnouncement, db: Annotated[Session, Depends(utils.get_db)]): # функция удаления объекта из БД - try: - to_delete = db.query(models.Announcement).filter(models.Announcement.id==announcement.id).first() +def delete_from_db(announcement: schemas.DelAnnouncement, db: Annotated[Session, Depends(utils.get_db)], + current_user: Annotated[schemas.User, Depends(utils.get_current_active_user)]): # функция удаления объекта из БД + # находим объявление в бд по id + to_delete = db.query(models.Announcement).filter(models.Announcement.id==announcement.id).first() + # Проверяем, что объявление с данным id существует + if not to_delete: + raise HTTPException(status_code=404, detail="Item not found") + # Проверяем, что объявление удаляет владелец + if current_user.id == to_delete.user_id: db.delete(to_delete) # удаление из БД db.commit() # сохраняем изменения return {"Answer" : True} - except: - return {"Answer" : False} + else: + raise HTTPException(status_code=403, detail="Can't delete other user's announcements") # Забронировать объявление @@ -191,33 +197,31 @@ def add_points(user_id: int, db: Annotated[Session, Depends(utils.get_db)]): # Отправляем стихи -@app.get("/api/user/poem") # пока не работает +@app.get("/api/user/poem", response_model=schemas.Poem) # пока не работает def poems_to_front(db: Annotated[Session, Depends(utils.get_db)]): # db: Annotated[Session, Depends(utils.get_db)] - kolvo_stixov = db.query(models.Poems).count() # пока количество стихотворений = 101 - if kolvo_stixov > 1: - rand_id = random.randint(1, kolvo_stixov) # номер стихотворения - poem_json = dict() - poem = db.query(models.Poems).filter(models.Poems.id == rand_id).first() - poem_json = {"id": rand_id, "title": poem.title, "text": poem.text, "author": poem.author} - return poem_json - else: - raise HTTPException(status_code=404, detail="Poems not found") + num_of_poems = db.query(models.Poems).count() # определяем кол-во стихов в бд + rand_id = random.randint(1, num_of_poems) # генерируем номер стихотворения + poem = db.query(models.Poems).filter(models.Poems.id == rand_id).first() # находим стих в бд + if not poem: + raise HTTPException(status_code=404, detail="Poem not found") + return poem + @app.get("/api/trashbox", response_model=List[schemas.TrashboxResponse]) -def get_trashboxes(Lat:float, Lng:float, Category:str):#крутая функция для работы с api +def get_trashboxes(data: schemas.TrashboxRequest = Depends()):#крутая функция для работы с api # json, передаваемый стороннему API head = {'Authorization': 'Bearer {}'.format(service.my_token)} # Данные пользователя (местоположение, количество мусорок, которое пользователь хочет видеть) my_data={ - 'x' : f"{Lng}", - 'y' : f"{Lat}", + 'x' : f"{data.Lng}", + 'y' : f"{data.Lat}", 'limit' : '1' } list_of_category = [] # лист по которому будет отбираться uniq_trashboxes - match Category: + match data.Category: case "PORRIDGE": list_of_category=["Опасные отходы", "Иное"] case "Конспекты": diff --git a/back/schemas.py b/back/schemas.py index 88553af..80cc7e0 100644 --- a/back/schemas.py +++ b/back/schemas.py @@ -48,6 +48,7 @@ class User(BaseModel): reg_date: date disabled: Union[bool, None] = False items: list[Announcement] = [] + points: int class Config: orm_mode = True @@ -57,10 +58,14 @@ class UserInDB(User): hashed_password: str class Poem(BaseModel): + id: int title: str text: str author: str + class Config: + orm_mode = True + # Для "/api/trashbox" class TrashboxBase(BaseModel): Lat: float diff --git a/back/service.py b/back/service.py index 6228552..61f7201 100644 --- a/back/service.py +++ b/back/service.py @@ -42,26 +42,9 @@ def add_poems_to_db(db: Session): db.refresh(poem) # close the file f1.close() - - -def generate_poem(db: Session): - # генерируем 1 случайное id и выбираем объект бд с этим id - rand_id = random.randint(1, 102) - poem = db.query(models.Poems).filter(models.Poems.id == rand_id).first() - # возвращаем название и текст стихотворения - return {"name": poem.title, "text": poem.poem_text, "author":""} # добавить поле author в Poems -#Вова тестирует получение поэм, Димоны, помогите пж -# def poems_to_front(db: Annotated[Session, Depends(utils.get_db)]): -# kolvo_stixov = 109 # пока количество стихотворений = 101 -# rand_id = random.randint(1, kolvo_stixov) # номер стихотворения -# poem_json = dict() -# poem = database.query(models.Poems).filter(models.Poems.id == rand_id).first() -# poem_json = {"title": poem.title, "text": poem.text, "author":poem.author} -# return poem_json - -def get_query_results(schema: schemas.SortAnnouncements, db: Annotated[Session, Depends(utils.get_db)]): +def filter_ann(schema: schemas.SortAnnouncements, db: Annotated[Session, Depends(utils.get_db)]): """Функция для последовательного применения различных фильтров (через схему SortAnnouncements)""" res = db.query(models.Announcement) fields = schema.__dict__ # параметры передоваемой схемы SortAnnouncements (ключи и значения) diff --git a/back/utils.py b/back/utils.py index 705ccac..97652d6 100644 --- a/back/utils.py +++ b/back/utils.py @@ -88,7 +88,7 @@ async def get_current_user(db: Annotated[Session, Depends(get_db)], token: Annot if user is None: raise credentials_exception return schemas.User(id=user.id, nickname=user.nickname, name=user.name, surname=user.surname, - disabled=user.disabled, items=user.announcements, reg_date=user.reg_date) + disabled=user.disabled, items=user.announcements, reg_date=user.reg_date, points=user.points) async def get_current_active_user( diff --git a/package-lock.json b/package-lock.json index a38a69c..544905a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "porridger", + "name": "porridger_tmp", "lockfileVersion": 3, "requires": true, "packages": {} From 0aaef69a5a8ebdecc6a2fd844708f75b5ec154fa Mon Sep 17 00:00:00 2001 From: dm1sh Date: Sat, 12 Aug 2023 02:50:26 +0300 Subject: [PATCH 4/4] Trashboxes fetching fixes --- front/src/api/trashbox/index.ts | 6 +++--- front/src/components/LineDot.tsx | 2 +- front/src/components/Poetry.tsx | 2 +- front/src/hooks/api/useTrashboxes.ts | 24 ++---------------------- 4 files changed, 7 insertions(+), 27 deletions(-) diff --git a/front/src/api/trashbox/index.ts b/front/src/api/trashbox/index.ts index 7e45fa5..fb51234 100644 --- a/front/src/api/trashbox/index.ts +++ b/front/src/api/trashbox/index.ts @@ -6,9 +6,9 @@ import { Category } from '../../assets/category' const composeTrashboxURL = (position: LatLng, category: Category) => ( API_URL + '/trashbox?' + new URLSearchParams({ - lat: position.lat.toString(), - lng: position.lng.toString(), - category: category, + Lat: position.lat.toString(), + Lng: position.lng.toString(), + Category: category, }).toString() ) diff --git a/front/src/components/LineDot.tsx b/front/src/components/LineDot.tsx index 66b5ad7..dcb0778 100644 --- a/front/src/components/LineDot.tsx +++ b/front/src/components/LineDot.tsx @@ -3,7 +3,7 @@ import { colors, lineNames, lineByName } from '../assets/metro' function LineDot({ station }: { station: string }) { const line = lineByName(station) - if (line == undefined) { + if (line === undefined) { return <> } diff --git a/front/src/components/Poetry.tsx b/front/src/components/Poetry.tsx index 29659e5..10ea8db 100644 --- a/front/src/components/Poetry.tsx +++ b/front/src/components/Poetry.tsx @@ -26,7 +26,7 @@ function Poetry() { }} />

    {poetry.data.author}

    - Иллюстрация + Иллюстрация ) ) : ( diff --git a/front/src/hooks/api/useTrashboxes.ts b/front/src/hooks/api/useTrashboxes.ts index bd2929a..df88fc7 100644 --- a/front/src/hooks/api/useTrashboxes.ts +++ b/front/src/hooks/api/useTrashboxes.ts @@ -3,40 +3,20 @@ import { LatLng } from 'leaflet' import { Trashbox, isTrashboxResponse } from '../../api/trashbox/types' import useFetch, { UseFetchReturn } from '../useFetch' -import { faker } from '@faker-js/faker/locale/ru' import { Category } from '../../assets/category' -import { useMemo } from 'react' import { composeTrashboxURL, processTrashbox } from '../../api/trashbox' -function genMockTrashbox(pos: LatLng): Trashbox { - const loc = faker.location.nearbyGPSCoordinate({ origin: [pos.lat, pos.lng], radius: 1 }) - - return { - Name: faker.company.name(), - Address: faker.location.streetAddress(), - Categories: faker.lorem.words({ max: 3, min: 1 }).split(' '), - Lat: loc[0], - Lng: loc[1], - } -} - const useTrashboxes = (position: LatLng, category: Category): UseFetchReturn => ( // TODO: Remove once available // eslint-disable-next-line react-hooks/rules-of-hooks - import.meta.env.PROD ? useFetch( + useFetch( composeTrashboxURL(position, category), 'GET', true, isTrashboxResponse, processTrashbox, [], - ) : { - // eslint-disable-next-line react-hooks/rules-of-hooks - data: useMemo(() => new Array(3).fill(3).map(() => genMockTrashbox(position)), [position]), - loading: false, - error: null, - refetch: () => { return }, - } + ) ) export default useTrashboxes