chore: dysbulic's pr comments

packages/web/components/Dashboard/LatestContent.tsx

@@ -8,48 +8,23 @@ import { Watch } from './LatestContentTabs/Watch';
 export const LatestContent: React.FC = () => (
   <Tabs mt={5} size="lg" variant="line" colorScheme="gray.600" isFitted>
     <TabList borderBottomWidth={0}>
-      <Tab
-        color="gray.600"
-        _selected={{ color: 'white', borderBottomColor: 'white' }}
-        _focus={{
-          boxShadow: 'none',
-          backgroundColor: 'transparent',
-        }}
-        _active={{
-          boxShadow: 'none',
-          backgroundColor: 'transparent',
-        }}
-      >
-        Read
-      </Tab>
-      <Tab
-        color="gray.600"
-        _selected={{ color: 'white', borderBottomColor: 'white' }}
-        _focus={{
-          boxShadow: 'none',
-          backgroundColor: 'transparent',
-        }}
-        _active={{
-          boxShadow: 'none',
-          backgroundColor: 'transparent',
-        }}
-      >
-        Listen
-      </Tab>
-      <Tab
-        color="gray.600"
-        _selected={{ color: 'white', borderBottomColor: 'white' }}
-        _focus={{
-          boxShadow: 'none',
-          backgroundColor: 'transparent',
-        }}
-        _active={{
-          boxShadow: 'none',
-          backgroundColor: 'transparent',
-        }}
-      >
-        Watch
-      </Tab>
+      {['Read', 'Listen', 'Watch'].map((title) => (
+        <Tab
+          key={title}
+          color="gray.600"
+          _selected={{ color: 'white', borderBottomColor: 'white' }}
+          _focus={{
+            boxShadow: 'none',
+            backgroundColor: 'transparent',
+          }}
+          _active={{
+            boxShadow: 'none',
+            backgroundColor: 'transparent',
+          }}
+        >
+          {title}
+        </Tab>
+      ))}
     </TabList>
 
     <TabPanels>

packages/web/components/Dashboard/LatestContentTabs/Listen.tsx

@@ -3,83 +3,106 @@ import React, { useEffect, useState } from 'react';
 import { parse } from 'rss-to-json';
 import useSWR from 'swr';
 
+import { podcastRSSURL } from '../config';
+
+export type ContentItem = {
+  title: string;
+  src: string;
+  showMore: boolean;
+  description: string;
+};
+
 export const Listen: React.FC = () => {
-  const [items, setItems] = useState<
-    Array<{
-      title: string;
-      src: string;
-      showMore: boolean;
-      description: string;
-    }>
-  >([]);
+  const [podcasts, setPodcasts] = useState<Array<ContentItem>>([]);
 
-  const [isLoading, setIsLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
 
-  const { data, error } = useSWR(
-    'https://anchor.fm/s/57a641c/podcast/rss',
-    parse,
-  );
+  const { data, error } = useSWR(podcastRSSURL, parse);
 
   if (error) {
-    console.log(error);
-    setIsLoading(false);
+    console.error(error);
+    setLoading(false);
   }
 
   useEffect(() => {
     if (data) {
-      data.items = data.items.map((item) => ({
-        title: item.title,
-        description: item.description.replace(/<\/?[^>]+(>|$)/g, ''),
-        src: item.enclosures[0].url,
-        showMore: false,
-      }));
+      data.items = data.items
+        .filter((item) => item.enclosures)
+        .map((item) => ({
+          title: item.title,
+          description: item.description.replace(/<\/?[^\s>][^>]*\/?>/gm, ''),
+          src: item.enclosures[0].url,
+          showMore: false,
+        }));
 
-      setIsLoading(false);
+      setPodcasts(data.items);
+
+      setLoading(false);
     }
   }, [data]);
 
-  const findAndReplace = (src: string) => {
-    const foundIndex = items.findIndex((x) => x.src === src);
-    items[foundIndex].showMore = !items[foundIndex].showMore;
-    return items;
+  const toggleVisibility = ({
+    items,
+    src,
+  }: {
+    items: ContentItem[];
+    src: string;
+  }) => {
+    const itemsCopy = [...items];
+    const index = items.findIndex((item) => item.src === src);
+    itemsCopy[index].showMore = !items[index].showMore;
+    return itemsCopy;
   };
 
   return (
     <Box pt={4}>
-      {isLoading ? (
+      {loading ? (
         <LoadingState />
       ) : (
-        items.map((item) => (
+        podcasts.map((podcast) => (
           <Box
-            key={item.title}
+            key={podcast.title}
             mt={4}
             p={6}
             backgroundColor="blackAlpha.500"
             borderRadius="md"
           >
             <Heading size="xs" color="white" pb={4}>
-              {item.title}
+              {podcast.title}
             </Heading>
             <Text
-              textOverflow={item.showMore ? '' : 'ellipsis'}
-              overflow={item.showMore ? '' : 'hidden'}
-              whiteSpace={item.showMore ? 'normal' : 'nowrap'}
+              textOverflow={podcast.showMore ? '' : 'ellipsis'}
+              overflow={podcast.showMore ? '' : 'hidden'}
+              whiteSpace={podcast.showMore ? 'normal' : 'nowrap'}
               fontSize="sm"
               cursor="pointer"
               color="white"
-              onClick={() => setItems([...findAndReplace(item.src)])}
+              onClick={() =>
+                setPodcasts((items) =>
+                  toggleVisibility({
+                    items,
+                    src: podcast.src,
+                  }),
+                )
+              }
             >
-              {item.description}
+              {podcast.description}
             </Text>
             <Text
               cursor="pointer"
               color="blueLight"
-              pt={1}
-              pb={1}
+              py={1}
               fontWeight="bold"
-              onClick={() => setItems([...findAndReplace(item.src)])}
+              onClick={() =>
+                setPodcasts((items) =>
+                  toggleVisibility({
+                    items,
+                    src: podcast.src,
+                  }),
+                )
+              }
             >
-              {item.showMore ? 'Show less' : 'Show more'}
+              {podcast.showMore ? 'Show less' : 'Show more'}
             </Text>
             {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
             <audio
@@ -90,7 +113,7 @@ export const Listen: React.FC = () => {
               }}
               controls
             >
-              <source src={item.src} type="audio/mp3" />
+              <source src={podcast.src} type="audio/mp3" />
               Your browser does not support the audio element.
             </audio>
           </Box>

packages/web/components/Dashboard/config.ts

@@ -3,6 +3,7 @@ export const apiUrl = 'https://api.coingecko.com/api/v3/';
 export const tokenQuery = '?localization=false&tickers=true&market_data=true';
 export const chartQuery =
   '/market_chart?vs_currency=usd&days=30&interval=daily';
+export const podcastRSSURL = 'https://anchor.fm/s/57a641c/podcast/rss';
 
 export const gridData = [
   { i: 'latest', x: 0, y: 0, w: 6, h: 6 },

packages/web/pages/join/guild/[guildname].tsx

@@ -34,15 +34,17 @@ const SetupGuild: React.FC = () => {
   }
 
   const onSubmit = async (editGuildFormInputs: EditGuildFormInputs) => {
-    const { type, ...otherInputs } = editGuildFormInputs;
+    const {
+      type,
+      discordAdminRoles: adminRoles,
+      discordMembershipRoles: membershipRoles,
+      ...otherInputs
+    } = editGuildFormInputs;
+
     const payload: GuildInfo = {
       ...otherInputs,
-      discordAdminRoles: editGuildFormInputs.discordAdminRoles.map(
-        (o) => o.value,
-      ),
-      discordMembershipRoles: editGuildFormInputs.discordMembershipRoles.map(
-        (o) => o.value,
-      ),
+      discordAdminRoles: adminRoles.map((o) => o.value),
+      discordMembershipRoles: membershipRoles.map((o) => o.value),
       type: (type as unknown) as GuildType_ActionEnum,
       uuid: guild.id,
     };