update demo-react-movie-app-with-algolia,

03_source/mobile/src/pages/DemoReactMovieAppWithAlgolia/components/CustomSearchHit.tsx

@@ -0,0 +1,33 @@
+import { IonCol, IonRouterLink } from '@ionic/react';
+import { Link } from 'react-router-dom';
+import styles from '../pages/Movies.module.scss';
+
+const CustomSearchHit = ({ hit }): React.JSX.Element | null => {
+  //	Any movies without an image, lets just exclude them
+  //	So the UI looks nicer.
+  //	When I scraped the data, I put a placeholder URL image in
+  //	But after more thought, it looks cleaner without including these.
+  if (
+    hit &&
+    hit.image !== 'https://critics.io/img/movies/poster-placeholder.png' &&
+    hit.backdrop_path !== null
+  ) {
+    return (
+      <IonCol size="6" className={styles.movie}>
+        <Link
+          to={{ pathname: `/movie/${hit.objectID}`, state: { movie: hit } }}
+          className="non-link"
+        >
+          <div className={styles.movieInfo}>
+            <img src={hit.image} alt="movie poster" />
+            <h2>{hit.title}</h2>
+          </div>
+        </Link>
+      </IonCol>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default CustomSearchHit;