feat: add (simple) search functionality to app

src/features/feedback/components/DashboardFilterBar/DashboardFilterBar.tsx

@@ -0,0 +1,31 @@
+import { Flex, Spacer } from '@chakra-ui/react'
+import { useFilterFeedback } from '../../api/useFilterFeedback'
+import { FilterSearchbar } from './FilterSearchbar'
+import { FilterSelect } from './FilterSelect'
+
+export const DashboardFilterBar = (): JSX.Element => {
+ const { filter, order, handleFilterChange, handleOrderChange, isLoading } =
+ useFilterFeedback()
+
+ return (
+ <Flex
+ px="2rem"
+ py="1.125rem"
+ borderBottomWidth="1px"
+ borderColor="base.divider.medium"
+ >
+ <FilterSelect
+ selection={filter}
+ isDisabled={isLoading}
+ onChange={handleFilterChange}
+ />
+ <FilterSelect
+ selection={order}
+ isDisabled={isLoading}
+ onChange={handleOrderChange}
+ />
+ <Spacer />
+ <FilterSearchbar />
+ </Flex>
+ )
+}

src/features/feedback/components/DashboardFilterBar/FilterSearchbar.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@chakra-ui/react'
+import { Searchbar } from '@opengovsg/design-system-react'
+import { useRouter } from 'next/router'
+import { useCallback } from 'react'
+
+export const FilterSearchbar = (): JSX.Element => {
+ const router = useRouter()
+ const handleSearch = useCallback(
+ (value: string) => {
+ router.push(`/search?q=${value}`)
+ },
+ [router]
+ )
+
+ return (
+ <Box maxW="20rem" w="100%">
+ <Searchbar
+ placeholder="Search posts and comments..."
+ isExpanded
+ onSearch={handleSearch}
+ />
+ </Box>
+ )
+}

src/features/feedback/components/TeamFeedbackFilterBar.tsx → src/features/feedback/components/DashboardFilterBar/FilterSelect.tsx

@@ -1,12 +1,10 @@
 import {
- Box,
- MenuItemOption,
+ Menu,
  MenuList,
  MenuOptionGroup,
- Menu,
+ MenuItemOption,
 } from '@chakra-ui/react'
 import { ChevronMenuButton } from '~/components/ChevronMenuButton'
-import { useFilterFeedback } from '../api/useFilterFeedback'
 
 interface FilterSelectProps {
  selection: {
@@ -17,7 +15,7 @@ interface FilterSelectProps {
  onChange: (value: string | string[]) => void
  isDisabled?: boolean
 }
-const FilterSelect = ({
+export const FilterSelect = ({
  selection,
  onChange,
  isDisabled,
@@ -47,28 +45,3 @@ const FilterSelect = ({
  </Menu>
  )
 }
-
-export const TeamFeedbackFilterBar = (): JSX.Element => {
- const { filter, order, handleFilterChange, handleOrderChange, isLoading } =
- useFilterFeedback()
-
- return (
- <Box
- px="2rem"
- py="1.125rem"
- borderBottomWidth="1px"
- borderColor="base.divider.medium"
- >
- <FilterSelect
- selection={filter}
- isDisabled={isLoading}
- onChange={handleFilterChange}
- />
- <FilterSelect
- selection={order}
- isDisabled={isLoading}
- onChange={handleOrderChange}
- />
- </Box>
- )
-}

src/features/feedback/components/DashboardFilterBar/index.ts

@@ -0,0 +1 @@
+export { DashboardFilterBar } from './DashboardFilterBar'

src/features/feedback/components/index.ts

@@ -2,3 +2,4 @@ export * from './FeedbackNavbar'
 export * from './TeamFeedbackList'
 export * from './FeedbackComment'
 export * from './FeedbackActionsModal'
+export * from './DashboardFilterBar'

src/pages/dashboard.tsx

@@ -7,11 +7,11 @@ import feedbackUncleSvg from '~/features/feedback/assets/feedback-uncle.svg'
 import {
  FeedbackActionsModal,
  TeamFeedbackList,
+ DashboardFilterBar,
 } from '~/features/feedback/components'
 import type { NextPageWithLayout } from '~/lib/types'
 import { AdminLayout } from '~/templates/layouts/AdminLayout'
 import { trpc } from '~/utils/trpc'
-import { TeamFeedbackFilterBar } from '~/features/feedback/components/TeamFeedbackFilterBar'
 
 const Dashboard: NextPageWithLayout = () => {
  const { data: counts, isLoading: unreadCountIsLoading } =
@@ -55,7 +55,7 @@ const Dashboard: NextPageWithLayout = () => {
  borderWidth="1px"
  borderColor="base.divider.medium"
  >
- <TeamFeedbackFilterBar />
+ <DashboardFilterBar />
  <TeamFeedbackList />
  </Box>
  </Box>

src/pages/search.tsx

@@ -0,0 +1,63 @@
+import { Box, Text } from '@chakra-ui/react'
+import { Searchbar } from '@opengovsg/design-system-react'
+import type { GetServerSideProps, InferGetServerSidePropsType } from 'next'
+import { useRouter } from 'next/router'
+import { useCallback, useState } from 'react'
+import { FeedbackComment } from '~/features/feedback/components'
+import type { NextPageWithLayout } from '~/lib/types'
+import { AdminLayout } from '~/templates/layouts/AdminLayout'
+import { trpc } from '~/utils/trpc'
+
+const Search: NextPageWithLayout<
+ InferGetServerSidePropsType<typeof getServerSideProps>
+> = ({ query }) => {
+ const router = useRouter()
+ const [queryInput, setQueryInput] = useState(query)
+ const { data, isLoading } = trpc.post.search.useQuery({ query })
+
+ const updateSearchQuery = useCallback(
+ (newQuery: string) => {
+ if (!newQuery) return
+ router.query.q = newQuery
+ router.push(router)
+ },
+ [router]
+ )
+
+ return (
+ <Box w="100%">
+ <Box w="20rem">
+ <Searchbar
+ isExpanded
+ value={queryInput}
+ onChange={(e) => setQueryInput(e.target.value)}
+ onSearch={updateSearchQuery}
+ />
+ </Box>
+ <Text>{isLoading ? 'Searching...' : `${data?.length} results`}</Text>
+ {data?.map((d) => (
+ <FeedbackComment key={d.id} post={d} />
+ ))}
+ </Box>
+ )
+}
+
+Search.getLayout = AdminLayout
+
+export const getServerSideProps: GetServerSideProps<{
+ query: string
+}> = async ({ query }) => {
+ if (!query.q) {
+ return {
+ redirect: {
+ permanent: false,
+ destination: '/',
+ },
+ }
+ }
+ return {
+ props: { query: String(query.q) },
+ }
+}
+
+export default Search

src/server/modules/post/post.router.ts

@@ -186,6 +186,26 @@ export const postRouter = router({
  })
  return updatedPost
  }),
+ search: protectedProcedure
+ .input(
+ z.object({
+ query: z.string(),
+ limit: z.number().min(1).max(30).optional().default(10),
+ })
+ )
+ .query(async ({ input: { query, limit }, ctx }) => {
+ return await ctx.prisma.post.findMany({
+ take: limit,
+ where: {
+ deletedAt: null,
+ OR: [
+ { title: { contains: query, mode: 'insensitive' } },
+ { content: { contains: query, mode: 'insensitive' } },
+ ],
+ },
+ select: defaultPostSelect,
+ })
+ }),
  delete: protectedProcedure
  .input(z.object({ id: z.string() }))
  .mutation(async ({ input: { id }, ctx }) => {