Untitled

import styles from "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import VinylList from "./components/VinylList.js";
import VinylAdd from "./components/VinylAdd.js";
import VinylEdit from "./components/VinylEdit.js";
import axios from 'axios'
import {View} from 'react-native';
import { useFormStatus } from "react-dom";
import React, { useOptimistic, useState, useEffect, useRef, Component } from 'react';
import {useDropzone} from "react-dropzone";
import { useDispatch, Provider } from "react-redux";
import { createStore } from 'redux'

const combineReducers = (reducers) => {
  return (state = {}, action) => {
    return Object.keys(reducers).reduce((acc, prop) => {
      return {
        ...acc,
        ...reducers[prop](acc[prop], action)
      };
    }, state);
  };
};

const userFillInFormReducer = (state = {}, action) => {
  switch (action.type) {
    case 'REGISTER_FORM_REQUEST':
      return { loading: true };
    case 'REGISTER_FORM_SUCCESS':
      return { loading: false, success: true, userInfo: action.payload };
    case 'REGISTER_FORM_FAILURE':
      return { loading: false, error: action.payload };
    default:
      return state;
  }
}
const store = createStore(combineReducers({ userFillInForm: userFillInFormReducer }));


const rootReducer = combineReducers({
  test: () => 'test reducer'
});


function App({ onSubmit, onChange}){
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    shipping: '',
    prod_description: ''
  });
  const [files, setFiles] = useState([]);
  const {getRootProps, getInputProps} = useDropzone({
    accept: {"image/*": []},
    onDrop: acceptedFiles => {
      setFiles(
        acceptedFiles.map(file =>
          Object.assign(file, {
            preview: URL.createObjectURL(file)
          })
        )
      );
    },
  });

  const thumbs = files.map(file => (
    <div key={file.name}>
      <img style={{ maxWidth: "100%", maxHeight: "100%" }} src={file.preview} onLoad={() => URL.revokeObjectURL(file.preview)} alt={file.name} />
    </div>
  ));
 
  useEffect(() => {
    return () => files.forEach(file => URL.revokeObjectURL(file.preview));
  }, [files]);

  const dispatch = useDispatch();

const registerForm = (formData) => async (dispatch) => {
  try {
    dispatch({ type: 'REGISTER_FORM_REQUEST' });

    const config = {
      headers: {
        'Content-Type': 'application/json'
      }
    };
    const {data} = await axios.post('https://jsonplaceholder.typicode.com', formData, config);
    dispatch({ type: 'REGISTER_FORM_SUCCESS', payload: data });
  } catch (error) {
    console.error('Error submitting form:', error);
    dispatch({ type: 'REGISTER_FORM_FAILURE', payload: error.message });
  }
};
dispatch(registerForm(formData));

  if(Object.keys(files).length === 0){
    this.setState({ hasError: true });
   } else {
    dispatch();
   }
  
  return (
    <>
    <div className={styles.title_main_page}>
    <h1>Spin the Black Circle!</h1>
    <h2>Managing Your Vinyl Record Collection</h2>
    
    </div>
    <div className="container disable">
    
    <h2>Easy Image Editor</h2>
    <div className="wrapper">
      <form method="post" onSubmit={onSubmit}>
     <label>
       Text input: <input  onChange={onChange} />
     </label>
     <hr />
     <p>
        Radio buttons:
        <label>
          <input type="radio" name="myRadio" value="option1" />
          Option 1
        </label>
        <label>
          <input
            type="radio"
            name="myRadio"
            value="option2"
            defaultChecked={true}
          />
          Option 2
        </label>
        <label>
          <input type="radio" name="myRadio" value="option3" />
          Option 3
        </label>
      </p>
     <label>
    <hr />
     <button type="reset">Reset form</button>
     <button type="submit">Submit form</button>
     </label>
   </form>
    <section className="containerDragAndDrop">
        <div {...getRootProps({className: "dropzone"})}>
          <input {...getInputProps()} />
          <p>Drag 'n' drop some files here, or click to select files</p>
        </div>
        <aside>{thumbs}</aside>
      </section>
    </div>
    <LoadButtons/>
    </div>
    
    </>
  );
}

function MyForm() {
   const [editableValue, setEditableValue] = useState('');
   const handleChange = (e) => setEditableValue(e.target.value);
 
 function handleSubmit(e) {
   
   e.preventDefault();
   const form = e.target;
   const formData = new FormData(form);

   const formErrors = e.formErrors;

   
   // You can pass formData as a fetch body directly:
   //fetch('https://jsonplaceholder.typicode.com', { method: form.method, body: formData });

   // Or you can work with it as a plain object:
   const formJson = Object.fromEntries(formData.entries());
   console.log(formJson);
 }

 return (
  <Provider store={store}>

    <App onSumbit={handleSubmit} onChange={handleChange}/>
  </Provider>
 );
}





function LoadButtons(){
const inputFileRef = React.useRef();
const triggerInputFile = () => inputFileRef.current.click();


return(
<>

<div className="controls" >

<div style={{ display: "flex", flexDirection: "row" }}>
<button className="reset-filter">Reset Filters</button>
<View>

<button className="save-img">Save Image</button>
</View>


</div>
</div>
</>
)
}

export default App;