basic search results

ui2/src/components/Header/Search.tsx

@@ -1,8 +1,11 @@
 import {useState} from "react"
+import {useDispatch} from "react-redux"
 import {Input, CloseButton, rem} from "@mantine/core"
 import {IconSearch} from "@tabler/icons-react"
+import {fetchPaginatedSearchResults} from "@/slices/dualPanel/dualPanel"
 
 export default function Search() {
+  const dispatch = useDispatch()
   const [value, setValue] = useState("Clear me")
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -14,6 +17,11 @@ export default function Search() {
 
     if (key === "Enter") {
       console.log(`Enter pressed. Query = ${value}`)
+      dispatch(
+        fetchPaginatedSearchResults({
+          query: value
+        })
+      )
     }
   }
 

ui2/src/components/SearchResults/ActionButtons.tsx

@@ -0,0 +1,13 @@
+import {Group} from "@mantine/core"
+import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
+
+export default function ActionButtons() {
+  return (
+    <Group justify="space-between">
+      <Group>Some button here</Group>
+      <Group>
+        <ToggleSecondaryPanel />
+      </Group>
+    </Group>
+  )
+}

ui2/src/components/SearchResults/SearchResultItem.tsx

@@ -0,0 +1,9 @@
+import type {SearchResultNode} from "@/types"
+
+type Args = {
+  item: SearchResultNode
+}
+
+export default function SearchResultItem({item}: Args) {
+  return <div>{item.title}</div>
+}

ui2/src/components/SearchResults/SearchResultItems.tsx

@@ -0,0 +1,17 @@
+import {useContext} from "react"
+import {useSelector} from "react-redux"
+import {RootState} from "@/app/types"
+import {selectSearchResultItems} from "@/slices/dualPanel/dualPanel"
+import SearchResultItem from "./SearchResultItem"
+import PanelContext from "@/contexts/PanelContext"
+import {PanelMode} from "@/types"
+
+export default function SearchResultItems() {
+  const mode: PanelMode = useContext(PanelContext)
+  const items = useSelector((state: RootState) =>
+    selectSearchResultItems(state, mode)
+  )
+  const itemComponents = items?.data?.map(i => <SearchResultItem item={i} />)
+
+  return <div>{itemComponents}</div>
+}

ui2/src/components/SearchResults/SearchResults.tsx

@@ -0,0 +1,15 @@
+import {Flex} from "@mantine/core"
+
+import ActionButtons from "./ActionButtons"
+import SearchResultItems from "./SearchResultItems"
+
+export default function SearchResults() {
+  return (
+    <div>
+      <ActionButtons />
+      <Flex style={{height: "740px"}}>
+        <SearchResultItems />
+      </Flex>
+    </div>
+  )
+}

ui2/src/components/SearchResults/index.ts

@@ -0,0 +1,3 @@
+import SearchResults from "./SearchResults"
+
+export default SearchResults

ui2/src/components/SinglePanel/SinglePanel.tsx

@@ -1,9 +1,14 @@
 import {useContext} from "react"
 
-import {selectCommander, selectViewer} from "@/slices/dualPanel/dualPanel"
+import {
+  selectCommander,
+  selectViewer,
+  selectSearchResults
+} from "@/slices/dualPanel/dualPanel"
 import {useSelector} from "react-redux"
 import Commander from "@/components/Commander"
 import Viewer from "@/components/Viewer"
+import SearchResults from "@/components/SearchResults"
 import PanelContext from "@/contexts/PanelContext"
 import {PanelMode} from "@/types"
 import {RootState} from "@/app/types"
@@ -14,6 +19,9 @@ export default function SinglePanel() {
     selectCommander(state, mode)
   )
   const viewer = useSelector((state: RootState) => selectViewer(state, mode))
+  const searchResults = useSelector((state: RootState) =>
+    selectSearchResults(state, mode)
+  )
 
   if (commander) {
     return <Commander />
@@ -23,5 +31,9 @@ export default function SinglePanel() {
     return <Viewer />
   }
 
+  if (searchResults) {
+    return <SearchResults />
+  }
+
   return <>Error: neither viewer nor commander</>
 }

ui2/src/slices/dualPanel/dualPanel.ts

@@ -33,7 +33,8 @@ import type {
   DocumentType,
   CurrentNodeType,
   PaginationType,
-  SliceStateStatus
+  SliceStateStatus,
+  SearchResultNode
 } from "@/types"
 import {
   DualPanelState,
@@ -48,7 +49,8 @@ import {INITIAL_PAGE_SIZE} from "@/cconstants"
 const initialState: DualPanelState = {
   mainPanel: {
     commander: commanderInitialState(null),
-    viewer: null
+    viewer: null,
+    searchResults: null
   },
   secondaryPanel: null,
   // common nodes data shared between mainPanel and secondary Panel
@@ -105,6 +107,26 @@ export const fetchPaginatedNodes = createAsyncThunk<
   return result
 })
 
+type fetchPaginatedSearchResultsArgs = {
+  query: string
+}
+
+export const fetchPaginatedSearchResults = createAsyncThunk<
+  Array<SearchResultNode>,
+  fetchPaginatedSearchResultsArgs
+>(
+  "paginatedSearchResults/fetchSearchResults",
+  async ({query}: fetchPaginatedSearchResultsArgs) => {
+    const resp = await axios.get("/api/search/", {
+      params: {
+        q: query
+      },
+      validateStatus: () => true
+    })
+    return resp.data as Array<SearchResultNode>
+  }
+)
+
 export const deleteNodes = createAsyncThunk<string[], string[]>(
   "dualPanel/deleteNodes",
   async (nodeIds: string[]) => {
@@ -188,7 +210,8 @@ const dualPanelSlice = createSlice({
     openSecondaryPanel(state, action: PayloadAction<CurrentNodeType>) {
       state.secondaryPanel = {
         commander: commanderInitialState(action.payload),
-        viewer: null
+        viewer: null,
+        searchResults: null
       }
     },
     closeSecondaryPanel(state) {
@@ -307,6 +330,7 @@ const dualPanelSlice = createSlice({
         const versionNumbers = action.payload.versions.map(v => v.number)
         state.secondaryPanel = {
           commander: null,
+          searchResults: null,
           viewer: {
             breadcrumb: action.payload.breadcrumb,
             versions: action.payload.versions,
@@ -316,6 +340,24 @@ const dualPanelSlice = createSlice({
         return
       }
     })
+    builder.addCase(fetchPaginatedSearchResults.fulfilled, (state, action) => {
+      state.mainPanel = {
+        commander: null,
+        viewer: null,
+        searchResults: {
+          pagination: {
+            numPages: 1,
+            pageNumber: 1,
+            pageSize: 100
+          },
+          items: {
+            data: action.payload,
+            status: "succeeded",
+            error: null
+          }
+        }
+      }
+    })
   }
 })
 
@@ -358,6 +400,25 @@ export const selectViewer = (state: RootState, mode: PanelMode) => {
   return state.dualPanel.secondaryPanel?.viewer
 }
 
+export const selectSearchResults = (state: RootState, mode: PanelMode) => {
+  if (mode === "main") {
+    return state.dualPanel.mainPanel.searchResults
+  }
+
+  return null
+}
+
+export const selectSearchResultItems = (
+  state: RootState,
+  mode: PanelMode
+): SliceState<Array<SearchResultNode>> | null | undefined => {
+  if (mode === "main") {
+    return state.dualPanel.mainPanel.searchResults?.items
+  }
+
+  return null
+}
+
 export const selectPanelNodesRaw = (
   state: RootState,
   mode: PanelMode

ui2/src/slices/dualPanel/types.ts

@@ -1,6 +1,7 @@
 import type {
   SliceState,
   NodeType,
+  SearchResultNode,
   PanelMode,
   CurrentNodeType,
   PaginationType,
@@ -47,9 +48,15 @@ export interface Viewer {
   currentVersion: number | null
 }
 
+export interface SearchResults {
+  pagination: PaginationType | null | undefined
+  items: SliceState<Array<SearchResultNode>>
+}
+
 export interface SinglePanel {
   commander: Commander | null
   viewer: Viewer | null
+  searchResults: SearchResults | null
 }
 
 export interface DualPanelState {

ui2/src/types.ts

@@ -245,3 +245,19 @@ export type DocumentType = {
   user_id: string
   updated_at: string
 }
+
+export type SearchResultPage = {
+  id: string
+  page_number: number
+  text: string
+}
+
+export type SearchResultNode = {
+  id: string
+  title: string
+  entity_type: CType
+  lang: string | null
+  breadcrumb: Array<[string, string]> | null | undefined
+  tags: Array<string>
+  pages: Array<SearchResultPage>
+}