Features/users

[pronovaso]

No description provided.

[adostal]

Viz komentare

[adostal]

Soubor by se mel jmenovat jako komponenta, tedy SimpleModal.tsx

[pronovaso]

opraveno

[adostal]

Ikony jdou importovat i takto:

import {Add, Delete as DeleteIcon} from '@material-ui/icons'

[pronovaso]

opraveno

[adostal]

tady je spatne import, mel by byt:

import {...} from '@material-ui/core'

[pronovaso]

opraveno

[adostal]

Tohle je fajn, akorat ti chybi datovy typ pro kontakty:

interface ContactModel {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  // tady by teoreticky mohlo bbyt cislo i string; TS ma moznost napsat takto, ze promenna muze byt dvou datovych typu
  phoneNumber: number | string;
}

const initialState = {
 contacts: [...] as ContactModel[]
}

[adostal]

ty handle metody by mely byt psany jako: handleOn..., tedy handleOnOpen, handleOnClose, apod

[pronovaso]

jasná,ukládám

[adostal]

Tohle ti hlasi chybu, protoze SimpleModal ma na props toto:

interface Props {
    readonly isOpen: boolean;
    readonly handleClose: () => void;
    readonly firstName: string;
    readonly lastName: string;
    readonly email: string;
    readonly phoneNumber: number;
    readonly children?: React.ReactNode;
    readonly contacts: {};
}

V tom pripade bys tady musel mit toto:

<SimpleModal isOpen={isOpen} handleClose={this.handleClose} contacts={contacts} firstName="" lastName="" ... />

Tedy dopsat ostatni. Ale lepsi je to udelat pres vnoreny objekt, viz komentar u modal.tsx u props

[adostal]

Ten div uz tady nepotrebujes, pokud nepocitas, ze krome modal okna zde nebude jeste neco jineho

[pronovaso]

opraveno

[adostal]

Ten props bych napsal jinak. Mas tady rozebrane jednotlive atributy uzivatele, coz by se dalo napsat radeji takto:

interface Props {
    readonly isOpen: boolean;
    readonly handleClose: () => void;
    // jednotlive atributy bych dal do vlastniho objektu
    readonly firstName: string;
    readonly lastName: string;
    readonly email: string;
    readonly phoneNumber: number;
    // children uz nepotrebujes, pridava ho samotny typ React.SFC
    readonly children?: React.ReactNode;
    // ContactModel je v druhem souboru, takze bud to dat do vlastniho a nebo v nem musis mit export
    readonly contacts: {};
}

// vysledek
interface UserModel {
    readonly id: number;
    readonly firstName: string;
    readonly lastName: string;
    readonly email: string;
    readonly phoneNumber: number;
}

interface Props {
    readonly isOpen: boolean;
    readonly handleClose: () => void;
    // pouzijes UserModel a Pick, ktery vynecha povinne ID, ktere tady nechces
    readonly user: Pick<UserModel, 'id'>;
    readonly contacts: ContactModel[];
}

na strane JSX pouziti to bude takto:

<SimpleModal isOpen={isOpen} handleClose={this.handleClose} contacts={contacts} user={user} />

ten user nekde musis inicializovat, takze bud tady a nebo az v SimpleModal, cimz ho pak nepotrebujes vubec jako atribut od parenta UsersIndexPage.tsx

[adostal]

Tenhle nazev moc nerika, co vlastne dela. Chtelo by to jiny. Navic se to pouziva tak, ze v props, coz jde do atributu je to takto: onClick, onClickEdit, onClickDelete, apod. V pripade implementace se pak pouziva nazev: handleOnClickDelete, apod.

[adostal]

Tady bys nemel potrebovat funkci, co vraci funkci