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

next-app/package.json

@@ -9,6 +9,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.3.7",
+    "@chakra-ui/icons": "^1.0.5",
+    "@chakra-ui/react": "^1.3.3",
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
+    "framer-motion": "^3.3.0",
     "next": "10.0.5",
     "react": "17.0.1",
     "react-dom": "17.0.1"

next-app/pages/_app.js

@@ -1,11 +1,16 @@
 import '../styles/globals.css'
 import { AuthProvider } from '../lib/auth.js'
+import { ChakraProvider } from '@chakra-ui/react'
+import Header from '../components/Header'
 
 function MyApp({ Component, pageProps }) {
   return (
-    <AuthProvider>
-      <Component {...pageProps} />
-    </AuthProvider>
+    <ChakraProvider>
+      <AuthProvider>
+        <Header />
+        <Component {...pageProps} />
+      </AuthProvider>
+    </ChakraProvider>
   )
 }
 

next-app/pages/index.js

@@ -3,35 +3,9 @@ import { useState } from 'react'
 import styles from '../styles/Home.module.css'
 import { gql, useQuery } from '@apollo/client'
 import { useAuth } from '../lib/auth.js'
-
-const SignIn = () => {
-  const [username, setUsername] = useState('')
-  const [password, setPassword] = useState('')
-  const { signIn } = useAuth()
-
-  function onSubmit(e) {
-    e.preventDefault()
-    signIn({ username, password })
-  }
-
-  return (
-    <div>
-      <form onSubmit={onSubmit}>
-        <input
-          type="text"
-          placeholder="username"
-          onChange={(e) => setUsername(e.target.value)}
-        ></input>
-        <input
-          type="password"
-          placeholder="password"
-          onChange={(e) => setPassword(e.target.value)}
-        ></input>
-        <button type="submit">Log In</button>
-      </form>
-    </div>
-  )
-}
+import SignIn from '../components/SignIn'
+import Episode from '../components/Episode'
+import { Container, VStack } from '@chakra-ui/react'
 
 const EpisodeFeed = () => {
   const FeedQuery = gql`
@@ -40,24 +14,50 @@ const EpisodeFeed = () => {
         id
         title
         audio
+        summary
+        image
+        pubDate {
+          day
+          month
+          year
+        }
         podcast {
           title
+          image
+        }
+      }
+    }
+  `
+
+  const PlaylistQuery = gql`
+    {
+      playlists {
+        name
+        episodes {
+          id
         }
       }
     }
   `
 
   const { data } = useQuery(FeedQuery)
+  const { data: playlistData } = useQuery(PlaylistQuery)
   const { signOut } = useAuth()
 
   return (
     <div>
-      <h1>Episode Feed:</h1>
-      <ul>
+      <VStack spacing={8} w={'100%'}>
         {data?.episodeFeed.map((v) => {
-          return <li key={v.id}>{v.title}</li>
+          // return <li key={v.id}>{v.title}</li>
+          return (
+            <Episode
+              key={v.id}
+              episode={v}
+              playlists={playlistData?.playlists}
+            />
+          )
         })}
-      </ul>
+      </VStack>
       <button onClick={() => signOut()}>Sign Out</button>
     </div>
   )
@@ -66,17 +66,16 @@ const EpisodeFeed = () => {
 export default function Home() {
   const { isSignedIn } = useAuth()
   return (
-    <div className={styles.container}>
+    <div>
       <Head>
-        <title>Create Next App</title>
+        <title>GRANDcast.FM</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className={styles.main}>
-        <h1>GRANDcast.FM</h1>
+      <Container>
         {!isSignedIn() && <SignIn />}
         {isSignedIn() && <EpisodeFeed />}
-      </main>
+      </Container>
     </div>
   )
 }

next-app/pages/playlists.js

@@ -0,0 +1,160 @@
+import { useState } from 'react'
+import { gql, useMutation, useQuery } from '@apollo/client'
+import Episode from '../components/Episode'
+import SignIn from '../components/SignIn'
+import { useAuth } from '../lib/auth'
+import {
+  VStack,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  Select,
+  Container,
+  Popover,
+  PopoverTrigger,
+  PopoverHeader,
+  PopoverBody,
+  PopoverContent,
+  PopoverArrow,
+  PopoverCloseButton,
+  Button,
+  Flex,
+  Input,
+} from '@chakra-ui/react'
+
+import { AddIcon } from '@chakra-ui/icons'
+
+const CREATE_PLAYLIST = gql`
+  mutation createNewPlaylist($playlistName: String!) {
+    createPlaylist(name: $playlistName) {
+      name
+    }
+  }
+`
+
+const GET_PLAYLISTS = gql`
+  {
+    playlists {
+      name
+      episodes {
+        id
+        title
+        audio
+        summary
+        image
+        pubDate {
+          day
+          month
+          year
+        }
+        podcast {
+          title
+          image
+        }
+      }
+    }
+  }
+`
+
+export default function Playlists() {
+  const [createPlaylist] = useMutation(CREATE_PLAYLIST)
+  const [newPlaylist, setNewPlaylist] = useState('')
+  const { data } = useQuery(GET_PLAYLISTS)
+
+  const [selectedPlaylist, setSelectedPlaylist] = useState('')
+  const isPopoverOpen = useState(false)
+
+  const { isSignedIn } = useAuth()
+
+  // show signin form if not authenticated
+  // create new playlist
+  // dropdown to select playlist
+  // show episodes for each playlist when selected
+
+  const filteredPlaylist = data?.playlists.filter((p) => {
+    return p.name === selectedPlaylist
+  })[0]
+
+  return (
+    <Container>
+      {!isSignedIn() && <SignIn />}
+      {isSignedIn() && (
+        <div>
+          <FormControl id="playlists">
+            <FormLabel>Playlists</FormLabel>
+            <Flex>
+              <Select
+                placeholder="Select playlist"
+                onChange={(e) => setSelectedPlaylist(e.target.value)}
+              >
+                {data?.playlists?.map((p) => {
+                  return (
+                    <option key={p.name} value={p.name}>
+                      {p.name}
+                    </option>
+                  )
+                })}
+              </Select>
+              <Popover>
+                <PopoverTrigger>
+                  <Button ml={4}>
+                    <AddIcon />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <PopoverArrow />
+                  <PopoverCloseButton />
+                  <PopoverHeader>Create new playlist</PopoverHeader>
+                  <PopoverBody>
+                    <FormControl id="newplaylist">
+                      <FormLabel>New playlist</FormLabel>
+                      <Input
+                        type="text"
+                        onChange={(e) => setNewPlaylist(e.target.value)}
+                      />
+                      <Button
+                        mt={4}
+                        onClick={() =>
+                          createPlaylist({
+                            variables: { playlistName: newPlaylist },
+                            update: (proxy) => {
+                              const data = proxy.readQuery({
+                                query: GET_PLAYLISTS,
+                              })
+                              proxy.writeQuery({
+                                query: GET_PLAYLISTS,
+                                data: {
+                                  playlists: [
+                                    ...data.playlists,
+                                    {
+                                      __typename: 'Playlist',
+                                      name: newPlaylist,
+                                    },
+                                  ],
+                                },
+                              })
+                            },
+                          })
+                        }
+                      >
+                        Create
+                      </Button>
+                    </FormControl>
+                  </PopoverBody>
+                </PopoverContent>
+              </Popover>
+            </Flex>
+            <FormHelperText>Foobar</FormHelperText>
+          </FormControl>
+          <VStack spacing={4}>
+            {filteredPlaylist?.episodes?.map((e) => {
+              return (
+                <Episode key={e.id} episode={e} playlists={data.playlists} />
+              )
+            })}
+          </VStack>
+        </div>
+      )}
+    </Container>
+  )
+}

next-app/pages/podcasts.js

@@ -1,24 +1,66 @@
-import { useQuery, gql } from '@apollo/client'
+import { useState } from 'react'
+import { useLazyQuery, gql } from '@apollo/client'
+import { useAuth } from '../lib/auth'
+import SignIn from '../components/SignIn'
+import {
+  FormLabel,
+  FormControl,
+  Input,
+  Button,
+  Container,
+  Flex,
+  SimpleGrid,
+  VStack,
+} from '@chakra-ui/react'
+import Podcast from '../components/Podcast'
 
-const PodcastQuery = gql`
-  {
-    Podcast {
+const PodcastSearchQuery = gql`
+  query podcastSearch($searchTerm: String!) {
+    podcastSearch(searchTerm: $searchTerm) {
+      itunesId
       title
+      description
+      feedURL
+      artwork
+      categories
     }
   }
 `
 
 const Podcasts = () => {
-  const { data } = useQuery(PodcastQuery)
+  const [getPodcasts, { data }] = useLazyQuery(PodcastSearchQuery)
+  const { isSignedIn } = useAuth()
+  const [searchString, setSearchString] = useState('')
   return (
-    <div>
-      <h1>Podcasts:</h1>
-      <ul>
-        {data?.Podcast.map((v) => {
-          return <li key={v.title}>{v.title}</li>
-        })}
-      </ul>
-    </div>
+    <Container>
+      {!isSignedIn() && <SignIn />}
+      {isSignedIn() && (
+        <div>
+          <FormControl id="podcastsearch">
+            <FormLabel>Search podcasts</FormLabel>
+            <Flex>
+              <Input onChange={(e) => setSearchString(e.target.value)} />
+              <Button
+                ml={4}
+                onClick={() =>
+                  getPodcasts({ variables: { searchTerm: searchString } })
+                }
+              >
+                Search
+              </Button>
+            </Flex>
+          </FormControl>
+          <div>
+            <VStack>
+              {data &&
+                data.podcastSearch.map((p) => {
+                  return <Podcast podcast={p} />
+                })}
+            </VStack>
+          </div>
+        </div>
+      )}
+    </Container>
   )
 }