Done with the discover apps tab revamp : New look
This commit is contained in:
monilprajapati
@@ -309,7 +309,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography variant="h5" component="div" sx={{ fontWeight: 500 }}>
|
<Typography variant="h5" component="div" sx={{ fontWeight: 500 }}>
|
||||||
About Gmail
|
About {app?.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
|
||||||
</Typography>
|
</Typography>
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
|
|||||||
+295
-257
@@ -299,237 +299,225 @@ const Hits = ({
|
|||||||
<Typography variant="body1">No Apps Found</Typography>
|
<Typography variant="body1">No Apps Found</Typography>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<Grid item spacing={2} justifyContent="flex-start">
|
<div
|
||||||
<div
|
style={{
|
||||||
style={{
|
marginTop: 16,
|
||||||
minHeight: 570,
|
width: "100%",
|
||||||
overflowY: "auto",
|
display: "grid",
|
||||||
overflowX: "hidden",
|
gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
|
||||||
}}>
|
gap: "20px",
|
||||||
<div
|
justifyContent: "space-between",
|
||||||
style={{
|
alignItems: "start",
|
||||||
rowGap: 16,
|
padding: "0 10px"
|
||||||
columnGap: 16,
|
}}
|
||||||
marginTop: 16,
|
>
|
||||||
display: "flex",
|
{hits?.map((data, index) => {
|
||||||
flexWrap: "wrap",
|
const appUrl =
|
||||||
justifyContent: "flex-start",
|
isCloud
|
||||||
maxHeight: 570,
|
? `/apps/${data.objectID}?queryID=${data.__queryID}`
|
||||||
scrollbarWidth: "thin",
|
: `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`;
|
||||||
scrollbarColor: "#494949 #2f2f2f",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{hits?.map((data, index) => {
|
|
||||||
const appUrl =
|
|
||||||
isCloud
|
|
||||||
? `/apps/${data.objectID}?queryID=${data.__queryID}`
|
|
||||||
: `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Zoom
|
<Zoom
|
||||||
key={index}
|
key={index}
|
||||||
in={true}
|
in={true}
|
||||||
style={{
|
style={{
|
||||||
transitionDelay: `${workflowDelay}ms`,
|
transitionDelay: `${workflowDelay}ms`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Paper
|
||||||
|
elevation={0}
|
||||||
|
style={{
|
||||||
|
backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#212121",
|
||||||
|
color: "rgba(241, 241, 241, 1)",
|
||||||
|
cursor: "pointer",
|
||||||
|
fontFamily: "Inter",
|
||||||
|
// position: "relative",
|
||||||
|
width: "100%",
|
||||||
|
height: 96,
|
||||||
|
borderRadius: 8,
|
||||||
|
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
|
||||||
|
marginBottom: 20,
|
||||||
|
transition: "width 0.3s ease",
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setHoverEffect(index);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
setHoverEffect(-1);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ButtonBase style={{
|
||||||
|
borderRadius: 6,
|
||||||
|
fontSize: 16,
|
||||||
|
overflow: "hidden",
|
||||||
|
display: "flex",
|
||||||
|
fontFamily: "Inter",
|
||||||
|
width: '100%',
|
||||||
|
backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121"
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
handleAppClick(data);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<img
|
||||||
onClick={
|
alt={data.name}
|
||||||
() => {
|
src={data.image_url ? data.image_url : "/images/no_image.png"}
|
||||||
handleAppClick(data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
style={{
|
style={{
|
||||||
color: "#f85a3e",
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
borderRadius: 6,
|
||||||
|
margin: 10,
|
||||||
|
border: "1px solid #212122",
|
||||||
|
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
width: 339,
|
||||||
|
gap: 6,
|
||||||
|
fontWeight: '400',
|
||||||
|
overflow: "hidden",
|
||||||
|
margin: "12px 0",
|
||||||
|
fontFamily: "Inter"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Paper
|
<div
|
||||||
elevation={0}
|
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A",
|
display: 'flex',
|
||||||
color: "rgba(241, 241, 241, 1)",
|
flexDirection: "row",
|
||||||
cursor: "pointer",
|
overflow: "hidden",
|
||||||
position: "relative",
|
gap: 8,
|
||||||
width: leftSideBarOpenByClick ? 325 : 365,
|
fontWeight:600,
|
||||||
height: 96,
|
textOverflow: "ellipsis",
|
||||||
borderRadius: 8,
|
whiteSpace: "nowrap",
|
||||||
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
|
color: '#F1F1F1'
|
||||||
marginBottom: 20,
|
|
||||||
}}
|
|
||||||
onMouseEnter={() => {
|
|
||||||
setHoverEffect(index);
|
|
||||||
}}
|
|
||||||
onMouseLeave={() => {
|
|
||||||
setHoverEffect(-1);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ButtonBase style={{
|
{(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && <Box sx={{ width: 8, height: 8, backgroundColor: "#02CB70", borderRadius: '50%' }} />}
|
||||||
borderRadius: 6,
|
{normalizedString(data.name)}
|
||||||
fontSize: 16,
|
</div>
|
||||||
overflow: "hidden",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: '100%',
|
|
||||||
backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121"
|
|
||||||
}}>
|
|
||||||
<img
|
|
||||||
alt={data.name}
|
|
||||||
src={data.image_url ? data.image_url : "/images/no_image.png"}
|
|
||||||
style={{
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
borderRadius: 6,
|
|
||||||
margin: 10,
|
|
||||||
border: "1px solid #212122",
|
|
||||||
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: 339,
|
|
||||||
gap: 8,
|
|
||||||
fontWeight: '400',
|
|
||||||
overflow: "hidden",
|
|
||||||
margin: "12px 0",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: "row",
|
|
||||||
overflow: "hidden",
|
|
||||||
gap: 8,
|
|
||||||
textOverflow: "ellipsis",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
color: '#F1F1F1'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && <Box sx={{ width: 8, height: 8, backgroundColor: "#02CB70", borderRadius: '50%' }} />}
|
|
||||||
{normalizedString(data.name)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
textOverflow: "ellipsis",
|
textOverflow: "ellipsis",
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
color: "rgba(158, 158, 158, 1)",
|
color: "rgba(158, 158, 158, 1)",
|
||||||
marginTop: 5,
|
marginTop: 5,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{data.categories !== null
|
{data.categories !== null
|
||||||
? normalizedString(data.categories).join(", ")
|
? normalizedString(data.categories).join(", ")
|
||||||
: "NA"}
|
: "NA"}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
width: 230,
|
width: 230,
|
||||||
textAlign: 'start',
|
textAlign: 'start',
|
||||||
color: "rgba(158, 158, 158, 1)",
|
color: "rgba(158, 158, 158, 1)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ marginBottom: 15, }}>
|
<div style={{ marginBottom: 15, }}>
|
||||||
{hoverEffect === index && isCloud ? (
|
{hoverEffect === index && isCloud ? (
|
||||||
<div>
|
<div>
|
||||||
{data.tags && (
|
{data.tags && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
title={data.tags.join(", ")}
|
title={data.tags.join(", ")}
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
componentsProps={{
|
componentsProps={{
|
||||||
tooltip: {
|
tooltip: {
|
||||||
sx: {
|
sx: {
|
||||||
backgroundColor: "rgba(33, 33, 33, 1)",
|
backgroundColor: "rgba(33, 33, 33, 1)",
|
||||||
color: "rgba(241, 241, 241, 1)",
|
|
||||||
width: "auto",
|
|
||||||
height: "auto",
|
|
||||||
fontSize: 16,
|
|
||||||
border: "1px solid rgba(73, 73, 73, 1)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{data.tags.slice(0, 1).map((tag, tagIndex) => (
|
|
||||||
<span key={tagIndex}>
|
|
||||||
{normalizedString(tag)}
|
|
||||||
{tagIndex < 1 ? ", " : ""}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div style={{ width: 230, textOverflow: "ellipsis", overflow: 'hidden', whiteSpace: 'nowrap', }}>
|
|
||||||
{data.tags &&
|
|
||||||
data.tags.map((tag, tagIndex) => (
|
|
||||||
<span key={tagIndex}>
|
|
||||||
{normalizedString(tag)}
|
|
||||||
{tagIndex < data.tags.length - 1 ? ", " : ""}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div style={{ position: 'relative', bottom: 5 }}>
|
|
||||||
{hoverEffect === index && isCloud && (
|
|
||||||
<div>
|
|
||||||
{allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? (
|
|
||||||
<Button style={{
|
|
||||||
width: 102,
|
|
||||||
height: 35,
|
|
||||||
borderRadius: 200,
|
|
||||||
backgroundColor: "rgba(73, 73, 73, 1)",
|
|
||||||
color: "rgba(241, 241, 241, 1)",
|
color: "rgba(241, 241, 241, 1)",
|
||||||
textTransform: "none",
|
width: "auto",
|
||||||
}}
|
height: "auto",
|
||||||
onClick={(event) => {
|
fontSize: 16,
|
||||||
handleActivateButton(event, data, "deactivate");
|
border: "1px solid rgba(73, 73, 73, 1)",
|
||||||
}}>
|
}
|
||||||
Deactivate
|
}
|
||||||
</Button>
|
}}
|
||||||
) : (
|
>
|
||||||
<Button
|
<span>
|
||||||
style={{
|
{data.tags.slice(0, 1).map((tag, tagIndex) => (
|
||||||
width: 102,
|
<span key={tagIndex}>
|
||||||
height: 35,
|
{normalizedString(tag)}
|
||||||
borderRadius: 200,
|
{tagIndex < 1 ? ", " : ""}
|
||||||
backgroundColor: "rgba(242, 101, 59, 1)",
|
</span>
|
||||||
color: "rgba(255, 255, 255, 1)",
|
))}
|
||||||
textTransform: "none",
|
</span>
|
||||||
}}
|
</Tooltip>
|
||||||
onClick={(event) => {
|
)}
|
||||||
handleActivateButton(event, data, "activate");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Activate
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
</ButtonBase>
|
<div style={{ width: 230, textOverflow: "ellipsis", overflow: 'hidden', whiteSpace: 'nowrap', }}>
|
||||||
</Paper>
|
{data.tags &&
|
||||||
|
data.tags.map((tag, tagIndex) => (
|
||||||
|
<span key={tagIndex}>
|
||||||
|
{normalizedString(tag)}
|
||||||
|
{tagIndex < data.tags.length - 1 ? ", " : ""}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div style={{ position: 'relative', bottom: 5 }}>
|
||||||
|
{hoverEffect === index && isCloud && (
|
||||||
|
<div>
|
||||||
|
{allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? (
|
||||||
|
<Button style={{
|
||||||
|
width: 102,
|
||||||
|
height: 35,
|
||||||
|
borderRadius: 200,
|
||||||
|
backgroundColor: "rgba(73, 73, 73, 1)",
|
||||||
|
color: "rgba(241, 241, 241, 1)",
|
||||||
|
textTransform: "none",
|
||||||
|
}}
|
||||||
|
onClick={(event) => {
|
||||||
|
handleActivateButton(event, data, "deactivate");
|
||||||
|
}}>
|
||||||
|
Deactivate
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
style={{
|
||||||
|
width: 102,
|
||||||
|
height: 35,
|
||||||
|
borderRadius: 200,
|
||||||
|
backgroundColor: "rgba(242, 101, 59, 1)",
|
||||||
|
color: "rgba(255, 255, 255, 1)",
|
||||||
|
textTransform: "none",
|
||||||
|
}}
|
||||||
|
onClick={(event) => {
|
||||||
|
handleActivateButton(event, data, "activate");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Activate
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Zoom>
|
</ButtonBase>
|
||||||
);
|
</Paper>
|
||||||
})}
|
</Zoom>
|
||||||
</div>
|
);
|
||||||
</div>
|
})}
|
||||||
</Grid>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div><Box sx={{ position: 'absolute', top: '30%', left: '50%', }}> <CircularProgress /></Box></div>
|
<div><Box sx={{ position: 'absolute', top: '30%', left: '50%', }}> <CircularProgress /></Box></div>
|
||||||
)}
|
)
|
||||||
</div>
|
}
|
||||||
|
</div >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -540,6 +528,14 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
|
|||||||
const inputRef = useRef(null);
|
const inputRef = useRef(null);
|
||||||
const [localQuery, setLocalQuery] = useState(searchQuery);
|
const [localQuery, setLocalQuery] = useState(searchQuery);
|
||||||
|
|
||||||
|
// Initialize search when component mounts or when switching to Discover tab
|
||||||
|
useEffect(() => {
|
||||||
|
if (searchQuery) {
|
||||||
|
setLocalQuery(searchQuery);
|
||||||
|
refine(searchQuery); // This will trigger the Algolia search
|
||||||
|
}
|
||||||
|
}, [searchQuery, refine]);
|
||||||
|
|
||||||
// Debounced function to refine search
|
// Debounced function to refine search
|
||||||
const debouncedRefine = useRef(
|
const debouncedRefine = useRef(
|
||||||
debounce((value) => {
|
debounce((value) => {
|
||||||
@@ -600,7 +596,6 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
|
|||||||
<ClearIcon
|
<ClearIcon
|
||||||
style={{
|
style={{
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
marginRight: 10
|
|
||||||
}}
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setLocalQuery('');
|
setLocalQuery('');
|
||||||
@@ -626,26 +621,43 @@ const CategoryDropdown = ({ items, currentRefinement, refine }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Select
|
<div style={{ position: 'relative', width: '100%' }}>
|
||||||
fullWidth
|
<Select
|
||||||
variant="outlined"
|
fullWidth
|
||||||
value={currentRefinement}
|
variant="outlined"
|
||||||
onChange={handleChange}
|
value={currentRefinement}
|
||||||
displayEmpty
|
onChange={handleChange}
|
||||||
multiple
|
displayEmpty
|
||||||
style={{ borderRadius: 8, height: 45, fontFamily: "Inter", flex: 1 }}
|
multiple
|
||||||
renderValue={(selected) => selected.length ? selected.join(', ') : 'All Categories'}
|
style={{ borderRadius: 8, height: 45, fontFamily: "Inter", flex: 1 }}
|
||||||
>
|
renderValue={(selected) => selected.length ? selected.join(', ') : 'All Categories'}
|
||||||
<MenuItem disabled value="" style={{ fontFamily: "Inter" }}>
|
>
|
||||||
All Categories
|
<MenuItem disabled value="" style={{ fontFamily: "Inter" }}>
|
||||||
</MenuItem>
|
All Categories
|
||||||
{items.map(item => (
|
|
||||||
<MenuItem key={item.label} value={item.label} style={{ fontFamily: "Inter" }}>
|
|
||||||
<Checkbox checked={currentRefinement.includes(item.label)} />
|
|
||||||
{item.label} ({item.count})
|
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
))}
|
{items.map(item => (
|
||||||
</Select>
|
<MenuItem key={item.label} value={item.label} style={{ fontFamily: "Inter", fontSize: 16 }}>
|
||||||
|
<Checkbox checked={currentRefinement.includes(item.label)} />
|
||||||
|
{item.label} ({item.count})
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
{currentRefinement.length > 0 && (
|
||||||
|
<ClearIcon
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 35,
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
color: 'white',
|
||||||
|
fontSize: 20,
|
||||||
|
zIndex: 1000
|
||||||
|
}}
|
||||||
|
onClick={() => refine([])}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
const CustomCategoryDropdown = connectRefinementList(CategoryDropdown);
|
const CustomCategoryDropdown = connectRefinementList(CategoryDropdown);
|
||||||
@@ -658,26 +670,46 @@ const LabelDropdown = ({ items, currentRefinement, refine }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Select
|
<div style={{ position: 'relative', width: '100%' }}>
|
||||||
fullWidth
|
<Select
|
||||||
variant="outlined"
|
fullWidth
|
||||||
value={currentRefinement}
|
variant="outlined"
|
||||||
onChange={handleChange}
|
value={currentRefinement}
|
||||||
displayEmpty
|
onChange={handleChange}
|
||||||
multiple
|
displayEmpty
|
||||||
style={{ borderRadius: 8, height: 45, fontFamily: "Inter", flex: 1 }}
|
multiple
|
||||||
renderValue={(selected) => selected.length ? selected.join(', ') : 'All Labels'}
|
style={{ borderRadius: 8, height: 45, fontFamily: "Inter", flex: 1 }}
|
||||||
>
|
renderValue={(selected) => selected.length ? selected.join(', ') : 'All Labels'}
|
||||||
<MenuItem disabled value="">
|
>
|
||||||
All Labels
|
<MenuItem disabled value="">
|
||||||
</MenuItem>
|
All Labels
|
||||||
{items.map(item => (
|
|
||||||
<MenuItem key={item.label} value={item.label}>
|
|
||||||
<Checkbox checked={currentRefinement.includes(item.label)} />
|
|
||||||
{item.label} ({item.count})
|
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
))}
|
{items.map(item => (
|
||||||
</Select>
|
<MenuItem key={item.label} value={item.label} style={{
|
||||||
|
fontFamily: "Inter",
|
||||||
|
fontSize: 16
|
||||||
|
}}>
|
||||||
|
<Checkbox checked={currentRefinement.includes(item.label)} />
|
||||||
|
{item.label} ({item.count})
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
{currentRefinement.length > 0 && (
|
||||||
|
<ClearIcon
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 35,
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
color: 'white',
|
||||||
|
fontSize: 20,
|
||||||
|
zIndex: 1000
|
||||||
|
}}
|
||||||
|
onClick={() => refine([])}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
const CustomLabelDropdown = connectRefinementList(LabelDropdown);
|
const CustomLabelDropdown = connectRefinementList(LabelDropdown);
|
||||||
@@ -936,6 +968,7 @@ const Apps2 = (props) => {
|
|||||||
|
|
||||||
const handleTabChange = (newTab) => {
|
const handleTabChange = (newTab) => {
|
||||||
setCurrTab(newTab);
|
setCurrTab(newTab);
|
||||||
|
|
||||||
// Apply filters immediately when changing tabs
|
// Apply filters immediately when changing tabs
|
||||||
if (newTab === 0) {
|
if (newTab === 0) {
|
||||||
const filteredOrgApps = filterApps(orgApps, searchQuery, selectedCategory, selectedLabel);
|
const filteredOrgApps = filterApps(orgApps, searchQuery, selectedCategory, selectedLabel);
|
||||||
@@ -944,15 +977,20 @@ const Apps2 = (props) => {
|
|||||||
const filteredUserApps = filterApps(userApps, searchQuery, selectedCategory, selectedLabel);
|
const filteredUserApps = filterApps(userApps, searchQuery, selectedCategory, selectedLabel);
|
||||||
setAppsToShow(filteredUserApps);
|
setAppsToShow(filteredUserApps);
|
||||||
}
|
}
|
||||||
|
// Note: We don't clear the search when switching to tab 2 (Discover Apps) anymore
|
||||||
|
|
||||||
// Update URL query params
|
// Update URL query params
|
||||||
const newQueryParam = newTab === 0 ? 'org_apps' : newTab === 1 ? 'my_apps' : 'all_apps';
|
const newQueryParam = newTab === 0 ? 'org_apps' : newTab === 1 ? 'my_apps' : 'all_apps';
|
||||||
const queryParams = new URLSearchParams(location.search);
|
const queryParams = new URLSearchParams(location.search);
|
||||||
queryParams.set('tab', newQueryParam);
|
queryParams.set('tab', newQueryParam);
|
||||||
// Only remove 'q' param if search is empty
|
|
||||||
if (!searchQuery) {
|
// Maintain search query in URL regardless of tab
|
||||||
|
if (searchQuery) {
|
||||||
|
queryParams.set('q', searchQuery);
|
||||||
|
} else {
|
||||||
queryParams.delete('q');
|
queryParams.delete('q');
|
||||||
}
|
}
|
||||||
|
|
||||||
window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`);
|
window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -1110,7 +1148,7 @@ const Apps2 = (props) => {
|
|||||||
All Categories
|
All Categories
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
{categories?.map((category) => (
|
{categories?.map((category) => (
|
||||||
<MenuItem key={category.category} value={category.category} style={{ fontFamily: "Inter" }}>
|
<MenuItem key={category.category} value={category.category} style={{ fontFamily: "Inter", fontSize: 16 }}>
|
||||||
<Checkbox checked={selectedCategory.includes(category.category)} />
|
<Checkbox checked={selectedCategory.includes(category.category)} />
|
||||||
{category.category}
|
{category.category}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
@@ -1153,7 +1191,7 @@ const Apps2 = (props) => {
|
|||||||
All Labels
|
All Labels
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
{labels?.map((tag) => (
|
{labels?.map((tag) => (
|
||||||
<MenuItem key={tag.tag} value={tag.tag} style={{ fontFamily: "Inter" }}>
|
<MenuItem key={tag.tag} value={tag.tag} style={{ fontFamily: "Inter", fontSize: 16 }}>
|
||||||
<Checkbox checked={selectedLabel.includes(tag.tag)} />
|
<Checkbox checked={selectedLabel.includes(tag.tag)} />
|
||||||
{tag.tag}
|
{tag.tag}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
|
|||||||
Reference in New Issue
Block a user