From 577c8c75a6481456b8c3f4d38cb65924e9696bc2 Mon Sep 17 00:00:00 2001
From: Mosh Hamedani <programmingwithmosh@gmail.com>
Date: Thu, 2 Mar 2023 10:45:45 -0800
Subject: [PATCH] Build platform selector

---
 src/App.tsx                         |  2 ++
 src/components/PlatformSelector.tsx | 22 ++++++++++++++++++++++
 src/hooks/usePlatforms.ts           | 11 +++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 src/components/PlatformSelector.tsx
 create mode 100644 src/hooks/usePlatforms.ts

diff --git a/src/App.tsx b/src/App.tsx
index b8f79a3..134da18 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import GameGrid from "./components/GameGrid";
 import GenreList from "./components/GenreList";
 import NavBar from "./components/NavBar";
+import PlatformSelector from "./components/PlatformSelector";
 import { Genre } from "./hooks/useGenres";
 
 function App() {
@@ -28,6 +29,7 @@ function App() {
         </GridItem>
       </Show>
       <GridItem area="main">
+        <PlatformSelector />
         <GameGrid selectedGenre={selectedGenre} />
       </GridItem>
     </Grid>
diff --git a/src/components/PlatformSelector.tsx b/src/components/PlatformSelector.tsx
new file mode 100644
index 0000000..400f0f6
--- /dev/null
+++ b/src/components/PlatformSelector.tsx
@@ -0,0 +1,22 @@
+import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
+import { BsChevronDown } from "react-icons/bs";
+import usePlatforms from "../hooks/usePlatforms";
+
+const PlatformSelector = () => {
+  const { data, error } = usePlatforms();
+
+  if (error) return null;
+  
+  return (
+    <Menu>
+      <MenuButton as={Button} rightIcon={<BsChevronDown />}>
+        Platforms
+      </MenuButton>
+      <MenuList>
+        {data.map(platform => <MenuItem key={platform.id}>{platform.name}</MenuItem>)}
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default PlatformSelector;
diff --git a/src/hooks/usePlatforms.ts b/src/hooks/usePlatforms.ts
new file mode 100644
index 0000000..1625eee
--- /dev/null
+++ b/src/hooks/usePlatforms.ts
@@ -0,0 +1,11 @@
+import useData from "./useData";
+
+interface Platform { 
+  id: number;
+  name: string;
+  slug: string;
+}
+
+const usePlatforms = () => useData<Platform>('/platforms/lists/parents');
+
+export default usePlatforms;
\ No newline at end of file