Upload files to "src/pages/Home"
This commit is contained in:
352
src/pages/Home/Home.tsx
Normal file
352
src/pages/Home/Home.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
import { Box, Grid, Input, useTheme } from "@mui/material";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
AutocompleteQappNames,
|
||||
getPublishedQappNames,
|
||||
QappNamesRef,
|
||||
} from "../../components/common/AutocompleteQappNames.tsx";
|
||||
import {
|
||||
CategoryList,
|
||||
CategoryListRef,
|
||||
getCategoriesFetchString,
|
||||
} from "../../components/common/CategoryList/CategoryList.tsx";
|
||||
import {
|
||||
CategorySelect,
|
||||
CategorySelectRef,
|
||||
} from "../../components/common/CategoryList/CategorySelect.tsx";
|
||||
import LazyLoad from "../../components/common/LazyLoad";
|
||||
import { StatsData } from "../../components/StatsData.tsx";
|
||||
import {
|
||||
allCategories,
|
||||
allCategoryData,
|
||||
} from "../../constants/Categories/Categories.ts";
|
||||
import { useFetchIssues } from "../../hooks/useFetchIssues.tsx";
|
||||
import {
|
||||
changefilterName,
|
||||
changefilterSearch,
|
||||
changeFilterType,
|
||||
setQappNames,
|
||||
} from "../../state/features/fileSlice.ts";
|
||||
import { RootState } from "../../state/store";
|
||||
import { SubtitleContainer, ThemeButton } from "./Home-styles";
|
||||
import { FiltersCol, FiltersContainer } from "./IssueList-styles.tsx";
|
||||
import { IssueList } from "./IssueList.tsx";
|
||||
|
||||
interface HomeProps {
|
||||
mode?: string;
|
||||
}
|
||||
export const Home = ({ mode }: HomeProps) => {
|
||||
const theme = useTheme();
|
||||
const isFiltering = useSelector((state: RootState) => state.file.isFiltering);
|
||||
const filterValue = useSelector((state: RootState) => state.file.filterValue);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
const filterType = useSelector((state: RootState) => state.file.filterType);
|
||||
|
||||
const setFilterType = payload => {
|
||||
dispatch(changeFilterType(payload));
|
||||
};
|
||||
const filterSearch = useSelector(
|
||||
(state: RootState) => state.file.filterSearch
|
||||
);
|
||||
const QappNames = useSelector(
|
||||
(state: RootState) => state.file.publishedQappNames
|
||||
);
|
||||
const autocompleteRef = useRef<QappNamesRef>(null);
|
||||
|
||||
const setFilterSearch = payload => {
|
||||
dispatch(changefilterSearch(payload));
|
||||
};
|
||||
const filterName = useSelector((state: RootState) => state.file.filterName);
|
||||
|
||||
const setFilterName = payload => {
|
||||
dispatch(changefilterName(payload));
|
||||
};
|
||||
|
||||
const isFilterMode = useRef(false);
|
||||
const firstFetch = useRef(false);
|
||||
const afterFetch = useRef(false);
|
||||
const isFetching = useRef(false);
|
||||
const prevVal = useRef("");
|
||||
const categoryListRef = useRef<CategoryListRef>(null);
|
||||
const categorySelectRef = useRef<CategorySelectRef>(null);
|
||||
|
||||
const [showCategoryList, setShowCategoryList] = useState<boolean>(true);
|
||||
const [showCategorySelect, setShowCategorySelect] = useState<boolean>(true);
|
||||
const { files: globalVideos } = useSelector((state: RootState) => state.file);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const filteredFiles = useSelector(
|
||||
(state: RootState) => state.file.filteredFiles
|
||||
);
|
||||
|
||||
const [QappNamesParam, setQappNamesParam] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getPublishedQappNames().then(QappNamesResult => {
|
||||
dispatch(setQappNames(QappNamesResult));
|
||||
setQappNamesParam(QappNamesResult);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const {
|
||||
getIssues,
|
||||
checkAndUpdateIssue,
|
||||
getIssue,
|
||||
hashMapFiles,
|
||||
getNewIssues,
|
||||
checkNewIssues,
|
||||
getIssuesFiltered,
|
||||
getIssuesCount,
|
||||
} = useFetchIssues();
|
||||
|
||||
const getIssuesHandler = React.useCallback(
|
||||
async (reset?: boolean, resetFilters?: boolean) => {
|
||||
if (!firstFetch.current || !afterFetch.current) return;
|
||||
if (isFetching.current) return;
|
||||
isFetching.current = true;
|
||||
const selectedCategories =
|
||||
categoryListRef.current?.getSelectedCategories() || [];
|
||||
const issueType = categorySelectRef?.current?.getSelectedCategory();
|
||||
let categoriesString = getCategoriesFetchString(selectedCategories);
|
||||
if (issueType) categoriesString = ":" + issueType + ";";
|
||||
await getIssues(
|
||||
{
|
||||
name: filterName,
|
||||
categories: categoriesString,
|
||||
QappName: autocompleteRef?.current?.getQappNameFetchString(),
|
||||
keywords: filterSearch,
|
||||
type: filterType,
|
||||
},
|
||||
reset,
|
||||
resetFilters
|
||||
);
|
||||
isFetching.current = false;
|
||||
},
|
||||
[
|
||||
getIssues,
|
||||
filterValue,
|
||||
getIssuesFiltered,
|
||||
isFiltering,
|
||||
filterName,
|
||||
filterSearch,
|
||||
filterType,
|
||||
]
|
||||
);
|
||||
|
||||
const searchOnEnter = e => {
|
||||
if (e.keyCode == 13) {
|
||||
getIssuesHandler(true);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isFiltering && filterValue !== prevVal?.current) {
|
||||
prevVal.current = filterValue;
|
||||
getIssuesHandler();
|
||||
}
|
||||
}, [filterValue, isFiltering, filteredFiles, getIssuesCount]);
|
||||
|
||||
const getFilesHandlerMount = React.useCallback(async () => {
|
||||
if (firstFetch.current) return;
|
||||
firstFetch.current = true;
|
||||
setIsLoading(true);
|
||||
|
||||
await getIssues();
|
||||
afterFetch.current = true;
|
||||
isFetching.current = false;
|
||||
|
||||
setIsLoading(false);
|
||||
}, [getIssues]);
|
||||
|
||||
let issues = globalVideos;
|
||||
|
||||
if (isFiltering) {
|
||||
issues = filteredFiles;
|
||||
isFilterMode.current = true;
|
||||
} else {
|
||||
isFilterMode.current = false;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
!firstFetch.current &&
|
||||
!isFilterMode.current &&
|
||||
globalVideos.length === 0
|
||||
) {
|
||||
isFetching.current = true;
|
||||
getFilesHandlerMount();
|
||||
} else {
|
||||
firstFetch.current = true;
|
||||
afterFetch.current = true;
|
||||
}
|
||||
}, [getFilesHandlerMount, globalVideos]);
|
||||
|
||||
const filtersToDefault = async () => {
|
||||
setFilterType("videos");
|
||||
setFilterSearch("");
|
||||
setFilterName("");
|
||||
categoryListRef.current?.clearCategories();
|
||||
categorySelectRef.current?.clearCategory();
|
||||
autocompleteRef.current?.setSelectedValue(null);
|
||||
ReactDOM.flushSync(() => {
|
||||
getIssuesHandler(true, true);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid container sx={{ width: "100%" }}>
|
||||
<FiltersCol item xs={12} md={2} sm={3}>
|
||||
<FiltersContainer>
|
||||
<StatsData />
|
||||
<Input
|
||||
id="standard-adornment-name"
|
||||
onChange={e => {
|
||||
setFilterSearch(e.target.value);
|
||||
}}
|
||||
onKeyDown={searchOnEnter}
|
||||
value={filterSearch}
|
||||
placeholder="Search"
|
||||
sx={{
|
||||
color: theme.palette.text.primary,
|
||||
borderBottom: `1px solid ${theme.palette.text.primary}`,
|
||||
"&&:before": {
|
||||
borderBottom: "none",
|
||||
},
|
||||
"&&:after": {
|
||||
borderBottom: "none",
|
||||
},
|
||||
"&&:hover:before": {
|
||||
borderBottom: "none",
|
||||
},
|
||||
"&&.Mui-focused:before": {
|
||||
borderBottom: "none",
|
||||
},
|
||||
"&&.Mui-focused": {
|
||||
outline: "none",
|
||||
},
|
||||
fontSize: "20px",
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
id="standard-adornment-name"
|
||||
onChange={e => {
|
||||
setFilterName(e.target.value);
|
||||
}}
|
||||
onKeyDown={searchOnEnter}
|
||||
value={filterName}
|
||||
placeholder="User's Name (Exact)"
|
||||
sx={{
|
||||
marginTop: "20px",
|
||||
borderBottom: `1px solid ${theme.palette.text.primary}`,
|
||||
"&&:before": {
|
||||
borderBottom: "none",
|
||||
},
|
||||
"&&:after": {
|
||||
borderBottom: "none",
|
||||
},
|
||||
"&&:hover:before": {
|
||||
borderBottom: "none",
|
||||
},
|
||||
"&&.Mui-focused:before": {
|
||||
borderBottom: "none",
|
||||
},
|
||||
"&&.Mui-focused": {
|
||||
outline: "none",
|
||||
},
|
||||
fontSize: "20px",
|
||||
}}
|
||||
/>
|
||||
{showCategoryList && (
|
||||
<CategoryList
|
||||
categoryData={allCategoryData}
|
||||
ref={categoryListRef}
|
||||
afterChange={value => {
|
||||
setShowCategorySelect(!value[0]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{showCategorySelect && (
|
||||
<CategorySelect
|
||||
categoryData={allCategories}
|
||||
ref={categorySelectRef}
|
||||
sx={{ marginTop: "20px" }}
|
||||
afterChange={value => {
|
||||
setShowCategoryList(!value);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{QappNamesParam.length > 0 && (
|
||||
<AutocompleteQappNames
|
||||
ref={autocompleteRef}
|
||||
namesList={QappNamesParam}
|
||||
sx={{ marginTop: "20px" }}
|
||||
required={false}
|
||||
afterChange={() => {
|
||||
const currentSelectedCategories =
|
||||
categoryListRef?.current?.getSelectedCategories();
|
||||
categoryListRef?.current?.setSelectedCategories([
|
||||
"3",
|
||||
currentSelectedCategories[1],
|
||||
currentSelectedCategories[2],
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ThemeButton
|
||||
onClick={() => {
|
||||
filtersToDefault();
|
||||
}}
|
||||
sx={{
|
||||
marginTop: "20px",
|
||||
fontWeight: 1000,
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
reset
|
||||
</ThemeButton>
|
||||
<ThemeButton
|
||||
onClick={() => {
|
||||
getIssuesHandler(true);
|
||||
}}
|
||||
sx={{
|
||||
marginTop: "20px",
|
||||
fontWeight: 1000,
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
Search
|
||||
</ThemeButton>
|
||||
</FiltersContainer>
|
||||
</FiltersCol>
|
||||
<Grid item xs={12} md={10} sm={9}>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
marginTop: "20px",
|
||||
}}
|
||||
>
|
||||
<SubtitleContainer
|
||||
sx={{
|
||||
justifyContent: "flex-start",
|
||||
paddingLeft: "15px",
|
||||
width: "100%",
|
||||
maxWidth: "1400px",
|
||||
}}
|
||||
></SubtitleContainer>
|
||||
<IssueList issues={issues} />
|
||||
<LazyLoad
|
||||
onLoadMore={getIssuesHandler}
|
||||
isLoading={isLoading}
|
||||
></LazyLoad>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
244
src/pages/Home/IssueList.tsx
Normal file
244
src/pages/Home/IssueList.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import BlockIcon from "@mui/icons-material/Block";
|
||||
import EditIcon from "@mui/icons-material/Edit";
|
||||
import { Avatar, Box, Skeleton, useTheme } from "@mui/material";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import QORTicon from "../../assets/icons/CoinIcons/qort.png";
|
||||
import { BountyDisplay } from "../../components/common/BountyDisplay.tsx";
|
||||
import { IssueIcon, IssueIcons } from "../../components/common/IssueIcon.tsx";
|
||||
import {
|
||||
getIconsFromObject,
|
||||
getnamesFromObject,
|
||||
} from "../../constants/Categories/CategoryFunctions.ts";
|
||||
import { fontSizeExLarge } from "../../constants/Misc.ts";
|
||||
import {
|
||||
blockUser,
|
||||
Issue,
|
||||
setEditFile,
|
||||
} from "../../state/features/fileSlice.ts";
|
||||
import { RootState } from "../../state/store.ts";
|
||||
import { BountyData } from "../../utils/qortalRequests.ts";
|
||||
import { formatDate } from "../../utils/time.ts";
|
||||
import {
|
||||
BlockIconContainer,
|
||||
IconsBox,
|
||||
IssueCard,
|
||||
IssueContainer,
|
||||
NameAndDateContainer,
|
||||
VideoCardName,
|
||||
VideoCardTitle,
|
||||
VideoUploadDate,
|
||||
} from "./IssueList-styles.tsx";
|
||||
|
||||
interface FileListProps {
|
||||
issues: Issue[];
|
||||
}
|
||||
export const IssueList = ({ issues }: FileListProps) => {
|
||||
const hashMapIssues = useSelector(
|
||||
(state: RootState) => state.file.hashMapFiles
|
||||
);
|
||||
const theme = useTheme();
|
||||
const [showIcons, setShowIcons] = useState(null);
|
||||
const username = useSelector((state: RootState) => state.auth?.user?.name);
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const blockUserFunc = async (user: string) => {
|
||||
if (user === "Q-Support") return;
|
||||
|
||||
try {
|
||||
const response = await qortalRequest({
|
||||
action: "ADD_LIST_ITEMS",
|
||||
list_name: "blockedNames",
|
||||
items: [user],
|
||||
});
|
||||
|
||||
if (response === true) {
|
||||
dispatch(blockUser(user));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredIssues = useMemo(() => {
|
||||
return issues.filter((issue: any) => hashMapIssues[issue.id]?.isValid);
|
||||
}, [issues, hashMapIssues]);
|
||||
|
||||
return (
|
||||
<IssueContainer>
|
||||
{filteredIssues.map((issue: any, index: number) => {
|
||||
const existingFile = hashMapIssues[issue?.id];
|
||||
let hasHash = false;
|
||||
let issueObj = issue;
|
||||
if (existingFile) {
|
||||
issueObj = existingFile;
|
||||
hasHash = true;
|
||||
}
|
||||
const bountyData: BountyData = {
|
||||
...issueObj.bountyData,
|
||||
...issue.bountyData,
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
height: "75px",
|
||||
position: "relative",
|
||||
}}
|
||||
key={issueObj.id}
|
||||
onMouseEnter={() => setShowIcons(issueObj.id)}
|
||||
onMouseLeave={() => setShowIcons(null)}
|
||||
>
|
||||
{hasHash ? (
|
||||
<>
|
||||
<IconsBox
|
||||
sx={{
|
||||
opacity: showIcons === issueObj.id ? 1 : 0,
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
{issueObj?.user === username && (
|
||||
<BlockIconContainer
|
||||
onClick={() => {
|
||||
dispatch(setEditFile(issueObj));
|
||||
}}
|
||||
>
|
||||
<EditIcon />
|
||||
Edit Issue
|
||||
</BlockIconContainer>
|
||||
)}
|
||||
|
||||
{issueObj?.user !== username && (
|
||||
<BlockIconContainer
|
||||
onClick={() => {
|
||||
blockUserFunc(issueObj?.user);
|
||||
}}
|
||||
>
|
||||
<BlockIcon />
|
||||
Block User
|
||||
</BlockIconContainer>
|
||||
)}
|
||||
</IconsBox>
|
||||
<IssueCard
|
||||
onClick={() => {
|
||||
navigate(`/issue/${issueObj?.user}/${issueObj?.id}`);
|
||||
}}
|
||||
sx={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
width: "280px",
|
||||
}}
|
||||
>
|
||||
<IssueIcons
|
||||
issueData={issueObj}
|
||||
style={{ marginRight: "20px" }}
|
||||
showBackupIcon={true}
|
||||
/>
|
||||
</div>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "left",
|
||||
alignItems: "center",
|
||||
width: "250px",
|
||||
fontSize: fontSizeExLarge,
|
||||
fontFamily: "Cairo",
|
||||
letterSpacing: "0.4px",
|
||||
color: theme.palette.text.primary,
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<BountyDisplay
|
||||
bountyData={bountyData}
|
||||
divStyle={{ marginLeft: "20px" }}
|
||||
/>
|
||||
</Box>
|
||||
<VideoCardTitle sx={{ fontWeight: "bold", width: "400px" }}>
|
||||
{issueObj.title}
|
||||
</VideoCardTitle>
|
||||
</Box>
|
||||
|
||||
{issue?.feeData?.isPaid && (
|
||||
<IssueIcon
|
||||
iconSrc={QORTicon}
|
||||
style={{ marginRight: "20px" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<NameAndDateContainer
|
||||
sx={{ width: "200px", height: "100%" }}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
navigate(`/channel/${issueObj?.user}`);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "200px",
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
sx={{ height: 24, width: 24, marginRight: "10px" }}
|
||||
src={`/arbitrary/THUMBNAIL/${issueObj?.user}/qortal_avatar`}
|
||||
alt={`${issueObj?.user}'s avatar`}
|
||||
/>
|
||||
<VideoCardName
|
||||
sx={{
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{issueObj?.user}
|
||||
</VideoCardName>
|
||||
</div>
|
||||
|
||||
{issueObj?.created && (
|
||||
<VideoUploadDate>
|
||||
{formatDate(issueObj.created)}
|
||||
</VideoUploadDate>
|
||||
)}
|
||||
</NameAndDateContainer>
|
||||
</IssueCard>
|
||||
</>
|
||||
) : (
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
paddingBottom: "10px",
|
||||
objectFit: "contain",
|
||||
visibility: "visible",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</IssueContainer>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user