File size: 1,443 Bytes
f669eb6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import { Alert } from "@mantine/core";
import { IconInfoCircle } from "@tabler/icons-react";
import { usePubSub } from "create-pubsub/react";
import { Suspense, lazy } from "react";
import {
  imageSearchResultsPubSub,
  imageSearchStatePubSub,
} from "../../../../modules/pubSub";

const ImageResultsList = lazy(() => import("./ImageResultsList"));
const ImageResultsLoadingState = lazy(
  () => import("./ImageResultsLoadingState"),
);

export default function ImageSearchResults() {
  const [searchState] = usePubSub(imageSearchStatePubSub);
  const [results] = usePubSub(imageSearchResultsPubSub);

  if (searchState === "running") {
    return (
      <Suspense>
        <ImageResultsLoadingState />
      </Suspense>
    );
  }

  if (searchState === "completed") {
    if (results.length > 0) {
      return (
        <Suspense>
          <ImageResultsList imageResults={results} />
        </Suspense>
      );
    }

    return (
      <Alert
        variant="light"
        color="yellow"
        title="No image results found"
        icon={<IconInfoCircle />}
      >
        Could not find any images matching your search query.
      </Alert>
    );
  }

  if (searchState === "failed") {
    return (
      <Alert
        variant="light"
        color="yellow"
        title="Failed to search for images"
        icon={<IconInfoCircle />}
      >
        Could not search for images.
      </Alert>
    );
  }

  return null;
}