Component Initial Settings.

Use this code when you want to initialize the components web page settings like the next route, the page title etc..

This code initializes and declares the values for the component settings values.

download/DonloadFiles4.jsx

  const componentSettings = {
    nextRoute: "/download/download", // /download/download/:fileSecret
    pageTitle: "4. Download List",
    apiRoute: `/DownloadFiles4`, // submit media files
    initApiRoute: '/DownloadFiles4GetFilesList' // inital route to validate fileSecret
  };
  document.title = componentSettings.pageTitle;

 

this code uses the postData that will be sent in the Axios Service Provider

download/DonloadFiles4.jsx

      const postData = {
        fileSecret: fileSecret.fileSecret,
        apiRoute: componentSettings.initApiRoute
      };

 

Now use the settings and the post date to call the Axios Service Provider: Handle Submit

download/DonloadFiles4.jsx

      UploadService.DownloadFiles4GetFilesList(postData)
        .then((response) => {
          console.log(`LINE 102 response=`, response.data);
          // Do something with the response
          setfileInfos(response.data);
        })
        .catch((error) => {
          console.log(`LINE 34 error=`, error);
        });

Another Example of handle submit:

or use this example to handle Submit form:

const HandleSubmit = (ev) => {
  ev.preventDefault();

  const postData = {
    ExampleProperty: ExampleValue, //xyz123
    apiRoute: componentSettings.apiRoute
  }
  // assigned other form fields data to postData to pass to API
  console.log(`LINE 99 postData=`, postData);
  UploadService.UploadForm1(postData)
    .then((response) => {
      // SUCCESS
      console.log(`LINE 125 response.data=`, response.data);
      // NAVIGATE TO NEXT ROUTE
      navigate(`${componentSettings.nextRoute}/${response.data.token}`);

    } else {
      // SHOW ERRORS
      console.log(`LINE 132 Your Details were not saved`);
      setShowFormError(`response.data.token.length= ${response.data.token.length
    }`);
          scrollToFormMsg();
        }
      })
      .catch((error) => {
        console.log(`LINE 108 error = `, error);
      });
};

 

Axios provider:

axios/http.jsx

// Step 4 validate toke and get downloads files list
DownloadFiles4GetFilesList(postData) {
  return http.post(postData.apiRoute, postData);
}

Example code source: /f/apachefriends/xampp/htdocs/over-imgV5/REACT/GITHUB-TEMLPLATES/material-dashboard-react-vite-js