plus maplist new/gone notifs

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

@@ -1,5 +1,5 @@
 import React, { useContext } from "react"
-import { Heading, Flex, Box, Avatar, Icon } from "@chakra-ui/core"
+import { Heading, Flex, Box, Avatar, Icon, AvatarBadge } from "@chakra-ui/core"
 import { mapIcons } from "../../assets/imageImports"
 import MyThemeContext from "../../themeContext"
 import { Stage } from "../../types"
@@ -7,9 +7,14 @@ import { Stage } from "../../types"
 interface MaplistCardProps {
   modeShort: string
   stages: Stage[]
+  newMaps: Stage[]
 }
 
-const MaplistCard: React.FC<MaplistCardProps> = ({ modeShort, stages }) => {
+const MaplistCard: React.FC<MaplistCardProps> = ({
+  modeShort,
+  stages,
+  newMaps,
+}) => {
   const { themeColorHex, themeColorWithShade } = useContext(MyThemeContext)
   return (
     <Flex
@@ -26,7 +31,7 @@ const MaplistCard: React.FC<MaplistCardProps> = ({ modeShort, stages }) => {
         <Icon name={modeShort as any} color={themeColorWithShade} size="2em" />
       </Heading>
       <Flex alignItems="center" justifyContent="center" flexWrap="wrap">
-        {stages.map(stage => {
+        {stages.map((stage) => {
           return (
             <Avatar
               key={stage}
@@ -36,7 +41,11 @@ const MaplistCard: React.FC<MaplistCardProps> = ({ modeShort, stages }) => {
               mx="0.2em"
               title={stage}
               textAlign="center"
-            />
+            >
+              {newMaps.includes(stage) && (
+                <AvatarBadge size="1em" bg={themeColorWithShade} />
+              )}
+            </Avatar>
           )
         })}
       </Flex>
@@ -47,30 +56,76 @@ const MaplistCard: React.FC<MaplistCardProps> = ({ modeShort, stages }) => {
 interface MaplistProps {
   name: string
   sz: string[]
+  pastSz: string[]
   tc: string[]
+  pastTc: string[]
   rm: string[]
+  pastRm: string[]
   cb: string[]
+  pastCb: string[]
   voterCount: number
 }
 
 const Maplist: React.FC<MaplistProps> = ({
   name,
   sz,
+  pastSz,
   tc,
+  pastTc,
   rm,
+  pastRm,
   cb,
+  pastCb,
   voterCount,
 }) => {
+  const { grayWithShade, themeColorWithShade } = useContext(MyThemeContext)
+
+  const lastMonth = [pastSz, pastTc, pastRm, pastCb]
+  const thisMonth = [sz, tc, rm, cb]
+  const toAdd = ["SZ", "TC", "RM", "CB"]
+
+  let goneMaps: Stage[] = []
+
+  lastMonth.forEach((arr, index) => {
+    const append = toAdd[index]
+    const newOfTheMode = arr
+      .filter((map) => !thisMonth[index].includes(map))
+      .map((map) => `${map} (${append})`)
+
+    goneMaps = [...goneMaps, ...newOfTheMode]
+  })
+
+  const newMaps: Stage[][] = []
+
+  thisMonth.forEach((arr, index) => {
+    const newOfTheMode = arr.filter((map) => !lastMonth[index].includes(map))
+
+    newMaps.push(newOfTheMode)
+  })
+
   return (
     <>
       <Heading size="lg">{name} maps</Heading>
-      <Box>Based on {voterCount} votes</Box>
+      <Box color={grayWithShade}>Based on {voterCount} votes</Box>
       <Flex flexWrap="wrap" pt="1em">
-        <MaplistCard stages={sz} modeShort="sz" />
-        <MaplistCard stages={tc} modeShort="tc" />
-        <MaplistCard stages={rm} modeShort="rm" />
-        <MaplistCard stages={cb} modeShort="cb" />
+        <MaplistCard stages={sz} modeShort="sz" newMaps={newMaps[0]} />
+        <MaplistCard stages={tc} modeShort="tc" newMaps={newMaps[1]} />
+        <MaplistCard stages={rm} modeShort="rm" newMaps={newMaps[2]} />
+        <MaplistCard stages={cb} modeShort="cb" newMaps={newMaps[3]} />
       </Flex>
+      {goneMaps.length > 0 && (
+        <Box color={grayWithShade} fontSize="0.8em">
+          Maps gone since last month: {goneMaps.join(", ")}. New maps marked
+          with{" "}
+          <Box
+            h="15px"
+            w="15px"
+            backgroundColor={themeColorWithShade}
+            display="inline-block"
+            borderRadius="50%"
+          />
+        </Box>
+      )}
     </>
   )
 }

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

@@ -6,7 +6,6 @@ import Loading from "../common/Loading"
 import Error from "../common/Error"
 import { PLUS_INFO, PlusInfoData } from "../../graphql/queries/plusInfo"
 import { USER } from "../../graphql/queries/user"
-//import Voting from "./Voting"
 import { Redirect, RouteComponentProps, Link } from "@reach/router"
 import PageHeader from "../common/PageHeader"
 import { FaHistory, FaVoteYea, FaMapMarkedAlt } from "react-icons/fa"
@@ -42,6 +41,7 @@ const PlusPage: React.FC<RouteComponentProps> = () => {
   if (!data.plusInfo) return <Redirect to="/404" />
 
   const maplist = maplistData.plusMaplists[0]
+  const lastMonthsMaplist = maplistData.plusMaplists[1]
   const plusInfo = data.plusInfo
 
   return (
@@ -85,9 +85,13 @@ const PlusPage: React.FC<RouteComponentProps> = () => {
           <Maplist
             name={maplist.name}
             sz={maplist.sz}
+            pastSz={lastMonthsMaplist.sz}
             tc={maplist.tc}
+            pastTc={lastMonthsMaplist.tc}
             rm={maplist.rm}
+            pastRm={lastMonthsMaplist.rm}
             cb={maplist.cb}
+            pastCb={lastMonthsMaplist.cb}
             voterCount={maplist.plus.voter_count}
           />
           <Suggestions user={userData.user} />