Merge pull request #1651 from mertbagt/newsfeed-ui-and-navigation

Newsfeed UI and Navigation

components/AlertCard/AlertCard.tsx

@@ -1,7 +1,7 @@
-import { CardTitle } from "components/Card"
+import { CardTitle, CardTitleV2 } from "components/Card"
 import { Timestamp } from "firebase/firestore"
 import { Card as MapleCard } from "../Card/Card"
-import { AlertCardBody } from "./AlertCardBody"
+import { AlertCardBody, AlertCardBodyV2 } from "./AlertCardBody"
 
 export const AlertCard = (props: {
   header: string
@@ -35,3 +35,42 @@ export const AlertCard = (props: {
 
   return <MapleCard headerElement={header} body={body} />
 }
+
+// newsfeed bill card
+export const AlertCardV2 = (props: {
+  court: string
+  header: string
+  subheader: string
+  timestamp: Timestamp
+  headerImgSrc: string
+  headerImgTitle?: string
+  bodyImgSrc: string
+  bodyImgAltTxt: string
+  bodyText: string
+  isBillMatch: boolean
+}) => {
+  const date = props.timestamp.toDate()
+  const formattedTimestamp = `${date.toLocaleDateString()}`
+  const header = (
+    <CardTitleV2
+      court={props.court}
+      header={props.header}
+      subheader={props.subheader}
+      timestamp={formattedTimestamp}
+      imgSrc={props.headerImgSrc}
+      imgTitle={props.headerImgTitle ?? ""}
+      isBillMatch={props.isBillMatch}
+    />
+  )
+
+  const body = (
+    <AlertCardBodyV2
+      imgSrc={props.bodyImgSrc}
+      imgAltTxt={props.bodyImgAltTxt}
+      text={props.bodyText}
+      timestamp={formattedTimestamp}
+    />
+  )
+
+  return <MapleCard headerElement={header} body={body} />
+}

components/AlertCard/AlertCardBody.tsx

@@ -1,10 +1,18 @@
 import { ReactElement } from "react"
 import CardBootstrap from "react-bootstrap/Card"
+import styled from "styled-components"
+import { Col, Row, Spinner } from "../bootstrap"
+import { Timestamp } from "firebase/firestore"
+
+const AlertCardInnerBodyV2 = styled.div`
+  background-color: #d1d6e7;
+`
 
 interface AlertCardBodyProps {
   imgSrc?: string
   imgAltTxt?: string
   text: string
+  timestamp?: string
 }
 
 export const AlertCardBody = (props: AlertCardBodyProps) => {
@@ -18,3 +26,33 @@ export const AlertCardBody = (props: AlertCardBodyProps) => {
     </div>
   )
 }
+
+export const AlertCardBodyV2 = (props: AlertCardBodyProps) => {
+  const { imgSrc, imgAltTxt, text, timestamp } = props
+  return (
+    <div>
+      <CardBootstrap.Body className={`p-0`}>
+        <AlertCardInnerBodyV2
+          className={`align-items-center d-flex mx-2 mt-1 mb-2 p-2 rounded`}
+        >
+          <img
+            src="\images\clock.svg"
+            height="105.6"
+            width="105.6"
+            alt={imgAltTxt}
+            className={`m-3`}
+          />
+          <Col className={`m-2`}>
+            <CardBootstrap.Text className={`mb-0`}>
+              <strong>{text}</strong>
+            </CardBootstrap.Text>
+            <>
+              {"Action taken on "}
+              {timestamp}
+            </>
+          </Col>
+        </AlertCardInnerBodyV2>
+      </CardBootstrap.Body>
+    </div>
+  )
+}

components/Card/CardTitle.tsx

@@ -1,13 +1,32 @@
+import { collection, getDocs, query, where } from "firebase/firestore"
+import { getFunctions, httpsCallable } from "firebase/functions"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { ReactElement } from "react"
 import CardBootstrap from "react-bootstrap/Card"
+import { formatBillId } from "components/formatting"
+
+import { useTranslation } from "next-i18next"
+import { useAuth } from "../auth"
+import { Stack } from "../bootstrap"
+import { firestore } from "../firebase"
+import { TitledSectionCard } from "../shared"
+
+import {
+  BillElement,
+  UserElement
+} from "components/EditProfilePage/FollowingTabComponents"
+import { is } from "date-fns/locale"
 
 interface CardTitleProps {
+  court?: string
   header?: string
   subheader?: string
   timestamp?: string
   imgSrc?: string
   imgTitle?: string
   inHeaderElement?: ReactElement
+  isBillMatch?: boolean
+  isUserMatch?: boolean
 }
 
 export const CardTitle = (props: CardTitleProps) => {
@@ -42,3 +61,59 @@ export const CardTitle = (props: CardTitleProps) => {
     </CardBootstrap.Body>
   )
 }
+
+// newsfeed bill card title
+export const CardTitleV2 = (props: CardTitleProps) => {
+  const {
+    court,
+    header,
+    subheader,
+    timestamp,
+    imgSrc,
+    imgTitle,
+    inHeaderElement,
+    isBillMatch
+  } = props
+  const { t } = useTranslation("common")
+
+  return (
+    <CardBootstrap.Body className={`align-items-center d-flex px-2 pt-2 pb-0`}>
+      <div className="justify-content-middle d-flex flex-column align-items-center">
+        {imgSrc && <img alt="" src={imgSrc} width="32" height="32" />}
+      </div>
+      <CardBootstrap.Body className="px-3 py-0">
+        {header && (
+          <CardBootstrap.Title
+            className={`align-items-start fs-6 lh-sm mb-1 text-secondary`}
+          >
+            <a href={`/bills/${court}/${header}`}>
+              <strong>{formatBillId(header)}</strong>
+            </a>{" "}
+            {subheader ? (
+              <>
+                {t("newsfeed.action_update")}
+                {subheader}
+              </>
+            ) : (
+              <></>
+            )}
+          </CardBootstrap.Title>
+        )}
+        {header ? (
+          <CardBootstrap.Title
+            className={`align-items-start fs-6 lh-sm mb-1 text-body-tertiary`}
+          >
+            {header && isBillMatch ? (
+              <>{t("newsfeed.follow")}</>
+            ) : (
+              <>{t("newsfeed.not_follow")}</>
+            )}
+            <strong>{formatBillId(header)}</strong>
+          </CardBootstrap.Title>
+        ) : (
+          <></>
+        )}
+      </CardBootstrap.Body>
+    </CardBootstrap.Body>
+  )
+}

components/DesktopNav.tsx

@@ -1,3 +1,4 @@
+import { useFlags } from "components/featureFlags"
 import { useTranslation } from "next-i18next"
 import React from "react"
 import { SignInWithButton, signOutAndRedirectToHome, useAuth } from "./auth"
@@ -12,6 +13,7 @@ import {
   NavbarLinkFAQ,
   NavbarLinkGoals,
   NavbarLinkLogo,
+  NavbarLinkNewsfeed,
   NavbarLinkProcess,
   NavbarLinkSignOut,
   NavbarLinkSupport,
@@ -23,6 +25,7 @@ import {
 
 export const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   const { authenticated } = useAuth()
+  const { notifications } = useFlags()
   const { t } = useTranslation(["common", "auth"])
 
   return (
@@ -47,6 +50,16 @@ export const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
         </Nav>
       </div>
 
+      {authenticated && notifications ? (
+        <div className="align-self-center">
+          <Nav>
+            <NavbarLinkNewsfeed />
+          </Nav>
+        </div>
+      ) : (
+        <></>
+      )}
+
       <div className={`align-self-center`}>
         <Dropdown>
           <Dropdown.Toggle className={`btn-secondary text-white-50`}>

components/Footer/Footer.tsx

@@ -154,6 +154,9 @@ const AccountLinks = ({ authenticated, user, signOut }: PageFooterProps) => {
           >
             {t("navigation.accountProfile")}
           </StyledInternalLink>
+          <StyledInternalLink href={"/newsfeed"}>
+            {t("navigation.newsfeed")}
+          </StyledInternalLink>
           <StyledInternalLink handleClick={() => signOut()}>
             {t("signOut", { ns: "auth" })}
           </StyledInternalLink>

components/MobileNav.tsx

@@ -1,3 +1,4 @@
+import { useFlags } from "components/featureFlags"
 import { useTranslation } from "next-i18next"
 import React, { useState } from "react"
 import Image from "react-bootstrap/Image"
@@ -13,6 +14,7 @@ import {
   NavbarLinkFAQ,
   NavbarLinkGoals,
   NavbarLinkLogo,
+  NavbarLinkNewsfeed,
   NavbarLinkProcess,
   NavbarLinkSignOut,
   NavbarLinkSupport,
@@ -64,6 +66,11 @@ export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
       <Nav className="my-4">
         <NavbarLinkBills handleClick={closeNav} />
         <NavbarLinkTestimony handleClick={closeNav} />
+        {authenticated && notifications ? (
+          <NavbarLinkNewsfeed handleClick={closeNav} />
+        ) : (
+          <></>
+        )}
         <NavDropdown className={"navLink-primary"} title={t("about")}>
           <NavbarLinkGoals handleClick={closeNav} />
           <NavbarLinkTeam handleClick={closeNav} />
@@ -82,6 +89,7 @@ export const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   }
 
   const { authenticated } = useAuth()
+  const { notifications } = useFlags()
   const [isExpanded, setIsExpanded] = useState(false)
   const [whichMenu, setWhichMenu] = useState("site")
   const { t } = useTranslation(["common", "auth"])

components/NavbarComponents.tsx

@@ -186,6 +186,27 @@ export const NavbarLinkLogo: React.FC<
   )
 }
 
+export const NavbarLinkNewsfeed: React.FC<
+  React.PropsWithChildren<{
+    handleClick?: any
+    other?: any
+  }>
+> = ({ handleClick, other }) => {
+  const isMobile = useMediaQuery("(max-width: 768px)")
+  const { t } = useTranslation(["common", "auth", "profile"])
+  return (
+    <Nav.Item onClick={handleClick}>
+      <NavLink
+        className={isMobile ? "navLink-primary" : "text-white-50"}
+        href="/newsfeed"
+        {...other}
+      >
+        {t("navigation.newsfeed")}
+      </NavLink>
+    </Nav.Item>
+  )
+}
+
 export const NavbarLinkProcess: React.FC<
   React.PropsWithChildren<{
     handleClick?: any