{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 (
{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 (
{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 (
{isCreatedByExpanded && (
<>
{/* */}
*/}
)}
);
};
const FilterApps = () => {
return (
{isCategoreListExpanded && topCategories && topCategories.length > 0 && (
);
};
const [isActionLabelExpanded, setIsActionLabelExpanded] = useState(false);
const toogleActionLabel = () => {
setIsActionLabelExpanded((prevState) => !prevState);
};
const FilterUsersAndOrgsAppByActionLabel = ({ userAndOrgsApp }) => {
const findTopTags = () => {
const tagCountMap = {};
// Check if userAndOrgsApp is an array before iterating over it and Find top 10 tags from the apps
if (Array.isArray(userAndOrgsApp)) {
userAndOrgsApp.forEach((app) => {
const tags = app.tags;
if (tags && tags.length > 0) {
tags.forEach((tag) => {
tagCountMap[tag] = (tagCountMap[tag] || 0) + 1;
});
}
});
}
const tagArray = Object.keys(tagCountMap).map((tag) => ({
tag,
count: tagCountMap[tag],
}));
tagArray.sort((a, b) => b.count - a.count);
const topTags = tagArray.slice(0, 9);
return topTags;
};
const topTags = findTopTags();
const [selectedCategories, setSelectedCategories] = useState([]);
const handleCheckboxChange = (index) => {
const category = topTags[index].tag;
const updatedCheckboxStates = [...selectedTagsForUserAndOrgApps];
if (updatedCheckboxStates.includes(category)) {
setSelectedTagsForUserAndOrgApps(updatedCheckboxStates.filter((item) => item !== category));
} else {
setSelectedTagsForUserAndOrgApps([...updatedCheckboxStates, category]);
}
};
const handleClearFilter = () => {
setSelectedTagsForUserAndOrgApps([]);
};
const actionLabelButtonStyling = {
cursor: "pointer",
color: "white",
border: "none",
backgroundColor: "transparent",
fontSize: 16,
display: "flex",
flexDirection: "row",
width: "100%",
height: 30,
textTransform: 'none',
marginBottom: isActionLabelExpanded && 16,
fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
}
return (
{topCategories.map((data, index) => (
))}
)}
{isActionLabelExpanded && topTags && topTags.length > 0 && (
<>
{topTags.map((data, index) => (
))}
)}
);
};
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 (
{isCreatedWithExpanded && (
<>
{AppCreatedWithOptions.map((data, index) => (
))}
)}
);
};
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 (
{isCreatedByExpanded && (
<>
);
};
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
)
}
const [isLoading, setIsLoading] = useState(false)
useEffect(() => {
if (currTab) {
setselectedCategoryForUsersAndOgsApps([]);
setSelectedTagsForUserAndOrgApps([]);
setSelectedOptionOfCreatedWith([]);
setIsCategoryListExpanded(true);
setIsActionLabelExpanded(false);
setIsCreatedWithExpanded(false);
}
if (currTab === 1 || currTab === 2) {
setIsLoading(true);
}
}, [currTab])
//Component to fetch all apps created by user and Org
const UserAndOrgApps = () => {
const [searchQuery, setSearchQuery] = useState("");
const [userAndOrgAppData, setUserAndOrgAppData] = useState([])
const allActivatedAppIdsString = localStorage.getItem('allActivatedAppIds');
const allActivatedAppIds = allActivatedAppIdsString ? JSON.parse(allActivatedAppIdsString) : [];
const latestActivatedAppId = allActivatedAppIds.length > 0 ? allActivatedAppIds[allActivatedAppIds.length - 1] : null;
useEffect(() => {
if (currTab === 2 && isLoggedIn != undefined && isLoggedIn != null && isLoggedIn === true) {
const baseUrl = globalUrl;
const URL = `${baseUrl}/api/v1/users/apps`;
fetch(URL, {
method: "GET",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
return response.json();
})
.then((data) => {
setUserAndOrgAppData(data)
setIsLoading(false)
})
.catch((err) => {
console.error("Error fetching user apps:", err);
});
}
else if (currTab === 1 && isLoggedIn != undefined && isLoggedIn != null && isLoggedIn === true) {
const baseUrl = globalUrl;
const URL = `${baseUrl}/api/v1/apps`;
fetch(URL, {
method: "GET",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
return response.json();
})
.then((data) => {
setUserAndOrgAppData(data)
setIsLoading(false);
})
.catch((err) => {
console.error("Error fetching user apps:", err);
});
}
}, [])
//Search app base on app name, category and tag
const filteredUserAppdata = Array.isArray(userAndOrgAppData) ? userAndOrgAppData.filter((app) => {
const matchesSearchQuery = (
searchQuery === "" ||
app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
(app.tags && app.tags.some(tag =>
tag.toLowerCase().includes(searchQuery.toLowerCase())
)) ||
(app.categories && app.categories.some((category) =>
category.toLowerCase().includes(searchQuery.toLowerCase())
))
);
const matchesSelectedCategories = (
selectedCategoryForUsersAndOgsApps.length === 0 ||
(app.categories && app.categories.some(category =>
selectedCategoryForUsersAndOgsApps.includes(category)
))
);
const matchesSelectedTags = (
selectedTagsForUserAndOrgApps.length === 0 ||
(app.tags && selectedTagsForUserAndOrgApps.some(tag =>
app.tags.includes(tag)
))
);
const matchesSelectedOption = (
selectedOptionOfCreatedWith.length === 0 ||
selectedOptionOfCreatedWith.includes('App Editor') && app.generated === true ||
selectedOptionOfCreatedWith.includes('Python') && app.generated === false
);
return matchesSearchQuery && matchesSelectedCategories && matchesSelectedTags && matchesSelectedOption;
}) : [];
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1);
var counted = 0;
const memoizedHits = useMemo(() => {
return filteredUserAppdata.map((data, index) => {
const isMouseOverOnCloudIcon = false;
const xs = 12;
const rowHandler = 12;
const searchClient = {};
const userdata = {};
const paperStyle = {
backgroundColor: "#1A1A1A",
color: "rgba(241, 241, 241, 1)",
padding: isHeader ? null : 15,
cursor: "pointer",
position: "relative",
width: 339,
height: 96,
borderRadius: 8,
};
var parsedname = "";
for (var key = 0; key < data.name.length; key++) {
var character = data.name.charAt(key);
if (character === character.toUpperCase()) {
if (
data.name.charAt(key + 1) !== undefined &&
data.name.charAt(key + 1) ===
data.name.charAt(key + 1).toUpperCase()
) {
} else {
parsedname += " ";
}
}
parsedname += character;
}
parsedname = (
parsedname.charAt(0).toUpperCase() + parsedname.substring(1)
).replaceAll("_", " ");
const normalizedString = (name) => {
if (typeof name === 'string') {
return name.replace(/_/g, ' ');
} else {
return name;
}
};
const appUrl =
isCloud === false
? `/apps/${data.id}`
: `https://shuffler.io/apps/${data.id}`;
return (
{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 ? ", " : ""}
))}
{/* )} */}
{isLoggedIn ? (
);
};
const AppTab = () => {
const [isAnyAppActivated, setIsAnyAppActivated] = useState(false);
return (
{isLoading ? : (
)}
) : (
)}
{memoizedHits}
{/*
*/}
{showSuggestion === true ? (
Can't find what you're looking for?
setFormMail(e.target.value)}
/>
setMessage(e.target.value)}
/>
{formMessage}
) : null}
);
};
export default AppGrid;
{currTab === 0 ?
{/*