form

src/App.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
-import { decrease, increase } from './store/counter/actions';
+import { decrease, increase } from './store/user/actions';
 import { getFakeData, updateValue } from './store/fake/actions';
 
 

src/routes/main/index.js

@@ -1,111 +1,26 @@
-import { useEffect } from 'react';
-import hookForm from 'hook-easy-form';
+import { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { setData, getUsers } from 'store/counter/actions';
+import { uploadPicture } from 'store/user/actions';
 
 import classes from './index.module.scss';
 
-const form = [
-  {
-    name: 'first_name',
-    value: '',
-    required: true,
-    options: {
-      type: 'text',
-      label: 'First Name'
-    }
-  },
-  {
-    name: 'last_name',
-    value: '',
-    required: true,
-    options: {
-      type: 'text',
-      label: 'Last Name'
-    },
-  },
-  {
-    name: 'age',
-    value: '',
-    required: true,
-    options: {
-      type: 'number',
-      label: 'Your Age'
-    },
-  },
-  {
-    name: 'gender',
-    value: '',
-    required: true,
-    options: {
-      type: 'select',
-      label: 'Pick your gender',
-      options: [
-        { id: 'none', text: '' },
-        { id: 'male', text: 'Male' },
-        { id: 'female', text: 'Female' }
-      ]
-    },
-  },
-  {
-    name: 'bio',
-    value: '',
-    required: true,
-    options: {
-      type: 'text-area',
-      label: 'Tell us about yourself'
-    },
-  },
-]
-
-
 const Main = () => {
+  const [file, setFile] = useState(null);
   const dispatch = useDispatch();
-  const { formArray, updateEvent, submitEvent, setValueManually } = hookForm({ initialForm: form })
-
-  const user = useSelector((s) => s.auth.user);
+  console.log('file', file);
 
-  const submit = submitEvent((d) => dispatch(setData(d)));
-
-  useEffect(() => {
-    dispatch(getUsers())
-  }, [dispatch])
+  const uploadHandler = () => {
+    dispatch(uploadPicture(file))
+  }
 
   return (
     <div>
     <h1>MAIN PAGE</h1>
-    
-    <form onSubmit={submit} className={classes.form}>
-      {formArray.map(el => {
-        if (el.options.type === 'text' || el.options.type === 'number') {
-          return <label key={el.name} className={classes.label}>
-            <span>{el.options.label}</span>
-            <input name={el.name} type={el.options.type} value={el.value} onChange={updateEvent} />
-          </label>
-        }
-        if (el.options.type === 'text-area') {
-          return <label key={el.name} className={classes.label}>
-            <span>{el.options.label}</span>
-            <textarea name={el.name} value={el.value} onChange={updateEvent} />
-          </label>
-        }
-        if (el.options.type === 'select') {
-          return <label key={el.name} className={classes.label}>
-            <span>{el.options.label}</span>
-            <select name={el.name} value={el.value} onChange={(e) => setValueManually(el.name, e.target.value)} >
-              {el.options.options.map(e => <option key={e.id} value={e.id}>{e.text}</option>)}
-            </select>
-          </label>
-        }
-
-        return null;
-      })}
 
-      <button type="submit">Submit</button>
-    </form>
+    <input type="file" onChange={(e) => setFile(e.target.files[0])} />
     
-    <pre>{JSON.stringify(user, null, 2)}</pre>
+    <button onClick={uploadHandler}>UPLOAD</button>
     </div>
   )
 }

src/store/root-reducer.js

@@ -1,7 +1,7 @@
 import { combineReducers } from 'redux';
 
 import { fakeReducer } from './fake/reducer';
-import { countReducer } from './counter/reducer';
+import { countReducer } from './user/reducer';
 import { authReducer } from './auth/reducer'; 
 
 const reducers = combineReducers({

src/store/saga.js

@@ -2,7 +2,7 @@ import { fork } from 'redux-saga/effects';
 
 import films from './fake/saga';
 import auth from './auth/saga';
-import data from './counter/saga';
+import data from './user/saga';
 
 export default function* rootSaga() {
   yield fork(films)

src/store/counter/actions.js

@@ -29,3 +29,18 @@ export const getUsersFail = (payload) => ({
   type: types.GET_USERS_FAIL,
   payload
 })
+
+export const uploadPicture = (payload) => ({
+  type: types.UPLOAD_PICTURE,
+  payload
+})
+
+export const uploadPictureSuccess = (payload) => ({
+  type: types.UPLOAD_PICTURE_SUCCESS,
+  payload
+})
+
+export const uploadPictureFail = (payload) => ({
+  type: types.UPLOAD_PICTURE_FAIL,
+  payload
+})

src/store/counter/reducer.js

@@ -7,8 +7,6 @@ const initialState = {
 export const countReducer = (state = initialState, action) => {
   switch(action.type) {
     case types.GET_USERS_SUCCESS: {
-      console.log('ss', action.payload);
-      console.log('ww', Object.keys(action.payload));
       const users = Object.keys(action.payload).map(id => {
         const { uid, ...rest } = action.payload[id];
         return { ...rest, id }

src/store/counter/saga.js

@@ -2,6 +2,7 @@ import { takeLatest, call, put } from 'redux-saga/effects';
 
 import * as types from './types';
 import * as actions from './actions'
+import { AxiosInstance } from 'utils/axios'
 
 import { getToken } from 'utils/local-storage-actions';
 
@@ -16,7 +17,8 @@ const setRequest = (data, token) => {
   }).then(r => r.json())
 }
 
-const getUsersRequest = () => fetch('https://first-fly.firebaseio.com/users.json').then(r => r.json())
+const getUsersRequest = () => fetch('https://first-fly.firebaseio.com/users.json').then(r => r.json());
+const uploadRequest = (data) => AxiosInstance({ method: 'POST', data, url: '/upload' });
 
 function* setData({ payload }) {
   const token = getToken();
@@ -41,7 +43,22 @@ function* getUsers({ payload }) {
   }
 }
 
+function* uploadPicture({ payload }) {
+  try {
+    const formData = new FormData();
+    formData.append('file', payload);
+
+    const result = yield call(uploadRequest, formData);
+    console.log('result', result);
+
+    yield put(actions.getUsersSuccess(result))
+  } catch (error) {
+    yield put(actions.getUsersFail(error))
+  }
+}
+
 export default function* data() {
   yield takeLatest(types.SET_DATA, setData);
   yield takeLatest(types.GET_USERS, getUsers);
+  yield takeLatest(types.UPLOAD_PICTURE, uploadPicture);
 }

src/store/counter/types.js

@@ -5,3 +5,7 @@ export const SET_DATA_FAIL = 'SET_DATA_FAIL';
 export const GET_USERS = 'GET_USERS';
 export const GET_USERS_SUCCESS = 'GET_USERS_SUCCESS';
 export const GET_USERS_FAIL = 'GET_USERS_FAIL';
+
+export const UPLOAD_PICTURE = 'UPLOAD_PICTURE';
+export const UPLOAD_PICTURE_SUCCESS = 'UPLOAD_PICTURE_SUCCESS';
+export const UPLOAD_PICTURE_FAIL = 'UPLOAD_PICTURE_FAIL';