some fixes

src/Components/Player/Player.jsx

@@ -75,7 +75,7 @@ const Player = () => {
                 <div className="footer">
                     <div className="info">
                         <p className="track-name">{title ?? "Here is track"}</p>
-                        <p className="playlist-name">Here is playlist</p>
+                        <p className="playlist-name">{state.queue?.name ?? "Here is playlist"}</p>
                     </div>
                     <div className="main-buttons">
                         <img className="shuffle-button" src={ShuffleIcon} />

src/Pages/Login/Login.jsx

@@ -12,10 +12,10 @@ import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
-import CircularProgress from "@mui/material/CircularProgress";
 import MuiAlert from "@mui/material/Alert";
 import Snackbar from "@mui/material/Snackbar";
-import validator from "validator";
+import { createSelector } from "reselect";
+import { useForm } from "react-hook-form";
 
 const theme = createTheme({
     palette: {
@@ -27,28 +27,21 @@ const Alert = React.forwardRef(function Alert(props, ref) {
     return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
 });
 
-const Login = () => {
-    const { status, authToken } = useSelector((state) => state.auth);
+const authState = createSelector(
+    (state) => state.auth,
+    (auth) => auth
+);
 
+const Login = () => {
     const dispatch = useDispatch();
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [error, setError] = useState(false);
+    const { status, authToken } = useSelector(authState);
+    const { register, handleSubmit, reset } = useForm();
 
-    const handleSubmit = (e) => {
-        e.preventDefault();
-
-        let isValid =
-            [
-                validator.isEmail(email),
-                validator.isLength(email, { min: 6, max: 30 }),
-                validator.isLength(password, { min: 6 }),
-            ].find((el) => el === false) ?? true;
-
-        isValid ? dispatch(actionLogin(email, password)) : setError(true);
+    const [error, setError] = useState(false);
 
-        setEmail("");
-        setPassword("");
+    const submitHandler = ({ email, password }) => {
+        dispatch(actionLogin(email, password)); 
+        reset();
     };
 
     const handleClose = (event, reason) => {
@@ -90,7 +83,7 @@ const Login = () => {
                     </Typography>
                     <Box
                         component="form"
-                        onSubmit={handleSubmit}
+                        onSubmit={handleSubmit(submitHandler)}
                         noValidate
                         sx={{ mt: 1 }}
                     >
@@ -103,7 +96,7 @@ const Login = () => {
                             name="email"
                             autoComplete="email"
                             autoFocus
-                            onChange={(e) => setEmail(e.target.value)}
+                            {...register("email", { required: true })}
                         />
                         <TextField
                             margin="normal"
@@ -114,7 +107,7 @@ const Login = () => {
                             type="password"
                             id="password"
                             autoComplete="current-password"
-                            onChange={(e) => setPassword(e.target.value)}
+                            {...register("password", { required: true })}
                         />
 
                         <Button

src/Pages/Register/Register.jsx

@@ -15,8 +15,9 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
 import CircularProgress from "@mui/material/CircularProgress";
 import MuiAlert from "@mui/material/Alert";
 import Snackbar from "@mui/material/Snackbar";
-import validator from "validator";
 import { createSelector } from "reselect";
+import { STATUSES } from "../../utils/constants";
+import { useForm } from "react-hook-form";
 
 const theme = createTheme({
     palette: {
@@ -36,26 +37,14 @@ const authState = createSelector(
 const Register = () => {
     const dispatch = useDispatch();
     const navigate = useNavigate();
+    const { register, handleSubmit, reset } = useForm();
     const { status, authToken } = useSelector(authState);
 
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
     const [error, setError] = useState(false);
 
-    const handleSubmit = (e) => {
-        e.preventDefault();
-
-        let isValid =
-            [
-                validator.isEmail(email),
-                validator.isLength(email, { min: 6, max: 30 }),
-                validator.isLength(password, { min: 6 }),
-            ].find((el) => el === false) ?? true;
-
-        isValid ? dispatch(actionRegister(email, password)) : setError(true);
-
-        setEmail("");
-        setPassword("");
+    const submitHandler = ({ email, password }) => {
+        dispatch(actionRegister(email, password));
+        reset();
     };
 
     const handleClose = (event, reason) => {
@@ -63,7 +52,7 @@ const Register = () => {
         setError(false);
     };
 
-    if (status === "SUCCESS") {
+    if (status === STATUSES.SUCCESS) {
         setTimeout(() => {
             return navigate("/login");
         }, 2000);
@@ -86,7 +75,7 @@ const Register = () => {
                 </Alert>
             </Snackbar>
             <Snackbar
-                open={status === "SUCCESS"}
+                open={status === STATUSES.SUCCESS}
                 autoHideDuration={6000}
                 onClose={handleClose}
             >
@@ -108,7 +97,7 @@ const Register = () => {
                         alignItems: "center",
                     }}
                 >
-                    {status === "PENDING" ? (
+                    {status === STATUSES.PENDING ? (
                         <CircularProgress />
                     ) : (
                         <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
@@ -122,7 +111,7 @@ const Register = () => {
 
                     <Box
                         component="form"
-                        onSubmit={handleSubmit}
+                        onSubmit={handleSubmit(submitHandler)}
                         noValidate
                         sx={{ mt: 1 }}
                     >
@@ -133,16 +122,15 @@ const Register = () => {
                             label="Email Address"
                             name="email"
                             autoFocus
-                            onChange={(e) => setEmail(e.target.value)}
+                            {...register("email", { required: true })}
                         />
                         <TextField
                             margin="normal"
-                            required
                             fullWidth
                             name="password"
                             label="Password"
                             type="password"
-                            onChange={(e) => setPassword(e.target.value)}
+                            {...register("password", { required: true })}
                         />
 
                         <Button

src/Pages/Upload/Upload.jsx

@@ -8,6 +8,7 @@ import {
     actionUploadTracks,
 } from "../../redux/actions/creators/upload";
 import { createSelector } from "reselect";
+import { LIMIT } from "../../utils/constants";
 
 const baseStyle = {
     flex: 1,
@@ -54,7 +55,7 @@ const Upload = () => {
         isDragAccept,
         isDragReject,
     } = useDropzone({
-        maxFiles: 15,
+        maxFiles: LIMIT.MAX_FILES_DROPZONE,
         accept: {
             "audio/*": [],
         },

src/redux/actions/creators/auth.js

@@ -1,34 +1,35 @@
+import { STATUSES } from "../../../utils/constants";
 import { getGQL } from "../../../utils/getGQL";
 import { registerQuery, loginQuery } from "../../../utils/graphQueries";
 import types from "../types";
 
 const actionRegisterPending = () => ({
     type: types.REGISTER_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const actionRegisterSuccess = (payload) => ({
     type: types.REGISTER_SUCCESS,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
     payload,
 });
 const actionRegisterFail = (error) => ({
     type: types.REGISTER_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
     error,
 });
 
 const actionLoginPending = () => ({
     type: types.LOGIN_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const actionLoginSuccess = (payload) => ({
     type: types.LOGIN_SUCCESS,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
     payload,
 });
 const actionLoginFail = (error) => ({
     type: types.LOGIN_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
     error,
 });
 

src/redux/actions/creators/playlists.js

@@ -1,4 +1,4 @@
-import { LIMIT, ROUTES } from "../../../utils/constants";
+import { LIMIT, ROUTES, STATUSES } from "../../../utils/constants";
 import { getGQL } from "../../../utils/getGQL";
 import {
     createPlaylistQuery,
@@ -13,94 +13,94 @@ import types from "../types";
 
 const createPlaylistPending = () => ({
     type: types.CREATE_PLAYLIST_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const createPlaylistSuccess = (id) => ({
     type: types.CREATE_PLAYLIST_SUCCESS,
     payload: id,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const createPlaylistFail = () => ({
     type: types.CREATE_PLAYLIST_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 const getPlaylistsCountPending = () => ({
     type: types.GET_PLAYLISTS_COUNT_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const getPlaylistsCountSuccess = (value) => ({
     type: types.GET_PLAYLISTS_COUNT_SUCCESS,
     payload: value,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const getPlaylistsCountFail = () => ({
     type: types.GET_PLAYLISTS_COUNT_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 const getPlaylistsPending = () => ({
     type: types.GET_PLAYLISTS_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const getPlaylistsSuccess = (playlists) => ({
     type: types.GET_PLAYLISTS_SUCCESS,
     payload: playlists,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const getPlaylistsFail = () => ({
     type: types.GET_PLAYLISTS_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 const getPlaylistByIdPending = () => ({
     type: types.GET_PLAYLIST_BY_ID_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const getPlaylistByIdSuccess = (playlist) => ({
     type: types.GET_PLAYLIST_BY_ID_SUCCESS,
     payload: playlist,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const getPlaylistByIdFail = () => ({
     type: types.GET_PLAYLIST_BY_ID_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 const upsertPlaylistInfoPending = () => ({
     type: types.PLAYLIST_UPSERT_INFO_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const upsertPlaylistInfoSuccess = (playlist) => ({
     type: types.PLAYLIST_UPSERT_INFO_SUCCESS,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
     payload: playlist,
 });
 const upsertPlaylistInfoFail = () => ({
     type: types.PLAYLIST_UPSERT_INFO_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 const removeTrackFromPlaylistPending = () => ({
     type: types.REMOVE_TRACK_FROM_PLAYLIST_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const removeTrackFromPlaylistSuccess = (tracks, playlistId) => ({
     type: types.REMOVE_TRACK_FROM_PLAYLIST_SUCCESS,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
     payload: { tracks, playlistId },
 });
 const removeTrackFromPlaylistFail = () => ({
     type: types.REMOVE_TRACK_FROM_PLAYLIST_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 const addTrackToPlaylistPending = () => ({
     type: types.ADD_TRACK_TO_PLAYLIST_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const addTrackToPlaylistSuccess = (tracks) => ({
     type: types.ADD_TRACK_TO_PLAYLIST_SUCCESS,
     payload: tracks,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const addTrackToPlaylistFail = () => ({
     type: types.ADD_TRACK_TO_PLAYLIST_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 
 export const actionCreatePlaylist = (navigate) => (dispatch) => {

src/redux/actions/creators/profile.js

@@ -1,3 +1,4 @@
+import { STATUSES } from "../../../utils/constants";
 import { getGQL } from "../../../utils/getGQL";
 import { getGQL_Upload } from "../../../utils/getGQL_Upload";
 import { changePasswordQuery } from "../../../utils/graphQueries";
@@ -6,15 +7,15 @@ import types from "../types";
 
 const changePasswordPending = () => ({
     type: types.CHANGE_PASSWORD_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const changePasswordSuccess = () => ({
     type: types.CHANGE_PASSWORD_SUCCESS,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const changePasswordFail = () => ({
     type: types.CHANGE_PASSWORD_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 
 export const actionGetProfileData = () => {

src/redux/actions/creators/tracks.js

@@ -1,4 +1,4 @@
-import { LIMIT } from "../../../utils/constants";
+import { LIMIT, STATUSES } from "../../../utils/constants";
 import { getGQL } from "../../../utils/getGQL";
 import {
     deleteTrackById,
@@ -10,54 +10,54 @@ import types from "../types";
 
 const actionGetTracksPending = () => ({
     type: types.GET_TRACKS_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const actionGetTracksSuccess = (tracks) => ({
     type: types.GET_TRACKS_SUCCESS,
     payload: tracks,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const actionGetTracksFail = () => ({
     type: types.GET_TRACKS_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 const actionGetTracksCountPending = () => ({
     type: types.GET_TRACKS_COUNT_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const actionGetTracksCountSuccess = (value) => ({
     type: types.GET_TRACKS_COUNT_SUCCESS,
     payload: value,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const actionGetTracksCountFail = () => ({
     type: types.GET_TRACKS_COUNT_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 const actionDeleteTracksPending = () => ({
     type: types.DELETE_TRACKS_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const actionDeleteTracksSuccess = () => ({
     type: types.DELETE_TRACKS_SUCCESS,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const actionDeleteTracksFail = () => ({
     type: types.DELETE_TRACKS_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 
 const actionUploadTracksPending = () => ({
     type: types.UPLOAD_TRACKS_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const actionUploadTracksSuccess = () => ({
     type: types.UPLOAD_TRACKS_SUCCESS,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const actionUploadTracksFail = () => ({
     type: types.UPLOAD_TRACKS_FAIL,
-    status: "FAIL",
+    status: STATUSES.FAIL,
 });
 
 export const actionUploadOpen = () => ({

src/redux/actions/creators/upload.js

@@ -1,17 +1,18 @@
+import { STATUSES } from "../../../utils/constants";
 import { getGQL_Upload } from "../../../utils/getGQL_Upload";
 import types from "../types";
 
 const actionUploadTracksPending = () => ({
     type: types.UPLOAD_TRACKS_PENDING,
-    status: "PENDING",
+    status: STATUSES.PENDING,
 });
 const actionUploadTracksSuccess = () => ({
     type: types.UPLOAD_TRACKS_SUCCESS,
-    status: "SUCCESS",
+    status: STATUSES.SUCCESS,
 });
 const actionUploadTracksFail = () => ({
     type: types.UPLOAD_TRACKS_FAIL,
-    status: "FAIL",
+    status: STATUSES.SUCCESS,
 });
 
 export const actionUploadOpen = () => ({

src/redux/reducers/tracksReducer.js

@@ -1,3 +1,4 @@
+import { STATUSES } from "../../utils/constants";
 import types from "../actions/types";
 
 const initialState = {
@@ -67,17 +68,17 @@ const tracksReducer = (state = initialState, action) => {
             return { ...state, toDelete: newArr };
 
         case types.DELETE_TRACKS_PENDING:
-            return { ...state, status: "PENDING" };
+            return { ...state, status: STATUSES.PENDING };
 
         case types.DELETE_TRACKS_SUCCESS:
             const toDeleteSet = new Set(state.toDelete);
             const newTracks = state.tracks.filter(
                 (track) => !toDeleteSet.has(track._id)
             );
-            return { ...state, tracks: newTracks, status: "SUCCESS", toDelete: [] };
+            return { ...state, tracks: newTracks, status: STATUSES.PENDING, toDelete: [] };
 
         case types.DELETE_TRACKS_FAIL:
-            return { ...state, status: "FAIL" };
+            return { ...state, status: STATUSES.PENDING };
 
         default:
             return state;

src/utils/constants.js

@@ -9,9 +9,16 @@ export const ROUTES = {
     UPLOAD: "/upload",
 };
 
+export const STATUSES = {
+    PENDING: "PENDING",
+    SUCCESS: "SUCCESS",
+    FAIL: "FAIL",
+}
+
 export const LIMIT = {
     TRACKS_ON_PAGE: 20,
     PLAYLISTS_ON_PAGE: 5,
+    MAX_FILES_DROPZONE: 15,
 };
 
 export const DEFAULT_NAMING = {