Polling url param (#391)

* Add category URL param on polling * Give tags onClick, put links on homepage * Card spacing
makerdao · Mar 18, 2022 · 5fbd21f · 5fbd21f
1 parent 31b89eb
commit 5fbd21f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 37 deletions.
diff --git a/modules/home/components/PollCategoriesLanding.tsx b/modules/home/components/PollCategoriesLanding.tsx
@@ -1,5 +1,6 @@
-import { Flex, Box, Heading } from 'theme-ui';
+import { Flex, Box, Heading, Link as ThemeUILink } from 'theme-ui';
 import { PollCategoryTag } from 'modules/polling/components/PollCategoryTag';
+import Link from 'next/link';
 import { PollCategory } from 'modules/polling/types';
 
 type Props = {
@@ -12,8 +13,11 @@ export const PollCategoriesLanding = ({ pollCategories }: Props): JSX.Element =>
     <Flex sx={{ flexWrap: 'wrap', justifyContent: 'center', maxWidth: '1000px', margin: 'auto' }}>
       {pollCategories.map(category => (
         <Box key={category.name} sx={{ my: 3, mx: 4 }}>
-          {/* TODO make these clickable links */}
-          <PollCategoryTag category={category.name} clickable={false} />
+          <Link href={{ pathname: '/polling', query: { category: category.name } }} passHref>
+            <ThemeUILink title={`${category.name} polls`}>
+              <PollCategoryTag category={category.name} />
+            </ThemeUILink>
+          </Link>
         </Box>
       ))}
     </Flex>

diff --git a/modules/polling/components/PollCategoryTag.tsx b/modules/polling/components/PollCategoryTag.tsx
@@ -1,13 +1,11 @@
 import { Box, Text } from 'theme-ui';
-import useUiFiltersStore from 'modules/app/stores/uiFilters';
-import shallow from 'zustand/shallow';
 
 export function PollCategoryTag({
   category,
-  clickable
+  onClick
 }: {
   category: string;
-  clickable?: boolean;
+  onClick?: (category?: any) => void;
 }): React.ReactElement {
   const categories = {
     Collateral: {
@@ -83,16 +81,6 @@ export function PollCategoryTag({
   const color = categories[category] ? categories[category].color : 'tagColorSeventeen';
   const backgroundColor = categories[category] ? categories[category].backgroundColor : 'tagColorSeventeenBg';
 
-  const [categoryFilter, setCategoryFilter] = useUiFiltersStore(
-    state => [state.pollFilters.categoryFilter, state.setCategoryFilter],
-    shallow
-  );
-
-  function onClickCategory() {
-    if (clickable) {
-      setCategoryFilter({ ...categoryFilter, [category]: !(categoryFilter || {})[category] });
-    }
-  }
   return (
     <Box
       sx={{
@@ -101,10 +89,10 @@ export function PollCategoryTag({
         padding: '4px 8px',
         display: 'flex',
         alignItems: 'center',
-        cursor: clickable ? 'pointer' : 'inherit',
+        cursor: onClick ? 'pointer' : 'inherit',
         color
       }}
-      onClick={onClickCategory}
+      onClick={onClick}
       title={`See all ${category} polls`}
     >
       <Text sx={{ fontSize: 2 }}>{category}</Text>

diff --git a/modules/polling/components/PollOverviewCard.tsx b/modules/polling/components/PollOverviewCard.tsx
@@ -11,6 +11,7 @@ import {
   Divider,
   Badge
 } from 'theme-ui';
+import shallow from 'zustand/shallow';
 import { isActivePoll } from 'modules/polling/helpers/utils';
 import CountdownTimer from '../../app/components/CountdownTimer';
 import VotingStatus from './PollVotingStatus';
@@ -32,6 +33,7 @@ import CommentCount from 'modules/comments/components/CommentCount';
 import { usePollComments } from 'modules/comments/hooks/usePollComments';
 import { useAccount } from 'modules/app/hooks/useAccount';
 import { ErrorBoundary } from 'modules/app/components/ErrorBoundary';
+import useUiFiltersStore from 'modules/app/stores/uiFilters';
 
 type Props = {
   poll: Poll;
@@ -49,6 +51,15 @@ export default function PollOverviewCard({ poll, reviewPage, showVoting, childre
 
   const { tally, error: errorTally, isValidating } = usePollTally(poll.pollId);
 
+  const [categoryFilter, setCategoryFilter] = useUiFiltersStore(
+    state => [state.pollFilters.categoryFilter, state.setCategoryFilter],
+    shallow
+  );
+
+  function onClickCategory(category) {
+    setCategoryFilter({ ...categoryFilter, [category]: !(categoryFilter || {})[category] });
+  }
+
   return (
     <Card
       data-testid="poll-overview-card"
@@ -97,7 +108,7 @@ export default function PollOverviewCard({ poll, reviewPage, showVoting, childre
                 <Flex>
                   {poll.categories.map(c => (
                     <Box key={c} sx={{ marginRight: 2 }}>
-                      <PollCategoryTag clickable={true} category={c} />
+                      <PollCategoryTag onClick={() => onClickCategory(c)} category={c} />
                     </Box>
                   ))}
                 </Flex>

diff --git a/pages/polling.tsx b/pages/polling.tsx
@@ -4,6 +4,7 @@ import { useBreakpointIndex } from '@theme-ui/match-media';
 import { Icon } from '@makerdao/dai-ui-icons';
 import ErrorPage from 'next/error';
 import { GetStaticProps } from 'next';
+import { useRouter } from 'next/router';
 import shallow from 'zustand/shallow';
 import sortBy from 'lodash/sortBy';
 import groupBy from 'lodash/groupBy';
@@ -48,6 +49,7 @@ const PollingOverview = ({ polls, categories }: Props) => {
     startDate,
     endDate,
     categoryFilter,
+    setCategoryFilter,
     showHistorical,
     showPollActive,
     showPollEnded,
@@ -58,6 +60,7 @@ const PollingOverview = ({ polls, categories }: Props) => {
       state.pollFilters.startDate,
       state.pollFilters.endDate,
       state.pollFilters.categoryFilter,
+      state.setCategoryFilter,
       state.pollFilters.showHistorical,
       state.pollFilters.showPollActive,
       state.pollFilters.showPollEnded,
@@ -66,6 +69,14 @@ const PollingOverview = ({ polls, categories }: Props) => {
     ],
     shallow
   );
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.query.category) {
+      const category = router.query.category as string;
+      setCategoryFilter({ [category]: true });
+    }
+  }, [router]);
 
   const [numHistoricalGroupingsLoaded, setNumHistoricalGroupingsLoaded] = useState(3);
   const loader = useRef<HTMLDivElement>(null);
@@ -172,16 +183,13 @@ const PollingOverview = ({ polls, categories }: Props) => {
                           {groupedActivePolls[date].length === 1 ? '' : 's'} - Ending{' '}
                           {formatDateWithTime(date)}
                         </Text>
-                        <Stack sx={{ mb: 0, display: activePolls.length ? undefined : 'none' }}>
+                        <Box sx={{ mb: 0, display: activePolls.length ? undefined : 'none' }}>
                           {groupedActivePolls[date].map((poll: Poll) => (
-                            <PollOverviewCard
-                              key={poll.slug}
-                              poll={poll}
-                              showVoting={!!account}
-                              reviewPage={false}
-                            />
+                            <Box key={poll.slug} sx={{ mb: 4 }}>
+                              <PollOverviewCard poll={poll} showVoting={!!account} reviewPage={false} />
+                            </Box>
                           ))}
-                        </Stack>
+                        </Box>
                       </div>
                     ))}
                   </Stack>
@@ -205,21 +213,18 @@ const PollingOverview = ({ polls, categories }: Props) => {
                     <Stack>
                       {sortedEndDatesHistorical.slice(0, numHistoricalGroupingsLoaded).map(date => (
                         <div key={date}>
-                          <Text variant="caps" color="textSecondary" mb={2}>
+                          <Text as="p" variant="caps" color="textSecondary" mb={2}>
                             {groupedHistoricalPolls[date].length} Poll
                             {groupedHistoricalPolls[date].length === 1 ? '' : 's'} - Ended{' '}
                             {formatDateWithTime(date)}
                           </Text>
-                          <Stack sx={{ mb: 4 }}>
+                          <Box>
                             {groupedHistoricalPolls[date].map((poll: Poll) => (
-                              <PollOverviewCard
-                                key={poll.slug}
-                                poll={poll}
-                                reviewPage={false}
-                                showVoting={false}
-                              />
+                              <Box key={poll.slug} sx={{ mb: 4 }}>
+                                <PollOverviewCard poll={poll} reviewPage={false} showVoting={false} />
+                              </Box>
                             ))}
-                          </Stack>
+                          </Box>
                         </div>
                       ))}
                     </Stack>