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 }}>
|
||||
About Gmail
|
||||
About {app?.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
|
||||
</Typography>
|
||||
<IconButton
|
||||
onClick={onClose}
|
||||
|
||||
@@ -299,24 +299,16 @@ const Hits = ({
|
||||
<Typography variant="body1">No Apps Found</Typography>
|
||||
</div>
|
||||
) : (
|
||||
<Grid item spacing={2} justifyContent="flex-start">
|
||||
<div
|
||||
style={{
|
||||
minHeight: 570,
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
rowGap: 16,
|
||||
columnGap: 16,
|
||||
marginTop: 16,
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "flex-start",
|
||||
maxHeight: 570,
|
||||
scrollbarWidth: "thin",
|
||||
scrollbarColor: "#494949 #2f2f2f",
|
||||
width: "100%",
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fill, minmax(365px, 1fr))",
|
||||
gap: "20px",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "start",
|
||||
padding: "0 10px"
|
||||
}}
|
||||
>
|
||||
{hits?.map((data, index) => {
|
||||
@@ -332,29 +324,21 @@ const Hits = ({
|
||||
style={{
|
||||
transitionDelay: `${workflowDelay}ms`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={
|
||||
() => {
|
||||
handleAppClick(data);
|
||||
}
|
||||
}
|
||||
style={{
|
||||
color: "#f85a3e",
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
elevation={0}
|
||||
style={{
|
||||
backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A",
|
||||
backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#212121",
|
||||
color: "rgba(241, 241, 241, 1)",
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
width: leftSideBarOpenByClick ? 325 : 365,
|
||||
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);
|
||||
@@ -368,10 +352,14 @@ const Hits = ({
|
||||
fontSize: 16,
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
fontFamily: "Inter",
|
||||
width: '100%',
|
||||
backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121"
|
||||
}}>
|
||||
}}
|
||||
onClick={() => {
|
||||
handleAppClick(data);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
alt={data.name}
|
||||
src={data.image_url ? data.image_url : "/images/no_image.png"}
|
||||
@@ -390,10 +378,11 @@ const Hits = ({
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
width: 339,
|
||||
gap: 8,
|
||||
gap: 6,
|
||||
fontWeight: '400',
|
||||
overflow: "hidden",
|
||||
margin: "12px 0",
|
||||
fontFamily: "Inter"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -402,6 +391,7 @@ const Hits = ({
|
||||
flexDirection: "row",
|
||||
overflow: "hidden",
|
||||
gap: 8,
|
||||
fontWeight:600,
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
color: '#F1F1F1'
|
||||
@@ -517,18 +507,16 @@ const Hits = ({
|
||||
</div>
|
||||
</ButtonBase>
|
||||
</Paper>
|
||||
</div>
|
||||
</Zoom>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div><Box sx={{ position: 'absolute', top: '30%', left: '50%', }}> <CircularProgress /></Box></div>
|
||||
)}
|
||||
)
|
||||
}
|
||||
</div >
|
||||
);
|
||||
}
|
||||
@@ -540,6 +528,14 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
|
||||
const inputRef = useRef(null);
|
||||
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
|
||||
const debouncedRefine = useRef(
|
||||
debounce((value) => {
|
||||
@@ -600,7 +596,6 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
|
||||
<ClearIcon
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
marginRight: 10
|
||||
}}
|
||||
onClick={() => {
|
||||
setLocalQuery('');
|
||||
@@ -626,6 +621,7 @@ const CategoryDropdown = ({ items, currentRefinement, refine }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
<Select
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
@@ -640,12 +636,28 @@ const CategoryDropdown = ({ items, currentRefinement, refine }) => {
|
||||
All Categories
|
||||
</MenuItem>
|
||||
{items.map(item => (
|
||||
<MenuItem key={item.label} value={item.label} style={{ fontFamily: "Inter" }}>
|
||||
<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);
|
||||
@@ -658,6 +670,7 @@ const LabelDropdown = ({ items, currentRefinement, refine }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
<Select
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
@@ -672,12 +685,31 @@ const LabelDropdown = ({ items, currentRefinement, refine }) => {
|
||||
All Labels
|
||||
</MenuItem>
|
||||
{items.map(item => (
|
||||
<MenuItem key={item.label} value={item.label}>
|
||||
<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);
|
||||
@@ -936,6 +968,7 @@ const Apps2 = (props) => {
|
||||
|
||||
const handleTabChange = (newTab) => {
|
||||
setCurrTab(newTab);
|
||||
|
||||
// Apply filters immediately when changing tabs
|
||||
if (newTab === 0) {
|
||||
const filteredOrgApps = filterApps(orgApps, searchQuery, selectedCategory, selectedLabel);
|
||||
@@ -944,15 +977,20 @@ const Apps2 = (props) => {
|
||||
const filteredUserApps = filterApps(userApps, searchQuery, selectedCategory, selectedLabel);
|
||||
setAppsToShow(filteredUserApps);
|
||||
}
|
||||
// Note: We don't clear the search when switching to tab 2 (Discover Apps) anymore
|
||||
|
||||
// Update URL query params
|
||||
const newQueryParam = newTab === 0 ? 'org_apps' : newTab === 1 ? 'my_apps' : 'all_apps';
|
||||
const queryParams = new URLSearchParams(location.search);
|
||||
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');
|
||||
}
|
||||
|
||||
window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`);
|
||||
};
|
||||
|
||||
@@ -1110,7 +1148,7 @@ const Apps2 = (props) => {
|
||||
All Categories
|
||||
</MenuItem>
|
||||
{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)} />
|
||||
{category.category}
|
||||
</MenuItem>
|
||||
@@ -1153,7 +1191,7 @@ const Apps2 = (props) => {
|
||||
All Labels
|
||||
</MenuItem>
|
||||
{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)} />
|
||||
{tag.tag}
|
||||
</MenuItem>
|
||||
|
||||
Reference in New Issue
Block a user