red2

my-project/src/App.js

@@ -10,8 +10,8 @@ import {Provider, connect}   from 'react-redux';
 ////////////////////////////////////////////
 import thunk from 'redux-thunk';
 import {createStore, combineReducers, applyMiddleware} from 'redux';
-import myReducers from "./components/reducers";
-import actionCreators from "./components/actionCreators";
+import myReducers from "./components/Reducers";
+import ActionCreators from "./components/ActionCreators";
 
 /////////////////////////////////////////////////////////////////////
 
@@ -21,52 +21,40 @@ import "./styles/App.css";
 import RegisterForm from "./components/RegisterForm";
 // import AboutPage from "./components/AboutPage";
 import  LoginForm from "./components/LoginForm";
-import library from "./components/library";
-
-
-const history = createHistory()
-// const Header = () => {
-//   return (
-//     <div>
-//       <ul class = "main-menu">
-//         <li>gRomkoPlayer</li>
-//         <li>Библиотека</li>
-//         <li>Плайлист</li>
-//         <li>Вход/Регистрация</li>
-//       </ul>
-//     </div>
-//   );
-// }
-
-// const store = createStore(msgStatusReducer, applyMiddleware(thunk)) //вторым параметром идет
-const store = createStore(myReducers, applyMiddleware(thunk)) //вторым параметром идет
-
-store.subscribe(() => console.log(store.getState()))
-
-function App() {
-  return (
-    <div className="App">
-      {/* <Header/> */}
-      {/* <RegisterForm /> */}
-      <Router history={history}> 
-        <Provider store={store}>
-      {console.log(history)}    
-            <Route exact path="/" component={RegisterForm} />        
-            <Route exact path="/login" component={LoginForm} />     
-            <Route exact path="/library" component={library} /> 
-          </Provider>     
-      </Router>    
-    </div>
-  );
+import Library from "./components/Library";
+
+export default () =>{
+  const history = createHistory()
+  const store = createStore(myReducers, applyMiddleware(thunk)) //вторым параметром идет
+  
+  store.subscribe(() => console.log(store.getState()))
+  
+  console.log(store)
+  
+  // function App() {
+    return (
+      <div className="App">
+        <Router history={history}> 
+          <Provider store={store}>
+        {/* {console.log(history)}     */}
+              <Route exact path="/" component={RegisterForm} />        
+              <Route exact path="/login" component={LoginForm} />     
+              <Route exact path="/library" component={Library} /> 
+            </Provider>     
+        </Router>    
+      </div>
+    );
+  // }
+  
+  // const App = () => {
+  //   return (
+        // <Router>        
+        //  <Route path="/" component={RegisterForm} />        
+        //  <Route path="/about" component={AboutPage} />      
+        // </Router>    
+  //   );
+  // };
 }
 
-// const App = () => {
-//   return (
-      // <Router>        
-      //  <Route path="/" component={RegisterForm} />        
-      //  <Route path="/about" component={AboutPage} />      
-      // </Router>    
-//   );
-// };
 
-export default App;
+// export default App;

my-project/src/components/library.js

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from "react";
-
 import { Link } from "react-router-dom";
+
+import App from "../App";
+import Player from "./Player";
+
 import "../styles/library.css";
 
 
@@ -15,100 +18,46 @@ const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
     body: JSON.stringify({ query, variables }),
   }).then((res) => res.json());
   
-  let gql = getGQL("/graphql");
-
-// const CategoryItem = ({category: {_id, name}}) =>
-// <li>
-//     <Link to={`/category/${_id}`}>{name}</Link>
-// </li>
+let gql = getGQL("/graphql");
 
-// const Aside = () => {
-//     const [categories, setCategories] = useState([])
-//     console.log(categories)
-//     useEffect(async () => {
-//         let data = await getGQL('http://shop-roles.asmer.fs.a-level.com.ua/graphql')
-//               (`query MainCategories{
-//                   CategoryFind(query: "[{\\"parent\\":null}]"){
-//                     _id name
-//                   }
-//                 }`)
-//         setCategories(data.CategoryFind)
-//     },[])
+export default ({store, history}) => {
+  const [tracks, setTracks] = useState([]);
 
-//     return (
-//         <aside >
-//             <ul>
-//                 {categories.map(category => <CategoryItem category={category}/>)}
-//             </ul>
-//         </aside>
-//     )
-// }
-
-export default ({history}) => {
-//   const List = ({track: {_id, url, originalFileName}}) =>
-// <li>
-//     <p>{_id} {url} {originalFileName}</p>
-// </li>
-  // const data = [];
-  // const List = ({data: {_id, url, originalFileName}}) =>
-  // <li>
-  //     <p><span>{_id}</span> 
-  //         <span>{url}</span> 
-  //         <span>{originalFileName}</span></p>
-  // </li>
+  const List = ({track: {_id, url, originalFileName}}) =>
+  <li>
+      <p>
+          <span>{originalFileName}</span>
+          {/* <span>{_id}</span>  */}
+          {/* <span>{url}</span>  */}
+      </p>
+  </li>
   const TrackList = () => {
     const [tracks, setTracks] = useState([]);
     console.log(tracks);
     useEffect( async () => {
       // {debugger}
       let data = await getGQL("/graphql")
-      (`query tracksFind($query: String){
-                TrackFind(query: $query){
-                    _id
-                    url
-                    originalFileName
-                }
-        }`,{query: JSON.stringify([{}])})
-        console.log(data)
-        setTracks(data.TrackFind);
-
-        console.log(data.TrackFind);
-    },[])
-
-        return (
-        <div>
+      (`query tracksFind($query: String!){
+          TrackFind(query: $query){
+              _id
+              url
+              originalFileName
+          }
+        }`,{query: JSON.stringify([{}])})//накой эта строчка нужна?
+        console.log(data);
+        (data)? setTracks(data.data.TrackFind) : alert('data is waiting');
+    },[])//запрос работает, нужно залогиниться, получить токен, и затем перейти во вкладку libraries.
+    const [list, setList] = useState([]);
+    (tracks)? setList(tracks) &&  console.log(list) : alert('data is waiting');
+    return (
+        <div className="trackList">
             <ul>
-              {console.log(tracks)}
-                {/* {tracks.map(track => <List track={track}/>)} */}
-                {/* {tracks.map(track => <li>{track}</li>)} */}
+                {(tracks)? tracks.map(track => <List track={track}/>) : alert('data is waiting')}
             </ul>
         </div>
     )
 }
-    // let data = await getGQL("/graphql")
-    //   (`query trackFind{
-    //             TrackFind(query: "[{}]"){
-    //                 _id
-    //                 url
-    //                 originalFileName
-    //             }
-    //           }`).then(data => console.log(data));
-
-        // }`).then(data.map(data => console.log(data)));
-      // }`).then((data) => data = data).then(data.map(data => console.log(data));
-          // return(
-          //   <>
-          //   <div className="allTracks">
-          //         <ul>
-          //              {data.map(data => <List data={data}/>)}
-          //         </ul>
-          //   </div>
-          //   </>
-          // );
-// };
 
-
-  // TrackList()
   const Header = () => {
     return (
       <div className="header">
@@ -133,10 +82,41 @@ export default ({history}) => {
     );
   };
 
+  const Footer = () =>{
+    return(
+      <div className ="footer">
+          Footer
+      </div>
+    )
+  }
+//lection
+  // const ref = useRef();//we create 1 part and we remember it all life
+  // ref.current//was here value
+  // <   ref == {ref}/>
+
+// const uploadPhoto = ({onUpload}) => {
+//   const formRef = useRef();
+//   return(
+//     <form action="/upload" method="post" enctype="multipart/form-data" ref={formRef}>
+//       <input type="file" name="photo" id="photo" onChange={() => onUpload(ref.current)}/>
+//     </form>
+//   )
+// }
+
+// const actionUpload = (form) => actionPromise("upload",
+//   fetch("/upload",{
+//     method: "POST",
+//     headers: localStorage.authTocken? {Authorization : 'Bearer' + localStorage.authTocken}:"",
+//     body: new FormData(form)
+//   }).then(res=>res.json)
+// )
+////////////////////
   return (
       <>
         <Header />
         <TrackList />
+        <Player tracks={tracks}/>
+        <Footer />
       </>
   );
 };

my-project/src/components/LoginForm.js

@@ -40,12 +40,6 @@ const LoginForm = ({store, history}) => {
   const [login, setLogin] = useState("");
   const [password, setPassword] = useState("");
 
-
-
-
-
-
-
   const onFinish = (values) => {
     console.log("Success:", values);
   };
@@ -54,16 +48,14 @@ const LoginForm = ({store, history}) => {
     console.log("Failed:", errorInfo);
   };
 
-  let p = getGQL('http://player.asmer.fs.a-level.com.ua/graphql')(
-    `query Login{
-    login(login: "${login}", password: "${password}")
-    }`
-  ).then((data) => 
-    console.log(data)
-)
-
-
-
+  // let p = getGQL('http://player.asmer.fs.a-level.com.ua/graphql')(
+//   let p = getGQL('/graphql')(
+//     `query Login{
+//     login(login: "${login}", password: "${password}")
+//     }`
+//   ).then((data) => 
+//     console.log(data)
+// )
 
 // store.dispatch(actionPending())
 // p.then(data => store.dispatch(actionResolved(data)))
@@ -132,7 +124,9 @@ const LoginForm = ({store, history}) => {
               type="primary"
               htmlType="submit"
               onClick={async () => {
-                await getGQL("/graphql")(
+                await getGQL("/graphql" 
+                // ,{Authorization : "Bearer " + localStorage.authToken}
+                )(
                   `query Login{
                   login(login: "${login}", password: "${password}")
                   }`
@@ -140,18 +134,18 @@ const LoginForm = ({store, history}) => {
                   console.log(data);
                   // console.log(data.data.login);
                   localStorage.authToken = data.data.login;
-                  // const originalFetch = fetch;
-                  // fetch = (url, params = { headers: {} }) => {
-                  //   params.headers.Authorization =
-                  //     "Bearer " + localStorage.authToken;
-                  //   return originalFetch(url, params);
-                  // };
-                  // console.log(fetch)
+                  const originalFetch = fetch;
+                  fetch = (url, params = { headers: {} }) => {
+                    params.headers.Authorization =
+                      "Bearer " + localStorage.authToken;
+                    return originalFetch(url, params);
+                  };
+                  console.log(fetch)
                   console.log(
                     "localStorage.authToken: " + localStorage.authToken
                   );
                   if (!data.errors && login !=="" && password !== "") {
-                    history.push("/library");
+                    // history.push("/library");
                     // window.location.assign("http://localhost:3000/library");
                   } else {
                     //   setError(() => true);// если поле не заполнено, то формируем ошибку
@@ -162,6 +156,11 @@ const LoginForm = ({store, history}) => {
             >
               Submit
             </Button>
+            <Button onClick={()=>{
+                  history.push("/library");
+            }}>
+              Library
+            </Button>
             <Link to="/">Registration</Link>
           </Form.Item>
         </Form>

my-project/src/components/Player.js

@@ -0,0 +1,22 @@
+import React, { useState, useEffect } from "react";
+import Library from "./Library"
+
+export default (list) => {
+    return(//how to send props from one component to another?
+        <>
+{ console.log(list)} 
+</>
+    )
+//     const Player = () => {
+//                 return(
+//                 <div className="player">
+//                     <audio controls>
+//                         <source src="123" type="123; 123"></source>
+//                         <source src="123" type="123"></source>
+//                         Тег audio не поддерживается вашим браузером. 
+//                         <a href="a213S">Скачайте музыку</a>.
+//                     </audio> 
+//                 </div>
+//             );
+//     };
+};

my-project/src/components/reducers.js

@@ -1,7 +1,7 @@
 
 import { combineReducers } from 'redux';
 import jwt_decode from "jwt-decode";
-import actionCreators from "./actionCreators";
+import ActionCreators from "./ActionCreators";
 
 
     let authReducer = (state, action) => {

my-project/src/components/RegisterForm.js

@@ -128,7 +128,7 @@ let gql = getGQL("/graphql");
               ).then((data) => {
                 console.log(data);
                 if (!data.errors) {
-                  history.push("/login");
+                  // history.push("/login");
                   // window.location.assign("http://localhost:3000/login");
                 } else {
                 //   setError(() => true);// если поле не заполнено, то формируем ошибку

my-project/src/styles/library.css

@@ -4,6 +4,10 @@
     justify-content: center;
     align-items: center;
     width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: fixed;
 }
 
 /* .header ul {
@@ -27,12 +31,32 @@
     /* width: 250px; */
     padding: 15px 67px;
     border: 1px solid black;
-    /* background-color: orange; */
+    background-color: rgb(241, 214, 182);
 }
 .mainMenu li:hover {
     background-color: orange;
     /* color: white; */
 }
+.trackList{
+    padding-top: 90px;
+    flex-grow: 1;
+}
+
 /* .mainMenu h2 {
     margin-bottom: 0em;
-} */
+} */
+
+
+.footer {
+    display: flex;
+    border: 1px solid black;
+    /* text-align: center;
+    align-items: center; */
+    justify-content: center;
+    padding: 15px;
+    background-color: rgb(241, 214, 182);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: fixed;
+}