Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-08 01:16:59 +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

141
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 // Hide scrollbar for Firefox
scrollbarWidth: "none", scrollbarWidth: 'none',
// Hide scrollbar for IE and older Edge // Hide scrollbar for IE and older Edge
"-msOverflowStyle": "none", '-msOverflowStyle': 'none',
}); });
const StyledVirtuosoContainer = styled('div')({ const StyledVirtuosoContainer = styled('div')({
position: 'relative', position: 'relative',
width: '100%', width: '100%',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
// 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 // Hide scrollbar for Firefox
scrollbarWidth: "none", scrollbarWidth: 'none',
// Hide scrollbar for IE and older Edge // Hide scrollbar for IE and older Edge
"-msOverflowStyle": "none", '-msOverflowStyle': 'none',
}); });
export const AppsCategory = ({ availableQapps, myName, category, isShow }) => { export const AppsCategory = ({ availableQapps, myName, category, isShow }) => {
const [searchValue, setSearchValue] = useState(""); 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} />
@ -172,9 +182,11 @@ export const AppsCategory = ({ availableQapps, myName, category, isShow }) =>
<Spacer height="25px" /> <Spacer height="25px" />
</AppsWidthLimiter> </AppsWidthLimiter>
<AppsWidthLimiter> <AppsWidthLimiter>
<StyledVirtuosoContainer sx={{ <StyledVirtuosoContainer
height: rootHeight sx={{
}}> height: rootHeight,
}}
>
<Virtuoso <Virtuoso
ref={virtuosoRef} ref={virtuosoRef}
data={searchedList} data={searchedList}
@ -182,12 +194,11 @@ export const AppsCategory = ({ availableQapps, myName, category, isShow }) =>
atBottomThreshold={50} atBottomThreshold={50}
followOutput="smooth" followOutput="smooth"
components={{ components={{
Scroller: ScrollerStyled // Use the styled scroller component Scroller: ScrollerStyled, // Use the styled scroller component
}} }}
/> />
</StyledVirtuosoContainer> </StyledVirtuosoContainer>
</AppsWidthLimiter> </AppsWidthLimiter>
</AppsLibraryContainer> </AppsLibraryContainer>
); );
}; };