Revert "shaffuru files sync"

frontend/src/components/DocsGrid.jsx

@@ -4,7 +4,6 @@ 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'
@@ -31,19 +30,61 @@ import { useDebouncedCallback } from "../utils/useDebouncedCallback.jsx";
 
 	
 
-const searchClient = algoliasearch("JNSS5CFDZZ", "eb5fd80aa6ed5ab4730d836cff3ea283")
+const searchClient = algoliasearch("JNSS5CFDZZ", "c8f882473ff42d41158430be09ec2b4e")
 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) {
@@ -83,15 +124,8 @@ const DocsGrid = props => {
 					placeholder="Search our Documentation..."
 					id="shuffle_search_field"
 					onChange={(event) => {
-						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)
+						removeQuery("q")
+						debouncedRefine(event.currentTarget.value)
 					}}
 					onKeyDown={(event) => {
 						if(event.key === "Enter") {
@@ -257,8 +291,62 @@ const DocsGrid = props => {
 					<CustomHits hitsPerPage={5}/>
 				</InstantSearch>
 				{showSuggestion === true ? 
-				<SearchContactForm globalUrl={globalUrl} isMobile={isMobile} tabName="docs" />
-				: null
+					<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
 				}
 
 				{/* <span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>