add chakra-ui

next-app/components/Episode.js

@@ -0,0 +1,176 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionIcon,
+  AccordionButton,
+  AccordionPanel,
+  Box,
+  Flex,
+  Image,
+  Text,
+  Heading,
+  Spacer,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Button,
+} from '@chakra-ui/react'
+
+import { AddIcon, CheckIcon } from '@chakra-ui/icons'
+
+import { gql, useMutation } from '@apollo/client'
+
+const ADD_EPISODE_TO_PLAYLIST = gql`
+  mutation addToPlaylist($episodeId: ID!, $playlistName: String!) {
+    addEpisodeToPlaylist(name: $playlistName, podcastId: $episodeId) {
+      name
+    }
+  }
+`
+
+const Episode = ({ episode, playlists }) => {
+  console.log(playlists)
+  const [addEpisode] = useMutation(ADD_EPISODE_TO_PLAYLIST)
+
+  const isEpisodeInPlaylist = (playlistName) => {
+    //return true
+
+    const playlist = playlists.filter((i) => {
+      return playlistName === i.name
+    })
+
+    console.log(playlist)
+
+    const episodes = playlist[0].episodes?.map((v) => {
+      console.log(v)
+      return v.id
+    })
+
+    console.log(episodes)
+
+    return episodes?.includes(episode.id)
+
+    // playlists = [{name: "Foobar", episodes: [{id: 123}]}]
+  }
+
+  return (
+    <Flex
+      style={{ maxWidth: '700px', width: '100%' }}
+      border="1px"
+      rounded="lg"
+    >
+      <Box style={{ width: '125px' }}>
+        <Image boxSize="125px" src={episode.podcast.image} m={2} />
+        <Menu m={2} style={{ width: '125px' }}>
+          <MenuButton m={2} style={{ width: '125px' }} as={Button}>
+            <AddIcon />
+          </MenuButton>
+          <MenuList>
+            {playlists?.map((v) => {
+              return (
+                <MenuItem
+                  icon={isEpisodeInPlaylist(v.name) ? <CheckIcon /> : null}
+                  key={v.name}
+                  onClick={() => {
+                    addEpisode({
+                      variables: {
+                        episodeId: episode.id,
+                        playlistName: v.name,
+                      },
+                      // update: (proxy) => {
+                      //   const data = proxy.readQuery({
+                      //     query: gql`
+                      //       {
+                      //         playlists {
+                      //           name
+                      //           episodes {
+                      //             id
+                      //           }
+                      //         }
+                      //       }
+                      //     `,
+                      //   })
+                      //   console.log('optmistic data')
+                      //   console.log(data)
+
+                      //   const newData = { playlists: [...data.playlists] }
+
+                      //   newData.playlists[0].episodes = [
+                      //     ...newData.playlists[0].episodes,
+                      //     {
+                      //       __typename: 'Episode',
+                      //       id: episode.Id,
+                      //     },
+                      //   ]
+
+                      //   proxy.writeQuery({
+                      //     query: gql`
+                      //       {
+                      //         playlists {
+                      //           name
+                      //           episodes {
+                      //             id
+                      //           }
+                      //         }
+                      //       }
+                      //     `,
+                      //     data: newData,
+                      //   })
+                      // },
+                    })
+                  }}
+                >
+                  {v.name}
+                </MenuItem>
+              )
+            })}
+          </MenuList>
+        </Menu>
+      </Box>
+      <Flex ml={4} direction="column" style={{ width: '100%' }}>
+        <div>
+          <Accordion allowToggle>
+            <AccordionItem>
+              <h2>
+                <AccordionButton>
+                  <Box flex="1" textAlign="left">
+                    <Heading size="sm">{episode.title}</Heading>
+                  </Box>
+                  <AccordionIcon />
+                </AccordionButton>
+              </h2>
+              <AccordionPanel pb={4} m={4}>
+                <div
+                  dangerouslySetInnerHTML={{ __html: episode.summary }}
+                ></div>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+        </div>
+        <Flex direction="column">
+          <Text fontSize="lg" mr={4} isTruncated>
+            {episode.podcast?.title}
+          </Text>
+          <Spacer />
+          <Text mr={4} as="i">
+            {`${episode.pubDate.month}/${episode.pubDate.day}/${episode.pubDate.year}`}
+          </Text>
+        </Flex>
+        <div
+          style={{
+            marginRight: '4px',
+            marginBottom: '4px',
+            marginTop: 'auto',
+          }}
+        >
+          <audio style={{ width: '100%' }} controls>
+            <source src={episode.audio} type="audio/mpeg"></source>
+          </audio>
+        </div>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default Episode

next-app/components/Header.js

@@ -0,0 +1,69 @@
+import Link from 'next/Link'
+import { useState } from 'react'
+import { Flex, Box, Text } from '@chakra-ui/react'
+import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
+
+const MenuItem = ({ children, isLast, to = '/' }) => {
+  return (
+    <Text
+      mb={{ base: isLast ? 0 : 8, sm: 0 }}
+      mr={{ base: 0, sm: isLast ? 0 : 8 }}
+      display="block"
+    >
+      <Link href={to}>{children}</Link>
+    </Text>
+  )
+}
+
+const Header = (props) => {
+  const [show, setShow] = useState(false)
+  const toggleMenu = () => setShow(!show)
+
+  return (
+    <Flex
+      as="nav"
+      align="center"
+      justify="space-between"
+      wrap="wrap"
+      w="100%"
+      mb={8}
+      p={8}
+      bg={['primary.500', 'primary.500', 'transparent', 'transparent']}
+      //color={['white', 'white', 'primary.700', 'primary.700']}
+      {...props}
+    >
+      <Flex align="center">
+        <Box w="200px">
+          <Text fontSize="lg" fontWeight="bold">
+            GRANDcast.FM
+          </Text>
+        </Box>
+      </Flex>
+
+      <Box display={{ base: 'block', md: 'none' }} onClick={toggleMenu}>
+        {show ? <CloseIcon /> : <HamburgerIcon />}
+      </Box>
+
+      <Box
+        display={{ base: show ? 'block' : 'none', md: 'block' }}
+        flexBasis={{ base: '100%', md: 'auto' }}
+      >
+        <Flex
+          align="center"
+          justify={['center', 'space-between', 'flex-end', 'flex-end']}
+          direction={['column', 'row', 'row', 'row']}
+          pt={[4, 4, 0, 0]}
+        >
+          <MenuItem to="/">Home</MenuItem>
+          <MenuItem to="/podcasts">Podcasts</MenuItem>
+          <MenuItem to="/playlists">Playlists</MenuItem>
+          <MenuItem to="/search" isLast>
+            Search
+          </MenuItem>
+        </Flex>
+      </Box>
+    </Flex>
+  )
+}
+
+export default Header

next-app/components/Podcast.js

@@ -0,0 +1,55 @@
+import {
+  Button,
+  Flex,
+  Box,
+  Image,
+  Heading,
+  Text,
+  Stack,
+  Tag,
+} from '@chakra-ui/react'
+import { AddIcon } from '@chakra-ui/icons'
+import { gql, useMutation } from '@apollo/client'
+
+const PODCAST_SUBSCRIBE = gql`
+  mutation podcastSubscribe($itunesID: String!) {
+    subscribeToPodcast(itunesId: $itunesID) {
+      title
+      itunesId
+    }
+  }
+`
+
+const Podcast = ({ podcast }) => {
+  const { title, itunesId, description, artwork, categories } = podcast
+  const [subscribeMutation, { data }] = useMutation(PODCAST_SUBSCRIBE)
+
+  return (
+    <Flex rounded="lg" borderWidth="2px" m={4} style={{ maxWidth: '700px' }}>
+      <Box width="200px">
+        <Image src={artwork} boxSize="200px" />
+        <Button
+          width="100%"
+          onClick={() =>
+            subscribeMutation({ variables: { itunesID: itunesId } })
+          }
+        >
+          <AddIcon />
+        </Button>
+      </Box>
+
+      <Box m={4} maxWidth="300px">
+        <Heading noOfLines={2}>{title}</Heading>
+        <Text noOfLines={3}>{description}</Text>
+
+        <Stack isInline>
+          {categories.slice(0, 3).map((c) => {
+            return <Tag>{c}</Tag>
+          })}
+        </Stack>
+      </Box>
+    </Flex>
+  )
+}
+
+export default Podcast

next-app/components/SignIn.js

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import { useAuth } from '../lib/auth.js'
+import {
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  Button,
+  Input,
+} from '@chakra-ui/react'
+const SignIn = () => {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const { signIn } = useAuth()
+
+  function onSubmit(e) {
+    e.preventDefault()
+    signIn({ username, password })
+  }
+
+  return (
+    <div>
+      <FormControl b={'1px'} id="signin">
+        <FormLabel m={4}>Sign In</FormLabel>
+        <Input
+          m={4}
+          type="text"
+          placeholder="username"
+          onChange={(e) => setUsername(e.target.value)}
+        ></Input>
+        <Input
+          m={4}
+          type="password"
+          placeholder="password"
+          onChange={(e) => setPassword(e.target.value)}
+        ></Input>
+        <Button w={'100%'} m={4} type="submit" onClick={onSubmit}>
+          Log In
+        </Button>
+      </FormControl>
+    </div>
+  )
+}
+
+export default SignIn