[BRmedia]

Czy mogę prosić o #codereview małej apki na #react?

git

#javascript #naukaprogramowania

[c.....s]

@BRmedia: w livedemo przy wyszukiwaniu np "harry potter" i chwili scrollowania, wszystko znika, biała strona ( ͡° ͜ʖ ͡°)

[BRmedia]

@cohontes: thx

[joolekk]

@Rst00: co do pierwszego punktu się nie zgadzam. Bardzo często ustawienia dotyczące języka są napisane właśnie w danym języku, mamy więc listę w stylu: English, Deutsch, Francois, polski

chiński, japoński, rosyjski, ukraiński, itp też są zapisane własnym alfabetem

[c.....s]

@joolekk: zgadzam się jak najbardziej :) po co komu byłoby "polish" jeśli i tak chce oglądać w j. polskim?
tutaj pierwszy z góry przykład

[BRmedia]

3. W BooksList ten return z Bookiem wygląda źle i różni się tylko jednym propsem - ja to bym ogarnął jednym returnem z dynamicznym propsem albo wyrzucił te propsy do osobnej stałej i zrobił destrukturyzację

@Rst00: mógłbyś mi to proszę rozjaśnić?

[D.....k]

@BRmedia:

const savedClass = 'book--saved';
 const localStorageName = 'books';

Do

[BRmedia]

Dodatkowo zarządzanie klasami zrób za pomocą className

@Dreszczyk: w sensie?

[D.....k]

@BRmedia: to znaczy, że nie rób refa tylko po to, żeby zmienić tę klasę (czystym jsem) tylko raczej coś takiego:

const [bookSaved, setBookSaved] = useState(false);

handleSaveBook(id, e)} className={bookSaved && 'book--saved'}>

[D.....k]

@BRmedia: a ta paczka: https://www.npmjs.com/package/classnames

pozwoli Ci zrobić coś takiego:

[Rst00]

@BRmedia:

no masz tam

return 
 }

[wybacz]

@BRmedia:

oprocz tego co napisali koledzy wyzej:

- brak nawiasow przy ifach jednolinjkowych (najlepiej dodaj rule w eslint zeby ci krzyczalo)
-

[Colos]

@BRmedia: Granulacja jest trochę za mała, przez to masz bałagan.

https://github.com/browinskipl/BookLibrary/blob/4c3f5198da7018e93a06ae04b278c0a62330bc90/src/hooks/useBookSearch.js#L6

Wydzieliłbym tu osobno hooka do obsługi http i osobno samą logikę searcha, który zwróci dane. Dane bezpośrednio z serwera trzymałbym w stanie a takie flagi jak setHasMore(res.data.items.length > 0). Powinny być w helperach obok jako funckja i po prostu korzystać z surowych, ewentualnie wstępnie obrobionych danych z serwera. No i przede wszystkim w oóle nie korzystasz z "totalItems" które zwraca serwer.

[Colos]

@BRmedia: co do pisania komponentów mam prostą zasadę

useWrappedGenericApiOrExternalApi - najpierw hooki które obsługują mi wszystko, co związane z efektami ubocznymi. Jakieś API przeglądarki, czy requesty do serwera w jak najbardziej czytelny sposób.

useOneOfFooFunctionality - tutaj już bardziej domenowy hook, który korzysta z powyższych hooków, ale już używam w nim pojęć związanych z problemem który