- {
+ {
+ !isAppPage && (
+ <>
+ {!moreButton ? (
+
) : ""}
-
+ {
setMoreButton(true)
-
setTimeout(() => {
navigate("/welcome?tab=2")
}, 250)
}}
>See More Apps
-
) : ""}
+
-
-
+
+
+
+
+ )
+ }
)
diff --git a/frontend/src/views/Apps2.jsx b/frontend/src/views/Apps2.jsx
new file mode 100644
index 00000000..079d4b2e
--- /dev/null
+++ b/frontend/src/views/Apps2.jsx
@@ -0,0 +1,1174 @@
+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";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+ TextField, Button, Typography, MenuItem, Select, Tabs, Tab, Zoom,
+ Grid,
+ Paper,
+ ButtonBase,
+ Tooltip,
+ Box,
+ CircularProgress,
+ Checkbox,
+} from "@mui/material";
+import { Context } from "../context/ContextApi.jsx";
+import Add from '@mui/icons-material/Add';
+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, 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";
+import AppSelection from "../components/AppSelection.jsx";
+
+
+const searchClient = algoliasearch(
+ "JNSS5CFDZZ",
+ "db08e40265e2941b9a7d8f644b6e5240"
+);
+
+// AppCard Component
+const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl, deactivatedIndexes, currTab }) => {
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "localhost:3000";
+ const appUrl = isCloud ? `/apps/${data.id}` : `https://shuffler.io/apps/${data.id}`;
+
+ const paperStyle = {
+ backgroundColor: mouseHoverIndex === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A",
+ color: "rgba(241, 241, 241, 1)",
+ cursor: "pointer",
+ position: "relative",
+ width: 365,
+ height: 96,
+ borderRadius: 8,
+ boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
+ marginBottom: 20,
+ };
+
+ return (
+
+
+
+ {data.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
+
+
+ {data.categories ? data.categories.join(", ") : "NA"}
+
+
+
+
+ {data.generated !== true && data.tags && data.tags.slice(0, 2).map((tag, tagIndex) => (
+
+ {tag}
+ {tagIndex < data.tags.length - 1 ? ", " : ""}
+
+ ))}
+
+ {/* Deactivate button */}
+ {currTab === 0 && !deactivatedIndexes.includes(index) && mouseHoverIndex === index && data.generated === true && (
+
+ )}
+
+ {!isLoading ? (
+
+ )}
+
+ );
+}
+
+// Custom Category Dropdown Component
+const CategoryDropdown = ({ items, currentRefinement, refine }) => {
+ const handleChange = (event) => {
+ const value = event.target.value;
+ refine(value);
+ };
+
+ return (
+
+ );
+};
+
+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 (searchQuery === "") {
+ return;
+ }
+ if (inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, [searchQuery]);
+
+ const handleChange = (event) => {
+ const value = event.target.value;
+ setLocalQuery(value);
+ debouncedRefine(value);
+ };
+
+ return (
+
+ {hits?.length === 0 && searchQuery.length >= 0 && showNoAppFound ? (
+
+
+ )}
+
+ ) : (
+
+ No Apps Found
+
+ ) : (
+
+
+
+ {hits?.map((data, index) => {
+ const appUrl =
+ isCloud
+ ? `/apps/${data.objectID}?queryID=${data.__queryID}`
+ : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`;
+
+ return (
+
+
+
+ {
+ setHoverEffect(index);
+ }}
+ onMouseLeave={() => {
+ setHoverEffect(-1);
+ }}
+ >
+
+ 
+
+
+
+
+
+ );
+ })}
+
+
+
+
+ {(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) &&
+
+
+ {data.categories !== null
+ ? normalizedString(data.categories).join(", ")
+ : "NA"}
+
+
+
+
+ {hoverEffect === index && isCloud ? (
+
+
+ {data.tags && (
+
+
+ {data.tags.slice(0, 1).map((tag, tagIndex) => (
+
+ {normalizedString(tag)}
+ {tagIndex < 1 ? ", " : ""}
+
+ ))}
+
+
+ )}
+
+ ) : (
+
+ {data.tags &&
+ data.tags.map((tag, tagIndex) => (
+
+ {normalizedString(tag)}
+ {tagIndex < data.tags.length - 1 ? ", " : ""}
+
+ ))}
+
+ )}
+
+ {hoverEffect === index && isCloud && (
+
+
+ {allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+ Apps
+
+
+
+ handleTabChange(newTab)}
+ TabIndicatorProps={{ style: { height: '3px', borderRadius: 10 } }}
+ >
+
+
+
+
+
+ {
+ (currTab === 0 || currTab === 1) &&
+ {
+ setSearchQuery(event.target.value);
+ }}
+ 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 ?
+ ),
+ }}
+ />
+ }
+ {
+ currTab === 2 &&
+
+
+ {currTab === 2 ? (
+
+
+ {currTab === 2 ? (
+
+
+
+
+
+
+ {
+ currTab === 0 && (
+
+
+ {isLoading ? (
+
+ )
+ }
+ {
+ currTab === 1 && (
+
+
+ ) : (
+ <>
+ {appsToShow?.length > 0 && appsToShow !== undefined && !isLoading ? (
+
+ {appsToShow.map((data, index) => (
+
+ ) : (
+
+
+ )}
+
+ )}
+
+ {isLoading ? (
+
+ )
+ }
+
+ {
+ currTab === 2 &&
+
+
+ ) : (
+ <>
+ {appsToShow?.length > 0 && appsToShow !== undefined ? (
+
+ {appsToShow.map((data, index) => (
+
+ ) : (
+
+ No Apps Found
+
+ )}
+
+ )}
+