separate files

shop/src/App.js

@@ -5,42 +5,18 @@ import {Provider, connect} from 'react-redux';
 import {Header, Footer, actionCatalogCard, Main, SearchInput} from "./components/index"
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
-import Catalog from "./components/catalog"
+import {Catalog, UpdateForm} from "./components/"
 import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
 import thunk from 'redux-thunk';
-import {gql, actionPromise, store, promiseReducer, actionSearch, urlUpload} from "./reducers";
+import {gql, actionPromise, store, promiseReducer, actionSearch, urlUpload, updateAction} from "./reducers";
 import { useState, useRef } from 'react';
 
 
-        
+ 
 
 
 
 
-const UpdateForm = ({}) => {
-    const formRef = useRef(null);
-    const [isUpdate, changeIt] = useState(false)
-    const updateAction =  async () => {
-    fetch(`${urlUpload}/upload`, {
-        method: "POST",
-        headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
-        body: new FormData(formRef.current)
-    })
-    .then((res) => res.json()).then(res => console.log(res))
-
-    changeIt(true)
-  }
-
-  return(
-    <>
-    <form action="/upload" method="post" enctype="multipart/form-data" id='form' ref={formRef} onChange = {updateAction}>
-      <input type="file" name="photo" id='photo'/>
-    </form>
-
-    <img src = {`${urlUpload}/images/cbd7145dbc78ced471951c70f571f871`}/>
-    </>
-  )
-}
 
 
 function App() {
@@ -48,7 +24,7 @@ function App() {
     <>
       <Provider store={store}>
         <Router history = {createHistory}>
-          {/* <UpdateForm/> */}
+
           <Header/>
 
           <Main/>

shop/src/components/index.js

@@ -16,11 +16,12 @@ import CGoodsListSearch from "./goodsListSearch";
 import GoodsNotFound from "./goodsNotFound";
 import LoginForm from "./loginOnPage";
 import CGoodCard from "./goodCard";
+import UpdateForm from "./updateForm";
 
 
 
 export {Header,Footer, actionCatalogCard, Main, Links, CGoodsCategory, OneGood, GoodsList, SearchInput, CGoodsSearch, CGoodsListSearch, GoodsNotFound, 
-LoginForm, CGoodCard};
+LoginForm, CGoodCard, UpdateForm};
 
 
 

shop/src/components/updateForm.js

@@ -0,0 +1,21 @@
+import { useState, useRef } from 'react';
+import {gql, urlUpload, actionPromise, actionGoodCard, getGoods} from "../reducers";
+
+
+const UpdateForm = ({onchange}) => {
+    const formRef = useRef(null);
+    // const [isUpdate, changeIt] = useState(false)
+
+
+  return(
+    <>
+    <form action="/upload" method="post" enctype="multipart/form-data" id='form' ref={formRef} onChange = {() => onchange(formRef)}>
+      <input type="file" name="photo" id='photo'/>
+    </form>
+
+    <img src = {`${urlUpload}/images/cbd7145dbc78ced471951c70f571f871`}/>
+    </>
+  )
+}
+
+export default UpdateForm;

shop/src/reducers/actionGoods.js

@@ -1,7 +1,7 @@
 import {Provider, connect} from 'react-redux';
 import {createStore, combineReducers, applyMiddleware, bindActionCreators} from 'redux';
 import thunk from 'redux-thunk';
-import {actionPromise, gql} from "./index"
+import {actionPromise, gql} from "./index";
 
 import { useEffect } from 'react';
 

shop/src/reducers/actionUpdateImg.js

@@ -0,0 +1,18 @@
+
+import {gql, urlUpload, actionPromise} from "./index";
+
+
+
+async function updateAction(ref) {
+ 
+    fetch(`${urlUpload}/upload`, {
+      method: "POST",
+      headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
+      body: new FormData(ref.current)
+    })
+    .then((res) => res.json()).then(res => console.log(res))
+  
+  
+  }    
+
+  export default updateAction;

shop/src/reducers/index.js

@@ -9,6 +9,7 @@ import actionLogin from "./actionLogin";
 import authReducer from "./authReducer";
 import {actionAuthLogin, actionAuthLogout} from "./actionAuthLog";
 import actionGoodCard from "./actionGoodCard";
+import updateAction from "./actionUpdateImg";
 
 
 
@@ -31,7 +32,7 @@ function promiseReducer(state={}, action){
   }), compose(applyMiddleware(thunk)))
 
 export {actionPromise, gql, actionGoods, getGoods, promiseReducer, store, actionSearch,
-   actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard};
+   actionLogin, authReducer, actionAuthLogin, actionAuthLogout, urlUpload, actionGoodCard, updateAction};