Update staging deployment and add add to pdf feature

UNDP-Data · Oct 21, 2024 · 795de9a · 795de9a
1 parent 8fa56ed
commit 795de9a
Show file tree

Hide file tree

Showing 25 changed files with 1,239 additions and 406 deletions.
diff --git a/.github/workflows/azure-static-web-apps-thankful-forest-05a90a303.yml b/.github/workflows/azure-static-web-apps-thankful-forest-05a90a303.yml
@@ -14,6 +14,15 @@ jobs:
       - uses: actions/checkout@v3
         with:
           submodules: true
+      - name: Set redirect_uri_for_msal based on branch
+        run: |
+          if [ "${{ github.ref }}" == "refs/heads/production" ]; then
+            echo "REDIRECT_URI_FOR_MSAL=${{ secrets.REDIRECT_URI_FOR_MSAL }}" >> $GITHUB_ENV
+          elif [ "${{ github.ref }}" == "refs/heads/staging" ]; then
+            echo "REDIRECT_URI_FOR_MSAL=${{ secrets.REDIRECT_URI_FOR_MSAL_STAGING }}" >> $GITHUB_ENV
+          else
+            echo "REDIRECT_URI_FOR_MSAL=${{ secrets.REDIRECT_URI_FOR_MSAL }}" >> $GITHUB_ENV
+          fi
       - name: Build And Deploy
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v1
@@ -28,3 +37,4 @@ jobs:
           access_token_for_api: ${{ secrets.ACCESS_CODE_FOR_API }}
           redirect_uri_for_msal: ${{ secrets.REDIRECT_URI_FOR_MSAL }}
           client_secret_for_msal: ${{ secrets.CLIENT_SECRET_FOR_MSAL }}
+          msal_client_id: ${{ secrets.MSAL_CLIENT_ID }}
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,18 +5,30 @@ import axios, { AxiosError, AxiosResponse } from 'axios';
 import { useEffect, useReducer, useMemo, useState } from 'react';
 import { Footer } from './Components/FooterEl';
 import { SignUpButton } from './Components/SignUpButton';
-import { API_ACCESS_TOKEN, CHOICES, CLIENT_ID } from './Constants';
+import {
+  API_ACCESS_TOKEN,
+  CHOICES,
+  CLIENT_ID,
+  REDIRECT_URL,
+} from './Constants';
 import Context from './Context/Context';
 import Reducer from './Context/Reducer';
 import MainBody from './MainBody';
-import { CardsToPrintDataType, ChoicesDataType } from './Types';
+import {
+  CardsToPrintDataType,
+  ChoicesDataType,
+  SignalFiltersDataType,
+  TrendFiltersDataType,
+} from './Types';
 
 import './App.css';
 import { Header } from './Components/HeaderEl';
 import { SignedOutHomePage } from './HomePage/SignedOutHomepage';
 import { signOutClickHandler } from './Utils/SignOutClickHandler';
 
 function App() {
+  // eslint-disable-next-line no-console
+  console.log(REDIRECT_URL, CLIENT_ID);
   const isAuthenticated = useIsAuthenticated();
   const [openModal, setOpenModal] = useState(false);
   const [selectedUnit, setSelectedUnit] = useState<string | undefined>(
@@ -42,6 +54,39 @@ function App() {
     choices: undefined,
     isAcceleratorLab: undefined,
     cardsToPrint: [],
+    trendFilters: {
+      impact: 'All Ratings',
+      horizon: 'All Horizons',
+      steep_primary: 'All Primary STEEP+V',
+      steep_secondary: 'All Secondary STEEP+V',
+      sdg: 'All SDGs',
+      signature_primary: 'All Primary Signature Solutions/Enabler',
+      signature_secondary: 'All Secondary Signature Solutions/Enabler',
+      created_for: 'All Options',
+      assigned_to: undefined,
+      status: 'All Status',
+      search: undefined,
+    },
+    signalFilters: {
+      steep_primary: 'All Primary STEEP+V',
+      steep_secondary: 'All Secondary STEEP+V',
+      sdg: 'All SDGs',
+      signature_primary: 'All Primary Signature Solutions/Enabler',
+      signature_secondary: 'All Secondary Signature Solutions/Enabler',
+      status: 'All Status',
+      location: 'All Locations',
+      score: 'All Scores',
+      created_for: 'All Options',
+      created_by: undefined,
+      unit_region: 'All Units',
+      search: undefined,
+    },
+    noOfTrendsFiltersActive: 0,
+    noOfSignalsFiltersActive: 0,
+    signalsSortBy: 'created_at',
+    trendsSortBy: 'created_at',
+    trendList: undefined,
+    signalList: undefined,
   };
 
   const [state, dispatch] = useReducer(Reducer, initialState);
@@ -113,6 +158,54 @@ function App() {
       payload: d,
     });
   };
+  const updateTrendFilters = (d: TrendFiltersDataType) => {
+    dispatch({
+      type: 'UPDATE_TREND_FILTERS',
+      payload: d,
+    });
+  };
+  const updateSignalFilters = (d: SignalFiltersDataType) => {
+    dispatch({
+      type: 'UPDATE_SIGNAL_FILTERS',
+      payload: d,
+    });
+  };
+  const updateNoOfTrendsFiltersActive = (d: number) => {
+    dispatch({
+      type: 'UPDATE_NO_OF_TRENDS_FILTERS_ACTIVE',
+      payload: d,
+    });
+  };
+  const updateNoOfSignalsFiltersActive = (d: number) => {
+    dispatch({
+      type: 'UPDATE_NO_OF_SIGNALS_FILTERS_ACTIVE',
+      payload: d,
+    });
+  };
+  const updateTrendsSortBy = (d: string) => {
+    dispatch({
+      type: 'UPDATE_TRENDS_SORT_BY',
+      payload: d,
+    });
+  };
+  const updateSignalsSortBy = (d: string) => {
+    dispatch({
+      type: 'UPDATE_SIGNALS_SORT_BY',
+      payload: d,
+    });
+  };
+  const updateTrendList = (d: string) => {
+    dispatch({
+      type: 'UPDATE_TREND_LIST',
+      payload: d,
+    });
+  };
+  const updateSignalList = (d: string) => {
+    dispatch({
+      type: 'UPDATE_SIGNAL_LIST',
+      payload: d,
+    });
+  };
   const { accounts, instance } = useMsal();
   useEffect(() => {
     axios
@@ -211,6 +304,14 @@ function App() {
       updateNotificationText,
       updateCardsToPrint,
       updateIsAcceleratorLab,
+      updateSignalFilters,
+      updateTrendFilters,
+      updateNoOfTrendsFiltersActive,
+      updateNoOfSignalsFiltersActive,
+      updateSignalsSortBy,
+      updateTrendsSortBy,
+      updateTrendList,
+      updateSignalList,
     }),
     [
       state,
@@ -224,6 +325,14 @@ function App() {
       updateNotificationText,
       updateCardsToPrint,
       updateIsAcceleratorLab,
+      updateSignalFilters,
+      updateTrendFilters,
+      updateNoOfTrendsFiltersActive,
+      updateNoOfSignalsFiltersActive,
+      updateSignalsSortBy,
+      updateTrendsSortBy,
+      updateTrendList,
+      updateSignalList,
     ],
   );
   return (

diff --git a/src/Components/SignalCard.tsx b/src/Components/SignalCard.tsx
@@ -215,24 +215,76 @@ export function SignalCard(props: Props) {
               </button>
             </NavLink>
             <button
-              className='undp-button button-tertiary button-arrow'
-              type='button'
-              onClick={e => {
-                e.stopPropagation();
-                const cardToPrintTemp = [...cardsToPrint];
-                cardToPrintTemp.push({
-                  type: 'signal',
-                  id: `${data.id}`,
-                });
-                updateCardsToPrint(cardToPrintTemp);
-              }}
+              className={`undp-button button-tertiary button-arrow${
+                cardsToPrint.findIndex(
+                  el =>
+                    el.id === `${data.id}` &&
+                    el.mode === 'card' &&
+                    el.type === 'signal',
+                ) !== -1
+                  ? 'disabled'
+                  : ''
+              }`}
+              disabled={
+                cardsToPrint.findIndex(
+                  el =>
+                    el.id === `${data.id}` &&
+                    el.mode === 'card' &&
+                    el.type === 'signal',
+                ) !== -1
+              }
               style={{
+                opacity:
+                  cardsToPrint.findIndex(
+                    el =>
+                      el.id === `${data.id}` &&
+                      el.mode === 'card' &&
+                      el.type === 'signal',
+                  ) !== -1
+                    ? 0.4
+                    : 1,
+                cursor:
+                  cardsToPrint.findIndex(
+                    el =>
+                      el.id === `${data.id}` &&
+                      el.mode === 'card' &&
+                      el.type === 'signal',
+                  ) !== -1
+                    ? 'not-allowed'
+                    : 'pointer',
                 flexGrow: 1,
                 marginBottom: '-1rem',
                 paddingBottom: 0,
               }}
+              type='button'
+              onClick={e => {
+                e.stopPropagation();
+                if (
+                  cardsToPrint.findIndex(
+                    el =>
+                      el.id === `${data.id}` &&
+                      el.mode === 'card' &&
+                      el.type === 'signal',
+                  ) === -1
+                ) {
+                  const cardToPrintTemp = [...cardsToPrint];
+                  cardToPrintTemp.push({
+                    type: 'signal',
+                    mode: 'card',
+                    id: `${data.id}`,
+                  });
+                  updateCardsToPrint(cardToPrintTemp);
+                }
+              }}
             >
-              Download
+              {cardsToPrint.findIndex(
+                el =>
+                  el.id === `${data.id}` &&
+                  el.mode === 'card' &&
+                  el.type === 'signal',
+              ) === -1
+                ? 'Download'
+                : 'Added to PDF'}
             </button>
           </div>
         </div>

diff --git a/src/Components/TrendCard.tsx b/src/Components/TrendCard.tsx
@@ -21,6 +21,7 @@ interface HeroImageProps {
 
 const ImageContainerEl = styled.div<HeroImageProps>`
   width: 100%;
+  display: flex;
   @media (max-width: 600px) {
     display: none;
   }
@@ -30,9 +31,9 @@ const HeroImageEl = styled.div<HeroImageProps>`
       props.bgImage ? `url(${props.bgImage})` : `url(${Background})`}
     no-repeat center;
   background-size: cover;
-  height: 0;
-  padding-bottom: 150%;
   filter: brightness(100%);
+  width: 100%;
+  justify-items: stretch;
   &:hover {
     filter: brightness(80%);
     transition: filter 0.2s;
@@ -55,7 +56,7 @@ const CardEl = styled.div`
 const DescriptionEl = styled.p`
   display: -webkit-box;
   max-width: 100%;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 3;
   overflow: hidden;
   word-wrap: break-word;
   -webkit-box-orient: vertical;
@@ -97,7 +98,10 @@ export function TrendCard(props: Props) {
           style={{ alignItems: 'stretch', flexGrow: 1 }}
         >
           <NavLink
-            className='trend-image'
+            className='trend-image flex-div'
+            style={{
+              justifyContent: 'stretch',
+            }}
             to={
               data.status === 'Archived'
                 ? `/archived-trends/${data.id}`
@@ -243,24 +247,76 @@ export function TrendCard(props: Props) {
                   </button>
                 </NavLink>
                 <button
-                  className='undp-button button-tertiary button-arrow padding-bottom-00'
+                  className={`undp-button button-tertiary padding-bottom-00 button-arrow${
+                    cardsToPrint.findIndex(
+                      el =>
+                        el.id === `${data.id}` &&
+                        el.mode === 'card' &&
+                        el.type === 'trend',
+                    ) !== -1
+                      ? 'disabled'
+                      : ''
+                  }`}
                   type='button'
+                  disabled={
+                    cardsToPrint.findIndex(
+                      el =>
+                        el.id === `${data.id}` &&
+                        el.mode === 'card' &&
+                        el.type === 'trend',
+                    ) !== -1
+                  }
                   onClick={e => {
                     e.stopPropagation();
-                    const cardToPrintTemp = [...cardsToPrint];
-                    cardToPrintTemp.push({
-                      type: 'trend',
-                      id: `${data.id}`,
-                    });
-                    updateCardsToPrint(cardToPrintTemp);
+                    if (
+                      cardsToPrint.findIndex(
+                        el =>
+                          el.id === `${data.id}` &&
+                          el.mode === 'card' &&
+                          el.type === 'trend',
+                      ) === -1
+                    ) {
+                      const cardToPrintTemp = [...cardsToPrint];
+                      cardToPrintTemp.push({
+                        type: 'trend',
+                        mode: 'card',
+                        id: `${data.id}`,
+                      });
+                      updateCardsToPrint(cardToPrintTemp);
+                    }
                   }}
                   style={{
+                    opacity:
+                      cardsToPrint.findIndex(
+                        el =>
+                          el.id === `${data.id}` &&
+                          el.mode === 'card' &&
+                          el.type === 'trend',
+                      ) !== -1
+                        ? 0.4
+                        : 1,
+                    cursor:
+                      cardsToPrint.findIndex(
+                        el =>
+                          el.id === `${data.id}` &&
+                          el.mode === 'card' &&
+                          el.type === 'trend',
+                      ) !== -1
+                        ? 'not-allowed'
+                        : 'pointer',
                     flexGrow: 1,
                     marginBottom: '-1rem',
                     paddingBottom: '1rem',
                   }}
                 >
-                  Download
+                  {cardsToPrint.findIndex(
+                    el =>
+                      el.id === `${data.id}` &&
+                      el.mode === 'card' &&
+                      el.type === 'trend',
+                  ) === -1
+                    ? 'Download'
+                    : 'Added to PDF'}
                 </button>
               </div>
             </div>