resources/js/components/pages/AosGenerate.js

   1 import axios from 'axios';
   2 import React, { useCallback, useEffect, useState } from 'react';
   3 import { Helmet } from 'react-helmet';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import Generate from '../aos-generate/Generate';
   7 import ErrorBoundary from '../common/ErrorBoundary';
   8 import ErrorMessage from '../common/ErrorMessage';
   9 import Loading from '../common/Loading';
  10
  11 const AosGenerate = () => {
  12         const [error, setError] = useState(null);
  13         const [loading, setLoading] = useState(true);
  14         const [presets, setPresets] = useState([]);
  15
  16         const { t } = useTranslation();
  17
  18         const loadPresets = useCallback(ctrl => {
  19                 axios
  20                         .get('/api/aos-presets', { signal: ctrl.signal })
  21                         .then(response => {
  22                                 setError(null);
  23                                 setLoading(false);
  24                                 setPresets(response.data);
  25                         })
  26                         .catch(error => {
  27                                 setError(error);
  28                                 setLoading(false);
  29                                 setPresets([]);
  30                         });
  31         }, []);
  32
  33         useEffect(() => {
  34                 setLoading(true);
  35                 const ctrl = new AbortController();
  36                 loadPresets(ctrl);
  37                 return () => {
  38                         ctrl.abort();
  39                 };
  40         }, []);
  41
  42         if (loading) {
  43                 return <Loading />;
  44         }
  45
  46         if (error) {
  47                 return <ErrorMessage error={error} />;
  48         }
  49
  50         return <ErrorBoundary>
  51                 <Helmet>
  52                         <title>{t('aosGenerate.heading')}</title>
  53                 </Helmet>
  54                 <Generate presets={presets} />
  55         </ErrorBoundary>;
  56 };
  57
  58 export default AosGenerate;