From d9b3acd27c6ea8379e8b99e8ff38631e10fd916d Mon Sep 17 00:00:00 2001 From: monilprajapati Date: Fri, 15 Nov 2024 13:39:09 +0530 Subject: [PATCH] Done with algolia search --- frontend/src/views/Apps2.jsx | 208 ++++++++++++++--------------------- 1 file changed, 85 insertions(+), 123 deletions(-) diff --git a/frontend/src/views/Apps2.jsx b/frontend/src/views/Apps2.jsx index a097b800..9ccbd95e 100644 --- a/frontend/src/views/Apps2.jsx +++ b/frontend/src/views/Apps2.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useContext, useCallback, memo, useMemo } from "react"; +import React, { useState, useEffect, useContext, useCallback, memo, useMemo, useRef } from "react"; import theme from "../theme.jsx"; import { isMobile } from "react-device-detect"; import AppGrid from "../components/AppGrid.jsx"; @@ -19,10 +19,11 @@ import InputAdornment from '@mui/material/InputAdornment'; import Search from '@mui/icons-material/Search'; import ClearIcon from '@mui/icons-material/Clear'; -import { ClearRefinements, connectHits, connectSearchBox, connectStateResults, InstantSearch, RefinementList, connectRefinementList } from "react-instantsearch-dom"; +import { ClearRefinements, connectHits, connectSearchBox, connectStateResults, InstantSearch, RefinementList, connectRefinementList, Configure } from "react-instantsearch-dom"; import { removeQuery } from "../components/ScrollToTop.jsx"; import { toast } from "react-toastify"; import algoliasearch from "algoliasearch/lite"; +import { debounce } from "lodash"; const searchClient = algoliasearch( @@ -180,7 +181,6 @@ const Hits = ({ isLoading, isLoggedIn, }) => { - var counted = 0; const [hoverEffect, setHoverEffect] = useState(-1); const [allActivatedAppIds, setAllActivatedAppIds] = useState(userdata?.active_apps); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "localhost:3000"; @@ -201,31 +201,6 @@ const Hits = ({ - // const fetchUserData = useCallback(async () => { - // try { - // const response = await fetch(`${globalUrl}/api/v1/me`, { - // credentials: "include", - // headers: { - // 'Content-Type': 'application/json', - // }, - // }); - // const responseJson = await response.json(); - // console.log("responseJson : user data", responseJson) - // if (responseJson.success) { - // setUserdata(responseJson); - // setAllActivatedAppIds(responseJson.active_apps); - // setIsLoggedIn(true); - // } else { - // setIsLoggedIn(false); - // } - // } catch (error) { - // console.log("Failed login check: ", error); - // } - // }, [globalUrl]); // Added globalUrl as a dependency - - // useEffect(() => { - // fetchUserData(); - // }, [fetchUserData]); // Ensure fetchUserData is stable //Function for activation and deactivation of app const handleActivateButton = (event, data, type) => { @@ -312,7 +287,6 @@ const Hits = ({ display: "flex", flexWrap: "wrap", justifyContent: "flex-start", - // marginLeft: 24, maxHeight: 570, scrollbarWidth: "thin", scrollbarColor: "#494949 #2f2f2f", @@ -521,11 +495,10 @@ const Hits = ({ ); - }) - } + })} - + )} ) : ( @@ -576,6 +549,85 @@ const CategoryDropdown = ({ items, currentRefinement, refine }) => { const CustomCategoryDropdown = connectRefinementList(CategoryDropdown); +// Custom SearchBox Component +const SearchBox = ({ refine, searchQuery, setSearchQuery }) => { + const inputRef = useRef(null); + const [localQuery, setLocalQuery] = useState(searchQuery); + + // Debounced function to refine search + const debouncedRefine = useRef( + debounce((value) => { + setSearchQuery(value); + removeQuery("q"); + refine(value); + }, 300) // Adjust the delay as needed + ).current; + + useEffect(() => { + const urlSearchParams = new URLSearchParams(window.location.search); + const params = Object.fromEntries(urlSearchParams.entries()); + const foundQuery = params["q"]; + if (foundQuery) { + setLocalQuery(foundQuery); + debouncedRefine(foundQuery); + } + }, [debouncedRefine]); + + useEffect(() => { + if (inputRef.current) { + inputRef.current.focus(); + } + }, [searchQuery]); + + const handleChange = (event) => { + const value = event.target.value; + setLocalQuery(value); + debouncedRefine(value); + }; + + return ( + { + if (event.key === "Enter") { + event.preventDefault(); + } + }} + style={{ width: '100%', borderRadius: '7px', fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)" }} + InputProps={{ + style: { + borderRadius: 8, + }, + endAdornment: ( + + {localQuery?.length === 0 ? : ( + { + setLocalQuery(''); + debouncedRefine(''); + }} + /> + )} + + ), + }} + /> + ); +}; + +const CustomSearchBox = connectSearchBox(SearchBox); +const CustomHits = connectHits(Hits); + // Main Apps Component const Apps2 = (props) => { const { globalUrl, isLoaded, serverside, userdata, isLoggedIn } = props; @@ -631,8 +683,6 @@ const Apps2 = (props) => { url = `${baseUrl}/api/v1/users/${userId}/apps`; } else if (currTab === 0) { url = `${baseUrl}/api/v1/apps`; - } else { - return; // No need to fetch if not in the relevant tabs } setIsLoading(true); try { @@ -816,87 +866,6 @@ const Apps2 = (props) => { }; - const SearchBox = ({ refine, searchQuery, setSearchQuery }) => { - const inputRef = React.useRef(null); // Create a ref for the input field - - // Check for query in URL and set it - React.useEffect(() => { - if ( - window !== undefined && - window.location !== undefined && - window.location.search !== undefined && - window.location.search !== null - ) { - const urlSearchParams = new URLSearchParams(window.location.search); - const params = Object.fromEntries(urlSearchParams.entries()); - const foundQuery = params["q"]; - if (foundQuery !== null && foundQuery !== undefined) { - console.log("Got query: ", foundQuery); - refine(foundQuery); - setSearchQuery(foundQuery); // Use setSearchQuery to update state - } - } - }, [refine, setSearchQuery]); // Add dependencies - - // Use useEffect to focus the input when it mounts or when searchQuery changes - React.useEffect(() => { - if (inputRef.current) { - inputRef.current.focus(); - } - }, [searchQuery]); // Focus whenever searchQuery changes - - console.log("searchQuery", searchQuery); - - return ( - { - setSearchQuery(event.target.value); // Update the search query - removeQuery("q"); - refine(event.target.value); // Refine the search - }} - onKeyDown={(event) => { - if (event.key === "Enter") { - event.preventDefault(); - } - }} - limit={5} - style={{ width: '100%', borderRadius: '7px', fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)" }} - InputProps={{ - style: { - borderRadius: 8, - }, - endAdornment: ( - - {searchQuery?.length === 0 ? : ( - { - setSearchQuery(''); // Clear the search query - removeQuery("q"); - refine(''); // Clear the refinement - }} - /> - )} - - ), - }} - /> - ); - }; - - const CustomSearchBox = connectSearchBox(SearchBox); - const CustomHits = connectHits(Hits) - - const handleCategoryChange = (event) => { const value = event.target.value; setSelectedCategory(value); @@ -1120,7 +1089,6 @@ const Apps2 = (props) => { { currTab === 2 && - { /> } - {/* */} + ); };