Private routes, track dragging, endless scrolling, player is almost done properly

src/components/AudioHandler.js

@@ -9,8 +9,8 @@ function* audioLoadWorker({ track, playlist, indexInPlaylist }) {
   let { player } = yield select();
   if (player?.indexInPlaylist !== indexInPlaylist) {
     yield put(actionLoadAudio(track, playlist, indexInPlaylist));
+    audio.src = `${backURL}/${player?.track?.url}`;
   }
-  audio.src = `${backURL}/${player?.track?.url}`;
   if (player?.indexInPlaylist === indexInPlaylist) {
     if (player?.isPlaying) {
       yield put(actionFullPauseAudio(true));
@@ -101,7 +101,7 @@ export function* audioSetDurationWatcher() {
   yield takeEvery("FULL_SET_DURATION", audioSetDurationWorker);
 }
 
-export const actionLoadAudio = ({ track, playlist, indexInPlaylist }) => ({
+export const actionLoadAudio = (track, playlist, indexInPlaylist) => ({
   type: "LOAD_TRACK",
   track,
   playlist,

src/components/AuthCheck.js

@@ -1,9 +1,9 @@
 import { Alert } from "react-bootstrap";
 import { Link } from "react-router-dom";
 
-export const AuthCheck = ({ header }) => {
+export const AuthCheck = ({ header = "Ошибка доступа" }) => {
   return (
-    <div>
+    <div className="d-block mx-auto mt-5 container w-50">
       <Alert>
         <h2>{header}</h2>
         <p>

src/components/Main.js

@@ -7,6 +7,7 @@ import { CSearch } from "./../pages/Search";
 import { CLibrary } from "./../pages/Library";
 import { CProfile } from "./../pages/Profile";
 import { MyPlaylistTracks } from "./Playlist";
+import { CProtectedRoute, CRRoute } from "./RRoute";
 
 const Content = ({ children }) => <div className="Content">{children}</div>;
 
@@ -22,17 +23,34 @@ export const Main = () => (
   <main className="Main" style={{ height: "150vh" }}>
     <Content>
       <Switch>
-        <Route path="/" component={withRouter(PageMain)} exact />
-        <Route path="/login" component={withRouter(CLoginForm)} />
-        <Route path="/signup" component={withRouter(CSignUpForm)} />
-        <Route path="/search" component={withRouter(CSearch)} />
-        <Route path="/library" component={withRouter(CLibrary)} />
-        <Route path="/profile/:_id" component={withRouter(CProfile)} />
-        <Route
+        <CRRoute path="/" component={withRouter(PageMain)} exact />
+        <CRRoute path="/login" component={withRouter(CLoginForm)} />
+        <CRRoute path="/signup" component={withRouter(CSignUpForm)} />
+        <CProtectedRoute
+          roles={["admin", "user"]}
+          path="/search"
+          fallback="/"
+          component={withRouter(CSearch)}
+        />
+        <CProtectedRoute
+          roles={["user"]}
+          path="/library"
+          fallback="/"
+          component={withRouter(CLibrary)}
+        />
+        <CProtectedRoute
+          roles={["user"]}
+          path="/profile/:_id"
+          fallback="/"
+          component={withRouter(CProfile)}
+        />
+        <CProtectedRoute
+          roles={["user"]}
           path="/myplaylist/:_id"
+          fallback="/"
           component={withRouter(MyPlaylistTracks)}
         />
-        <Route path="" component={withRouter(Page404)} />
+        <CRRoute path="" component={withRouter(Page404)} />
       </Switch>
     </Content>
   </main>

src/components/Profile/MyProfile.js

@@ -16,7 +16,7 @@ import { Form, Alert, Row, Col, Button } from "react-bootstrap";
 import { useState } from "react";
 import { connect } from "react-redux";
 import { CUserInfo } from "./UserInfo";
-import { Loader } from "../Loader";
+import { CPreloader } from "./../Preloader";
 
 const MyProfile = ({
   id,
@@ -34,295 +34,282 @@ const MyProfile = ({
 
   return (
     <div className="ProfilePage">
-      {auth.token ? (
-        <>
-          {id === auth?.payload?.sub?.id ? (
-            promise?.myUser?.status === "RESOLVED" ? (
-              <CUserInfo id={id} />
-            ) : (
-              <Loader />
-            )
-          ) : promise?.anotherUser?.status === "RESOLVED" ? (
-            <CUserInfo id={id} />
-          ) : (
-            <Loader />
-          )}
-          {id === auth?.payload?.sub?.id ? (
-            <div className="d-block mx-auto mt-2 container w-50">
-              <h1>
-                Редактирование профиля:{" "}
-                {promise?.myUser?.payload?.nick
-                  ? promise?.myUser?.payload?.nick
-                  : "user"}
-              </h1>
-              <Spoiler
-                children={
-                  <>
-                    <br />
-                    <form
-                      action="/upload"
-                      method="post"
-                      encType="multipart/form-data"
-                      id="form"
-                    >
-                      <img
-                        className="avatarProfile"
-                        src={
-                          promise?.myUser?.payload?.avatar
-                            ? `${backURL}/${promise.myUser.payload.avatar.url}`
-                            : "https://i.ibb.co/bBxzmTm/default-avatar.jpg"
+      {id === auth?.payload?.sub?.id ? (
+        <CPreloader
+          promiseName={"myUser"}
+          promiseState={promise}
+          children={<CUserInfo id={id} />}
+        />
+      ) : (
+        <CPreloader
+          promiseName={"anotherUser"}
+          promiseState={promise}
+          children={<CUserInfo id={id} />}
+        />
+      )}
+      {id === auth?.payload?.sub?.id ? (
+        <div className="d-block mx-auto mt-2 container w-50">
+          <h1>
+            Редактирование профиля:{" "}
+            {promise?.myUser?.payload?.nick
+              ? promise?.myUser?.payload?.nick
+              : "user"}
+          </h1>
+          <Spoiler
+            children={
+              <>
+                <br />
+                <form
+                  action="/upload"
+                  method="post"
+                  encType="multipart/form-data"
+                  id="form"
+                >
+                  <img
+                    className="avatarProfile"
+                    src={
+                      promise?.myUser?.payload?.avatar
+                        ? `${backURL}/${promise.myUser.payload.avatar.url}`
+                        : "https://i.ibb.co/bBxzmTm/default-avatar.jpg"
+                    }
+                    alt="Avatar"
+                  />
+                  <CMyDropzone />
+                </form>
+              </>
+            }
+            header={<h3>Изменить аватар</h3>}
+          />
+          <Spoiler
+            children={
+              <>
+                <br />
+                <Form>
+                  {promise?.myUser?.payload?.nick === nick ? (
+                    <Alert>Никнейм не должен повторяться с предыдущим.</Alert>
+                  ) : null}
+                  {validateNickname(nick) ? null : (
+                    <Alert>
+                      Никнейм может состоять только из строчных букв и цифр,
+                      символы - и _, а так же иметь длину от 3 до 8 символов.
+                    </Alert>
+                  )}
+                  <Form.Group
+                    as={Row}
+                    className="m-2"
+                    controlId="formHorizontalEmail"
+                  >
+                    <Form.Label column sm={2}>
+                      Ваш никнейм:
+                    </Form.Label>
+                    <Col sm={10}>
+                      <Form.Control
+                        type="text"
+                        placeholder="Ваш текущий никнейм"
+                        value={
+                          promise?.myUser?.payload?.nick
+                            ? promise?.myUser?.payload?.nick
+                            : "Никнейм не установлен"
                         }
-                        alt="Avatar"
+                        disabled
                       />
-                      <CMyDropzone />
-                    </form>
-                  </>
-                }
-                header={<h3>Изменить аватар</h3>}
-              />
-              <Spoiler
-                children={
-                  <>
-                    <br />
-                    <Form>
-                      {promise?.myUser?.payload?.nick === nick ? (
-                        <Alert>
-                          Никнейм не должен повторяться с предыдущим.
-                        </Alert>
-                      ) : null}
-                      {validateNickname(nick) ? null : (
-                        <Alert>
-                          Никнейм может состоять только из строчных букв и цифр,
-                          символы - и _, а так же иметь длину от 3 до 8
-                          символов.
-                        </Alert>
-                      )}
-                      <Form.Group
-                        as={Row}
-                        className="m-2"
-                        controlId="formHorizontalEmail"
-                      >
-                        <Form.Label column sm={2}>
-                          Ваш никнейм:
-                        </Form.Label>
-                        <Col sm={10}>
-                          <Form.Control
-                            type="text"
-                            placeholder="Ваш текущий никнейм"
-                            value={
-                              promise?.myUser?.payload?.nick
-                                ? promise?.myUser?.payload?.nick
-                                : "Никнейм не установлен"
-                            }
-                            disabled
-                          />
-                        </Col>
-                      </Form.Group>
-                      <Form.Group
-                        as={Row}
-                        className="m-2"
-                        controlId="formHorizontalEmail"
-                      >
-                        <Form.Label column sm={2}>
-                          Новый никнейм:
-                        </Form.Label>
-                        <Col sm={10}>
-                          <Form.Control
-                            type="text"
-                            placeholder="Введите ваш новый никнейм"
-                            value={nick}
-                            max="8"
-                            onChange={(e) => setNickname(e.target.value)}
-                          />
-                        </Col>
-                      </Form.Group>
-                      <Form.Group as={Row} className="mb-3">
-                        <Col sm={{ span: 10, offset: 2 }} className="my-3">
-                          <Button
-                            variant="success"
-                            disabled={
-                              promise?.myUser?.payload?.nick !== nick &&
-                              validateNickname(nick)
-                                ? false
-                                : true
-                            }
-                            onClick={() =>
-                              nickUpdate({
-                                _id: promise?.myUser?.payload?._id,
-                                nick,
-                              })
-                            }
-                          >
-                            Сохранить
-                          </Button>
-                        </Col>
-                      </Form.Group>
-                    </Form>
-                  </>
-                }
-                header={<h3>Изменить никнейм</h3>}
-              />
-              <Spoiler
-                children={
-                  <>
-                    <br />
-                    <Form>
-                      {promise?.myUser?.payload?.login === login ? (
-                        <Alert>Email не должен повторяться с предыдущим.</Alert>
-                      ) : null}
-                      {validateEmail(login) ? null : (
-                        <Alert>
-                          Email должен быть в формате: email@gmail.com.
-                        </Alert>
-                      )}
-                      <Form.Group
-                        as={Row}
-                        className="m-2"
-                        controlId="formHorizontalEmail"
+                    </Col>
+                  </Form.Group>
+                  <Form.Group
+                    as={Row}
+                    className="m-2"
+                    controlId="formHorizontalEmail"
+                  >
+                    <Form.Label column sm={2}>
+                      Новый никнейм:
+                    </Form.Label>
+                    <Col sm={10}>
+                      <Form.Control
+                        type="text"
+                        placeholder="Введите ваш новый никнейм"
+                        value={nick}
+                        max="8"
+                        onChange={(e) => setNickname(e.target.value)}
+                      />
+                    </Col>
+                  </Form.Group>
+                  <Form.Group as={Row} className="mb-3">
+                    <Col sm={{ span: 10, offset: 2 }} className="my-3">
+                      <Button
+                        variant="success"
+                        disabled={
+                          promise?.myUser?.payload?.nick !== nick &&
+                          validateNickname(nick)
+                            ? false
+                            : true
+                        }
+                        onClick={() =>
+                          nickUpdate({
+                            _id: promise?.myUser?.payload?._id,
+                            nick,
+                          })
+                        }
                       >
-                        <Form.Label column sm={2}>
-                          Ваша почта:
-                        </Form.Label>
-                        <Col sm={10}>
-                          <Form.Control
-                            type="text"
-                            placeholder="Ваша текущая почта"
-                            value={promise?.myUser?.payload?.login}
-                            disabled
-                          />
-                        </Col>
-                      </Form.Group>
-                      <Form.Group
-                        as={Row}
-                        className="m-2"
-                        controlId="formHorizontalEmail"
+                        Сохранить
+                      </Button>
+                    </Col>
+                  </Form.Group>
+                </Form>
+              </>
+            }
+            header={<h3>Изменить никнейм</h3>}
+          />
+          <Spoiler
+            children={
+              <>
+                <br />
+                <Form>
+                  {promise?.myUser?.payload?.login === login ? (
+                    <Alert>Email не должен повторяться с предыдущим.</Alert>
+                  ) : null}
+                  {validateEmail(login) ? null : (
+                    <Alert>Email должен быть в формате: email@gmail.com.</Alert>
+                  )}
+                  <Form.Group
+                    as={Row}
+                    className="m-2"
+                    controlId="formHorizontalEmail"
+                  >
+                    <Form.Label column sm={2}>
+                      Ваша почта:
+                    </Form.Label>
+                    <Col sm={10}>
+                      <Form.Control
+                        type="text"
+                        placeholder="Ваша текущая почта"
+                        value={promise?.myUser?.payload?.login}
+                        disabled
+                      />
+                    </Col>
+                  </Form.Group>
+                  <Form.Group
+                    as={Row}
+                    className="m-2"
+                    controlId="formHorizontalEmail"
+                  >
+                    <Form.Label column sm={2}>
+                      Новая почта:
+                    </Form.Label>
+                    <Col sm={10}>
+                      <Form.Control
+                        type="text"
+                        placeholder="Введите вашу новую почту"
+                        value={login}
+                        onChange={(e) => setLogin(e.target.value)}
+                      />
+                    </Col>
+                  </Form.Group>
+                  <Form.Group as={Row} className="mb-3">
+                    <Col sm={{ span: 10, offset: 2 }} className="my-3">
+                      <Button
+                        variant="success"
+                        disabled={
+                          validateEmail(login) &&
+                          promise?.myUser?.payload?.login !== login
+                            ? false
+                            : true
+                        }
+                        onClick={() =>
+                          emailUpdate({
+                            _id: promise?.myUser?.payload?._id,
+                            login,
+                          })
+                        }
                       >
-                        <Form.Label column sm={2}>
-                          Новая почта:
-                        </Form.Label>
-                        <Col sm={10}>
-                          <Form.Control
-                            type="text"
-                            placeholder="Введите вашу новую почту"
-                            value={login}
-                            onChange={(e) => setLogin(e.target.value)}
-                          />
-                        </Col>
-                      </Form.Group>
-                      <Form.Group as={Row} className="mb-3">
-                        <Col sm={{ span: 10, offset: 2 }} className="my-3">
-                          <Button
-                            variant="success"
-                            disabled={
-                              validateEmail(login) &&
-                              promise?.myUser?.payload?.login !== login
-                                ? false
-                                : true
-                            }
-                            onClick={() =>
-                              emailUpdate({
-                                _id: promise?.myUser?.payload?._id,
-                                login,
-                              })
-                            }
-                          >
-                            Сохранить
-                          </Button>
-                        </Col>
-                      </Form.Group>
-                    </Form>
-                  </>
-                }
-                header={<h3>Изменить почту</h3>}
-              />
-              <Spoiler
-                children={
-                  <>
-                    <br />
-                    <Form>
-                      {password.length !== 0 ? null : (
-                        <Alert>
-                          Пожалуйста, введите свой текущий пароль в первое поле
-                          для изменения пароля.
-                        </Alert>
-                      )}
-                      {validatePassword(newPassword) ? null : (
-                        <Alert>
-                          Новый пароль должен быть от 6 символов, иметь хотя бы
-                          одну цифру и заглавную букву.
-                        </Alert>
-                      )}
-                      <Form.Group
-                        as={Row}
-                        className="m-2"
-                        controlId="formHorizontalPassword"
+                        Сохранить
+                      </Button>
+                    </Col>
+                  </Form.Group>
+                </Form>
+              </>
+            }
+            header={<h3>Изменить почту</h3>}
+          />
+          <Spoiler
+            children={
+              <>
+                <br />
+                <Form>
+                  {password.length !== 0 ? null : (
+                    <Alert>
+                      Пожалуйста, введите свой текущий пароль в первое поле для
+                      изменения пароля.
+                    </Alert>
+                  )}
+                  {validatePassword(newPassword) ? null : (
+                    <Alert>
+                      Новый пароль должен быть от 6 символов, иметь хотя бы одну
+                      цифру и заглавную букву.
+                    </Alert>
+                  )}
+                  <Form.Group
+                    as={Row}
+                    className="m-2"
+                    controlId="formHorizontalPassword"
+                  >
+                    <Form.Label column sm={2}>
+                      Пароль:
+                    </Form.Label>
+                    <Col sm={10}>
+                      <Form.Control
+                        type={passwordShown ? "text" : "password"}
+                        placeholder="Введите ваш текущий пароль"
+                        onChange={(e) => setPassword(e.target.value)}
+                      />
+                      <Button
+                        className="mt-2"
+                        variant="secondary"
+                        onClick={() => setPasswordShown(!passwordShown)}
                       >
-                        <Form.Label column sm={2}>
-                          Пароль:
-                        </Form.Label>
-                        <Col sm={10}>
-                          <Form.Control
-                            type={passwordShown ? "text" : "password"}
-                            placeholder="Введите ваш текущий пароль"
-                            onChange={(e) => setPassword(e.target.value)}
-                          />
-                          <Button
-                            className="mt-2"
-                            variant="secondary"
-                            onClick={() => setPasswordShown(!passwordShown)}
-                          >
-                            {`${passwordShown ? "Hide" : "Show"} passwords`}
-                          </Button>
-                        </Col>
-                      </Form.Group>
-                      <Form.Group
-                        as={Row}
-                        className="m-2"
-                        controlId="formHorizontalPassword"
+                        {`${passwordShown ? "Hide" : "Show"} passwords`}
+                      </Button>
+                    </Col>
+                  </Form.Group>
+                  <Form.Group
+                    as={Row}
+                    className="m-2"
+                    controlId="formHorizontalPassword"
+                  >
+                    <Form.Label column sm={2}>
+                      Новый пароль:
+                    </Form.Label>
+                    <Col sm={10}>
+                      <Form.Control
+                        type={passwordShown ? "text" : "password"}
+                        placeholder="Введите ваш новый пароль"
+                        onChange={(e) => setNewPassword(e.target.value)}
+                      />
+                    </Col>
+                  </Form.Group>
+                  <Form.Group as={Row} className="mb-3">
+                    <Col sm={{ span: 10, offset: 2 }} className="my-3">
+                      <Button
+                        variant="success"
+                        disabled={validatePassword(newPassword) ? false : true}
+                        onClick={() =>
+                          changePassword(
+                            promise?.myUser?.payload?.login,
+                            password,
+                            newPassword
+                          )
+                        }
                       >
-                        <Form.Label column sm={2}>
-                          Новый пароль:
-                        </Form.Label>
-                        <Col sm={10}>
-                          <Form.Control
-                            type={passwordShown ? "text" : "password"}
-                            placeholder="Введите ваш новый пароль"
-                            onChange={(e) => setNewPassword(e.target.value)}
-                          />
-                        </Col>
-                      </Form.Group>
-                      <Form.Group as={Row} className="mb-3">
-                        <Col sm={{ span: 10, offset: 2 }} className="my-3">
-                          <Button
-                            variant="success"
-                            disabled={
-                              validatePassword(newPassword) ? false : true
-                            }
-                            onClick={() =>
-                              changePassword(
-                                promise?.myUser?.payload?.login,
-                                password,
-                                newPassword
-                              )
-                            }
-                          >
-                            Сохранить
-                          </Button>
-                        </Col>
-                      </Form.Group>
-                    </Form>
-                  </>
-                }
-                header={<h3>Изменить пароль</h3>}
-              />
-            </div>
-          ) : null}
-        </>
-      ) : (
-        <div className="d-block mx-auto mt-2 container w-50">
-          <AuthCheck header="Ваш профиль" />
+                        Сохранить
+                      </Button>
+                    </Col>
+                  </Form.Group>
+                </Form>
+              </>
+            }
+            header={<h3>Изменить пароль</h3>}
+          />
         </div>
-      )}
+      ) : null}
     </div>
   );
 };

src/components/ProtectedRoute.js

@@ -1,20 +0,0 @@
-import { CRRoute } from "./RRoute";
-import { connect } from "react-redux";
-
-const ProtectedRoute = ({
-  fallback = "/",
-  roles = ["admin"],
-  auth,
-  component: Component,
-  ...routeProps
-}) => {
-  const WrapperComponent = (componentProps) => {
-    // let {acl} = auth?.
-    return <Component {...componentProps} />;
-  };
-  return <CRRoute {...routeProps} component={WrapperComponent} />;
-};
-
-export const CProtectedRoute = connect((state) => ({ auth: state.auth }))(
-  ProtectedRoute
-);

src/components/RRoute.js

@@ -1,5 +1,6 @@
 import { connect } from "react-redux";
-import { Route } from "react-router-dom";
+import { Route, Redirect } from "react-router-dom";
+import { AuthCheck } from "./AuthCheck";
 
 const RRoute = ({ action, component: Component, ...routeProps }) => {
   const WrapperComponent = (componentProps) => {
@@ -12,3 +13,33 @@ const RRoute = ({ action, component: Component, ...routeProps }) => {
 export const CRRoute = connect(null, {
   action: (match) => ({ type: "ROUTE", match }),
 })(RRoute);
+
+const ProtectedRoute = ({
+  fallback = "/",
+  roles = ["user"],
+  auth,
+  component: Component,
+  ...routeProps
+}) => {
+  const WrapperComponent = (componentProps) => {
+    let aclRoles = auth?.payload?.sub.acl;
+    if (localStorage?.authToken && aclRoles?.length > 0) {
+      aclRoles = aclRoles.filter((item) =>
+        roles.includes(item) ? item : null
+      );
+      if (aclRoles.length > 0) {
+        return <Component {...componentProps} />;
+      }
+    }
+    if (localStorage?.authToken) {
+      return <Component {...componentProps} />;
+    }
+    // return <Redirect to={fallback} />;
+    return <AuthCheck />;
+  };
+  return <CRRoute {...routeProps} component={WrapperComponent} />;
+};
+
+export const CProtectedRoute = connect((state) => ({ auth: state.auth }))(
+  ProtectedRoute
+);

src/pages/Auth.js

@@ -65,14 +65,6 @@ const Auth = ({ auth, promise, actionLogOut }) => {
   );
 };
 
-// <NavDropdown.Item
-// componentclass={Link}
-// href="/settings"
-// to={`/settings`}
-// >
-// Настройки
-// </NavDropdown.Item>
-
 export const CAuth = connect(
   (state) => ({ auth: state.auth, promise: state.promise }),
   {

src/pages/Library.js

@@ -1,29 +1,20 @@
 import { connect } from "react-redux";
-import { AuthCheck } from "./../components/AuthCheck";
-import { history } from "./../App";
 import { CMyPlaylists } from "../components/Playlist";
 
-const Library = ({ auth, promise }) => {
+const Library = ({ promise }) => {
   return (
     <div className="SearchPage">
-      {auth.token && history.location.pathname === "/library" ? (
-        <div className="d-block mx-auto mt-2 container w-50">
-          <h1 className="mb-3 text-center">
-            Ваша библиотека плейлистов с музыкой,{" "}
-            {promise?.myUser?.payload?.nick}
-          </h1>
-          <CMyPlaylists />
-        </div>
-      ) : (
-        <div className="d-block mx-auto mt-2 container w-50">
-          <AuthCheck header="Ваша музыка" />
-        </div>
-      )}
+      <div className="d-block mx-auto mt-2 container w-50">
+        <h1 className="mb-3 text-center">
+          Ваша библиотека плейлистов с музыкой, {promise?.myUser?.payload?.nick}
+        </h1>
+        <CMyPlaylists />
+      </div>
     </div>
   );
 };
 
 export const CLibrary = connect(
-  (state) => ({ auth: state.auth, promise: state.promise }),
+  (state) => ({ promise: state.promise }),
   null
 )(Library);

src/pages/Search.js

@@ -30,41 +30,33 @@ const SearchField = connect(null, { onChangeSearch: actionSearch })(
   }
 );
 
-const Search = ({ search, auth, promise }) => {
+const Search = ({ search, promise }) => {
   return (
     <div className="SearchPage">
-      {auth.token && history.location.pathname === "/search" ? (
-        <>
-          <div className="d-block mx-auto mt-2 container w-50">
-            <h1 className="text-center">Поиск по сайту</h1>
-            <SearchField />
-            {search?.searchResult?.payload?.payload ? (
-              <CSearchResult />
-            ) : promise?.tracks?.payload?.length !== 0 ? (
-              <>
-                <PlayerHeader />
-                <CPreloader
-                  promiseName={"tracks"}
-                  promiseState={promise}
-                  children={<CTracks tracks={promise?.tracks?.payload} />}
-                />
-              </>
-            ) : (
-              <h2 className="mt-5 text-center">
-                {promise?.myUser?.payload?.nick
-                  ? promise?.myUser?.payload?.nick
-                  : "user"}
-                , по запросу не было найдено треков.
-              </h2>
-            )}
+      <div className="d-block mx-auto mt-2 container w-50">
+        <h1 className="text-center">Поиск по сайту</h1>
+        <SearchField />
+        {search?.searchResult?.payload?.payload ? (
+          <CSearchResult />
+        ) : promise?.tracks?.payload?.length !== 0 ? (
+          <div>
+            <PlayerHeader />
+            <CPreloader
+              promiseName={"tracks"}
+              promiseState={promise}
+              children={<CTracks tracks={promise?.tracks?.payload} />}
+            />
           </div>
-          <div className="container" style={{ height: "300px" }}></div>
-        </>
-      ) : (
-        <div className="d-block mx-auto mt-2 container w-50">
-          <AuthCheck header="Поиск по сайту" />
-        </div>
-      )}
+        ) : (
+          <h2 className="mt-5 text-center">
+            {promise?.myUser?.payload?.nick
+              ? promise?.myUser?.payload?.nick
+              : "user"}
+            , по запросу не было найдено треков.
+          </h2>
+        )}
+      </div>
+      <div className="container" style={{ height: "300px" }}></div>
     </div>
   );
 };
@@ -72,7 +64,6 @@ const Search = ({ search, auth, promise }) => {
 export const CSearch = connect(
   (state) => ({
     search: state.search,
-    auth: state.auth,
     promise: state.promise,
   }),
   null

src/reducers/index.js

@@ -82,6 +82,7 @@ export const playerReducer = (
   }
 ) => {
   if (type === "LOAD_TRACK") {
+    console.log(track, playlist, indexInPlaylist);
     return {
       ...state,
       track,