inside src add a file name "ErrorBoundry"
<pre class="ql-syntax" spellcheck="false">import React from "react";
import Button from "./components/Button";

class ErrorBoundary extends React.Component {
 state = {hasError: false};

 static getDerivedStateFromError(error) {
 return {hasError: true};
 }

 componentDidCatch(error, errorInfo) {
 console.log(error, errorInfo)
 }

 render() {
 if (this.state.hasError) {
 return (
 &lt;div className='fixed inset-0 h-screen w-screen -z-10 w-100'&gt;
 &lt;div style={{backgroundImage: "url('/assets/Background.png')"}} className='bg-wwlWhite p-6 text-black text-center rounded-xl shadow-wwlDefault h-full flex justify-center items-center flex-col'&gt;
 &lt;div className='text-4xl font-bold pb-3 font-chivo text-wwlOrange'&gt;Something went wrong!&lt;/div&gt;
 &lt;div className='p-3 pb-6 font-chivo'&gt;Oops! There was an error.&lt;br/&gt;Our team has been notified, and we are
 working on a resolution for you!
 &lt;/div&gt;
 &lt;Button btnText='Back to Home Page' onClick={() =&gt; {
 this.setState({hasError: false})
 window.location.href = '/home'
 }
 }
 extraClasses={`rounded border-2 border-wwlOrange px-1 py-0.5 sm:px-4 sm:py-2 sm:rounded-lg hover:bg-wwlOrange hover:text-wwlWhite transition-colors duration-300 w-40`}/&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
 } else {
 return this.props.children;
 }
 }
}

export default ErrorBoundary;
</pre>
Then use that error boundry in your protected routes
<pre class="ql-syntax" spellcheck="false">&lt;ErrorBoundry&gt;
 {children ? children : &lt;Outlet/&gt;}
&lt;/ErrorBoundry&gt;
</pre>

Error Boundry

<pre class="ql-syntax" spellcheck="false">import { PhotoIcon } from "@heroicons/react/24/outline/index.js";
import { useRef } from 'react';

const FileInput = ({ label }) =&gt; {
 const fileInputRef = useRef(null);
 const imagePreviewRef = useRef(null);

 function handleImageUpload() {
 if (fileInputRef.current.files.length &gt; 0) {
 const file = fileInputRef.current.files[0];
 const reader = new FileReader();

 reader.onload = function (e) {
 const img = new Image();
 img.src = e.target.result;
 img.className = 'w-full h-full object-cover';
 imagePreviewRef.current.innerHTML = '';
 imagePreviewRef.current.appendChild(img);
 };

 reader.readAsDataURL(file);
 }
 }

 return (
 &lt;div&gt;
 {label &amp;&amp; &lt;span className='block text-sm mb-1.5 font-bold text-gray-500 text-start'&gt;{label}&lt;/span&gt;}
 &lt;div className='flex items-center gap-6'&gt;
 &lt;div className='border border-dashed border-2 border-gray-300 rounded-lg p-5 text-sm flex flex-col gap-2 w-1/2'&gt;
 &lt;PhotoIcon className='w-12 h-12 mx-auto text-gray-500' /&gt;
 &lt;label htmlFor='file-inp' className='flex flex-col items-center'&gt;
 &lt;span className='text-blue-600 hover:text-blue-400 cursor-pointer'&gt;Upload a file&lt;/span&gt;
 &lt;input type='file' name='file-inp' id='file-inp' className='hidden' ref={fileInputRef} onChange={handleImageUpload} /&gt;
 &lt;span className='text-gray-500'&gt;or drag and drop&lt;/span&gt;
 &lt;/label&gt;
 &lt;/div&gt;
 &lt;div className='border border-gray-300 w-28 h-28' ref={imagePreviewRef}&gt;

 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 )
}

export default FileInput;
</pre>

Image Picker

&nbsp;useEffect(() =&gt; {
&nbsp;&nbsp;const abortCont = new AbortController();
 
&nbsp;&nbsp;setTimeout(() =&gt; {
&nbsp;&nbsp;&nbsp;fetch(url, { signal: abortCont.signal })
&nbsp;&nbsp;&nbsp;.then(res =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;if (!res.ok) { // error coming back from server
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;throw Error('could not fetch the data for that resource');
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;return res.json();
&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;.then(data =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;setIsPending(false);
&nbsp;&nbsp;&nbsp;&nbsp;setData(data);
&nbsp;&nbsp;&nbsp;&nbsp;setError(null);
&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;.catch(err =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;if (err.name === 'AbortError') {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('fetch aborted')
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// auto catches network / connection error
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setIsPending(false);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setError(err.message);
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;}, 1000);
 
&nbsp;&nbsp;// abort the fetch
&nbsp;&nbsp;return () =&gt; abortCont.abort();
&nbsp;}, [url])

Effect Cleanup

import { useInfiniteQuery } from "@tanstack/react-query";
import InfiniteScroll from "react-infinite-scroll-component";
import "./app.css";
 
const getUsers = async ({ pageParam = 0 }) =&gt; {
&nbsp;const res = await fetch(
&nbsp;&nbsp;`https://api.realworld.io/api/articles?limit=10&amp;offset=${pageParam}`
&nbsp;);
&nbsp;const data = await res.json();
&nbsp;return { ...data, prevOffset: pageParam };
};
 
const App = () =&gt; {
&nbsp;const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
&nbsp;&nbsp;queryKey: ["users"],
&nbsp;&nbsp;queryFn: getUsers,
&nbsp;&nbsp;getNextPageParam: (lastPage) =&gt; {
&nbsp;&nbsp;&nbsp;if (lastPage.prevOffset + 10 &gt; lastPage.articleCount) {
&nbsp;&nbsp;&nbsp;&nbsp;return false;
&nbsp;&nbsp;&nbsp;}
 
&nbsp;&nbsp;&nbsp;return lastPage.prevOffset + 10;
&nbsp;&nbsp;},
&nbsp;});
&nbsp;const articles = data?.pages.reduce((acc, page) =&gt; {
&nbsp;&nbsp;return [...acc, ...page.articles];
&nbsp;}, []);
&nbsp;console.log(articles);
 
&nbsp;return (
&nbsp;&nbsp;&lt;div&gt;
&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello monsterlessons&lt;/h1&gt;
 
&nbsp;&nbsp;&nbsp;&lt;InfiniteScroll
&nbsp;&nbsp;&nbsp;&nbsp;dataLength={articles ? articles.length : 0}
&nbsp;&nbsp;&nbsp;&nbsp;next={() =&gt; fetchNextPage()}
&nbsp;&nbsp;&nbsp;&nbsp;hasMore={hasNextPage}
&nbsp;&nbsp;&nbsp;&nbsp;loading={&lt;div&gt;Loading...&lt;/div&gt;}
&nbsp;&nbsp;&nbsp;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{articles &amp;&amp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;articles.map((article, index) =&gt; (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div key={index} className="element"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{article.title}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;))}
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&lt;/InfiniteScroll&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;);
};
 
export default App;

Infinite Scroll

<pre class="ql-syntax" spellcheck="false">window.EPayWidget.run({
 project_id: 141531,
 payment_id: "payment_443",
 customer_id: "customer_112",
 payment_amount: 18315,
 payment_currency: "EUR",
 signature: 'TvKjtbJQFl136woIUERC85dhfycqTkT310Z7Gg/977LwBMYfnfo397ldo6ki1Q7Q86hdma7FD77ODqCa55NZqQ=='
});
</pre>

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow