Godirectory

docker-compose.yml

@@ -32,11 +32,11 @@ services:
       - VALID_EMAIL_GLOB_EXPRESSION=*.gov.sg
       - LOGIN_MESSAGE=Your OTP might take awhile to get to you.
       - USER_MESSAGE=User message test
-      - ANNOUNCEMENT_MESSAGE=The quick brown fox jumps over a lazy dog
-      - ANNOUNCEMENT_TITLE=Some title
-      - ANNOUNCEMENT_SUBTITLE=Subtitle is found here
+      - ANNOUNCEMENT_MESSAGE=Search by email to find link owners, or by keyword to discover other links! \n PRO TIP! Search your email domain to find out all the links made by your agency.
+      - ANNOUNCEMENT_TITLE=GoDirectory is here!
+      - ANNOUNCEMENT_SUBTITLE=Search all go.gov.sg links
       - ANNOUNCEMENT_URL=https://go.gov.sg/
-      - ANNOUNCEMENT_IMAGE=/assets/transition-page/images/browser.svg
+      - ANNOUNCEMENT_IMAGE=/assets/transition-page/images/directory-browser.svg
       - AWS_S3_BUCKET=local-bucket
       - ROTATED_LINKS=whatsapp,passport,spsc,sppr
       - AWS_ACCESS_KEY_ID=foobar

src/client/actions/directory/index.ts

@@ -5,7 +5,9 @@ import { History } from 'history'
 import * as Sentry from '@sentry/browser'
 import {
   DirectoryActionType,
+  ResetDirectoryResultsAction,
   SET_DIRECTORY_RESULTS,
+  SET_INITIAL_STATE,
   SetDirectoryResultsAction,
 } from './types'
 import { GoGovReduxState } from '../../reducers/types'
@@ -28,6 +30,12 @@ function setDirectoryResults(payload: {
   }
 }
 
+function resetDirectoryResults(): ResetDirectoryResultsAction {
+  return {
+    type: SET_INITIAL_STATE,
+  }
+}
+
 const getDirectoryResults = (
   query: string,
   order: SearchResultsSortOrder,
@@ -103,4 +111,5 @@ export default {
   getDirectoryResults,
   setDirectoryResults,
   redirectToDirectoryPage,
+  resetDirectoryResults,
 }

src/client/actions/directory/types.ts

@@ -2,6 +2,7 @@ import { UrlTypePublic } from '../../reducers/directory/types'
 
 export const SET_DIRECTORY_RESULTS = 'SET_DIRECTORY_RESULTS'
 export const SET_DIRECTORY_TABLE_CONFIG = 'SET_DIRECTORY_TABLE_CONFIG'
+export const SET_INITIAL_STATE = 'SET_INITIAL_STATE'
 
 export type SetDirectoryResultsAction = {
   type: typeof SET_DIRECTORY_RESULTS
@@ -12,4 +13,10 @@ export type SetDirectoryResultsAction = {
   }
 }
 
-export type DirectoryActionType = SetDirectoryResultsAction
+export type ResetDirectoryResultsAction = {
+  type: typeof SET_INITIAL_STATE
+}
+
+export type DirectoryActionType =
+  | SetDirectoryResultsAction
+  | ResetDirectoryResultsAction

src/client/components/DirectoryPage/index.tsx

@@ -117,20 +117,6 @@ const SearchPage: FunctionComponent<SearchPageProps> = () => {
       ),
     )
 
-  // Reset offset
-  const getFilteredResults = () => 
-    dispatch(
-      directoryActions.getDirectoryResults(
-        query,
-        queryOrder,
-        rowsPerPage,
-        defaultParams.currentPage,
-        querystate,
-        queryFile,
-        queryEmail
-      )
-    )
-
   const resultsCount = useSelector(
     (state: GoGovReduxState) => state.directory.resultsCount,
   )
@@ -193,18 +179,20 @@ const SearchPage: FunctionComponent<SearchPageProps> = () => {
 
   // Changes when queryEmail changes
   useEffect(() => {
+    setPendingQuery('')
+    dispatch(
+      directoryActions.resetDirectoryResults()
+    )
     redirectWithParams(
       {
-        ...params,
+        ...defaultParams,
         state: querystate,
         isFile: queryFile,
         sortOrder: queryOrder,
         isEmail: queryEmail,
-        currentPage: defaultParams.currentPage,
       },
       history,
     )
-    getFilteredResults()
   }, [queryEmail])
 
   const onClearQuery = () => {
@@ -248,7 +236,6 @@ const SearchPage: FunctionComponent<SearchPageProps> = () => {
   }
 
   const queryToDisplay = (queryForResult || '').trim()
-
   // detect changes in query
   useEffect(() => {
     if (!query) {

src/client/components/UserPage/AnnouncementModal/index.tsx

@@ -32,8 +32,17 @@ const useStyles = makeStyles((theme) =>
       backgroundColor: theme.palette.primary.dark,
     },
     announcementImage: {
-      marginTop: theme.spacing(-4),
+      width: '600px',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+      paddingLeft: '80px',
+      paddingRight: '80px',
+      marginTop: theme.spacing(-6),
       marginBottom: theme.spacing(4),
+      [theme.breakpoints.down('sm')]: {
+        paddingLeft: '0px',
+        paddingRight: '0px',
+      },
     },
     announcementPadding: {
       paddingBottom: theme.spacing(4),
@@ -43,9 +52,19 @@ const useStyles = makeStyles((theme) =>
       justifyContent: 'center',
       width: '100%',
     },
+    justifyCenterImage: {
+      display: 'flex',
+      justifyContent: 'center',
+      width: '600px',
+      [theme.breakpoints.down('sm')]: {
+        width: '100%',
+      },
+    },
     messagePadding: {
       paddingLeft: theme.spacing(4),
       paddingRight: theme.spacing(4),
+      whiteSpace: 'pre-line',
+      textAlign: 'center',
     },
     closeIconButton: {
       fill: (props) =>
@@ -174,13 +193,13 @@ export default function AnnouncementModal() {
       )}
       {announcement?.image ? (
         <img
-          className={`${classes.justifyCenter} ${classes.announcementImage}`}
+          className={`${classes.justifyCenterImage} ${classes.announcementImage}`}
           alt=""
           src={announcement.image}
         />
       ) : (
         <div
-          className={`${classes.justifyCenter} ${classes.announcementPadding}`}
+          className={`${classes.justifyCenterImage} ${classes.announcementPadding}`}
         />
       )}
       {announcement?.subtitle ? (
@@ -197,7 +216,8 @@ export default function AnnouncementModal() {
           className={`${classes.justifyCenter} ${classes.messagePadding}`}
           variant="body2"
         >
-          {announcement.message}
+          {/* Enable line break */}
+          {announcement.message.replace(/\\n/g, '\n')}
         </Typography>
       ) : null}
       <div className={`${classes.justifyCenter} ${classes.modalBottom}`}>
@@ -210,7 +230,7 @@ export default function AnnouncementModal() {
             variant="text"
             className={classes.learnMoreButton}
           >
-            Learn More
+            Try it now
           </Button>
         ) : null}
       </div>

src/client/reducers/directory/index.ts

@@ -2,9 +2,10 @@ import { DirectoryState } from './types'
 import {
   DirectoryActionType,
   SET_DIRECTORY_RESULTS,
+  SET_INITIAL_STATE,
 } from '../../actions/directory/types'
 
-const initialState: DirectoryState = {
+export const initialState: DirectoryState = {
   results: [],
   resultsCount: 0,
   queryForResult: null,
@@ -23,6 +24,9 @@ const directory: (
         queryForResult: action.payload.query,
       }
       break
+    case SET_INITIAL_STATE:
+      nextState = initialState
+      break
     default:
       break
   }