Katselmointi

[Jakousa]

Katselmointi

Sivuston käytettävyys

Mitä tein

• 15.6.2019 klo ~12:20

• Käytin sovellusta kirjautumatta

  • Katselin listausta ja klikkailin lisätietoja auki sekä mobiililla että webillä

• Käytin sovellusta omalla tunnuksella rekisteröidyttyäni

  • Tein varauksen ja poistin varauksen

• Käytin sovellusta annetulla breeder tunnuksella.

  • Tein uuden poikueen tulevaisuuteen ja poistin sen. Kokeilin myös tehdä menneisyyteen

Kokemus

• Hyvä README.md, voisit vielä lisätä development ympäristön asennusohjeet ja deploystäkin pari sanaa.

• Harmi oli että sivun päivitys johti aina takaisin etusivulle. Tai /user sivulla sivun päivitys johtaa "Error, server is not responding..." viestiin.

• Toisena ongelmana vaikutti ettei varauksen tehnyt nähnyt omia varauksiaan mitenkään kätevästi vaan joutui muistamaan minkä oli mennyt varaamaan.

• Lisäisin harmaan backgroundin listalle jossa opacityä jotta listan teksti ei katoa taustakuvaan.

• Erinomainen toiminnallisuus, enter login varaukset selkeitä, varmistus poiston yhteydessä 👍 👍 👍

Koodi

• Kansiorakenne selkeä, myös tiedostot selkeästi nimettyjä 😍
• Selkeästi nimetyt tiedostot. :thumbsup:
• Sentry 😍 😍 Saitkin varmasti jo tuon /user sivun latauksen errorin sinne.
• frontin index.js on melko suuri ja monimutkainen tiedosto, kannattanee jakaa se pienempiin osiin.
• Importeissa kannattaa pitää tietty järjestys, ensin npm moduulit, sen jälkeen omat
  • esim nyt LitterList.js tiedostossa on näin:

import React, { useState } from 'react'
import { useQuery, useSubscription } from 'react-apollo-hooks'
import { LitterForm, Litter, Pagination, Loading } from '..'
import { toast } from 'react-toastify'

import {
  ALL_LITTERS,
  LITTER_ADDED,
  LITTER_UPDATED,
} from '../../graphql/litters'

kun kannattaa suosia tämmöistä järjestystä

import React, { useState } from 'react'
import { toast } from 'react-toastify'
import { useQuery, useSubscription } from 'react-apollo-hooks'

import {
  ALL_LITTERS,
  LITTER_ADDED,
  LITTER_UPDATED,
} from '../../graphql/litters'
import { LitterForm, Litter, Pagination, Loading } from '..'

asian voi huomata eslint asetuksilla. Mutta siirtyy helposti makuasioihin (aakkosjärjestys vai pituusjärjestys jne.)

• https://github.com/simosavonen/pentutehdas/blob/c3329c54c8a9f91d983f6ee4fd4b0a71cc901149/client/src/components/Litter/LitterDetails.js returnin sisällä tapahtuu aika paljon logiikkaa. Kannustaisin jakamaan myös sen useampaan osaan. Mahdollisesti jo tiedossa, mutta suosittelen lukaisemaan https://reactjs.org/docs/conditional-rendering.html kertomat vaihtoehdot.

• Pidän erityisesti ratkaisusta tehdä komponenteille index.js tiedosto. Suosittelisin kuitenkin käyttämään webpackin resolvea jos uskaltautuu ajamaan ejectin frontissa: https://webpack.js.org/configuration/resolve/

Kokonaisuus

• Ongelmia joutui etsimällä etsiä - yksi bugi kuitenkin löytyi.
• Työhön on selkeästi käytetty aikaa ja ajatusta, ja se näkyy: projektin ulkonäkö, koodin laatu ja dokumentaatio erinomaista.
• Tämähän on lähes tuotantoon valmis! Käännökset ja google analytics tai muu vastaava käyttäjien seuranta vain puuttuu. Pari vaihtoehtoa käännöskirjastoihin: https://www.npmtrends.com/react-intl-vs-react-i18next

🐕 / 🐶

[simosavonen]

Menee ihan hämilleen kun joku noin tarkkaan katsoo tuotostasi, tottunut saamaan "työ hyväksytty" kumileimasinpalautteita.

Nyt kun työ on "valmis" ja ehtinyt sohvanpohjalta miettimään miten tekisin seuraavan, ettei tule moisia pitkiä ehtorakenteita komponenttien sisään, niin...

Alussa tuli paha designvirhe, kun loin niitä käyttäjäluokkia, ja suunnittelin komponentit paljastamaan lisää nappeja sen mukaan minkä tasoinen käyttäjä on kirjautuneena. Parempi kai olisi, että yksi komponentti tekee rajatun osuuden ja esim. kennelinomistajat ja pääkäyttäjät näkevät kokonaan eri komponentit, jotka nekin suunniteltu juuri heitä varten.

Muutenkin koko ajatus siitä, että suuri yleisö ei saisi lisätä koiriaan myyntiin, että vain breeder luokkaan ylennetyille se sallittaisiin, on taloudellisesti järjetön. Sivu ei tosin toimisi jos kuka vaan saisi lisätä pentueen ja niitä olisi sitämyötä satoja listalla. Kunnon suodatukset ym. puuttuu.

Kommentteja

• Hyvä README.md, voisit vielä lisätä development ympäristön asennusohjeet ja deploystäkin pari sanaa.

  • Pitää miettiä nuo asennusohjeet sellaisiksi, ettei ne vaadi tilien luontia erinäisiin palveluihin. Että omalla koneellaan saa sivun pyörimään ja tiedot tallentumaan kantaan. Asetuksista pois viittaukset Sentryyn ym.

• Harmi oli että sivun päivitys johti aina takaisin etusivulle. Tai /user sivulla sivun päivitys johtaa "Error, server is not responding..." viestiin.

  • Ei tullut mieleen testata mitä tapahtuu jos sivua "käyttää väärin" ja lataa sen uudelleen. Näköjään se unohtaa millä sivulla oltiin, ja /user ei onnistu lataamaan käyttäjän tietoja uudelleen. Aika paha.

• Toisena ongelmana vaikutti ettei varauksen tehnyt nähnyt omia varauksiaan mitenkään kätevästi vaan joutui muistamaan minkä oli mennyt varaamaan.

  • Todellakin, ehdottomasti tarvitaan "your reservations" komponentti.

Kiitos vaivannäöstä ja vinkit käyttöön. Heti testaamaan webpack resolvea ja mitä se eject tekee.

[simosavonen]

• Harmi oli että sivun päivitys johti aina takaisin etusivulle. Tai /user sivulla sivun päivitys johtaa "Error, server is not responding..." viestiin.

bd3acecb24744bc76307d78e5d1a58ec29078a0b Olikin sellainen bugi, että kun user latautuu contextista omaa tahtiaan, niin sivu ehti jo renderöidä Redirect-komponentin, kun user oli vielä null. Näytetään mieluummin tiedote, että useria ladataan, tai että sivu on tarkoitettu kirjautuneille.

Ja sivulla /user oli aiheeseen liittyvä null pointer bugi, korjaantui asettamalle lomakkeen kentät viivästetysti useEffectin avulla.