shaffuru files sync

frontend/src/components/DocsGrid.jsx

@@ -4,6 +4,7 @@ import theme from '../theme.jsx';
 import ReactGA from 'react-ga4';
 import {Link} from 'react-router-dom';
 import { removeQuery } from '../components/ScrollToTop.jsx';
+import SearchContactForm from '../components/SearchContactForm.jsx';
 
 import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material';
 import aa from 'search-insights'
@@ -30,61 +31,19 @@ import { useDebouncedCallback } from "../utils/useDebouncedCallback.jsx";
 
 	
 
-const searchClient = algoliasearch("JNSS5CFDZZ", "c8f882473ff42d41158430be09ec2b4e")
+const searchClient = algoliasearch("JNSS5CFDZZ", "eb5fd80aa6ed5ab4730d836cff3ea283")
 const DocsGrid = props => {
 	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, userdata, }  = props
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
 	//const [apps, setApps] = React.useState([]);
 	//const [filteredApps, setFilteredApps] = React.useState([]);
-	const [formMail, setFormMail] = React.useState("");
-	const [message, setMessage] = React.useState("");
-	const [formMessage, setFormMessage] = React.useState("");
 
-	const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
 
 	const innerColor = "rgba(255,255,255,0.65)"
 	const borderRadius = 3
 	window.title = "Shuffle | Apps | Find and integrate any app"
 
-	const submitContact = (email, message) => {
-		const data = {
-			"firstname": "",
-			"lastname": "",
-			"title": "",
-			"companyname": "",
-			"email": email,
-			"phone": "",
-			"message": message,
-		}
-	
-		const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
-
-		fetch(globalUrl+"/api/v1/contact", {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify(data),
-		})
-		.then(response => response.json())
-		.then(response => {
-			if (response.success === true) {
-				setFormMessage(response.reason)
-				//toast("Thanks for submitting!")
-			} else {
-				setFormMessage(errorMessage)
-			}
-
-			setFormMail("")
-			setMessage("")
-    })
-		.catch(error => {
-			setFormMessage(errorMessage)
-    	console.log(error)
-		});
-	}
-
 	const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
 		var defaultSearch = ""
 		if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
@@ -124,8 +83,15 @@ const DocsGrid = props => {
 					placeholder="Search our Documentation..."
 					id="shuffle_search_field"
 					onChange={(event) => {
-						removeQuery("q")
-						debouncedRefine(event.currentTarget.value)
+						const value = event.currentTarget.value
+						debouncedRefine(value)
+						const urlSearchParams = new URLSearchParams(window.location.search)
+						if (value) {
+							urlSearchParams.set("q", value)
+						} else {
+							urlSearchParams.delete("q")
+						}
+						window.history.replaceState(null, "", value ? `?${urlSearchParams.toString()}` : window.location.pathname)
 					}}
 					onKeyDown={(event) => {
 						if(event.key === "Enter") {
@@ -291,62 +257,8 @@ const DocsGrid = props => {
 					<CustomHits hitsPerPage={5}/>
 				</InstantSearch>
 				{showSuggestion === true ? 
-					<div style={{paddingTop: 0, maxWidth: isMobile ? "100%" : "60%", margin: "auto"}}>
-						<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
-							Can't find what you're looking for? 
-						</Typography>
-						<div style={{flex: "1", display: "flex", flexDirection: "row", textAlign: "center",}}>
-							<TextField
-								required
-								style={{flex: "1", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
-								InputProps={{
-									style:{
-										color: "#ffffff",
-									},
-								}}
-								color="primary"
-								fullWidth={true}
-								placeholder="Email (optional)"
-								type="email"
-							  id="email-handler"
-								autoComplete="email"
-								margin="normal"
-								variant="outlined"
-    	  	 				onChange={e => setFormMail(e.target.value)}
-							/>
-							<TextField
-								required
-								style={{flex: "1", backgroundColor: theme.palette.inputColor}}
-								InputProps={{
-									style:{
-										color: "#ffffff",
-									},
-								}}
-								color="primary"
-								fullWidth={true}
-								placeholder="What are we missing?"
-								type=""
-							  id="standard-required"
-								margin="normal"
-								variant="outlined"
-								autoComplete="off"
-    	  	 			onChange={e => setMessage(e.target.value)}
-							/>
-						</div>
-						<Button
-							variant="contained"
-							color="primary"
-							style={buttonStyle}
-							disabled={message.length === 0}
-							onClick={() => {
-								submitContact(formMail, message)
-							}}
-						>
-							Submit	
-						</Button>
-						<Typography style={{color: "white"}} variant="body2">{formMessage}</Typography>
-					</div>
-					: null
+				<SearchContactForm globalUrl={globalUrl} isMobile={isMobile} tabName="docs" />
+				: null
 				}
 
 				{/* <span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>