add is url an image check when submitting url

Author: mux-mux

src/App.js

@@ -47,12 +47,24 @@ const App = () => {
     setInput(e.target.value);
   };
 
-  const onImageSubmit = (e) => {
+  const onImageSubmit = async (e) => {
     e.preventDefault();
     const sanitizedUrl = DOMPurify.sanitize(input).trim();
-    setImageUrl(sanitizedUrl);
+    (await isImageUrl(sanitizedUrl)) && setImageUrl(sanitizedUrl);
   };
 
+  function isImageUrl(url) {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve(true);
+      img.onerror = () => {
+        alert('Url is not an image');
+        resolve(false);
+      };
+      img.src = url;
+    });
+  }
+
   const onRouteChange = useCallback((newRoute) => {
     if (newRoute === 'signout') {
       setIsSignedIn(false);

src/App.test.js

@@ -79,6 +79,15 @@ describe('App component', () => {
   });
 
   test('shows FindFace component after submitting an image URL', async () => {
+    global.Image = class {
+      constructor() {
+        setTimeout(() => {
+          if (this.onload) this.onload();
+        }, 0);
+      }
+      set src(_) {}
+    };
+
     renderApp();
 
     fireEvent.click(screen.getByText(/home/i));