Klausimai apie React

Manau, šitai puikiai atsako į tavo klausimą

Dekui, einu ziureti.

Praktiskai teisingai buvau pasidares, nezinojau kad reikia panaudoti "use" funkcijos pavadinime. Dar klausimas, ar rasomi tokie erroru checkai? Nes as juos pasidariau, kad chekinti ivarius response variantus.

.catch((error) => {
               setIsloading(false);
               if (!error.response) {
                   setError(MESSAGES_ERROR.SERVER_NOT_RESPONDING);
               } else if (
                   error.response.status === RESPONSE_STATUS.FORBIDDEN ||
                   error.response.status === RESPONSE_STATUS.UNAUTHORIZED
               ) {
                   setError(MESSAGES_ERROR.UNAUTHORIZED);
               } else {
                   setError(MESSAGES_ERROR.BAD_REQUEST);
               }
           });

use

rašomas prieš hooksus. useEffect, useState ir t.t.

Kur žadi išprintinti šiuos errorus?

use

rašomas prieš hooksus. useEffect, useState ir t.t.

Kur žadi išprintinti šiuos errorus?

Dabar pasidariau, kad jei yra eroras (backas yra down),tai isvis nekrauna to komponento. Page atrodo tvarkingai, tik be to komponento. Aisku ideja buvo pernaudoti ta custom hooksa visiems GET requestams, tai ir erorru handlinima pasidariau, jei reiktu kazkoki error response fronte daryti.

Gal keistas klausimas, bet kaip imituoti standartiniu web veikima su React. Esme, kad dabar Reacta esu sujunges su Spring Boot aplikacija. Ir viskas veikia labai greitai. Tarkim puslapiavimas, rikiavimas arba rodymas (po 10, 20..). Viskas ivyksta per dali sekundes, ir kadangi cia SPA tai reenderinasi tik komponentas. Ir toks kaip netikras veikimas :D Nes iprates matyti kaip kokia 1-2 sekundes uztrunka koks WP reloadas. Gal delay deti ir koki nors loaderi.

Gal keistas klausimas, bet kaip imituoti standartiniu web veikima su React. Esme, kad dabar Reacta esu sujunges su Spring Boot aplikacija. Ir viskas veikia labai greitai. Tarkim puslapiavimas, rikiavimas arba rodymas (po 10, 20..). Viskas ivyksta per dali sekundes, ir kadangi cia SPA tai reenderinasi tik komponentas. Ir toks kaip netikras veikimas :D Nes iprates matyti kaip kokia 1-2 sekundes uztrunka koks WP reloadas. Gal delay deti ir koki nors loaderi.

https://www.reddit.com/r/reactjs/ pabandyk užeiti ant kokio nors konkretaus post'o, iš esmės man visai patinka tas užtušavimo efektas, turinio, nežinau ar tai tavo atveju tas tiktų, kadangi toks efektas indikuoja, kad kažkas keičiasi tai tikrai vartotojo dėmesį geriau pritraukia, aišku gali kokį nors laisvai floating loader'į padaryti, bet jei jo trukmė bus 100ms tai neypatinga iš jo nauda, arba šiaip kažkokį elementą puslapyje pridėti, kadangi nežinau kaip viskas atrodo sunku pasakyti, kas geriau, gali priklausyti labai nuo turinio ir dizaino.

https://www.reddit.com/r/reactjs/ pabandyk užeiti ant kokio nors konkretaus post'o, iš esmės man visai patinka tas užtušavimo efektas, turinio, nežinau ar tai tavo atveju tas tiktų, kadangi toks efektas indikuoja, kad kažkas keičiasi tai tikrai vartotojo dėmesį geriau pritraukia, aišku gali kokį nors laisvai floating loader'į padaryti, bet jei jo trukmė bus 100ms tai neypatinga iš jo nauda, arba šiaip kažkokį elementą puslapyje pridėti, kadangi nežinau kaip viskas atrodo sunku pasakyti, kas geriau, gali priklausyti labai nuo turinio ir dizaino.

Pasidariau smooth scrooll puslapiavimui, tai jau interaktyviau atrodo, isidejau linear progress, bet realiai jis suveikia jei backas isjungtas, nes kitu atveju tai net nespeja suveikti, iskart uzloadina info. Buvau uzdejes delay 1 sekundes ant info uzkrovimo, tai viskas neblogai ziurisi, bet velgi, gaunasi, kad stbadau greitaveika.

Kazka praleidau, nors lyg atrodo teisingai. Prisijungiu prie puslapio, man rodo userio info. Atsijungiu, prisijungiu su kitu useriu, rodo ankstesnio user info. Kazkodel nesuveikia useEffect, jei keiciasi tik komponentai. Viskas suveikia jei buna page refreshas. Tikslas, kad atnaujintu info, kiekviena karta kai reenderina componenta:

const getSomeinfo = () => {
       axiosInstance
           .get(BE_ENDPOINTS.USER_PROFILE)
           .then((res) => {
               setData(res.data);
               setIsloading(false);
           })
           .catch((error) => {
               console.log(error.response);
               if (!error.response) {
                   setError(MESSAGES_ERROR.SERVER_NOT_RESPONDING);
               } else if (
                   error.response.status === RESPONSE_STATUS.FORBIDDEN ||
                   error.response.status === RESPONSE_STATUS.UNAUTHORIZED
               ) {
                   setError(MESSAGES_ERROR.UNAUTHORIZED);
               } else {
                   setError(MESSAGES_ERROR.BAD_REQUEST);
               }
               setIsloading(false);
           });
   };

   useEffect(() => {
       getSomeinfo();
   }, []);

Backe matau ivyksta requestas kai reenderina komponenta, bet info fielduose nepasikeicia.

Kazka praleidau, nors lyg atrodo teisingai. Prisijungiu prie puslapio, man rodo userio info. Atsijungiu, prisijungiu su kitu useriu, rodo ankstesnio user info. Kazkodel nesuveikia useEffect, jei keiciasi tik komponentai. Viskas suveikia jei buna page refreshas. Tikslas, kad atnaujintu info, kiekviena karta kai reenderina componenta:

 

const getSomeinfo = () => {
       axiosInstance
           .get(BE_ENDPOINTS.USER_PROFILE)
           .then((res) => {
               setData(res.data);
               setIsloading(false);
           })
           .catch((error) => {
               console.log(error.response);
               if (!error.response) {
                   setError(MESSAGES_ERROR.SERVER_NOT_RESPONDING);
               } else if (
                   error.response.status === RESPONSE_STATUS.FORBIDDEN ||
                   error.response.status === RESPONSE_STATUS.UNAUTHORIZED
               ) {
                   setError(MESSAGES_ERROR.UNAUTHORIZED);
               } else {
                   setError(MESSAGES_ERROR.BAD_REQUEST);
               }
               setIsloading(false);
           });
   };

   useEffect(() => {
       getSomeinfo();
   }, []);

 

Backe matau ivyksta requestas kai reenderina komponenta, bet info fielduose nepasikeicia.

ką daro tavo antras argumentas ([]) useEffect()? :)

ką daro tavo antras argumentas ([]) useEffect()? :)

Viskas buvo gerai su mano tuo kodu, ir viskas veikia gerai, esme pasirodo, kad tokenas kazkodel neatsinaujina axios instance. Neteisinga logika parasyta, gaunasi kad naujai prisijungus, vis dar issiuncia sena tokena, o kai refreshinu page, tada jis jau nauja tokena nusiuncia ir viskas veikia :D :D :D

Gal keistas klausimas, bet kaip imituoti standartiniu web veikima su React. Esme, kad dabar Reacta esu sujunges su Spring Boot aplikacija. Ir viskas veikia labai greitai. Tarkim puslapiavimas, rikiavimas arba rodymas (po 10, 20..). Viskas ivyksta per dali sekundes, ir kadangi cia SPA tai reenderinasi tik komponentas. Ir toks kaip netikras veikimas :D Nes iprates matyti kaip kokia 1-2 sekundes uztrunka koks WP reloadas. Gal delay deti ir koki nors loaderi.

Gali panaudoti network throttling imituodamas lėtesnį interneto greitį.

Gal kas turesite ideju kaip tai reikia atlikti. Turiu componenta, kuris ikelia po viena foto, ir ja submitina i backenda.

function MyDropzone() {
   const errorMessage = (
       <Typography color="error" variant="caption">
           {MESSAGES_ERROR.INVALID_IMAGE_FORMAT}
       </Typography>
   );

   const onDrop = useCallback((acceptedFiles) => {
       const file = acceptedFiles[0];
       const formData = new FormData();
       formData.append('file', file);

       submitProfileImage(formData);
   }, []);

   const { fileRejections, getRootProps, getInputProps, isDragActive } = useDropzone({
       onDrop,
       maxFiles: 1,
       multiple: false,
       accept: 'image/jpeg, image/png',
   });

   const fileRejectionItems = fileRejections.map(({ errors }) =>
       errors.map((e) => (
           <div key={e.code}>{e.message === 'File type must be image/jpeg, image/png' && errorMessage}</div>
       ))
   );

   return (
       <>
           <div {...getRootProps()}>
               <input {...getInputProps()} />
               {isDragActive ? (
                   <Button size="small" color="primary">
                       Vilkite nuotrauką čia...
                   </Button>
               ) : (
                   <Button size="small" color="primary">
                       Įkelti nuotrauką
                   </Button>
               )}
           </div>
           {fileRejectionItems}
       </>
   );
}

export default MyDropzone;

Si komponenta naudoju kitame komponente atvaizduoti:

const useStyles = makeStyles((theme) => ({
   root: {
       alignItems: 'center',
       display: 'flex',
       flexDirection: 'column',
   },
   avatar: {
       height: 100,
       width: 100,
       marginBottom: theme.spacing(2),
   },
}));

const ProfilePicture = ({ id: userId, name: userName, date: creationDate }) => {
   const classes = useStyles();
   const parseDate = (postdate) => {
       moment.locale('lt');
       return moment(postdate).format('LL');
   };

   return (
       <Box className={classes.root}>
           <AvatarPhoto alt={userName} id={userId} class={classes.avatar} />
           <Typography color="textPrimary" gutterBottom variant="h4">
               {userName}
           </Typography>
           <Typography color="textSecondary" gutterBottom variant="caption">
               Registracijos data: {parseDate(creationDate)}
           </Typography>
           <MyDropzone />
       </Box>
   );
};

ProfilePicture.propTypes = {
   date: PropTypes.string,
   name: PropTypes.string,
   id: PropTypes.number,
};

export default ProfilePicture;

As noriu, kad ikelus foto, kazkaip is <MyDropzone> komponentu perduoti kazkoki state i <AvatarPhoto> komponenta, kuris gaves state, refreshintu nuotrauka, neperkraudamas puslapio, bet tarkim tik reenderintusi.

Cia mano <AvatarPhoto> komponentas:

const AvatarPhoto = ({ class: AvatarStyle, alt: UserName, id: UserId }) => {
   return (
       <Avatar
           className={AvatarStyle}
           alt={UserName}
           src={`http://localhost:8080/api/public/user/${UserId}/profile-image`}
       >
           {UserName.substring(0, 1)}
       </Avatar>
   );
};

AvatarPhoto.propTypes = {
   class: PropTypes.string,
   alt: PropTypes.string,
   id: PropTypes.number,
};

export default AvatarPhoto;

Nes dabar kai ikeliu nauja profile image, foto suvaziuoja, bet nauja neatsinaujina, nes near jokio trigerio, reikia refreshinti page. Per mazai ziniu turiu su React kad isgalvoti, kaip ta padaryti. Kaip suprantu, gal reiktu kisti AvatarPhoto i useEffect, kuris fiksuotu ta change, ir realiai gaves pasikeitima is naujo uzloadinti.

ProfilePicture komponente pasidarai naudoji const [avatarUrl, setAvatarUrl] = useState('') ir saugai jame fotkės URL. Į AvatarPhoto pasiduodi avatarUrl, į MyDropzone pasiduodi setAvatarUrl, o ten tada jau ant success upload pasicallini ją su nauju URL.

ProfilePicture komponente pasidarai naudoji const [avatarUrl, setAvatarUrl] = useState('') ir saugai jame fotkės URL. Į AvatarPhoto pasiduodi avatarUrl, į MyDropzone pasiduodi setAvatarUrl, o ten tada jau ant success upload pasicallini ją su nauju URL.

Url niekada nesikeicia, nes is backo ima ta pati linka, jei tas pats vartotojas. Url keiciasi tik jei vartotojas pasikeicia. Nebent on success padavineti kazkoki kintamaji (tarkim axios response status ar dar kazka), kuris realiai uzsetintu nauja reiksme parent elemente, o tada kazkaip su useeffect dar karta pacallinti image, kad suveiktu is naujo. (nors gal nusisneku :D)

Siek tiek pakeiciau logika profile image. Padariua, kad butu bendras komponentas, kuri visi naudoja, tose vietose, kur reikia rodyti profilio foto:

const LoggedUserProfilePhoto = ({ class: AvatarStyle }) => {
   const { currentUserSession } = useContext(AuthContext);
   const userId = currentUserSession.userId;
   const basePath = API_URL;
   return <Avatar className={AvatarStyle} src={basePath + `/api/public/user/${userId}/profile-image`} />;
};

LoggedUserProfilePhoto.propTypes = {
   class: PropTypes.string,
   change: PropTypes.string,
};

export default LoggedUserProfilePhoto;

Nesugalvoju, kaip reikia teisingai trigerinti kad onUpload jis refreshintu. Jei darau paprasta useEffect, jis suveikia vaikstant tarp komponentu, kai kazkas reenderinasi. Tai kazkaip suprantu jam reikia paduoti [] pokyti:

const LoggedUserProfilePhoto = ({ class: AvatarStyle }) => {
   const { currentUserSession } = useContext(AuthContext);
   const userId = currentUserSession.userId;
   const basePath = API_URL;
   const Image = () => {
       return <Avatar className={AvatarStyle} src={basePath + `/api/public/user/${userId}/profile-image`} />;
   };

   useEffect(() => {
       <Image />;
   }, []);

   return <Image />;
};

LoggedUserProfilePhoto.propTypes = {
   class: PropTypes.string,
   change: PropTypes.string,
};

export default LoggedUserProfilePhoto;

Siek tiek pakeiciau logika profile image. Padariua, kad butu bendras komponentas, kuri visi naudoja, tose vietose, kur reikia rodyti profilio foto:

 

const LoggedUserProfilePhoto = ({ class: AvatarStyle }) => {
   const { currentUserSession } = useContext(AuthContext);
   const userId = currentUserSession.userId;
   const basePath = API_URL;
   return <Avatar className={AvatarStyle} src={basePath + `/api/public/user/${userId}/profile-image`} />;
};

LoggedUserProfilePhoto.propTypes = {
   class: PropTypes.string,
   change: PropTypes.string,
};

export default LoggedUserProfilePhoto;

 

Nesugalvoju, kaip reikia teisingai trigerinti kad onUpload jis refreshintu. Jei darau paprasta useEffect, jis suveikia vaikstant tarp komponentu, kai kazkas reenderinasi. Tai kazkaip suprantu jam reikia paduoti [] pokyti:

 

const LoggedUserProfilePhoto = ({ class: AvatarStyle }) => {
   const { currentUserSession } = useContext(AuthContext);
   const userId = currentUserSession.userId;
   const basePath = API_URL;
   const Image = () => {
       return <Avatar className={AvatarStyle} src={basePath + `/api/public/user/${userId}/profile-image`} />;
   };

   useEffect(() => {
       <Image />;
   }, []);

   return <Image />;
};

LoggedUserProfilePhoto.propTypes = {
   class: PropTypes.string,
   change: PropTypes.string,
};

export default LoggedUserProfilePhoto;

O šiaip "class" nėra reserved žodis JS kalboje? :D

O šiaip "class" nėra reserved žodis JS kalboje? :D

Geras pastebėjimas :)