[ee05663] | 1 | import React, { useContext, useReducer, useState } from "react";
|
---|
| 2 | import { Helmet } from "react-helmet-async";
|
---|
| 3 | import { Store } from "../Store";
|
---|
| 4 | import Form from "react-bootstrap/Form";
|
---|
| 5 | import Button from "react-bootstrap/Button";
|
---|
| 6 | import { toast } from "react-toastify";
|
---|
| 7 | import { getError } from "../components/utils";
|
---|
| 8 | import axios from "axios";
|
---|
| 9 |
|
---|
| 10 | const reducer = (state, action) => {
|
---|
| 11 | switch (action.type) {
|
---|
| 12 | case "UPDATE_REQUEST":
|
---|
| 13 | return { ...state, loadingUpdate: true };
|
---|
| 14 | case "UPDATE_SUCCSS":
|
---|
| 15 | return { ...state, loadingUpdate: false };
|
---|
| 16 | case "UPDATE_FAIL":
|
---|
| 17 | return { ...state, loadingUpdate: false };
|
---|
| 18 | default:
|
---|
| 19 | return state;
|
---|
| 20 | }
|
---|
| 21 | };
|
---|
| 22 |
|
---|
| 23 | function ProfileScreen() {
|
---|
| 24 | const { state, dispatch: ctxDispatch } = useContext(Store);
|
---|
| 25 | const { userInfo } = state;
|
---|
| 26 |
|
---|
| 27 | const [name, setName] = useState(userInfo.name);
|
---|
| 28 | const [contact, setContact] = useState(userInfo.contact);
|
---|
| 29 | const [email, setEmail] = useState(userInfo.email);
|
---|
| 30 | const [password, setPassword] = useState("");
|
---|
| 31 | const [confirmPassword, setConfirmPassword] = useState("");
|
---|
| 32 |
|
---|
| 33 | const [{ loadingUpdate }, dispatch] = useReducer(reducer, {
|
---|
| 34 | loadingUpdate: false,
|
---|
| 35 | });
|
---|
| 36 |
|
---|
| 37 | const submitHandler = async (e) => {
|
---|
| 38 | e.preventDefault();
|
---|
| 39 | try {
|
---|
| 40 | const { data } = await axios.put(
|
---|
| 41 | "/api/users/profile",
|
---|
| 42 | {
|
---|
| 43 | name,
|
---|
| 44 | contact,
|
---|
| 45 | email,
|
---|
| 46 | password,
|
---|
| 47 | },
|
---|
| 48 | {
|
---|
| 49 | headers: { Authorization: `Bearer ${userInfo.token}` },
|
---|
| 50 | }
|
---|
| 51 | );
|
---|
| 52 | dispatch({ type: "UPDATE_SUCCESS" });
|
---|
| 53 | ctxDispatch({ type: "USER_SIGNIN", payload: data });
|
---|
| 54 | localStorage.setItem("userInfo", JSON.stringify(data));
|
---|
| 55 | toast.success("Успешно ажурирање");
|
---|
| 56 | } catch (err) {
|
---|
| 57 | dispatch({ type: "FETCH_FAIL" });
|
---|
| 58 | toast.error(getError(err));
|
---|
| 59 | }
|
---|
| 60 | };
|
---|
| 61 |
|
---|
| 62 | return (
|
---|
| 63 | <div className="pageContainer shipPC">
|
---|
| 64 | <Helmet>
|
---|
| 65 | <title>Мој профил</title>
|
---|
| 66 | </Helmet>
|
---|
| 67 | <h1>Моите податоци</h1>
|
---|
| 68 | <Form onSubmit={submitHandler} className="formCointainer">
|
---|
| 69 | <Form.Group controlId="name">
|
---|
| 70 | <Form.Label>Име и Презиме</Form.Label>
|
---|
| 71 | <Form.Control
|
---|
| 72 | value={name}
|
---|
| 73 | style={{ textAlign: "left" }}
|
---|
| 74 | required
|
---|
| 75 | onChange={(e) => setName(e.target.value)}
|
---|
| 76 | />
|
---|
| 77 | </Form.Group>
|
---|
| 78 | <Form.Group controlId="contact">
|
---|
| 79 | <Form.Label>Телефон</Form.Label>
|
---|
| 80 | <Form.Control
|
---|
| 81 | value={contact}
|
---|
| 82 | type="text"
|
---|
| 83 | required
|
---|
| 84 | onChange={(e) => setContact(e.target.value)}
|
---|
| 85 | />
|
---|
| 86 | </Form.Group>
|
---|
| 87 | <Form.Group controlId="email">
|
---|
| 88 | <Form.Label>Email</Form.Label>
|
---|
| 89 | <Form.Control
|
---|
| 90 | value={email}
|
---|
| 91 | type="email"
|
---|
| 92 | required
|
---|
| 93 | onChange={(e) => setEmail(e.target.value)}
|
---|
| 94 | />
|
---|
| 95 | </Form.Group>
|
---|
| 96 | <Form.Group controlId="password">
|
---|
| 97 | <Form.Label>Лозинка</Form.Label>
|
---|
| 98 | <Form.Control
|
---|
| 99 | type="password"
|
---|
| 100 | required
|
---|
| 101 | onChange={(e) => setPassword(e.target.value)}
|
---|
| 102 | />
|
---|
| 103 | </Form.Group>
|
---|
| 104 | <Form.Group controlId="confirmPassword">
|
---|
| 105 | <Form.Label>Потврди Лозинка</Form.Label>
|
---|
| 106 | <Form.Control
|
---|
| 107 | type="password"
|
---|
| 108 | required
|
---|
| 109 | onChange={(e) => setConfirmPassword(e.target.value)}
|
---|
| 110 | />
|
---|
| 111 | </Form.Group>
|
---|
| 112 | <div className="submitBtnContainer">
|
---|
| 113 | <Button variant="danger" size="lg" type="submit">
|
---|
| 114 | Ажурирај
|
---|
| 115 | </Button>
|
---|
| 116 | </div>
|
---|
| 117 | </Form>
|
---|
| 118 | </div>
|
---|
| 119 | );
|
---|
| 120 | }
|
---|
| 121 |
|
---|
| 122 | export default ProfileScreen;
|
---|