- {/*
+ //Function for activation and deactivation of app
+ const handleActivateButton = (event, data, type) => {
+ event.preventDefault();
+ if (!isLoggedIn) {
+ toast.error("Please log in to your account to activate the app.")
+ return;
+ }
+ if (type === "activate") {
+ toast.success(`The ${normalizedString(data.name)} app is activating. Please wait...`);
+ }
+ if (type === "deactivate") {
+ toast.success(`The ${normalizedString(data.name)} app is deactivating. Please wait...`);
+ }
+
+ const baseURL = globalUrl;
+ const url = `${baseURL}/api/v1/apps/${data.objectID}/${type}`;
+
+ fetch(url, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json',
+ },
+ credentials: "include",
+ })
+ .then((response) => response.json())
+ .then((responseJson) => {
+ if (responseJson.success === false) {
+ toast.error(responseJson.reason);
+ } else {
+ toast.success(`App ${type}d Successfully!`);
+ if (type === 'activate') {
+ setAllActivatedAppIds(prev => [...prev, data.objectID]);
+ setIsAnyAppActivated(true);
+ }
+ if (type === 'deactivate') {
+ const updatedIds = allActivatedAppIds.filter(id => id !== data.objectID);
+ setAllActivatedAppIds(updatedIds);
+ }
+ setIsActivateAppSuccess(prev => !prev);
+ }
+ })
+ .catch(error => {
+ console.log("app error: ", error.toString());
+ });
+ }
+
+ useEffect(() => {
+ isLoggedIn && localStorage.setItem('allActivatedAppIds', JSON.stringify(allActivatedAppIds));
+ }, [allActivatedAppIds]);
+
+
+ const memoizedHits = useMemo(() => {
+ return hits.map((data, index) => {
+ let workflowDelay = 0;
+ const isHeader = true;
+ const paperStyle = {
+ color: "rgba(241, 241, 241, 1)",
+ padding: isHeader ? null : 15,
+ cursor: "pointer",
+ maxWidth: 339,
+ maxHeight: 96,
+ borderRadius: 8,
+ transition: 'background-color 0.3s ease',
+ backgroundColor: "rgba(26, 26, 26, 1)",
+ };
+
+ const appUrl =
+ isCloud
+ ? `/apps/${data.objectID}?queryID=${data.__queryID}`
+ : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`;
+
+ //check if appExist in userInfo.active_app or not.
+ return (
+
+
+
+ {
+ setMouseHoverIndex(index);
+ }}
+ onMouseOut={() => {
+ setMouseHoverIndex(-1);
+ }}
+ >
+
+
+
+ {(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) &&
+
+
+ {data.categories !== null
+ ? normalizedString(data.categories).join(", ")
+ : "NA"}
+
+
+
+ {mouseHoverIndex === index ? (
+
+ {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 ? ", " : ""}
+
+ ))}
+
+ )}
+
+
+ {mouseHoverIndex === index && (
+
+ {allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? (
+ {
+ handleActivateButton(event, data, "deactivate");
+ }}>
+ Deactivate
+
+ ) : (
+ {
+ handleActivateButton(event, data, "activate");
+ }}
+ >
+ Activate
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+ );
+ });
+ }, [hits, mouseHoverIndex, isActivateAppSuccess, allActivatedAppIds]);
+
+ return (
+
+
+ {memoizedHits}
+
+
+ );
+ };
+
+ var workflowDelay = -50;
+
+ const CustomClearRefinements = connectStateResults(({ searchResults, ...rest }) => {
+ const hasFilters = searchResults && searchResults.nbHits !== searchResults.nbSortedHits;
+ return
Clear All }} {...rest} disabled={!hasFilters} />;
+ });
+
+ //Component to Filter all apps base on category
+ const FilterAllAppsByCategory = () => {
+ const [isRefinementListExpanded, setIsRefinementListExpanded] =
+ useState(true);
+
+ const toggleRefinementList = () => {
+ setIsRefinementListExpanded((prevState) => !prevState);
+ };
+
+ const categoryButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ width: "100%",
+ height: 30,
+ flexDirection: "row",
+ textTransform: 'none',
+ fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
+ }
+
+ return (
+
+
+ Category
+ {isRefinementListExpanded ? (
+
+
+ {isRefinementListExpanded && (
+ <>
+
+ );
+ };
+
+ //Component to filter all apps base on Action label
+ const FilterByActionLabel = () => {
+ const [isActionLabelExpanded, setIsActionLabelExpanded] = useState(false);
+ useState(false);
+
+ const toogleActionLabel = () => {
+ setIsActionLabelExpanded((prevState) => !prevState);
+ };
+
+ const actionLabelButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ fontWeight: 400
+ }
+
+
+ return (
+
+
+ Labels
+ {isActionLabelExpanded ? (
+
+
+ {isActionLabelExpanded && (
+ <>
+
+ );
+ };
+
+ //component to filter all apps base on the created with like 'App Editor' or 'Python'
+ const FilterByCreatedWith = () => {
+ const [isCreatedWithExpanded, setIsCreatedWithExpanded] = useState(false);
+
+ const toogleCreatedWith = () => {
+ setIsCreatedWithExpanded((prevState) => !prevState);
+ };
+
+ const transformRefinementListItems = items =>
+ items.map(item => ({
+ ...item,
+ label: item.label === 'true' ? 'App Editor' : 'Python',
+ }));
+
+ const createdWithButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ fontWeight: 400
+ }
+
+ return (
+
+
+ Created With
+ {isCreatedWithExpanded ?
+
+ {isCreatedWithExpanded && (
+ <>
+
+ );
+ };
+
+ const FilterCreatedBy = () => {
+ const [isCreatedByExpanded, setIscreatedByExpanded] = useState(false);
+ useState(false);
+
+ const toogleCreatedBy = () => {
+ setIscreatedByExpanded((prevState) => !prevState);
+ };
+
+ const createdByButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ whiteSpace: "nowrap",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ opacity: '0.5'
+ }
+
+ return (
+
+
+ Created By
+ {isCreatedByExpanded ? (
+
+
+ {isCreatedByExpanded && (
+ <>
+ {/* */}
+ */}
+
+ Clear All
+
+
+ )}
+
+ );
+ };
+
+ const FilterApps = () => {
+ return (
+
+
+ Filter By
+
+
+ );
+ };
+
+
+
+ const boxStyle = {
+ color: "white",
+ flex: "1",
+ marginLeft: isHeader ? null : 10,
+ marginRight: isHeader ? null : 10,
+ paddingLeft: isHeader ? null : 30,
+ paddingRight: isHeader ? null : 30,
+ paddingBottom: isHeader ? null : 30,
+ display: "flex",
+ flexDirection: "column",
+ overflowX: "visible",
+ backgroundColor: "rgba(33, 33, 33, 1)",
+ borderRadius: 16,
+ marginTop: 24,
+ width: 741,
+ height: 741,
+ };
+
+
+ //Component to display all apps.
+ const AllApps = ({ setIsAnyAppActivated }) => {
+
+ return (
+
+
+ );
+ };
+
+ //Search box for the orgs and users apps
+ const SearchBoxForOrgsAndUsersApp = ({ searchQuery, setSearchQuery }) => {
+
+ return (
+
+ )
+ }
+
+
+
+ const [selectedCategoryForUsersAndOgsApps, setselectedCategoryForUsersAndOgsApps] = useState([]);
+ const [selectedTagsForUserAndOrgApps, setSelectedTagsForUserAndOrgApps] = useState([]);
+ const [isCategoreListExpanded, setIsCategoryListExpanded] = useState(true);
+
+ const toogleCategoryList = () => {
+ setIsCategoryListExpanded((prevState) => !prevState);
+ };
+
+ //Component to display category List for User and Orgs app
+ const FilterUsersAndOrgsAppByCategory = ({ userAndOrgsApp }) => {
+
+ //Display top 9 category from the database
+
+ const findTopCategories = () => {
+ const categoryCountMap = {};
+
+ // Check if userAndOrgsApp is an array before iterating over it and Find top 10 Category from the apps
+ if (Array.isArray(userAndOrgsApp)) {
+ userAndOrgsApp.forEach((app) => {
+ const categories = app.categories;
+
+ if (categories && categories.length > 0) {
+ categories.forEach((category) => {
+ categoryCountMap[category] = (categoryCountMap[category] || 0) + 1;
+ });
+ }
+ });
+
+ const categoryArray = Object.keys(categoryCountMap).map((category) => ({
+ category,
+ count: categoryCountMap[category],
+ }));
+
+ categoryArray.sort((a, b) => b.count - a.count);
+
+ const topCategories = categoryArray.slice(0, 9);
+
+ return topCategories;
+ }
+ };
+
+ const topCategories = findTopCategories();
+
+ const handleCheckboxChange = (category) => {
+ if (selectedCategoryForUsersAndOgsApps.includes(category)) {
+ setselectedCategoryForUsersAndOgsApps(selectedCategoryForUsersAndOgsApps.filter((item) => item !== category));
+ } else {
+ setselectedCategoryForUsersAndOgsApps([...selectedCategoryForUsersAndOgsApps, category]);
+ }
+ };
+
+ const handleClearFilter = () => {
+ setselectedCategoryForUsersAndOgsApps([]);
+ };
+
+ const categorysButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ width: "100%",
+ height: 30,
+ flexDirection: "row",
+ textTransform: 'none',
+ fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
+ }
+ return (
+
+
+ Category
+ {isCategoreListExpanded ? (
+
+ {isCategoreListExpanded && topCategories && topCategories.length > 0 && (
+
+ {topCategories.map((data, index) => (
+ handleCheckboxChange(data.category)}
+ >
+ {data.category}
+
+
+ ))}
+
+
+ Clear All
+
+
+ )}
+
+
+ Labels
+ {isActionLabelExpanded ? (
+
+
+ {isActionLabelExpanded && topTags && topTags.length > 0 && (
+ <>
+ {topTags.map((data, index) => (
+ handleCheckboxChange(index)}
+ >
+ {data.tag}
+
+
+ ))}
+
+
+ Clear All
+
+
+ )}
+
+ );
+ };
+
+ const [selectedOptionOfCreatedWith, setSelectedOptionOfCreatedWith] = useState([]);
+ const [isCreatedWithExpanded, setIsCreatedWithExpanded] = useState(false);
+
+ const toogleCreatedWith = () => {
+ setIsCreatedWithExpanded((prevState) => !prevState);
+ };
+ const FilterUsersAndOrgsAppByCreatedWith = () => {
+
+ const AppCreatedWithOptions = ['App Editor', 'Python']
+
+ const handleCheckboxChange = (index) => {
+ const category = AppCreatedWithOptions[index];
+ const updatedCheckboxStates = [...selectedOptionOfCreatedWith];
+ if (updatedCheckboxStates.includes(category)) {
+ setSelectedOptionOfCreatedWith(updatedCheckboxStates.filter((item) => item !== category));
+ } else {
+ setSelectedOptionOfCreatedWith([...updatedCheckboxStates, category]);
+ }
+ };
+
+
+ const handleClearFilter = () => {
+ setSelectedOptionOfCreatedWith([]);
+ };
+
+ const createdWithButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ marginBottom: isCreatedWithExpanded && 16,
+ fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
+ }
+
+ return (
+
+
+ Created With
+ {isCreatedWithExpanded ?
+
+ {isCreatedWithExpanded && (
+ <>
+ {AppCreatedWithOptions.map((data, index) => (
+ handleCheckboxChange(index)}
+ >
+ {data}
+
+
+ ))}
+
+
+ Clear All
+
+
+ )}
+
+ );
+ };
+
+ const FilterUsersAndOrgsAppCreatedBy = () => {
+
+ const [isCreatedByExpanded, setIscreatedByExpanded] = useState(false);
+ useState(false);
+
+ const toogleCreatedBy = () => {
+ setIscreatedByExpanded((prevState) => !prevState);
+ };
+ const [isButtonDisable, setIsButtonDisable] = useState(true)
+
+ const createdByButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: isButtonDisable ? '#3c3c3c. ' : "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ whiteSpace: "nowrap",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ opacity: '0.5'
+ }
+
+ return (
+
+
+ Created By
+ {isCreatedByExpanded ? (
+
+
+ {isCreatedByExpanded && (
+ <>
+
+ Clear All
+
+
+ )}
+
+ );
+ };
+
+ const FilterUserAndOrgApps = () => {
+
+ const [userAndOrgsApp, setUserAndOrgsApp] = useState([]);
+
+ useEffect(() => {
+ if (currTab === 2) {
+ const baseUrl = globalUrl;
+ const userAppsUrl = `${baseUrl}/api/v1/users/apps`;
+ fetch(userAppsUrl, {
+ method: "GET",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ setUserAndOrgsApp(data);
+ })
+ .catch((err) => {
+ console.error("Error fetching user apps:", err);
+ });
+ } else if (currTab === 1) {
+ const baseUrl = globalUrl;
+ const appsUrl = `${baseUrl}/api/v1/apps`;
+ fetch(appsUrl, {
+ method: "GET",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ setUserAndOrgsApp(data);
+ })
+ .catch((err) => {
+ console.error("Error fetching apps:", err);
+ });
+ }
+ }, [currTab]);
+
+
+ return (
+
+ {isLoggedIn === true && (
+
+
+ Filter By
+
+
+ )}
+
+
+
+ {
+ setMouseHoverIndex(index);
+ }}
+ onMouseOut={() => {
+ setMouseHoverIndex(-1);
+ }}
+ >
+
+
+
+ {normalizedString(data.name)}
+
+
+ {data.categories !== null
+ ? normalizedString(data.categories).join(", ")
+ : "NA"}
+
+
+ {data.tags &&
+ data.tags.map((tag, tagIndex) => (
+
+ {normalizedString(tag)}
+ {tagIndex < data.tags.length - 1 ? ", " : ""}
+
+ ))}
+
+ {/* )} */}
+
+
+
+
+
+ );
+ });
+ }, [filteredUserAppdata, latestActivatedAppId]);
+
+
+ return (
+
+ {isLoggedIn ? (
+
+ {isLoading ?
: (
+
+
+
+
+ {memoizedHits}
+
+
+
+ )}
+
+ ) : (
+
+
Please login to your account first to view {`${currTab === 1 ? "Organization" : "My"}`} Apps.signup to create a new account.
+
+ )}
+
+
+
+ {isAnyAppActivated && Organization Apps
+ sx={{
+ color: currTab === 1 ? "#F86743" : "inherit",
+ border: 'none',
+ height: 44,
+ fontSize: 16,
+ flex: 1,
+ textTransform: 'none',
+ fontWeight: 400,
+ paddingBottom: 3,
+ fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
+ }}
+ >
+
+
+
+ {currTab === 0 ? (
+
+ ) : currTab === 1 || currTab === 2 ? (
+
+ ) : null}
+
![Algolia logo]({"/images/logo-algolia-nebula-blue-full.svg"}){kind=logo}
-
-
-