Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-07 17:06:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format code

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-20 13:42:50 +02:00
parent 5153676ab3
commit 01ea8ac585
1 changed files with 115 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
src/components/Apps/AppsCategory.tsx
View File

@ -1,4 +1,11 @@
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; import React, {
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react';
import { import {
AppCircle, AppCircle,
AppCircleContainer, AppCircleContainer,
@ -16,84 +23,81 @@ import {
PublishQAppCTAParent, PublishQAppCTAParent,
PublishQAppCTARight, PublishQAppCTARight,
PublishQAppDotsBG, PublishQAppDotsBG,
} from "./Apps-styles"; } from './Apps-styles';
import { Avatar, Box, ButtonBase, InputBase, styled } from "@mui/material"; import { Avatar, Box, ButtonBase, InputBase, styled } from '@mui/material';
import { Add } from "@mui/icons-material"; import { Add } from '@mui/icons-material';
import { MyContext, getBaseApiReact } from "../../App"; import { MyContext, getBaseApiReact } from '../../App';
import LogoSelected from "../../assets/svgs/LogoSelected.svg"; import LogoSelected from '../../assets/svgs/LogoSelected.svg';
import IconSearch from "../../assets/svgs/Search.svg"; import IconSearch from '../../assets/svgs/Search.svg';
import IconClearInput from "../../assets/svgs/ClearInput.svg"; import IconClearInput from '../../assets/svgs/ClearInput.svg';
import qappDevelopText from "../../assets/svgs/qappDevelopText.svg"; import qappDevelopText from '../../assets/svgs/qappDevelopText.svg';
import qappDots from "../../assets/svgs/qappDots.svg"; import qappDots from '../../assets/svgs/qappDots.svg';
import { Spacer } from "../../common/Spacer"; import { Spacer } from '../../common/Spacer';
import { AppInfoSnippet } from "./AppInfoSnippet"; import { AppInfoSnippet } from './AppInfoSnippet';
import { Virtuoso } from "react-virtuoso"; import { Virtuoso } from 'react-virtuoso';
import { executeEvent } from "../../utils/events"; import { executeEvent } from '../../utils/events';
const officialAppList = [ const officialAppList = [
"q-tube", 'q-tube',
"q-blog", 'q-blog',
"q-share", 'q-share',
"q-support", 'q-support',
"q-mail", 'q-mail',
"q-fund", 'q-fund',
"q-shop", 'q-shop',
"q-trade", 'q-trade',
"q-support", 'q-support',
"q-manager", 'q-manager',
"q-wallets", 'q-wallets',
"q-search", 'q-search',
"q-nodecontrol" 'q-nodecontrol',
]; ];
const ScrollerStyled = styled('div')({ const ScrollerStyled = styled('div')({
// Hide scrollbar for WebKit browsers (Chrome, Safari) // Hide scrollbar for WebKit browsers (Chrome, Safari)
"::-webkit-scrollbar": { '::-webkit-scrollbar': {
width: "0px", width: '0px',
height: "0px", height: '0px',
}, },
// Hide scrollbar for Firefox
scrollbarWidth: "none",
// Hide scrollbar for IE and older Edge
"-msOverflowStyle": "none",
});
const StyledVirtuosoContainer = styled('div')({
position: 'relative',
width: '100%',
display: 'flex',
flexDirection: 'column',
// Hide scrollbar for WebKit browsers (Chrome, Safari)
"::-webkit-scrollbar": {
width: "0px",
height: "0px",
},
// Hide scrollbar for Firefox
scrollbarWidth: "none",
// Hide scrollbar for IE and older Edge
"-msOverflowStyle": "none",
});
export const AppsCategory = ({ availableQapps, myName, category, isShow }) => { // Hide scrollbar for Firefox
const [searchValue, setSearchValue] = useState(""); scrollbarWidth: 'none',
// Hide scrollbar for IE and older Edge
'-msOverflowStyle': 'none',
});
const StyledVirtuosoContainer = styled('div')({
position: 'relative',
width: '100%',
display: 'flex',
flexDirection: 'column',
// Hide scrollbar for WebKit browsers (Chrome, Safari)
'::-webkit-scrollbar': {
width: '0px',
height: '0px',
},
// Hide scrollbar for Firefox
scrollbarWidth: 'none',
// Hide scrollbar for IE and older Edge
'-msOverflowStyle': 'none',
});
export const AppsCategory = ({ availableQapps, myName, category, isShow }) => {
const [searchValue, setSearchValue] = useState('');
const virtuosoRef = useRef(); const virtuosoRef = useRef();
const { rootHeight } = useContext(MyContext); const { rootHeight } = useContext(MyContext);
const categoryList = useMemo(() => { const categoryList = useMemo(() => {
return availableQapps.filter( return availableQapps.filter(
(app) => (app) => app?.metadata?.category === category?.id
app?.metadata?.category === category?.id
); );
}, [availableQapps, category]); }, [availableQapps, category]);
const [debouncedValue, setDebouncedValue] = useState(""); // Debounced value const [debouncedValue, setDebouncedValue] = useState(''); // Debounced value
// Debounce logic // Debounce logic
useEffect(() => { useEffect(() => {
@ -110,30 +114,36 @@ export const AppsCategory = ({ availableQapps, myName, category, isShow }) =>
// Example: Perform search or other actions based on debouncedValue // Example: Perform search or other actions based on debouncedValue
const searchedList = useMemo(() => { const searchedList = useMemo(() => {
if (!debouncedValue) return categoryList if (!debouncedValue) return categoryList;
return categoryList.filter((app) => return categoryList.filter((app) =>
app.name.toLowerCase().includes(debouncedValue.toLowerCase()) app.name.toLowerCase().includes(debouncedValue.toLowerCase())
); );
}, [debouncedValue, categoryList]); }, [debouncedValue, categoryList]);
const rowRenderer = (index) => { const rowRenderer = (index) => {
let app = searchedList[index]; let app = searchedList[index];
return <AppInfoSnippet key={`${app?.service}-${app?.name}`} app={app} myName={myName} isFromCategory={true} />; return (
<AppInfoSnippet
key={`${app?.service}-${app?.name}`}
app={app}
myName={myName}
isFromCategory={true}
/>
);
}; };
return ( return (
<AppsLibraryContainer sx={{ <AppsLibraryContainer
display: !isShow && 'none' sx={{
}}> display: !isShow && 'none',
<AppsWidthLimiter> }}
>
<AppsWidthLimiter>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
width: "100%", width: '100%',
justifyContent: "center", justifyContent: 'center',
}} }}
> >
<AppsSearchContainer> <AppsSearchContainer>
@ -145,8 +155,8 @@ export const AppsCategory = ({ availableQapps, myName, category, isShow }) =>
sx={{ ml: 1, flex: 1 }} sx={{ ml: 1, flex: 1 }}
placeholder="Search for apps" placeholder="Search for apps"
inputProps={{ inputProps={{
"aria-label": "Search for apps", 'aria-label': 'Search for apps',
fontSize: "16px", fontSize: '16px',
fontWeight: 400, fontWeight: 400,
}} }}
/> />
@ -155,7 +165,7 @@ export const AppsCategory = ({ availableQapps, myName, category, isShow }) =>
{searchValue && ( {searchValue && (
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setSearchValue(""); setSearchValue('');
}} }}
> >
<img src={IconClearInput} /> <img src={IconClearInput} />
@ -164,30 +174,31 @@ export const AppsCategory = ({ availableQapps, myName, category, isShow }) =>
</AppsSearchRight> </AppsSearchRight>
</AppsSearchContainer> </AppsSearchContainer>
</Box> </Box>
</AppsWidthLimiter> </AppsWidthLimiter>
<Spacer height="25px" />
<AppsWidthLimiter>
<AppLibrarySubTitle>{`Category: ${category?.name}`}</AppLibrarySubTitle>
<Spacer height="25px" /> <Spacer height="25px" />
<AppsWidthLimiter> </AppsWidthLimiter>
<AppLibrarySubTitle>{`Category: ${category?.name}`}</AppLibrarySubTitle> <AppsWidthLimiter>
<StyledVirtuosoContainer
<Spacer height="25px" /> sx={{
</AppsWidthLimiter> height: rootHeight,
<AppsWidthLimiter> }}
<StyledVirtuosoContainer sx={{ >
height: rootHeight <Virtuoso
}}> ref={virtuosoRef}
<Virtuoso data={searchedList}
ref={virtuosoRef} itemContent={rowRenderer}
data={searchedList} atBottomThreshold={50}
itemContent={rowRenderer} followOutput="smooth"
atBottomThreshold={50} components={{
followOutput="smooth" Scroller: ScrollerStyled, // Use the styled scroller component
components={{ }}
Scroller: ScrollerStyled // Use the styled scroller component />
}} </StyledVirtuosoContainer>
/> </AppsWidthLimiter>
</StyledVirtuosoContainer> </AppsLibraryContainer>
</AppsWidthLimiter>
</AppsLibraryContainer>
); );
}; };