maplist cards

frontend-react/src/components/plus/Maplist.tsx

@@ -0,0 +1,76 @@
+import React, { useContext } from "react"
+import { Heading, Flex, Box, Avatar } from "@chakra-ui/core"
+import { mapIcons } from "../../assets/imageImports"
+import MyThemeContext from "../../themeContext"
+import { Stage } from "../../types"
+
+interface MaplistCardProps {
+  title: string
+  stages: Stage[]
+}
+
+const MaplistCard: React.FC<MaplistCardProps> = ({ title, stages }) => {
+  const { themeColorHex } = useContext(MyThemeContext)
+  return (
+    <Flex
+      flexDirection="column"
+      rounded="lg"
+      overflow="hidden"
+      boxShadow="0px 0px 16px 6px rgba(0,0,0,0.1)"
+      p="15px"
+      mr="1em"
+      mb="1em"
+      w="350px"
+    >
+      <Heading textAlign="center" mb="0.5em" color={themeColorHex}>
+        {title}
+      </Heading>
+      <Flex alignItems="center" justifyContent="center" flexWrap="wrap">
+        {stages.map(stage => {
+          return (
+            <Avatar
+              src={mapIcons[stage]}
+              size="lg"
+              my="5px"
+              mr="0.5em"
+              title={stage}
+            />
+          )
+        })}
+      </Flex>
+    </Flex>
+  )
+}
+
+interface MaplistProps {
+  name: string
+  sz: string[]
+  tc: string[]
+  rm: string[]
+  cb: string[]
+  voterCount: number
+}
+
+const Maplist: React.FC<MaplistProps> = ({
+  name,
+  sz,
+  tc,
+  rm,
+  cb,
+  voterCount,
+}) => {
+  return (
+    <>
+      <Heading size="lg">{name} maps</Heading>
+      <Box>Based on {voterCount} votes</Box>
+      <Flex flexWrap="wrap" pt="1em">
+        <MaplistCard stages={sz} title="Splat Zones" />
+        <MaplistCard stages={tc} title="Tower Control" />
+        <MaplistCard stages={rm} title="Rainmaker" />
+        <MaplistCard stages={cb} title="Clam Blitz" />
+      </Flex>
+    </>
+  )
+}
+
+export default Maplist

frontend-react/src/components/plus/PlusPage.tsx

@@ -13,6 +13,11 @@ import { FaHistory, FaVoteYea } from "react-icons/fa"
 import Button from "../elements/Button"
 import { Helmet } from "react-helmet-async"
 import { Flex, Box } from "@chakra-ui/core"
+import Maplist from "./Maplist"
+import {
+  PLUS_MAPLISTS,
+  PlusMaplistsData,
+} from "../../graphql/queries/plusMaplists"
 
 interface PlusInfoData {
   plusInfo: {
@@ -29,13 +34,22 @@ const PlusPage: React.FC<RouteComponentProps> = () => {
     error: userQueryError,
     loading: userQueryLoading,
   } = useQuery(USER)
+  const {
+    data: maplistData,
+    error: maplistError,
+    loading: maplistLoading,
+  } = useQuery<PlusMaplistsData>(PLUS_MAPLISTS)
 
   if (error) return <Error errorMessage={error.message} />
-  if (loading || userQueryLoading || !data) return <Loading />
   if (userQueryError) return <Error errorMessage={userQueryError.message} />
+  if (maplistError) return <Error errorMessage={maplistError.message} />
+  if (loading || userQueryLoading || !data || maplistLoading || !maplistData)
+    return <Loading />
   if (!userData.user) return <Redirect to="/access" />
   if (!data.plusInfo) return <Redirect to="/404" />
 
+  const maplist = maplistData.plusMaplists[0]
+
   return (
     <>
       <Helmet>
@@ -65,7 +79,7 @@ const PlusPage: React.FC<RouteComponentProps> = () => {
           handleError={handleError}
         />
       )*/}
-      <Flex>
+      <Flex mb="1em">
         <Box mr="1em">
           <Link to="/plus/history">
             <Button outlined icon={FaHistory}>
@@ -79,6 +93,14 @@ const PlusPage: React.FC<RouteComponentProps> = () => {
           </Button>
         </Link>
       </Flex>
+      <Maplist
+        name={maplist.name}
+        sz={maplist.sz}
+        tc={maplist.tc}
+        rm={maplist.rm}
+        cb={maplist.cb}
+        voterCount={maplist.plus.voter_count}
+      />
       <Suggestions user={userData.user} />
     </>
   )

frontend-react/src/graphql/queries/plusMaplists.ts

@@ -0,0 +1,48 @@
+import { gql, DocumentNode } from "apollo-boost"
+import { Stage } from "../../types"
+
+export interface PlusMaplistsData {
+  plusMaplists: {
+    name: string
+    sz: Stage[]
+    tc: Stage[]
+    rm: Stage[]
+    cb: Stage[]
+    plus: {
+      month: number
+      year: number
+      voter_count: number
+      vote_counts: {
+        name: Stage
+        sz: number[]
+        tc: number[]
+        rm: number[]
+        cb: number[]
+      }
+    }
+  }[]
+}
+
+export const PLUS_MAPLISTS: DocumentNode = gql`
+  {
+    plusMaplists {
+      name
+      sz
+      tc
+      rm
+      cb
+      plus {
+        month
+        year
+        voter_count
+        vote_counts {
+          name
+          sz
+          tc
+          rm
+          cb
+        }
+      }
+    }
+  }
+`

frontend-react/src/types.ts

@@ -9,6 +9,7 @@ import {
   headGearEnglish,
   clothingGearEnglish,
   shoesGearEnglish,
+  maps,
 } from "./utils/lists"
 
 // https://github.com/microsoft/TypeScript/issues/28046#issuecomment-480516434
@@ -19,6 +20,7 @@ type ElementType<T extends ReadonlyArray<unknown>> = T extends ReadonlyArray<
   : never
 
 export type Weapon = ElementType<typeof weapons>
+export type Stage = ElementType<typeof maps>
 export type CountryCode = ElementType<typeof countryCodes>
 export type ThemeColor = ElementType<typeof themeColors>
 

graphql-schemas/maps.js

@@ -72,7 +72,10 @@ const resolvers = {
         })
     },
     plusMaplists: (root, args) => {
-      return Maplist.find({ plus: { $ne: null } })
+      return Maplist.find({ plus: { $ne: null } }).sort({
+        "plus.year": "desc",
+        "plus.month": "desc",
+      })
     },
     mapVotes: async (root, args, ctx) => {
       if (!ctx.user || !ctx.user.plus || !ctx.user.plus.membership_status) {