Qortal/q-support
3
0
Fork 1
mirror of https://github.com/Qortal/q-support.git synced 2025-02-11 17:55:50 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #7 from QuickMythril/qshare-20240520

Browse Source 
Q-Support 1.0
This commit is contained in:
Qortal Dev 2024-06-14 14:20:18 -06:00 committed by GitHub
commit 6bbe68a3fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
99 changed files with 13780 additions and 12429 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
.eslintrc.js
View File

@ -1,16 +1,16 @@
module.exports = {
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': 'warn',
'@typescript-eslint/no-explicit-any': "off"
},
}
module.exports = {
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': 'warn',
'@typescript-eslint/no-explicit-any': "off"
},
}

49
.gitignore vendored
View File

@ -1,25 +1,26 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
src/assets/icons/*
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.zip

20
.prettierrc
View File

@ -1,10 +1,10 @@
{
"printWidth": 80,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
"tabWidth": 2,
"semi": true
}
{
"printWidth": 80,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
"tabWidth": 2,
"semi": true
}

4
README.md
View File

@ -1,2 +1,2 @@
# q-support
This Q-App lets users submit issues involving the Qortal Core, UI, and Q-Apps to the Qortal Dev team.
# q-support
This Q-App lets users submit issues involving the Qortal Core, UI, and Q-Apps to the Qortal Dev team.

26
index.html
View File

@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Q-Support</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Q-Support</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

15060
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

96
package.json
View File

@ -1,48 +1,48 @@
{
"name": "qsupport",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.13",
"@reduxjs/toolkit": "^1.9.3",
"compressorjs": "^1.2.1",
"dompurify": "^3.0.6",
"localforage": "^1.10.0",
"moment": "^2.29.4",
"prettier": "^3.2.4",
"quill-image-resize-module-react": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-intersection-observer": "^9.4.3",
"react-quill": "^2.0.0",
"react-redux": "^8.0.5",
"react-rnd": "^10.4.1",
"react-router-dom": "^6.9.0",
"react-toastify": "^9.1.2",
"short-unique-id": "^4.4.4",
"ts-key-enum": "^2.0.12"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"typescript": "^5.0.2",
"vite": "6.0.0-alpha.1"
}
}
{
"name": "qsupport",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.13",
"@reduxjs/toolkit": "^1.9.3",
"compressorjs": "^1.2.1",
"dompurify": "^3.0.6",
"localforage": "^1.10.0",
"moment": "^2.29.4",
"prettier": "^3.2.4",
"quill-image-resize-module-react": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-intersection-observer": "^9.4.3",
"react-quill": "^2.0.0",
"react-redux": "^8.0.5",
"react-rnd": "^10.4.1",
"react-router-dom": "^6.9.0",
"react-toastify": "^9.1.2",
"short-unique-id": "^4.4.4",
"ts-key-enum": "^2.0.12"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"typescript": "^5.0.2",
"vite": "6.0.0-alpha.1"
}
}

86
src/App.css
View File

@ -1,43 +1,43 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

8
src/App.tsx
View File

@ -1,4 +1,4 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";
@ -11,12 +11,16 @@ import { Home } from "./pages/Home/Home";
import { IssueContent } from "./pages/IssueContent/IssueContent.tsx";
import DownloadWrapper from "./wrappers/DownloadWrapper";
import { IndividualProfile } from "./pages/IndividualProfile/IndividualProfile";
import { fetchFeesRedux } from "./constants/PublishFees/FeePricePublish/FeePricePublish.ts";
function App() {
// const themeColor = window._qdnTheme
const [theme, setTheme] = useState("dark");
useEffect(() => {
fetchFeesRedux();
}, []);
return (
<Provider store={store}>
<ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>

BIN
src/assets/icons/ClosedIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/icons/CompleteIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 132 KiB

BIN
src/assets/icons/InProgressIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
src/assets/icons/OpenIcon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/img/Q-SupportIcon(AlphaX).webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
src/assets/img/Q-SupportIcon.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

50
src/assets/svgs/AccountCircleSVG.tsx
View File

@ -1,25 +1,25 @@
interface AccountCircleSVGProps {
color: string
height: string
width: string
}
export const AccountCircleSVG: React.FC<AccountCircleSVGProps> = ({
color,
height,
width
}) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 96 960 960"
width={width}
>
<path
fill={color}
d="M222 801q63-44 125-67.5T480 710q71 0 133.5 23.5T739 801q44-54 62.5-109T820 576q0-145-97.5-242.5T480 236q-145 0-242.5 97.5T140 576q0 61 19 116t63 109Zm257.814-195Q422 606 382.5 566.314q-39.5-39.686-39.5-97.5t39.686-97.314q39.686-39.5 97.5-39.5t97.314 39.686q39.5 39.686 39.5 97.5T577.314 566.5q-39.686 39.5-97.5 39.5Zm.654 370Q398 976 325 944.5q-73-31.5-127.5-86t-86-127.266Q80 658.468 80 575.734T111.5 420.5q31.5-72.5 86-127t127.266-86q72.766-31.5 155.5-31.5T635.5 207.5q72.5 31.5 127 86t86 127.032q31.5 72.532 31.5 155T848.5 731q-31.5 73-86 127.5t-127.032 86q-72.532 31.5-155 31.5ZM480 916q55 0 107.5-16T691 844q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480 916Zm0-370q34 0 55.5-21.5T557 469q0-34-21.5-55.5T480 392q-34 0-55.5 21.5T403 469q0 34 21.5 55.5T480 546Zm0-77Zm0 374Z"
/>
</svg>
)
}
interface AccountCircleSVGProps {
color: string
height: string
width: string
}
export const AccountCircleSVG: React.FC<AccountCircleSVGProps> = ({
color,
height,
width
}) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 96 960 960"
width={width}
>
<path
fill={color}
d="M222 801q63-44 125-67.5T480 710q71 0 133.5 23.5T739 801q44-54 62.5-109T820 576q0-145-97.5-242.5T480 236q-145 0-242.5 97.5T140 576q0 61 19 116t63 109Zm257.814-195Q422 606 382.5 566.314q-39.5-39.686-39.5-97.5t39.686-97.314q39.686-39.5 97.5-39.5t97.314 39.686q39.5 39.686 39.5 97.5T577.314 566.5q-39.686 39.5-97.5 39.5Zm.654 370Q398 976 325 944.5q-73-31.5-127.5-86t-86-127.266Q80 658.468 80 575.734T111.5 420.5q31.5-72.5 86-127t127.266-86q72.766-31.5 155.5-31.5T635.5 207.5q72.5 31.5 127 86t86 127.032q31.5 72.532 31.5 155T848.5 731q-31.5 73-86 127.5t-127.032 86q-72.532 31.5-155 31.5ZM480 916q55 0 107.5-16T691 844q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480 916Zm0-370q34 0 55.5-21.5T557 469q0-34-21.5-55.5T480 392q-34 0-55.5 21.5T403 469q0 34 21.5 55.5T480 546Zm0-77Zm0 374Z"
/>
</svg>
)
}

46
src/assets/svgs/CircleSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from "./IconTypes";
export const CircleSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc,
}) => {
return (
<svg
onClick={onClickFunc}
className={className}
fill={color}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 -960 960 960"
width={width}
>
<path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
</svg>
);
};
import { IconTypes } from "./IconTypes";
export const CircleSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc,
}) => {
return (
<svg
onClick={onClickFunc}
className={className}
fill={color}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 -960 960 960"
width={width}
>
<path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
</svg>
);
};

46
src/assets/svgs/DarkModeSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from './IconTypes'
export const DarkModeSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg
className={className}
onClick={onClickFunc}
fill={color}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 96 960 960"
width={width}
>
<path d="M480 936q-150 0-255-105T120 576q0-150 105-255t255-105q8 0 17 .5t23 1.5q-36 32-56 79t-20 99q0 90 63 153t153 63q52 0 99-18.5t79-51.5q1 12 1.5 19.5t.5 14.5q0 150-105 255T480 936Zm0-60q109 0 190-67.5T771 650q-25 11-53.667 16.5Q688.667 672 660 672q-114.689 0-195.345-80.655Q384 510.689 384 396q0-24 5-51.5t18-62.5q-98 27-162.5 109.5T180 576q0 125 87.5 212.5T480 876Zm-4-297Z" />
</svg>
)
}
import { IconTypes } from './IconTypes'
export const DarkModeSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg
className={className}
onClick={onClickFunc}
fill={color}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 96 960 960"
width={width}
>
<path d="M480 936q-150 0-255-105T120 576q0-150 105-255t255-105q8 0 17 .5t23 1.5q-36 32-56 79t-20 99q0 90 63 153t153 63q52 0 99-18.5t79-51.5q1 12 1.5 19.5t.5 14.5q0 150-105 255T480 936Zm0-60q109 0 190-67.5T771 650q-25 11-53.667 16.5Q688.667 672 660 672q-114.689 0-195.345-80.655Q384 510.689 384 396q0-24 5-51.5t18-62.5q-98 27-162.5 109.5T180 576q0 125 87.5 212.5T480 876Zm-4-297Z" />
</svg>
)
}

26
src/assets/svgs/DownloadedLight.tsx
View File

@ -1,13 +1,13 @@
import { IconTypes } from './IconTypes'
export const DownloadedLight: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 0 24 24" width={width} fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5 18h14v2H5v-2zm4.6-2.7L5 10.7l2-1.9 2.6 2.6L17 4l2 2-9.4 9.3z"/></svg>
)
}
import { IconTypes } from './IconTypes'
export const DownloadedLight: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 0 24 24" width={width} fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5 18h14v2H5v-2zm4.6-2.7L5 10.7l2-1.9 2.6 2.6L17 4l2 2-9.4 9.3z"/></svg>
)
}

26
src/assets/svgs/DownloadingLight.tsx
View File

@ -1,13 +1,13 @@
import { IconTypes } from './IconTypes'
export const DownloadingLight: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height={height} viewBox="0 0 24 24" width={width} fill="#FFFFFF"><g><rect fill="none" /></g><g><g><path d="M18.32,4.26C16.84,3.05,15.01,2.25,13,2.05v2.02c1.46,0.18,2.79,0.76,3.9,1.62L18.32,4.26z M19.93,11h2.02 c-0.2-2.01-1-3.84-2.21-5.32L18.31,7.1C19.17,8.21,19.75,9.54,19.93,11z M18.31,16.9l1.43,1.43c1.21-1.48,2.01-3.32,2.21-5.32 h-2.02C19.75,14.46,19.17,15.79,18.31,16.9z M13,19.93v2.02c2.01-0.2,3.84-1,5.32-2.21l-1.43-1.43 C15.79,19.17,14.46,19.75,13,19.93z M13,12V7h-2v5H7l5,5l5-5H13z M11,19.93v2.02c-5.05-0.5-9-4.76-9-9.95s3.95-9.45,9-9.95v2.02 C7.05,4.56,4,7.92,4,12S7.05,19.44,11,19.93z"/></g></g></svg>
)
}
import { IconTypes } from './IconTypes'
export const DownloadingLight: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg className={className} xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height={height} viewBox="0 0 24 24" width={width} fill="#FFFFFF"><g><rect fill="none" /></g><g><g><path d="M18.32,4.26C16.84,3.05,15.01,2.25,13,2.05v2.02c1.46,0.18,2.79,0.76,3.9,1.62L18.32,4.26z M19.93,11h2.02 c-0.2-2.01-1-3.84-2.21-5.32L18.31,7.1C19.17,8.21,19.75,9.54,19.93,11z M18.31,16.9l1.43,1.43c1.21-1.48,2.01-3.32,2.21-5.32 h-2.02C19.75,14.46,19.17,15.79,18.31,16.9z M13,19.93v2.02c2.01-0.2,3.84-1,5.32-2.21l-1.43-1.43 C15.79,19.17,14.46,19.75,13,19.93z M13,12V7h-2v5H7l5,5l5-5H13z M11,19.93v2.02c-5.05-0.5-9-4.76-9-9.95s3.95-9.45,9-9.95v2.02 C7.05,4.56,4,7.92,4,12S7.05,19.44,11,19.93z"/></g></g></svg>
)
}

46
src/assets/svgs/EmptyCircleSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from "./IconTypes";
export const EmptyCircleSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc,
}) => {
return (
<svg onClick={onClickFunc}
className={className}
fill={color}
height={height}
width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
);
};
import { IconTypes } from "./IconTypes";
export const EmptyCircleSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc,
}) => {
return (
<svg onClick={onClickFunc}
className={className}
fill={color}
height={height}
width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
);
};

44
src/assets/svgs/ExpandMoreSVG.tsx
View File

@ -1,22 +1,22 @@
import { IconTypes } from "./IconTypes";
export const ExpandMoreSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg
onClick={onClickFunc}
height={height}
width={width}
fill={color}
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
>
<path d="M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z" />
</svg>
);
};
import { IconTypes } from "./IconTypes";
export const ExpandMoreSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg
onClick={onClickFunc}
height={height}
width={width}
fill={color}
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
>
<path d="M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z" />
</svg>
);
};

14
src/assets/svgs/IconTypes.ts
View File

@ -1,7 +1,7 @@
export interface IconTypes {
color?: string;
height: string;
width: string;
className?: string;
onClickFunc?: (e?: any) => void;
}
export interface IconTypes {
color?: string;
height: string;
width: string;
className?: string;
onClickFunc?: (e?: any) => void;
}

46
src/assets/svgs/LightModeSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from './IconTypes'
export const LightModeSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg
className={className}
onClick={onClickFunc}
fill={color}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 96 960 960"
width={width}
>
<path d="M479.765 716Q538 716 579 675.235q41-40.764 41-99Q620 518 579.235 477q-40.764-41-99-41Q422 436 381 476.765q-41 40.764-41 99Q340 634 380.765 675q40.764 41 99 41Zm.235 60q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM70 606q-12.75 0-21.375-8.675Q40 588.649 40 575.825 40 563 48.625 554.5T70 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T170 606H70Zm720 0q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T790 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T890 606H790ZM479.825 296Q467 296 458.5 287.375T450 266V166q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 166v100q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625Zm0 720q-12.825 0-21.325-8.62-8.5-8.63-8.5-21.38V886q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 886v100q0 12.75-8.675 21.38-8.676 8.62-21.5 8.62ZM240 378l-57-56q-9-9-8.629-21.603.37-12.604 8.526-21.5 8.896-8.897 21.5-8.897Q217 270 226 279l56 57q8 9 8 21t-8 20.5q-8 8.5-20.5 8.5t-21.5-8Zm494 495-56-57q-8-9-8-21.375T678.5 774q8.5-9 20.5-9t21 9l57 56q9 9 8.629 21.603-.37 12.604-8.526 21.5-8.896 8.897-21.5 8.897Q743 882 734 873Zm-56-495q-9-9-9-21t9-21l56-57q9-9 21.603-8.629 12.604.37 21.5 8.526 8.897 8.896 8.897 21.5Q786 313 777 322l-57 56q-8 8-20.364 8-12.363 0-21.636-8ZM182.897 873.103q-8.897-8.896-8.897-21.5Q174 839 183 830l57-56q8.8-9 20.9-9 12.1 0 20.709 9Q291 783 291 795t-9 21l-56 57q-9 9-21.603 8.629-12.604-.37-21.5-8.526ZM480 576Z" />
</svg>
)
}
import { IconTypes } from './IconTypes'
export const LightModeSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg
className={className}
onClick={onClickFunc}
fill={color}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 96 960 960"
width={width}
>
<path d="M479.765 716Q538 716 579 675.235q41-40.764 41-99Q620 518 579.235 477q-40.764-41-99-41Q422 436 381 476.765q-41 40.764-41 99Q340 634 380.765 675q40.764 41 99 41Zm.235 60q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM70 606q-12.75 0-21.375-8.675Q40 588.649 40 575.825 40 563 48.625 554.5T70 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T170 606H70Zm720 0q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T790 546h100q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T890 606H790ZM479.825 296Q467 296 458.5 287.375T450 266V166q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 166v100q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625Zm0 720q-12.825 0-21.325-8.62-8.5-8.63-8.5-21.38V886q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T510 886v100q0 12.75-8.675 21.38-8.676 8.62-21.5 8.62ZM240 378l-57-56q-9-9-8.629-21.603.37-12.604 8.526-21.5 8.896-8.897 21.5-8.897Q217 270 226 279l56 57q8 9 8 21t-8 20.5q-8 8.5-20.5 8.5t-21.5-8Zm494 495-56-57q-8-9-8-21.375T678.5 774q8.5-9 20.5-9t21 9l57 56q9 9 8.629 21.603-.37 12.604-8.526 21.5-8.896 8.897-21.5 8.897Q743 882 734 873Zm-56-495q-9-9-9-21t9-21l56-57q9-9 21.603-8.629 12.604.37 21.5 8.526 8.897 8.896 8.897 21.5Q786 313 777 322l-57 56q-8 8-20.364 8-12.363 0-21.636-8ZM182.897 873.103q-8.897-8.896-8.897-21.5Q174 839 183 830l57-56q8.8-9 20.9-9 12.1 0 20.709 9Q291 783 291 795t-9 21l-56 57q-9 9-21.603 8.629-12.604-.37-21.5-8.526ZM480 576Z" />
</svg>
)
}

36
src/assets/svgs/PlaylistSVG.tsx
View File

@ -1,18 +1,18 @@
import { IconTypes } from "./IconTypes";
export const PlaylistSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg onClick={onClickFunc}
className={className}
fill={color}
height={height}
width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path d="M120-320v-80h320v80H120Zm0-160v-80h480v80H120Zm0-160v-80h480v80H120Zm520 520v-320l240 160-240 160Z"/></svg>
);
};
import { IconTypes } from "./IconTypes";
export const PlaylistSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg onClick={onClickFunc}
className={className}
fill={color}
height={height}
width={width} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" ><path d="M120-320v-80h320v80H120Zm0-160v-80h480v80H120Zm0-160v-80h480v80H120Zm520 520v-320l240 160-240 160Z"/></svg>
);
};

46
src/assets/svgs/TimesSVG.tsx
View File

@ -1,23 +1,23 @@
import { IconTypes } from "./IconTypes";
export const TimesSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg
onClick={onClickFunc}
className={className}
fill={color}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 -960 960 960"
width={width}
>
<path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
</svg>
);
};
import { IconTypes } from "./IconTypes";
export const TimesSVG: React.FC<IconTypes> = ({
color,
height,
width,
className,
onClickFunc
}) => {
return (
<svg
onClick={onClickFunc}
className={className}
fill={color}
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox="0 -960 960 960"
width={width}
>
<path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
</svg>
);
};

178
src/components/EditIssue/EditIssue.tsx
View File

@ -25,8 +25,8 @@ import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
import { MultiplePublish } from "../common/MultiplePublish/MultiplePublishAll";
import { TextEditor } from "../common/TextEditor/TextEditor";
import { extractTextFromHTML } from "../common/TextEditor/utils";
import { allCategoryData } from "../../constants/Categories/1stCategories.ts";
import { titleFormatter } from "../../constants/Misc.ts";
import { allCategoryData } from "../../constants/Categories/Categories.ts";
import { log, titleFormatter } from "../../constants/Misc.ts";
import {
CategoryList,
CategoryListRef,
@ -37,6 +37,13 @@ import {
ImagePublisherRef,
} from "../common/ImagePublisher/ImagePublisher.tsx";
import { ThemeButtonBright } from "../../pages/Home/Home-styles.tsx";
import {
AutocompleteQappNames,
QappNamesRef,
} from "../common/AutocompleteQappNames.tsx";
import { payPublishFeeQORT } from "../../constants/PublishFees/SendFeeFunctions.ts";
import { feeAmountBase } from "../../constants/PublishFees/FeeData.tsx";
import { verifyPayment } from "../../constants/PublishFees/VerifyPayment.ts";
const uid = new ShortUniqueId();
const shortuid = new ShortUniqueId({ length: 5 });
@ -58,6 +65,7 @@ interface VideoFile {
identifier?: string;
filename?: string;
}
export const EditIssue = () => {
const theme = useTheme();
const dispatch = useDispatch();
@ -65,9 +73,13 @@ export const EditIssue = () => {
const userAddress = useSelector(
(state: RootState) => state.auth?.user?.address
);
const editFileProperties = useSelector(
const editIssueProperties = useSelector(
(state: RootState) => state.file.editFileProperties
);
const QappNames = useSelector(
(state: RootState) => state.file.publishedQappNames
);
const [publishes, setPublishes] = useState<any>(null);
const [isOpenMultiplePublish, setIsOpenMultiplePublish] = useState(false);
const [videoPropertiesToSetToRedux, setVideoPropertiesToSetToRedux] =
@ -78,9 +90,11 @@ export const EditIssue = () => {
const [coverImage, setCoverImage] = useState<string>("");
const [file, setFile] = useState(null);
const [files, setFiles] = useState<VideoFile[]>([]);
const [editCategories, setEditCategories] = useState<string[]>([]);
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
const [isIssuePaid, setIsIssuePaid] = useState<boolean>(true);
const categoryListRef = useRef<CategoryListRef>(null);
const imagePublisherRef = useRef<ImagePublisherRef>(null);
const autocompleteRef = useRef<QappNamesRef>(null);
const { getRootProps, getInputProps } = useDropzone({
maxFiles: 10,
@ -118,21 +132,25 @@ export const EditIssue = () => {
});
useEffect(() => {
if (editFileProperties) {
setTitle(editFileProperties?.title || "");
setFiles(editFileProperties?.files || []);
if (editFileProperties?.htmlDescription) {
setDescription(editFileProperties?.htmlDescription);
} else if (editFileProperties?.fullDescription) {
const paragraph = `<p>${editFileProperties?.fullDescription}</p>`;
if (editIssueProperties) {
setTitle(editIssueProperties?.title || "");
setFiles(editIssueProperties?.files || []);
if (editIssueProperties?.htmlDescription) {
setDescription(editIssueProperties?.htmlDescription);
} else if (editIssueProperties?.fullDescription) {
const paragraph = `<p>${editIssueProperties?.fullDescription}</p>`;
setDescription(paragraph);
}
verifyPayment(editIssueProperties).then(isIssuePaid => {
setIsIssuePaid(isIssuePaid);
});
const categoriesFromEditFile =
getCategoriesFromObject(editFileProperties);
setEditCategories(categoriesFromEditFile);
getCategoriesFromObject(editIssueProperties);
setSelectedCategories(categoriesFromEditFile);
}
}, [editFileProperties]);
}, [editIssueProperties]);
const onClose = () => {
dispatch(setEditFile(null));
setVideoPropertiesToSetToRedux(null);
@ -142,14 +160,22 @@ export const EditIssue = () => {
setCoverImage("");
};
async function publishQDNResource() {
async function publishQDNResource(payFee: boolean) {
try {
const categoryList = categoryListRef.current?.getSelectedCategories();
if (!description) throw new Error("Please enter a description");
if (!categoryList[0]) throw new Error("Please select a category");
if (!editFileProperties) return;
if (!categoryListRef.current) throw new Error("No CategoryListRef found");
if (!userAddress) throw new Error("Unable to locate user address");
if (!description) throw new Error("Please enter a description");
const allCategoriesSelected = !selectedCategories.includes("");
if (!allCategoriesSelected)
throw new Error("All Categories must be selected");
console.log("categories", selectedCategories);
const QappsCategoryID = "3";
if (
selectedCategories[0] === QappsCategoryID &&
!autocompleteRef?.current?.getSelectedValue()
)
throw new Error("Select a published Q-App");
let errorMsg = "";
let name = "";
if (username) {
@ -160,7 +186,7 @@ export const EditIssue = () => {
"Cannot publish without access to your name. Please authenticate.";
}
if (editFileProperties?.user !== username) {
if (editIssueProperties?.user !== username) {
errorMsg = "Cannot publish another user's resource";
}
@ -223,9 +249,8 @@ export const EditIssue = () => {
filename = alphanumericString;
}
let metadescription =
`**${categoryListRef.current?.getCategoriesFetchString()}**` +
fullDescription.slice(0, 150);
const categoryString = `**${categoryListRef.current?.getSelectedCategories()}**`;
let metadescription = categoryString + fullDescription.slice(0, 150);
const requestBodyVideo: any = {
action: "PUBLISH_QDN_RESOURCE",
@ -248,23 +273,50 @@ export const EditIssue = () => {
size: file.size,
});
}
const selectedQappName = autocompleteRef?.current?.getSelectedValue();
const fileObject: any = {
const issueObject: any = {
title,
version: editFileProperties.version,
version: editIssueProperties.version,
fullDescription,
htmlDescription: description,
commentsId: editFileProperties.commentsId,
commentsId: editIssueProperties.commentsId,
...categoryListRef.current?.categoriesToObject(),
files: fileReferences,
images: imagePublisherRef?.current?.getImageArray(),
QappName: selectedQappName,
feeData: editIssueProperties?.feeData,
};
if (payFee) {
const publishFeeResponse = await payPublishFeeQORT(feeAmountBase);
if (!publishFeeResponse) {
dispatch(
setNotification({
msg: "Fee publish rejected by user.",
alertType: "error",
})
);
return;
}
if (log) console.log("feeResponse: ", publishFeeResponse);
let metadescription =
`**${categoryListRef.current?.getCategoriesFetchString()}**` +
fullDescription.slice(0, 150);
issueObject.feeData = { signature: publishFeeResponse };
dispatch(updateInHashMap(issueObject)); // shows issue as paid right away?
}
const fileObjectToBase64 = await objectToBase64(fileObject);
const QappNameString = autocompleteRef?.current?.getQappNameFetchString();
const categoryString =
categoryListRef.current?.getCategoriesFetchString(selectedCategories);
const metaDataString = `**${categoryString + QappNameString}**`;
let metadescription = metaDataString + fullDescription.slice(0, 150);
if (log) console.log("description is: ", metadescription);
if (log) console.log("description length is: ", metadescription.length);
if (log) console.log("characters left:", 240 - metadescription.length);
if (log)
console.log("% of characters used:", metadescription.length / 240);
const fileObjectToBase64 = await objectToBase64(issueObject);
// Description is obtained from raw data
const requestBodyJson: any = {
@ -274,7 +326,7 @@ export const EditIssue = () => {
data64: fileObjectToBase64,
title: title.slice(0, 50),
description: metadescription,
identifier: editFileProperties.id,
identifier: editIssueProperties.id,
tag1: QSUPPORT_FILE_BASE,
filename: `video_metadata.json`,
};
@ -287,10 +339,13 @@ export const EditIssue = () => {
setPublishes(multiplePublish);
setIsOpenMultiplePublish(true);
setVideoPropertiesToSetToRedux({
...editFileProperties,
...fileObject,
...editIssueProperties,
...issueObject,
});
} catch (error: any) {
console.log("error is: ", error);
if (error === "User declined request") return;
let notificationObj: any = null;
if (typeof error === "string") {
notificationObj = {
@ -315,26 +370,15 @@ export const EditIssue = () => {
}
}
const handleOnchange = (index: number, type: string, value: string) => {
// setFiles((prev) => {
// let formattedValue = value
// console.log({type})
// if(type === 'title'){
// formattedValue = value.replace(/[^a-zA-Z0-9\s]/g, "")
// }
// const copyFiles = [...prev];
// copyFiles[index] = {
// ...copyFiles[index],
// [type]: formattedValue,
// };
// return copyFiles;
// });
const isShowQappNameTextField = () => {
const QappID = "3";
return selectedCategories[0] === QappID;
};
return (
<>
<Modal
open={!!editFileProperties}
open={!!editIssueProperties}
aria-labelledby="modal-title"
aria-describedby="modal-description"
>
@ -410,15 +454,26 @@ export const EditIssue = () => {
>
<CategoryList
categoryData={allCategoryData}
initialCategories={editCategories}
initialCategories={selectedCategories}
columns={3}
ref={categoryListRef}
showEmptyItem={false}
afterChange={newSelectedCategories => {
setSelectedCategories(newSelectedCategories);
}}
/>
</Box>
</Box>
{isShowQappNameTextField() && (
<AutocompleteQappNames
ref={autocompleteRef}
namesList={QappNames}
initialSelection={editIssueProperties?.QappName}
/>
)}
<ImagePublisher
ref={imagePublisherRef}
initialImages={editFileProperties?.images}
initialImages={editIssueProperties?.images}
/>
<CustomInputField
name="title"
@ -466,10 +521,27 @@ export const EditIssue = () => {
alignItems: "center",
}}
>
{isIssuePaid === false && (
<ThemeButtonBright
variant="contained"
onClick={() => {
publishQDNResource(true);
}}
sx={{
fontFamily: "Montserrat",
fontSize: "16px",
fontWeight: 400,
letterSpacing: "0.2px",
}}
>
Publish Edit with Fee
</ThemeButtonBright>
)}
<ThemeButtonBright
variant="contained"
onClick={() => {
publishQDNResource();
publishQDNResource(false);
}}
sx={{
fontFamily: "Montserrat",
@ -478,7 +550,7 @@ export const EditIssue = () => {
letterSpacing: "0.2px",
}}
>
Publish
Publish Edit
</ThemeButtonBright>
</Box>
</CrowdfundActionButtonRow>
@ -506,7 +578,7 @@ export const EditIssue = () => {
dispatch(updateInHashMap(clonedCopy));
dispatch(
setNotification({
msg: "File updated",
msg: "Issue updated",
alertType: "success",
})
);

22
src/components/EditPlaylist/EditPlaylist.tsx
View File

@ -43,9 +43,9 @@ import { PlaylistListEdit } from "../PlaylistListEdit/PlaylistListEdit";
import { TextEditor } from "../common/TextEditor/TextEditor";
import { extractTextFromHTML } from "../common/TextEditor/utils";
import {
firstCategories,
secondCategories,
} from "../../constants/Categories/1stCategories.ts";
issueLocation,
thirdCategories,
} from "../../constants/Categories/Categories.ts";
const uid = new ShortUniqueId();
const shortuid = new ShortUniqueId({ length: 5 });
@ -183,7 +183,7 @@ export const EditPlaylist = () => {
setVideos(editVideoProperties?.videos || []);
if (editVideoProperties?.category) {
const selectedOption = firstCategories.find(
const selectedOption = issueLocation.find(
option => option.id === +editVideoProperties.category
);
setSelectedCategoryVideos(selectedOption || null);
@ -192,9 +192,9 @@ export const EditPlaylist = () => {
if (
editVideoProperties?.category &&
editVideoProperties?.subcategory &&
secondCategories[+editVideoProperties?.category]
thirdCategories[+editVideoProperties?.category]
) {
const selectedOption = secondCategories[
const selectedOption = thirdCategories[
+editVideoProperties?.category
]?.find(option => option.id === +editVideoProperties.subcategory);
setSelectedSubCategoryVideos(selectedOption || null);
@ -405,7 +405,7 @@ export const EditPlaylist = () => {
event: SelectChangeEvent<string>
) => {
const optionId = event.target.value;
const selectedOption = firstCategories.find(
const selectedOption = issueLocation.find(
option => option.id === +optionId
);
setSelectedCategoryVideos(selectedOption || null);
@ -479,7 +479,7 @@ export const EditPlaylist = () => {
value={selectedCategoryVideos?.id || ""}
onChange={handleOptionCategoryChangeVideos}
>
{firstCategories.map(option => (
{issueLocation.map(option => (
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
@ -487,7 +487,7 @@ export const EditPlaylist = () => {
</Select>
</FormControl>
{selectedCategoryVideos &&
secondCategories[selectedCategoryVideos?.id] && (
thirdCategories[selectedCategoryVideos?.id] && (
<FormControl fullWidth sx={{ marginBottom: 2 }}>
<InputLabel id="Category">Select a Sub-Category</InputLabel>
<Select
@ -497,11 +497,11 @@ export const EditPlaylist = () => {
onChange={e =>
handleOptionSubCategoryChangeVideos(
e,
secondCategories[selectedCategoryVideos?.id]
thirdCategories[selectedCategoryVideos?.id]
)
}
>
{secondCategories[selectedCategoryVideos.id].map(
{thirdCategories[selectedCategoryVideos.id].map(
option => (
<MenuItem key={option.id} value={option.id}>
{option.name}

1172
src/components/EditPlaylist/Upload-styles.tsx
View File

File diff suppressed because it is too large Load Diff

100
src/components/PublishIssue/PublishIssue-styles.tsx
View File

@ -3,6 +3,7 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
Autocomplete,
Box,
Button,
Grid,
@ -11,8 +12,10 @@ import {
TextField,
Typography,
} from "@mui/material";
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
import { TimesSVG } from "../../assets/svgs/TimesSVG";
import { fontSizeMedium } from "../../constants/Misc.ts";
export const DoubleLine = styled(Typography)`
display: -webkit-box;
@ -59,7 +62,7 @@ export const ModalBody = styled(Box)(({ theme }) => ({
left: "50%",
transform: "translate(-50%, -50%)",
width: "75%",
maxWidth: "900px",
maxWidth: "1000px",
padding: "15px 35px",
display: "flex",
flexDirection: "column",
@ -113,50 +116,59 @@ export const NewCrowdfundTimeDescription = styled(Typography)(({ theme }) => ({
textDecoration: "underline",
}));
const getInputFieldStyles = (theme: any) => {
return {
fontFamily: "Mulish",
letterSpacing: "0px",
fontWeight: 400,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
borderColor: theme.palette.background.paper,
"& label": {
color: theme.palette.mode === "light" ? "#808183" : "#edeef0",
fontFamily: "Mulish",
fontSize: fontSizeMedium,
letterSpacing: "0px",
fontWeight: 400,
},
"& label.Mui-focused": {
color: theme.palette.mode === "light" ? "#A0AAB4" : "#d7d8da",
},
"& .MuiInput-underline:after": {
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "25px",
letterSpacing: "0px",
fontWeight: 400,
},
"& [class$='-MuiFilledInput-root']": {
padding: "30px 12px 8px",
},
"& .MuiFilledInput-root:after": {
borderBottomColor: theme.palette.secondary.main,
},
};
};
export const CustomInputField = styled(TextField)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontWeight: 400,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
borderColor: theme.palette.background.paper,
"& label": {
color: theme.palette.mode === "light" ? "#808183" : "#edeef0",
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontWeight: 400,
},
"& label.Mui-focused": {
color: theme.palette.mode === "light" ? "#A0AAB4" : "#d7d8da",
},
"& .MuiInput-underline:after": {
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontWeight: 400,
},
"& [class$='-MuiFilledInput-root']": {
padding: "30px 12px 8px",
},
"& .MuiFilledInput-root:after": {
borderBottomColor: theme.palette.secondary.main,
},
...getInputFieldStyles(theme),
}));
export const CustomAutoCompleteField = styled(Autocomplete)(({ theme }) => ({
...getInputFieldStyles(theme),
}));
export const CrowdfundTitle = styled(Typography)(({ theme }) => ({

136
src/components/PublishIssue/PublishIssue.tsx
View File

@ -21,19 +21,34 @@ import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
import { MultiplePublish } from "../common/MultiplePublish/MultiplePublishAll";
import { TextEditor } from "../common/TextEditor/TextEditor";
import { extractTextFromHTML } from "../common/TextEditor/utils";
import { allCategoryData } from "../../constants/Categories/1stCategories.ts";
import { titleFormatter } from "../../constants/Misc.ts";
import { allCategoryData } from "../../constants/Categories/Categories.ts";
import {
fontSizeLarge,
fontSizeSmall,
log,
titleFormatter,
} from "../../constants/Misc.ts";
import {
appendCategoryToList,
CategoryList,
CategoryListRef,
} from "../common/CategoryList/CategoryList.tsx";
import { SupportState } from "../../constants/Categories/2ndCategories.ts";
import {
ImagePublisher,
ImagePublisherRef,
} from "../common/ImagePublisher/ImagePublisher.tsx";
import { ThemeButtonBright } from "../../pages/Home/Home-styles.tsx";
import {
AutocompleteQappNames,
QappNamesRef,
} from "../common/AutocompleteQappNames.tsx";
import {
feeAmountBase,
feeDisclaimer,
} from "../../constants/PublishFees/FeeData.tsx";
import {
payPublishFeeQORT,
PublishFeeData,
} from "../../constants/PublishFees/SendFeeFunctions.ts";
const uid = new ShortUniqueId();
const shortuid = new ShortUniqueId({ length: 5 });
@ -53,14 +68,21 @@ interface VideoFile {
description: string;
coverImage?: string;
}
export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
const theme = useTheme();
const dispatch = useDispatch();
const [isOpenMultiplePublish, setIsOpenMultiplePublish] = useState(false);
const [QappName, setQappName] = useState<string>("");
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
const username = useSelector((state: RootState) => state.auth?.user?.name);
const userAddress = useSelector(
(state: RootState) => state.auth?.user?.address
);
const QappNames = useSelector(
(state: RootState) => state.file.publishedQappNames
);
const [files, setFiles] = useState<VideoFile[]>([]);
const [isOpen, setIsOpen] = useState<boolean>(false);
@ -77,8 +99,11 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
const [playlistSetting, setPlaylistSetting] = useState<null | string>(null);
const [publishes, setPublishes] = useState<any>(null);
const categoryListRef = useRef<CategoryListRef>(null);
const imagePublisherRef = useRef<ImagePublisherRef>(null);
const autocompleteRef = useRef<QappNamesRef>(null);
const { getRootProps, getInputProps } = useDropzone({
maxFiles: 10,
maxSize: 419430400, // 400 MB in bytes
@ -128,8 +153,18 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
if (!categoryListRef.current) throw new Error("No CategoryListRef found");
if (!userAddress) throw new Error("Unable to locate user address");
if (!description) throw new Error("Please enter a description");
if (!categoryListRef.current?.getSelectedCategories()[0])
throw new Error("Please select a category");
const allCategoriesSelected =
selectedCategories && selectedCategories[0] && selectedCategories[1];
if (!allCategoriesSelected)
throw new Error("All Categories must be selected");
const QappsCategoryID = "3";
if (
selectedCategories[0] === QappsCategoryID &&
!autocompleteRef?.current?.getSelectedValue()
)
throw new Error("Select a published Q-App");
let errorMsg = "";
let name = "";
if (username) {
@ -200,14 +235,10 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
filename = alphanumericString;
}
const categoryList = appendCategoryToList(
categoryListRef.current?.getSelectedCategories(),
"101"
);
const categoryString = `**${categoryListRef.current?.getCategoriesFetchString(categoryList)}**`;
const categoryString = `**${categoryListRef.current?.getSelectedCategories()}**`;
let metadescription = categoryString + fullDescription.slice(0, 150);
const requestBodyVideo: any = {
const requestBodyFile: any = {
action: "PUBLISH_QDN_RESOURCE",
name: name,
service: "FILE",
@ -218,7 +249,7 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
filename,
tag1: QSUPPORT_FILE_BASE,
};
listOfPublishes.push(requestBodyVideo);
listOfPublishes.push(requestBodyFile);
fileReferences.push({
filename: file.name,
identifier,
@ -232,12 +263,19 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
const idMeta = uid();
const identifier = `${QSUPPORT_FILE_BASE}${sanitizeTitle.slice(0, 30)}_${idMeta}`;
const categoryList = appendCategoryToList(
categoryListRef.current?.getSelectedCategories(),
"101"
);
const categoryList = categoryListRef.current?.getSelectedCategories();
const fileObject: any = {
const selectedQappName = autocompleteRef?.current?.getSelectedValue();
const publishFeeResponse = await payPublishFeeQORT(feeAmountBase);
if (log) console.log("feeResponse: ", publishFeeResponse);
const feeData: PublishFeeData = {
signature: publishFeeResponse,
senderName: "",
};
const issueObject: any = {
title,
version: 1,
fullDescription,
@ -246,12 +284,24 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
...categoryListRef.current?.categoriesToObject(categoryList),
files: fileReferences,
images: imagePublisherRef?.current?.getImageArray(),
QappName: selectedQappName,
feeData,
};
const categoryString = `**${categoryListRef.current?.getCategoriesFetchString(categoryList)}**`;
let metadescription = categoryString + fullDescription.slice(0, 150);
const QappNameString = autocompleteRef?.current?.getQappNameFetchString();
const categoryString =
categoryListRef.current?.getCategoriesFetchString(categoryList);
const metaDataString = `**${categoryString + QappNameString}**`;
const fileObjectToBase64 = await objectToBase64(fileObject);
let metadescription = metaDataString + fullDescription.slice(0, 150);
if (log) console.log("description is: ", metadescription);
if (log) console.log("description length is: ", metadescription.length);
if (log) console.log("characters left:", 240 - metadescription.length);
if (log)
console.log("% of characters used:", metadescription.length / 240);
const fileObjectToBase64 = await objectToBase64(issueObject);
// Description is obtained from raw data
const requestBodyJson: any = {
action: "PUBLISH_QDN_RESOURCE",
@ -295,6 +345,11 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
}
}
const isShowQappNameTextField = () => {
const QappID = "3";
return selectedCategories[0] === QappID;
};
return (
<>
{username && (
@ -386,13 +441,29 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
categoryData={allCategoryData}
ref={categoryListRef}
columns={3}
excludeCategories={SupportState}
afterChange={newSelectedCategories => {
if (
newSelectedCategories[0] &&
newSelectedCategories[1] &&
!newSelectedCategories[2]
) {
newSelectedCategories[2] = "101";
}
setSelectedCategories(newSelectedCategories);
}}
showEmptyItem={false}
/>
</Box>
{isShowQappNameTextField() && (
<AutocompleteQappNames
ref={autocompleteRef}
namesList={QappNames}
/>
)}
<ImagePublisher ref={imagePublisherRef} />
<CustomInputField
name="title"
label="Title of Issue"
label="Title"
variant="filled"
value={title}
onChange={e => {
@ -400,15 +471,15 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
const formattedValue = value.replace(titleFormatter, "");
setTitle(formattedValue);
}}
inputProps={{ maxLength: 180 }}
inputProps={{ maxLength: 60 }}
required
/>
<Typography
sx={{
fontSize: "18px",
fontSize: fontSizeLarge,
}}
>
Description of Issue
Description
</Typography>
<TextEditor
inlineContent={description}
@ -426,7 +497,10 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
}}
variant="contained"
color="error"
sx={{ color: theme.palette.text.primary }}
sx={{
color: theme.palette.text.primary,
fontSize: fontSizeSmall,
}}
>
Cancel
</ActionButton>
@ -439,13 +513,10 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
>
<ThemeButtonBright
variant="contained"
onClick={() => {
publishQDNResource();
}}
onClick={publishQDNResource}
sx={{
fontFamily: "Montserrat",
fontSize: "16px",
fontWeight: 400,
fontWeight: "400",
letterSpacing: "0.2px",
}}
>
@ -453,6 +524,7 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
</ThemeButtonBright>
</Box>
</ActionButtonRow>
{feeDisclaimer}
</ModalBody>
</Modal>

218
src/components/ResponsiveImage.tsx
View File

@ -1,109 +1,109 @@
import React, { useState, useEffect, CSSProperties } from 'react'
import Skeleton from '@mui/material/Skeleton'
import { Box } from '@mui/material'
interface ResponsiveImageProps {
src: string
width: number
height: number
alt?: string
className?: string
style?: CSSProperties
}
const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
src,
width,
height,
alt,
className,
style
}) => {
const [loading, setLoading] = useState(true)
const aspectRatio = (height / width) * 100
const imageStyle: CSSProperties = {
width: '100%',
height: '100%',
objectFit: 'cover'
}
const wrapperStyle: CSSProperties = {
position: 'relative',
paddingBottom: `${aspectRatio}%`,
overflow: 'hidden',
...style
}
return (
<Box
sx={{
padding: '2px',
maxHeight: '50%'
}}
>
{loading && (
<Skeleton
variant="rectangular"
style={{
width: '100%',
height: 0,
paddingBottom: `${(height / width) * 100}%`,
objectFit: 'contain',
visibility: loading ? 'visible' : 'hidden',
borderRadius: '8px'
}}
/>
)}
<img
onLoad={() => setLoading(false)}
src={src}
style={{
width: '100%',
height: '100%',
borderRadius: '8px',
visibility: loading ? 'hidden' : 'visible',
position: loading ? 'absolute' : 'unset',
objectFit: 'contain'
}}
/>
</Box>
)
return (
<div style={wrapperStyle} className={className}>
{loading ? (
<Skeleton
variant="rectangular"
sx={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}}
/>
) : (
<img
src={src}
alt={alt}
style={{
...imageStyle,
position: 'absolute',
top: 0,
left: 0
}}
/>
)}
</div>
)
}
export default ResponsiveImage
import React, { useState, useEffect, CSSProperties } from 'react'
import Skeleton from '@mui/material/Skeleton'
import { Box } from '@mui/material'
interface ResponsiveImageProps {
src: string
width: number
height: number
alt?: string
className?: string
style?: CSSProperties
}
const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
src,
width,
height,
alt,
className,
style
}) => {
const [loading, setLoading] = useState(true)
const aspectRatio = (height / width) * 100
const imageStyle: CSSProperties = {
width: '100%',
height: '100%',
objectFit: 'cover'
}
const wrapperStyle: CSSProperties = {
position: 'relative',
paddingBottom: `${aspectRatio}%`,
overflow: 'hidden',
...style
}
return (
<Box
sx={{
padding: '2px',
maxHeight: '50%'
}}
>
{loading && (
<Skeleton
variant="rectangular"
style={{
width: '100%',
height: 0,
paddingBottom: `${(height / width) * 100}%`,
objectFit: 'contain',
visibility: loading ? 'visible' : 'hidden',
borderRadius: '8px'
}}
/>
)}
<img
onLoad={() => setLoading(false)}
src={src}
style={{
width: '100%',
height: '100%',
borderRadius: '8px',
visibility: loading ? 'hidden' : 'visible',
position: loading ? 'absolute' : 'unset',
objectFit: 'contain'
}}
/>
</Box>
)
return (
<div style={wrapperStyle} className={className}>
{loading ? (
<Skeleton
variant="rectangular"
sx={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}}
/>
) : (
<img
src={src}
alt={alt}
style={{
...imageStyle,
position: 'absolute',
top: 0,
left: 0
}}
/>
)}
</div>
)
}
export default ResponsiveImage

18
src/components/StatsData.tsx
View File

@ -15,14 +15,14 @@ export const StatsData = () => {
}));
const {
getFiles,
checkAndUpdateFile,
getFile,
getIssues,
checkAndUpdateIssue,
getIssue,
hashMapFiles,
getNewFiles,
checkNewFiles,
getFilesFiltered,
getFilesCount,
getNewIssues,
checkNewIssues,
getIssuesFiltered,
getIssuesCount,
} = useFetchIssues();
const totalIssuesPublished = useSelector(
@ -36,8 +36,8 @@ export const StatsData = () => {
);
useEffect(() => {
getFilesCount();
}, [getFilesCount]);
getIssuesCount();
}, [getIssuesCount]);
return (
totalIssuesPublished > 0 && (

135
src/components/common/AutocompleteQappNames.tsx Normal file
View File

@ -0,0 +1,135 @@
import React, { useEffect, useImperativeHandle, useState } from "react";
import { Autocomplete, SxProps, Theme } from "@mui/material";
import { CustomInputField } from "../PublishIssue/PublishIssue-styles.tsx";
import { log } from "../../constants/Misc.ts";
interface AutoCompleteQappNamesProps {
namesList?: string[];
afterChange?: (selectedName: string) => void;
sx?: SxProps<Theme>;
required?: boolean;
initialSelection?: string;
}
export type QappNamesRef = {
getSelectedValue: () => string;
setSelectedValue: (selectedValue: string) => void;
getQappNameFetchString: () => string;
};
export const AutocompleteQappNames = React.forwardRef<
QappNamesRef,
AutoCompleteQappNamesProps
>(
(
{
namesList,
afterChange,
sx,
required = true,
initialSelection = null,
}: AutoCompleteQappNamesProps,
ref
) => {
const [QappNamesList, setQappNamesList] = useState<string[]>([]);
const [selectedQappName, setSelectedQappName] = useState<string>(
initialSelection || null
);
if (log) console.log("initial selection: ", initialSelection);
useEffect(() => {
if (namesList) {
if (log) console.log("prop namesList: ", namesList);
setQappNamesList(namesList);
return;
}
getPublishedQappNames().then((names: string[]) => {
setQappNamesList(names);
if (log) console.log("QappNames set manually");
});
}, []);
useEffect(() => {
setSelectedQappName(initialSelection || null);
}, [initialSelection]);
useImperativeHandle(ref, () => ({
getSelectedValue: () => {
return selectedQappName;
},
setSelectedValue: (selectedValue: string) => {
setSelectedQappName(selectedValue);
},
getQappNameFetchString: () => {
return getQappNameFetchString(selectedQappName);
},
}));
return (
<Autocomplete
options={QappNamesList}
value={selectedQappName}
onChange={(e, newValue) => {
setSelectedQappName(newValue);
if (afterChange) afterChange(newValue || null);
}}
sx={{ height: "100px", ...sx }}
renderInput={params => (
<CustomInputField
{...params}
label={"Q-App/Website Name"}
value={selectedQappName}
variant={"filled"}
required={required}
/>
)}
/>
);
}
);
export interface MetaData {
title: string;
description: string;
tags: string[];
mimeType: string;
}
export interface SearchResourcesResponse {
name: string;
service: string;
identifier: string;
metadata?: MetaData;
size: number;
created: number;
updated: number;
}
const searchService = (service: string) => {
return qortalRequest({
action: "SEARCH_QDN_RESOURCES",
service: service,
limit: 0,
});
};
export const getPublishedQappNames = async () => {
const QappList: Promise<SearchResourcesResponse[]> = searchService("APP");
const siteList: Promise<SearchResourcesResponse[]> = searchService("WEBSITE");
const responses = await Promise.all([QappList, siteList]);
const processedQappList = responses[0].map(value => value.name);
const processedWebsiteList = responses[1].map(value => value.name);
const removedDuplicates = Array.from(
new Set<string>([...processedQappList, ...processedWebsiteList])
);
return removedDuplicates.sort((a, b) => {
return a.localeCompare(b);
});
};
export const getQappNameFetchString = (selectedQappName: string) => {
return selectedQappName ? `Qapp:${selectedQappName};` : "";
};

121
src/components/common/CategoryList/CategoryList.tsx
View File

@ -12,13 +12,15 @@ import {
import React, { useEffect, useImperativeHandle, useState } from "react";
import { CategoryContainer } from "./CategoryList-styles.tsx";
import { allCategoryData } from "../../../constants/Categories/1stCategories.ts";
import { allCategoryData } from "../../../constants/Categories/Categories.ts";
import { log } from "../../../constants/Misc.ts";
import { findCategoryData } from "../../../constants/Categories/CategoryFunctions.ts";
export interface Category {
id: number;
name: string;
icon?: string;
label?: string;
}
export interface Categories {
@ -29,8 +31,6 @@ export interface CategoryData {
subCategories: Categories[];
}
type ListDirection = "column" | "row";
interface CategoryListProps {
sx?: SxProps<Theme>;
categoryData: CategoryData;
@ -38,6 +38,7 @@ interface CategoryListProps {
columns?: number;
afterChange?: (categories: string[]) => void;
excludeCategories?: Category[];
showEmptyItem?: boolean;
}
export type CategoryListRef = {
@ -60,6 +61,7 @@ export const CategoryList = React.forwardRef<
columns = 1,
afterChange,
excludeCategories,
showEmptyItem = true,
}: CategoryListProps,
ref
) => {
@ -127,7 +129,8 @@ export const CategoryList = React.forwardRef<
const newSelectedCategories: string[] = selectedCategories.map(
(category, categoryIndex) => {
if (index > categoryIndex) return category;
else if (index === categoryIndex) return selectedOption.id.toString();
else if (index === categoryIndex)
return selectedOption?.id?.toString();
else return "";
}
);
@ -140,23 +143,31 @@ export const CategoryList = React.forwardRef<
};
const categorySelectSX = {
// Target the input field
".MuiSelect-select": {
fontSize: "16px", // Change font size for the selected value
padding: "10px 5px 15px 15px;",
},
// Target the dropdown icon
".MuiSelect-icon": {
fontSize: "20px", // Adjust if needed
},
// Target the dropdown menu
"& .MuiMenu-paper": {
".MuiMenuItem-root": {
fontSize: "14px", // Change font size for the menu items
},
},
// // Target the input field
// ".MuiSelect-select": {
// padding: "10px 5px 15px 15px;",
// },
// // Target the dropdown icon
// ".MuiSelect-icon": {
// fontSize: "20px", // Adjust if needed
// },
// // Target the dropdown menu
// "& .MuiMenu-paper": {
// ".MuiMenuItem-root": {
// fontSize: "14px", // Change font size for the menu items
// },
// },
};
const emptyMenuItem = (
<MenuItem
key={""}
value={""}
sx={{
"@media (min-width: 600px)": { minHeight: "46.5px" },
}}
/>
);
const fillMenu = (category: Categories, index: number) => {
const subCategoryIndex = selectedCategories[index];
if (log) console.log("selected categories: ", selectedCategories);
@ -171,12 +182,23 @@ export const CategoryList = React.forwardRef<
if (log) console.log("categoryData: ", categoryData);
const menuToFill = category[subCategoryIndex];
if (menuToFill)
return menuToFill.map(option => (
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
));
if (menuToFill) {
const menuItems = [];
if (showEmptyItem) menuItems.push(emptyMenuItem);
menuToFill.map(option =>
menuItems.push(
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
)
);
if (log) console.log(" returning menuItems: ", menuItems);
return menuItems;
}
if (log) console.log("not returning menuItems");
};
const hasSubCategory = (category: Categories, index: number) => {
@ -202,11 +224,11 @@ export const CategoryList = React.forwardRef<
<FormControl fullWidth sx={{ marginBottom: 1 }}>
<InputLabel
sx={{
fontSize: "16px",
fontSize: "24px",
}}
id="Category-1"
>
Category
{categoryData.category[0]?.label || "Category"}
</InputLabel>
<Select
labelId="Category 1"
@ -217,6 +239,7 @@ export const CategoryList = React.forwardRef<
}}
sx={categorySelectSX}
>
{showEmptyItem && emptyMenuItem}
{categoryData.category.map(option => (
<MenuItem key={option.id} value={option.id}>
{option.name}
@ -237,11 +260,14 @@ export const CategoryList = React.forwardRef<
>
<InputLabel
sx={{
fontSize: "16px",
fontSize: "24px",
}}
id={`Category-${index + 2}`}
>
{`Category-${index + 2}`}
{findCategoryData(+selectedCategories[index + 1])
?.label ||
category[selectedCategories[index]][0]?.label ||
`Category-${index + 2}`}
</InputLabel>
<Select
labelId={`Category ${index + 2}`}
@ -250,24 +276,6 @@ export const CategoryList = React.forwardRef<
onChange={e => {
selectCategoryEvent(e, index + 1);
}}
sx={{
width: "100%",
// Target the input field
".MuiSelect-select": {
fontSize: "16px", // Change font size for the selected value
padding: "10px 5px 15px 15px;",
},
// Target the dropdown icon
".MuiSelect-icon": {
fontSize: "20px", // Adjust if needed
},
// Target the dropdown menu
"& .MuiMenu-paper": {
".MuiMenuItem-root": {
fontSize: "14px", // Change font size for the menu items
},
},
}}
>
{fillMenu(category, index)}
</Select>
@ -285,9 +293,9 @@ export const getCategoriesFetchString = (categories: string[]) => {
let fetchString = "";
categories.map((category, index) => {
if (category) {
if (index === 0) fetchString += `cat:${category}`;
else if (index === 1) fetchString += `;sub:${category}`;
else fetchString += `;sub${index}:${category}`;
if (index === 0 && category) fetchString += `cat:${category};`;
else if (index === 1 && category) fetchString += `sub:${category};`;
else if (category) fetchString += `sub${index}:${category};`;
}
});
if (log) console.log("categoriesAsDescription: ", fetchString);
@ -318,3 +326,16 @@ export const getCategoriesFromObject = (editFileProperties: any) => {
}
return categoryList;
};
export const getCategoriesLength = categoryList => {
return categoryList.filter(category => category !== "").length;
};
export const hasCategories = (categories: string[]) => {
return categories.findIndex(category => category !== "") >= 0;
};
export const appendCategory = (categoryList: string[], category: string) => {
const nextIndex = categoryList.findIndex(category => category === "");
categoryList[nextIndex] = category;
};

178
src/components/common/CategoryList/CategorySelect.tsx
View File

@ -0,0 +1,178 @@
import {
FormControl,
InputLabel,
MenuItem,
OutlinedInput,
Select,
SxProps,
Theme,
} from "@mui/material";
import React, { useEffect, useImperativeHandle, useState } from "react";
import { CategoryContainer } from "./CategoryList-styles.tsx";
import { log } from "../../../constants/Misc.ts";
export interface Category {
id: number;
name: string;
icon?: string;
label?: string;
}
export interface Categories {
[key: number]: Category[];
}
export interface CategoryData {
category: Category[];
subCategories: Categories[];
}
interface CategoryListProps {
sx?: SxProps<Theme>;
categoryData: Category[];
initialCategory?: string;
afterChange?: (category: string) => void;
showEmptyItem?: boolean;
}
export type CategorySelectRef = {
getSelectedCategory: () => string;
setSelectedCategory: (arr: string) => void;
clearCategory: () => void;
getCategoryFetchString: (categories?: string) => string;
};
export const CategorySelect = React.forwardRef<
CategorySelectRef,
CategoryListProps
>(
(
{
sx,
categoryData,
initialCategory,
afterChange,
showEmptyItem = true,
}: CategoryListProps,
ref
) => {
const [selectedCategory, setSelectedCategory] = useState<string>(
initialCategory || ""
);
useEffect(() => {
if (initialCategory) setSelectedCategory(initialCategory);
}, [initialCategory]);
const updateCategory = (category: string) => {
if (log) console.log("updateCategory ID: ", category);
setSelectedCategory(category);
if (afterChange) afterChange(category);
};
const categoryToObject = (category: string) => {
let categoryObject = {};
categoryObject["category"] = category;
if (log) console.log("categoryObject is: ", categoryObject);
return categoryObject;
};
const clearCategory = () => {
updateCategory("");
};
useImperativeHandle(ref, () => ({
getSelectedCategory: () => {
return selectedCategory;
},
setSelectedCategory: category => {
if (log) console.log("setSelectedCategory: ", category);
updateCategory(category);
},
clearCategory,
getCategoryFetchString: (category?: string) =>
getCategoryFetchString(category || selectedCategory),
categoriesToObject: (category?: string) =>
categoryToObject(category || selectedCategory),
}));
const categorySelectSX = {
// // Target the input field
// ".MuiSelect-select": {
// fontSize: "16px", // Change font size for the selected value
// padding: "10px 5px 15px 15px;",
// },
// // Target the dropdown icon
// ".MuiSelect-icon": {
// fontSize: "20px", // Adjust if needed
// },
// // Target the dropdown menu
// "& .MuiMenu-paper": {
// ".MuiMenuItem-root": {
// fontSize: "14px", // Change font size for the menu items
// },
// },
};
const emptyMenuItem = (
<MenuItem
key={""}
value={""}
// sx={{
// "& .MuiButtonBase-root-MuiMenuItem-root": {
// minHeight: "50px",
// },
sx={{
"@media (min-width: 600px)": { minHeight: "46.5px" },
}}
/>
);
const fillMenu = () => {
const menuItems = [];
if (showEmptyItem) menuItems.push(emptyMenuItem);
categoryData.map(option =>
menuItems.push(
<MenuItem key={option.id} value={option.id}>
{option.name}
</MenuItem>
)
);
return menuItems;
};
return (
<CategoryContainer sx={{ width: "100%", ...sx }}>
<FormControl fullWidth sx={{ marginBottom: 1 }}>
<InputLabel
sx={{
fontSize: "24px",
}}
id="Category-1"
>
{categoryData[0]?.label || "Category"}
</InputLabel>
<Select
labelId="Category 1"
input={<OutlinedInput label="Category 1" />}
value={selectedCategory || ""}
onChange={e => {
updateCategory(e.target.value);
}}
>
{fillMenu()}
</Select>
</FormControl>
</CategoryContainer>
);
}
);
export const getCategoryFetchString = (category: string) => {
return `cat:${category}`;
};
export const getCategoryFromObject = (editFileProperties: any) => {
const categoryList: string[] = [];
if (editFileProperties.category)
categoryList.push(editFileProperties.category);
return categoryList;
};

47
src/components/common/Comments/Comment.tsx
View File

@ -1,7 +1,6 @@
import {
Avatar,
Box,
Button,
Dialog,
DialogActions,
DialogContent,
@ -9,26 +8,26 @@ import {
Typography,
useTheme,
} from "@mui/material";
import React, { useCallback, useState, useEffect } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { CommentEditor } from "./CommentEditor";
import {
AuthorTextComment,
CardContentContainerComment,
CommentActionButtonRow,
CommentDateText,
EditReplyButton,
StyledCardComment,
} from "./Comments-styles";
import { StyledCardHeaderComment } from "./Comments-styles";
import { StyledCardColComment } from "./Comments-styles";
import { AuthorTextComment } from "./Comments-styles";
import {
StyledCardContentComment,
LoadMoreCommentsButton as CommentActionButton,
StyledCardColComment,
StyledCardComment,
StyledCardContentComment,
StyledCardHeaderComment,
} from "./Comments-styles";
import { useSelector } from "react-redux";
import { RootState } from "../../../state/store";
import Portal from "../Portal";
import { formatDate } from "../../../utils/time";
import { ThemeButton } from "../../../pages/Home/Home-styles.tsx";
interface CommentProps {
comment: any;
postId: string;
@ -69,12 +68,15 @@ export const Comment = ({
onClose={() => setCurrentEdit(null)}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
maxWidth={false}
>
<DialogTitle id="alert-dialog-title"></DialogTitle>
<DialogTitle id="alert-dialog-title" sx={{ fontSize: "30px" }}>
Edit Comment
</DialogTitle>
<DialogContent>
<Box
sx={{
width: "300px",
width: "1000px",
display: "flex",
justifyContent: "center",
}}
@ -90,9 +92,12 @@ export const Comment = ({
</Box>
</DialogContent>
<DialogActions>
<Button variant="contained" onClick={() => setCurrentEdit(null)}>
<ThemeButton
variant="contained"
onClick={() => setCurrentEdit(null)}
>
Close
</Button>
</ThemeButton>
</DialogActions>
</Dialog>
</Portal>
@ -125,13 +130,15 @@ export const Comment = ({
</Typography>
)}
<CommentActionButtonRow>
<CommentActionButton
size="small"
variant="contained"
onClick={() => setIsReplying(true)}
>
reply
</CommentActionButton>
{user?.name !== comment?.name && (
<CommentActionButton
size="small"
variant="contained"
onClick={() => setIsReplying(true)}
>
reply
</CommentActionButton>
)}
{user?.name === comment?.name && (
<CommentActionButton
size="small"

29
src/components/common/Comments/CommentEditor.tsx
View File

@ -1,10 +1,8 @@
import { Box, Button, TextField } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../state/store";
import ShortUniqueId from "short-unique-id";
import { setNotification } from "../../../state/features/notificationsSlice";
import { toBase64 } from "../../../utils/toBase64";
import localforage from "localforage";
import {
CommentInput,
@ -12,6 +10,9 @@ import {
SubmitCommentButton,
} from "./Comments-styles";
import { QSUPPORT_COMMENT_BASE } from "../../../constants/Identifiers.ts";
import { sendQchatDM } from "../../../utils/qortalRequests.ts";
import { maxCommentLength } from "../../../constants/Misc.ts";
const uid = new ShortUniqueId();
const notification = localforage.createInstance({
@ -123,7 +124,6 @@ export const CommentEditor = ({
let address;
let name;
let errorMsg = "";
address = user?.address;
name = user?.name || "";
@ -134,8 +134,8 @@ export const CommentEditor = ({
errorMsg = "Cannot post without a name";
}
if (value.length > 200) {
errorMsg = "Comment needs to be under 200 characters";
if (value.length > maxCommentLength) {
errorMsg = `Comment needs to be under ${maxCommentLength} characters`;
}
if (errorMsg) {
@ -157,6 +157,7 @@ export const CommentEditor = ({
data64: base64,
identifier: identifier,
});
dispatch(
setNotification({
msg: "Comment successfully published",
@ -171,7 +172,19 @@ export const CommentEditor = ({
postName: postName,
});
}
if (!isReply && !isEdit) {
// const notificationMessage = `This is an automated Q-Support notification indicating that someone has commented on your issue here:
// qortal://APP/Q-Support/issue/${postName}/${postId}
//
// Here are the first ${maxNotificationLength} characters of the comment:
//
// ${value.substring(0, maxNotificationLength)}`;
const notificationMessage = `This is an automated Q-Support notification indicating that someone has commented on your issue here:
qortal://APP/Q-Support/issue/${postName}/${postId}`;
await sendQchatDM(postName, notificationMessage);
}
return resourceResponse;
} catch (error: any) {
let notificationObj: any = null;
@ -236,11 +249,11 @@ export const CommentEditor = ({
id="standard-multiline-flexible"
label="Your comment"
multiline
maxRows={4}
maxRows={10}
variant="filled"
value={value}
inputProps={{
maxLength: 200,
maxLength: maxCommentLength,
}}
InputLabelProps={{ style: { fontSize: "18px" } }}
onChange={e => setValue(e.target.value)}
@ -252,3 +265,5 @@ export const CommentEditor = ({
</CommentInputContainer>
);
};
const sendDMwithComment = () => {};

18
src/components/common/Comments/Comments-styles.tsx
View File

@ -1,5 +1,6 @@
import { styled } from "@mui/system";
import { Card, Box, Typography, Button, TextField } from "@mui/material";
import { Box, Button, Card, TextField, Typography } from "@mui/material";
import { ThemeButton } from "../../../pages/Home/Home-styles.tsx";
export const StyledCard = styled(Card)(({ theme }) => ({
backgroundColor:
@ -93,7 +94,7 @@ export const StyledCardComment = styled(Typography)(({ theme }) => ({
fontWeight: 400,
color: theme.palette.text.primary,
fontSize: "19px",
wordBreak: "break-word"
wordBreak: "break-word",
}));
export const TitleText = styled(Typography)({
@ -200,13 +201,10 @@ export const EditReplyButton = styled(Button)(({ theme }) => ({
color: "#ffffff",
}));
export const LoadMoreCommentsButton = styled(Button)(({ theme }) => ({
export const LoadMoreCommentsButton = styled(ThemeButton)(({ theme }) => ({
fontFamily: "Montserrat",
fontWeight: 400,
letterSpacing: "0.2px",
fontSize: "15px",
backgroundColor: theme.palette.primary.main,
color: "#ffffff",
}));
export const CommentActionButtonRow = styled(Box)({
@ -234,8 +232,7 @@ export const CommentInputContainer = styled(Box)({
display: "flex",
flexDirection: "column",
marginTop: "15px",
width: "90%",
maxWidth: "1000px",
width: "100%",
borderRadius: "8px",
gap: "10px",
alignItems: "center",
@ -270,12 +267,9 @@ export const CommentInput = styled(TextField)(({ theme }) => ({
},
}));
export const SubmitCommentButton = styled(Button)(({ theme }) => ({
export const SubmitCommentButton = styled(ThemeButton)(({ theme }) => ({
fontFamily: "Montserrat",
fontWeight: 400,
letterSpacing: "0.2px",
fontSize: "15px",
backgroundColor: theme.palette.primary.main,
color: "#ffffff",
width: "75%",
}));

892
src/components/common/FileElement.tsx
View File

@ -1,446 +1,446 @@
import * as React from "react";
import { styled, useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useDispatch, useSelector } from "react-redux";
import { CircularProgress } from "@mui/material";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import { MyContext } from "../../wrappers/DownloadWrapper";
import { RootState } from "../../state/store";
import { setNotification } from "../../state/features/notificationsSlice";
const Widget = styled("div")(({ theme }) => ({
padding: 8,
borderRadius: 10,
maxWidth: 350,
position: "relative",
zIndex: 1,
backdropFilter: "blur(40px)",
background: "skyblue",
transition: "0.2s all",
"&:hover": {
opacity: 0.75,
},
}));
const CoverImage = styled("div")({
width: 40,
height: 40,
objectFit: "cover",
overflow: "hidden",
flexShrink: 0,
borderRadius: 8,
backgroundColor: "rgba(0,0,0,0.08)",
"& > img": {
width: "100%",
},
});
interface IAudioElement {
title: string;
description?: string;
author?: string;
fileInfo?: any;
postId?: string;
user?: string;
children?: React.ReactNode;
mimeType?: string;
disable?: boolean;
mode?: string;
otherUser?: string;
customStyles?: any;
jsonId:string;
}
interface CustomWindow extends Window {
showSaveFilePicker: any; // Replace 'any' with the appropriate type if you know it
}
const customWindow = window as unknown as CustomWindow;
export default function FileElement({
title,
description,
author,
fileInfo,
children,
mimeType,
disable,
customStyles,
jsonId
}: IAudioElement) {
const { downloadVideo } = React.useContext(MyContext);
const [startedDownload, setStartedDownload] = React.useState<boolean>(false)
const [isLoading, setIsLoading] = React.useState<boolean>(false);
const [fileProperties, setFileProperties] = React.useState<any>(null);
const [downloadLoader, setDownloadLoader] = React.useState<any>(false);
const downloads = useSelector((state: RootState) => state.global?.downloads);
const status = React.useRef<null | string>(null)
const hasCommencedDownload = React.useRef(false);
const dispatch = useDispatch();
const reDownload = React.useRef<boolean>(false)
const isFetchingProperties = React.useRef<boolean>(false)
const download = React.useMemo(() => {
if (!downloads || !fileInfo?.identifier) return {};
const findDownload = downloads[fileInfo?.identifier];
if (!findDownload) return {};
return findDownload;
}, [downloads, fileInfo]);
const resourceStatus = React.useMemo(() => {
return download?.status || {};
}, [download]);
const retryDownload = React.useRef(0);
const handlePlay = async () => {
if (disable) return;
hasCommencedDownload.current = true;
setStartedDownload(true)
if (
resourceStatus?.status === "READY"
) {
if (downloadLoader) return;
setDownloadLoader(true);
let filename = download?.properties?.filename
let mimeType = download?.properties?.type
try {
const { name, service, identifier } = fileInfo;
const res = await qortalRequest({
action: "GET_QDN_RESOURCE_PROPERTIES",
name: name,
service: service,
identifier: identifier,
});
filename = res?.filename || filename;
mimeType = res?.mimeType || mimeType;
} catch (error) {
}
try {
const { name, service, identifier } = fileInfo;
const url = `/arbitrary/${service}/${name}/${identifier}`;
fetch(url)
.then(response => response.blob())
.then(async blob => {
await qortalRequest({
action: "SAVE_FILE",
blob,
filename: filename,
mimeType,
});
})
.catch(error => {
console.error("Error fetching the video:", error);
});
} catch (error: any) {
let notificationObj: any = null;
if (typeof error === "string") {
notificationObj = {
msg: error || "Failed to send message",
alertType: "error",
};
} else if (typeof error?.error === "string") {
notificationObj = {
msg: error?.error || "Failed to send message",
alertType: "error",
};
} else {
notificationObj = {
msg: error?.message || "Failed to send message",
alertType: "error",
};
}
if (!notificationObj) return;
dispatch(setNotification(notificationObj));
} finally {
setDownloadLoader(false);
}
return;
}
const { name, service, identifier } = fileInfo;
setIsLoading(true);
downloadVideo({
name,
service,
identifier,
properties: {
...fileInfo,
jsonId
},
});
};
const refetch = React.useCallback(async () => {
if (!fileInfo) return
try {
const { name, service, identifier } = fileInfo;
isFetchingProperties.current = true
await qortalRequest({
action: 'GET_QDN_RESOURCE_PROPERTIES',
name,
service,
identifier
})
} catch (error) {
} finally {
isFetchingProperties.current = false
}
}, [fileInfo])
const refetchInInterval = ()=> {
try {
const interval = setInterval(()=> {
if(status?.current === 'DOWNLOADED'){
refetch()
}
if(status?.current === 'READY'){
clearInterval(interval);
}
}, 7500)
} catch (error) {
}
}
React.useEffect(() => {
if(resourceStatus?.status){
status.current = resourceStatus?.status
}
if (
resourceStatus?.status === 'DOWNLOADED' &&
reDownload?.current === false
) {
refetchInInterval()
reDownload.current = true
}
}, [resourceStatus])
React.useEffect(() => {
if (
resourceStatus?.status === "READY" &&
download?.url &&
download?.properties?.filename &&
hasCommencedDownload.current
) {
setIsLoading(false);
dispatch(
setNotification({
msg: "Download completed. Click to save file",
alertType: "info",
})
);
}
}, [resourceStatus, download]);
return (
<Box
onClick={handlePlay}
sx={{
width: "100%",
overflow: "hidden",
position: "relative",
cursor: "pointer",
...(customStyles || {}),
}}
>
{children && (
<Box
sx={{
display: "flex",
alignItems: "center",
position: "relative",
gap: "7px",
}}
>
{children}{" "}
{((resourceStatus.status && resourceStatus?.status !== "READY") ||
isLoading) && startedDownload ? (
<>
<CircularProgress color="secondary" size={14} />
<Typography variant="body2">{`${Math.round(
resourceStatus?.percentLoaded || 0
).toFixed(0)}% loaded`}</Typography>
</>
) : resourceStatus?.status === "READY" ? (
<>
<Typography
sx={{
fontSize: "14px",
}}
>
Ready to save: click here
</Typography>
{downloadLoader && (
<CircularProgress color="secondary" size={14} />
)}
</>
) : null}
</Box>
)}
{!children && (
<Widget>
<Box sx={{ display: "flex", alignItems: "center" }}>
<CoverImage>
<AttachFileIcon
sx={{
width: "90%",
height: "auto",
}}
/>
</CoverImage>
<Box sx={{ ml: 1.5, minWidth: 0 }}>
<Typography
variant="caption"
color="text.secondary"
fontWeight={500}
>
{author}
</Typography>
<Typography
noWrap
sx={{
fontSize: "16px",
}}
>
<b>{title}</b>
</Typography>
<Typography
noWrap
letterSpacing={-0.25}
sx={{
fontSize: "14px",
}}
>
{description}
</Typography>
{mimeType && (
<Typography
noWrap
letterSpacing={-0.25}
sx={{
fontSize: "12px",
}}
>
{mimeType}
</Typography>
)}
</Box>
</Box>
{((resourceStatus.status && resourceStatus?.status !== "READY") ||
isLoading) && startedDownload && (
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
display="flex"
justifyContent="center"
alignItems="center"
zIndex={4999}
bgcolor="rgba(0, 0, 0, 0.6)"
sx={{
display: "flex",
flexDirection: "column",
gap: "10px",
padding: "8px",
borderRadius: "10px",
}}
>
<CircularProgress color="secondary" />
{resourceStatus && (
<Typography
variant="subtitle2"
component="div"
sx={{
color: "white",
fontSize: "14px",
}}
>
{resourceStatus?.status === "REFETCHING" ? (
<>
<>
{(
(resourceStatus?.localChunkCount /
resourceStatus?.totalChunkCount) *
100
)?.toFixed(0)}
%
</>
<> Refetching in 2 minutes</>
</>
) : resourceStatus?.status === "DOWNLOADED" ? (
<>Download Completed: building file...</>
) : resourceStatus?.status !== "READY" ? (
<>
{(
(resourceStatus?.localChunkCount /
resourceStatus?.totalChunkCount) *
100
)?.toFixed(0)}
%
</>
) : (
<>Download Completed: fetching file...</>
)}
</Typography>
)}
</Box>
)}
{resourceStatus?.status === "READY" &&
download?.url &&
download?.properties?.filename && (
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
display="flex"
justifyContent="center"
alignItems="center"
zIndex={4999}
bgcolor="rgba(0, 0, 0, 0.6)"
sx={{
display: "flex",
flexDirection: "row",
gap: "10px",
padding: "8px",
borderRadius: "10px",
}}
>
<Typography
variant="subtitle2"
component="div"
sx={{
color: "white",
fontSize: "14px",
}}
>
Ready to save: click here
</Typography>
{downloadLoader && (
<CircularProgress color="secondary" size={14} />
)}
</Box>
)}
</Widget>
)}
</Box>
);
}
import * as React from "react";
import { styled, useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useDispatch, useSelector } from "react-redux";
import { CircularProgress } from "@mui/material";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import { MyContext } from "../../wrappers/DownloadWrapper";
import { RootState } from "../../state/store";
import { setNotification } from "../../state/features/notificationsSlice";
const Widget = styled("div")(({ theme }) => ({
padding: 8,
borderRadius: 10,
maxWidth: 350,
position: "relative",
zIndex: 1,
backdropFilter: "blur(40px)",
background: "skyblue",
transition: "0.2s all",
"&:hover": {
opacity: 0.75,
},
}));
const CoverImage = styled("div")({
width: 40,
height: 40,
objectFit: "cover",
overflow: "hidden",
flexShrink: 0,
borderRadius: 8,
backgroundColor: "rgba(0,0,0,0.08)",
"& > img": {
width: "100%",
},
});
interface IAudioElement {
title: string;
description?: string;
author?: string;
fileInfo?: any;
postId?: string;
user?: string;
children?: React.ReactNode;
mimeType?: string;
disable?: boolean;
mode?: string;
otherUser?: string;
customStyles?: any;
jsonId:string;
}
interface CustomWindow extends Window {
showSaveFilePicker: any; // Replace 'any' with the appropriate type if you know it
}
const customWindow = window as unknown as CustomWindow;
export default function FileElement({
title,
description,
author,
fileInfo,
children,
mimeType,
disable,
customStyles,
jsonId
}: IAudioElement) {
const { downloadVideo } = React.useContext(MyContext);
const [startedDownload, setStartedDownload] = React.useState<boolean>(false)
const [isLoading, setIsLoading] = React.useState<boolean>(false);
const [fileProperties, setFileProperties] = React.useState<any>(null);
const [downloadLoader, setDownloadLoader] = React.useState<any>(false);
const downloads = useSelector((state: RootState) => state.global?.downloads);
const status = React.useRef<null | string>(null)
const hasCommencedDownload = React.useRef(false);
const dispatch = useDispatch();
const reDownload = React.useRef<boolean>(false)
const isFetchingProperties = React.useRef<boolean>(false)
const download = React.useMemo(() => {
if (!downloads || !fileInfo?.identifier) return {};
const findDownload = downloads[fileInfo?.identifier];
if (!findDownload) return {};
return findDownload;
}, [downloads, fileInfo]);
const resourceStatus = React.useMemo(() => {
return download?.status || {};
}, [download]);
const retryDownload = React.useRef(0);
const handlePlay = async () => {
if (disable) return;
hasCommencedDownload.current = true;
setStartedDownload(true)
if (
resourceStatus?.status === "READY"
) {
if (downloadLoader) return;
setDownloadLoader(true);
let filename = download?.properties?.filename
let mimeType = download?.properties?.type
try {
const { name, service, identifier } = fileInfo;
const res = await qortalRequest({
action: "GET_QDN_RESOURCE_PROPERTIES",
name: name,
service: service,
identifier: identifier,
});
filename = res?.filename || filename;
mimeType = res?.mimeType || mimeType;
} catch (error) {
}
try {
const { name, service, identifier } = fileInfo;
const url = `/arbitrary/${service}/${name}/${identifier}`;
fetch(url)
.then(response => response.blob())
.then(async blob => {
await qortalRequest({
action: "SAVE_FILE",
blob,
filename: filename,
mimeType,
});
})
.catch(error => {
console.error("Error fetching the video:", error);
});
} catch (error: any) {
let notificationObj: any = null;
if (typeof error === "string") {
notificationObj = {
msg: error || "Failed to send message",
alertType: "error",
};
} else if (typeof error?.error === "string") {
notificationObj = {
msg: error?.error || "Failed to send message",
alertType: "error",
};
} else {
notificationObj = {
msg: error?.message || "Failed to send message",
alertType: "error",
};
}
if (!notificationObj) return;
dispatch(setNotification(notificationObj));
} finally {
setDownloadLoader(false);
}
return;
}
const { name, service, identifier } = fileInfo;
setIsLoading(true);
downloadVideo({
name,
service,
identifier,
properties: {
...fileInfo,
jsonId
},
});
};
const refetch = React.useCallback(async () => {
if (!fileInfo) return
try {
const { name, service, identifier } = fileInfo;
isFetchingProperties.current = true
await qortalRequest({
action: 'GET_QDN_RESOURCE_PROPERTIES',
name,
service,
identifier
})
} catch (error) {
} finally {
isFetchingProperties.current = false
}
}, [fileInfo])
const refetchInInterval = ()=> {
try {
const interval = setInterval(()=> {
if(status?.current === 'DOWNLOADED'){
refetch()
}
if(status?.current === 'READY'){
clearInterval(interval);
}
}, 7500)
} catch (error) {
}
}
React.useEffect(() => {
if(resourceStatus?.status){
status.current = resourceStatus?.status
}
if (
resourceStatus?.status === 'DOWNLOADED' &&
reDownload?.current === false
) {
refetchInInterval()
reDownload.current = true
}
}, [resourceStatus])
React.useEffect(() => {
if (
resourceStatus?.status === "READY" &&
download?.url &&
download?.properties?.filename &&
hasCommencedDownload.current
) {
setIsLoading(false);
dispatch(
setNotification({
msg: "Download completed. Click to save file",
alertType: "info",
})
);
}
}, [resourceStatus, download]);
return (
<Box
onClick={handlePlay}
sx={{
width: "100%",
overflow: "hidden",
position: "relative",
cursor: "pointer",
...(customStyles || {}),
}}
>
{children && (
<Box
sx={{
display: "flex",
alignItems: "center",
position: "relative",
gap: "7px",
}}
>
{children}{" "}
{((resourceStatus.status && resourceStatus?.status !== "READY") ||
isLoading) && startedDownload ? (
<>
<CircularProgress color="secondary" size={14} />
<Typography variant="body2">{`${Math.round(
resourceStatus?.percentLoaded || 0
).toFixed(0)}% loaded`}</Typography>
</>
) : resourceStatus?.status === "READY" ? (
<>
<Typography
sx={{
fontSize: "14px",
}}
>
Ready to save: click here
</Typography>
{downloadLoader && (
<CircularProgress color="secondary" size={14} />
)}
</>
) : null}
</Box>
)}
{!children && (
<Widget>
<Box sx={{ display: "flex", alignItems: "center" }}>
<CoverImage>
<AttachFileIcon
sx={{
width: "90%",
height: "auto",
}}
/>
</CoverImage>
<Box sx={{ ml: 1.5, minWidth: 0 }}>
<Typography
variant="caption"
color="text.secondary"
fontWeight={500}
>
{author}
</Typography>
<Typography
noWrap
sx={{
fontSize: "16px",
}}
>
<b>{title}</b>
</Typography>
<Typography
noWrap
letterSpacing={-0.25}
sx={{
fontSize: "14px",
}}
>
{description}
</Typography>
{mimeType && (
<Typography
noWrap
letterSpacing={-0.25}
sx={{
fontSize: "12px",
}}
>
{mimeType}
</Typography>
)}
</Box>
</Box>
{((resourceStatus.status && resourceStatus?.status !== "READY") ||
isLoading) && startedDownload && (
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
display="flex"
justifyContent="center"
alignItems="center"
zIndex={4999}
bgcolor="rgba(0, 0, 0, 0.6)"
sx={{
display: "flex",
flexDirection: "column",
gap: "10px",
padding: "8px",
borderRadius: "10px",
}}
>
<CircularProgress color="secondary" />
{resourceStatus && (
<Typography
variant="subtitle2"
component="div"
sx={{
color: "white",
fontSize: "14px",
}}
>
{resourceStatus?.status === "REFETCHING" ? (
<>
<>
{(
(resourceStatus?.localChunkCount /
resourceStatus?.totalChunkCount) *
100
)?.toFixed(0)}
%
</>
<> Refetching in 2 minutes</>
</>
) : resourceStatus?.status === "DOWNLOADED" ? (
<>Download Completed: building file...</>
) : resourceStatus?.status !== "READY" ? (
<>
{(
(resourceStatus?.localChunkCount /
resourceStatus?.totalChunkCount) *
100
)?.toFixed(0)}
%
</>
) : (
<>Download Completed: fetching file...</>
)}
</Typography>
)}
</Box>
)}
{resourceStatus?.status === "READY" &&
download?.url &&
download?.properties?.filename && (
<Box
position="absolute"
top={0}
left={0}
right={0}
bottom={0}
display="flex"
justifyContent="center"
alignItems="center"
zIndex={4999}
bgcolor="rgba(0, 0, 0, 0.6)"
sx={{
display: "flex",
flexDirection: "row",
gap: "10px",
padding: "8px",
borderRadius: "10px",
}}
>
<Typography
variant="subtitle2"
component="div"
sx={{
color: "white",
fontSize: "14px",
}}
>
Ready to save: click here
</Typography>
{downloadLoader && (
<CircularProgress color="secondary" size={14} />
)}
</Box>
)}
</Widget>
)}
</Box>
);
}

1
src/components/common/ImagePublisher/ImagePublisher-styles.tsx
View File

@ -11,6 +11,7 @@ export const AddCoverImageButton = styled(Button)(({ theme }) => ({
fontWeight: 400,
letterSpacing: "0.2px",
color: theme.palette.text.primary,
width: "170px",
backgroundColor: "#44c4ff",
"&:hover": { backgroundColor: "#01a9e9" },
gap: "5px",

1
src/components/common/ImagePublisher/ImageUploader.tsx
View File

@ -98,6 +98,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
{...getRootProps()}
sx={{
display: "flex",
width: "170px",
}}
>
<input {...getInputProps()} />

61
src/components/common/IssueIcon.tsx Normal file
View File

@ -0,0 +1,61 @@
import AttachFileIcon from "@mui/icons-material/AttachFile";
import React, { CSSProperties } from "react";
interface IssueIconProps {
iconSrc: string;
showBackupIcon?: boolean;
style?: CSSProperties;
}
export const IssueIcon = ({
iconSrc,
showBackupIcon = true,
style,
}: IssueIconProps) => {
const displayFileIcon = !iconSrc && showBackupIcon;
return (
<>
{iconSrc && (
<img
src={iconSrc}
width="50px"
height="50px"
style={{
borderRadius: "5px",
...style,
}}
/>
)}
{displayFileIcon && (
<AttachFileIcon
sx={{
...style,
width: "40px",
height: "40px",
}}
/>
)}
</>
);
};
interface IssueIconsProps {
iconSources: string[];
showBackupIcon?: boolean;
style?: CSSProperties;
}
export const IssueIcons = ({
iconSources,
showBackupIcon = true,
style,
}: IssueIconsProps) => {
return iconSources.map((icon, index) => (
<IssueIcon
key={icon + index}
iconSrc={icon}
style={{ ...style }}
showBackupIcon={showBackupIcon}
/>
));
};

96
src/components/common/LazyLoad.tsx
View File

@ -1,48 +1,48 @@
import React, { useState, useEffect, useRef } from 'react'
import { useInView } from 'react-intersection-observer'
import CircularProgress from '@mui/material/CircularProgress'
interface Props {
onLoadMore: () => Promise<void>
isLoading?: boolean
}
const LazyLoad: React.FC<Props> = ({ onLoadMore, isLoading }) => {
const [isFetching, setIsFetching] = useState<boolean>(false)
const firstLoad = useRef(false)
const [ref, inView] = useInView({
threshold: 0.7
})
useEffect(() => {
if (inView) {
setIsFetching(true)
onLoadMore().finally(() => {
setIsFetching(false)
firstLoad.current = true
})
}
}, [inView])
return (
<div
ref={ref}
style={{
display: 'flex',
justifyContent: 'center',
minHeight: '25px'
}}
>
<div
style={{
visibility: (isFetching || isLoading) ? 'visible' : 'hidden'
}}
>
<CircularProgress />
</div>
</div>
)
}
export default LazyLoad
import React, { useState, useEffect, useRef } from 'react'
import { useInView } from 'react-intersection-observer'
import CircularProgress from '@mui/material/CircularProgress'
interface Props {
onLoadMore: () => Promise<void>
isLoading?: boolean
}
const LazyLoad: React.FC<Props> = ({ onLoadMore, isLoading }) => {
const [isFetching, setIsFetching] = useState<boolean>(false)
const firstLoad = useRef(false)
const [ref, inView] = useInView({
threshold: 0.7
})
useEffect(() => {
if (inView) {
setIsFetching(true)
onLoadMore().finally(() => {
setIsFetching(false)
firstLoad.current = true
})
}
}, [inView])
return (
<div
ref={ref}
style={{
display: 'flex',
justifyContent: 'center',
minHeight: '25px'
}}
>
<div
style={{
visibility: (isFetching || isLoading) ? 'visible' : 'hidden'
}}
>
<CircularProgress />
</div>
</div>
)
}
export default LazyLoad

172
src/components/common/Notification/Notification.tsx
View File

@ -1,86 +1,86 @@
import { useDispatch, useSelector } from 'react-redux'
import { toast, ToastContainer, Zoom, Slide } from 'react-toastify'
import { removeNotification } from '../../../state/features/notificationsSlice'
import 'react-toastify/dist/ReactToastify.css'
import { RootState } from '../../../state/store'
const Notification = () => {
const dispatch = useDispatch()
const { alertTypes } = useSelector((state: RootState) => state.notifications)
if (alertTypes.alertError) {
toast.error(`❌ ${alertTypes?.alertError}`, {
position: 'bottom-right',
autoClose: 4000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
icon: false
})
dispatch(removeNotification())
}
if (alertTypes.alertSuccess) {
toast.success(`✔️ ${alertTypes?.alertSuccess}`, {
position: 'bottom-right',
autoClose: 4000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
icon: false
})
dispatch(removeNotification())
}
if (alertTypes.alertInfo) {
toast.info(`${alertTypes?.alertInfo}`, {
position: 'top-right',
autoClose: 1300,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: 'light'
})
dispatch(removeNotification())
}
if (alertTypes.alertInfo) {
return (
<ToastContainer
position="top-right"
autoClose={2000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light"
toastStyle={{ fontSize: '16px' }}
transition={Slide}
/>
)
}
return (
<ToastContainer
transition={Zoom}
position="bottom-right"
autoClose={false}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
draggable
pauseOnHover
/>
)
}
export default Notification
import { useDispatch, useSelector } from 'react-redux'
import { toast, ToastContainer, Zoom, Slide } from 'react-toastify'
import { removeNotification } from '../../../state/features/notificationsSlice'
import 'react-toastify/dist/ReactToastify.css'
import { RootState } from '../../../state/store'
const Notification = () => {
const dispatch = useDispatch()
const { alertTypes } = useSelector((state: RootState) => state.notifications)
if (alertTypes.alertError) {
toast.error(`❌ ${alertTypes?.alertError}`, {
position: 'bottom-right',
autoClose: 4000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
icon: false
})
dispatch(removeNotification())
}
if (alertTypes.alertSuccess) {
toast.success(`✔️ ${alertTypes?.alertSuccess}`, {
position: 'bottom-right',
autoClose: 4000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
icon: false
})
dispatch(removeNotification())
}
if (alertTypes.alertInfo) {
toast.info(`${alertTypes?.alertInfo}`, {
position: 'top-right',
autoClose: 1300,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: 'light'
})
dispatch(removeNotification())
}
if (alertTypes.alertInfo) {
return (
<ToastContainer
position="top-right"
autoClose={2000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light"
toastStyle={{ fontSize: '16px' }}
transition={Slide}
/>
)
}
return (
<ToastContainer
transition={Zoom}
position="bottom-right"
autoClose={false}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
draggable
pauseOnHover
/>
)
}
export default Notification

86
src/components/common/PageLoader.tsx
View File

@ -1,43 +1,43 @@
import React from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/system/Box';
import { useTheme } from '@mui/material'
interface PageLoaderProps {
size?: number
thickness?: number
}
const PageLoader: React.FC<PageLoaderProps> = ({
size = 40,
thickness = 5
}) => {
const theme = useTheme()
return (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
width: '100%',
position: 'fixed',
top: 0,
left: 0,
backgroundColor: 'rgba(255, 255, 255, 0.25)',
zIndex: 1000
}}
>
<CircularProgress
size={size}
thickness={thickness}
sx={{
color: theme.palette.secondary.main
}}
/>
</Box>
)
}
export default PageLoader;
import React from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/system/Box';
import { useTheme } from '@mui/material'
interface PageLoaderProps {
size?: number
thickness?: number
}
const PageLoader: React.FC<PageLoaderProps> = ({
size = 40,
thickness = 5
}) => {
const theme = useTheme()
return (
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
width: '100%',
position: 'fixed',
top: 0,
left: 0,
backgroundColor: 'rgba(255, 255, 255, 0.25)',
zIndex: 1000
}}
>
<CircularProgress
size={size}
thickness={thickness}
sx={{
color: theme.palette.secondary.main
}}
/>
</Box>
)
}
export default PageLoader;

50
src/components/common/Portal.tsx
View File

@ -1,25 +1,25 @@
import React, { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
interface PortalProps {
children: React.ReactNode
}
const Portal: React.FC<PortalProps> = ({ children }) => {
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
return () => setMounted(false)
}, [])
return mounted
? createPortal(
children,
document.querySelector('#modal-root') as HTMLElement
)
: null
}
export default Portal
import React, { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
interface PortalProps {
children: React.ReactNode
}
const Portal: React.FC<PortalProps> = ({ children }) => {
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
return () => setMounted(false)
}, [])
return mounted
? createPortal(
children,
document.querySelector('#modal-root') as HTMLElement
)
: null
}
export default Portal

80
src/components/common/TextEditor/DisplayHtml.tsx
View File

@ -1,40 +1,40 @@
import { useMemo } from "react";
import DOMPurify from "dompurify";
import "react-quill/dist/quill.snow.css";
import "react-quill/dist/quill.core.css";
import "react-quill/dist/quill.bubble.css";
import { convertQortalLinks } from "./utils";
import { Box, styled } from "@mui/material";
const CrowdfundInlineContent = styled(Box)(({ theme }) => ({
display: "flex",
fontFamily: "Mulish",
fontSize: "19px",
fontWeight: 400,
letterSpacing: 0,
color: theme.palette.text.primary,
width: '100%'
}));
export const DisplayHtml = ({ html }) => {
const cleanContent = useMemo(() => {
if (!html) return null;
const sanitize: string = DOMPurify.sanitize(html, {
USE_PROFILES: { html: true },
});
const anchorQortal = convertQortalLinks(sanitize);
return anchorQortal;
}, [html]);
if (!cleanContent) return null;
return (
<CrowdfundInlineContent>
<div
className="ql-editor"
dangerouslySetInnerHTML={{ __html: cleanContent }}
/>
</CrowdfundInlineContent>
);
};
import { useMemo } from "react";
import DOMPurify from "dompurify";
import "react-quill/dist/quill.snow.css";
import "react-quill/dist/quill.core.css";
import "react-quill/dist/quill.bubble.css";
import { convertQortalLinks } from "./utils";
import { Box, styled } from "@mui/material";
const CrowdfundInlineContent = styled(Box)(({ theme }) => ({
display: "flex",
fontFamily: "Mulish",
fontSize: "19px",
fontWeight: 400,
letterSpacing: 0,
color: theme.palette.text.primary,
width: '100%'
}));
export const DisplayHtml = ({ html }) => {
const cleanContent = useMemo(() => {
if (!html) return null;
const sanitize: string = DOMPurify.sanitize(html, {
USE_PROFILES: { html: true },
});
const anchorQortal = convertQortalLinks(sanitize);
return anchorQortal;
}, [html]);
if (!cleanContent) return null;
return (
<CrowdfundInlineContent>
<div
className="ql-editor"
dangerouslySetInnerHTML={{ __html: cleanContent }}
/>
</CrowdfundInlineContent>
);
};

50
src/components/common/TextEditor/utils.ts
View File

@ -1,26 +1,26 @@
export function convertQortalLinks(inputHtml) {
// Regular expression to match 'qortal://...' URLs.
// This will stop at the first whitespace, comma, or HTML tag
var regex = /(qortal:\/\/[^\s,<]+)/g;
// Replace matches in inputHtml with formatted anchor tag
var outputHtml = inputHtml.replace(regex, function (match) {
return `<a href="${match}" className="qortal-link">${match}</a>`;
});
return outputHtml;
}
export function extractTextFromHTML(htmlString: any, length = 150) {
// Create a temporary DOM element
const tempDiv = document.createElement("div");
// Replace br tags and block-level tags with a space before setting the HTML content
const htmlWithSpaces = htmlString.replace(/<\/?(br|p|div|h[1-6]|ul|ol|li|blockquote)[^>]*>/gi, ' ');
tempDiv.innerHTML = htmlWithSpaces;
// Extract the text content
let text = tempDiv.textContent || tempDiv.innerText || "";
// Replace multiple spaces with a single space and trim
text = text.replace(/\s+/g, ' ').trim();
// Slice the text to the desired length
return text.slice(0, length);
export function convertQortalLinks(inputHtml) {
// Regular expression to match 'qortal://...' URLs.
// This will stop at the first whitespace, comma, or HTML tag
var regex = /(qortal:\/\/[^\s,<]+)/g;
// Replace matches in inputHtml with formatted anchor tag
var outputHtml = inputHtml.replace(regex, function (match) {
return `<a href="${match}" className="qortal-link">${match}</a>`;
});
return outputHtml;
}
export function extractTextFromHTML(htmlString: any, length = 150) {
// Create a temporary DOM element
const tempDiv = document.createElement("div");
// Replace br tags and block-level tags with a space before setting the HTML content
const htmlWithSpaces = htmlString.replace(/<\/?(br|p|div|h[1-6]|ul|ol|li|blockquote)[^>]*>/gi, ' ');
tempDiv.innerHTML = htmlWithSpaces;
// Extract the text content
let text = tempDiv.textContent || tempDiv.innerText || "";
// Replace multiple spaces with a single space and trim
text = text.replace(/\s+/g, ' ').trim();
// Slice the text to the desired length
return text.slice(0, length);
}

1714
src/components/common/VideoPlayer.tsx
View File

File diff suppressed because it is too large Load Diff

1296
src/components/common/VideoPlayerGlobal.tsx
View File

File diff suppressed because it is too large Load Diff

6
src/components/layout/Navbar/Navbar.tsx
View File

@ -22,7 +22,7 @@ import { useNavigate } from "react-router-dom";
import SearchIcon from "@mui/icons-material/Search";
import { DownloadTaskManager } from "../../common/DownloadTaskManager";
import QSupportLogo from "../../../assets/img/Q-SupportIcon.webp";
import QSupportIcon from "../../../assets/img/Q-SupportIcon(AlphaX).webp";
import { useDispatch, useSelector } from "react-redux";
import {
addFilteredFiles,
@ -32,6 +32,7 @@ import {
import { RootState } from "../../../state/store";
import { useWindowSize } from "../../../hooks/useWindowSize";
import { PublishIssue } from "../../PublishIssue/PublishIssue.tsx";
import { FeeHistoryModal } from "../../../constants/PublishFees/FeePricePublish/FeeHistoryModal.tsx";
interface Props {
isAuthenticated: boolean;
@ -114,7 +115,7 @@ const NavBar: React.FC<Props> = ({
}}
>
<img
src={QSupportLogo}
src={QSupportIcon}
style={{
width: "auto",
height: "100px",
@ -238,6 +239,7 @@ const NavBar: React.FC<Props> = ({
</Popover>
<DownloadTaskManager />
<FeeHistoryModal />
{theme.palette.mode === "dark" ? (
<LightModeIcon
onClickFunc={() => setTheme("light")}

48
src/constants/Categories/1stCategories.ts
View File

@ -1,48 +0,0 @@
import audioIcon from "../../assets/icons/audio.webp";
import bookIcon from "../../assets/icons/book.webp";
import documentIcon from "../../assets/icons/document.webp";
import gamingIcon from "../../assets/icons/gaming.webp";
import imageIcon from "../../assets/icons/image.webp";
import softwareIcon from "../../assets/icons/software.webp";
import unknownIcon from "../../assets/icons/unknown.webp";
import videoIcon from "../../assets/icons/video.webp";
import {
Categories,
Category,
CategoryData,
} from "../../components/common/CategoryList/CategoryList.tsx";
import {
getAllCategoriesWithIcons,
sortCategory,
} from "./CategoryFunctions.ts";
import { QappCategories, SupportState } from "./2ndCategories.ts";
export const firstCategories: Category[] = [
{ id: 1, name: "Core" },
{ id: 2, name: "UI" },
{ id: 3, name: "Q-Apps" },
{ id: 4, name: "Website" },
{ id: 5, name: "Marketing" },
{ id: 99, name: "Other" },
];
export const secondCategories: Categories = {
1: SupportState,
2: SupportState,
3: QappCategories,
4: SupportState,
5: SupportState,
99: SupportState,
};
export let thirdCategories: Categories = {};
QappCategories.map(
supportStateCategory =>
(thirdCategories[supportStateCategory.id] = SupportState)
);
export const allCategoryData: CategoryData = {
category: firstCategories,
subCategories: [secondCategories, thirdCategories],
};
export const iconCategories = getAllCategoriesWithIcons();

23
src/constants/Categories/2ndCategories.ts
View File

@ -1,23 +0,0 @@
import OpenIcon from "../../assets/icons/OpenIcon.png";
import ClosedIcon from "../../assets/icons/ClosedIcon.png";
import InProgressIcon from "../../assets/icons/InProgressIcon.png";
import CompleteIcon from "../../assets/icons/CompleteIcon.png";
export const SupportState = [
{ id: 101, name: "Open", icon: OpenIcon },
{ id: 102, name: "Closed", icon: ClosedIcon },
{ id: 103, name: "In Progress", icon: InProgressIcon },
{ id: 104, name: "Complete", icon: CompleteIcon },
];
export const QappCategories = [
{ id: 301, name: "Q-Blog" },
{ id: 302, name: "Q-Mail" },
{ id: 303, name: "Q-Shop" },
{ id: 304, name: "Q-Fund" },
{ id: 305, name: "Ear-Bump" },
{ id: 306, name: "Q-Tube" },
{ id: 307, name: "Q-Share" },
{ id: 308, name: "Q-Support" },
{ id: 399, name: "Other" },
];

0
src/constants/Categories/3rdCategories.ts
View File

67
src/constants/Categories/Categories.ts Normal file
View File

@ -0,0 +1,67 @@
import {
Categories,
Category,
CategoryData,
} from "../../components/common/CategoryList/CategoryList.tsx";
import { getAllCategoriesWithIcons } from "./CategoryFunctions.ts";
import CoreIcon from "../../assets/icons/Qortal-Core-Icon.webp";
import UIicon from "../../assets/icons/Qortal-UI-Icon.webp";
import QappIcon from "../../assets/icons/Q-App-Icon.webp";
import UnknownIcon from "../../assets/icons/unknown.webp";
import BugReportIcon from "../../assets/icons/Bug-Report-Icon.webp";
import FeatureRequestIcon from "../../assets/icons/Feature-Request-Icon.webp";
import TechSupportIcon from "../../assets/icons/Tech-Support-Icon.webp";
import OpenIcon from "../../assets/icons/Open-Icon.webp";
import ClosedIcon from "../../assets/icons/Closed-Icon.webp";
import InProgressIcon from "../../assets/icons/In-Progress-Icon.webp";
import CompleteIcon from "../../assets/icons/Complete-Icon.webp";
const issueLocationLabel = "Issue Location";
export const issueLocation: Category[] = [
{ id: 1, name: "Core", icon: CoreIcon, label: issueLocationLabel },
{ id: 2, name: "UI", icon: UIicon, label: issueLocationLabel },
{ id: 3, name: "Q-Apps/Websites", icon: QappIcon, label: issueLocationLabel },
{ id: 99, name: "Other", icon: UnknownIcon, label: issueLocationLabel },
];
const issueTypeLabel = "Issue Type";
export const issueType = [
{ id: 11, name: "Bug Report", icon: BugReportIcon, label: issueTypeLabel },
{
id: 12,
name: "Feature Request",
icon: FeatureRequestIcon,
label: issueTypeLabel,
},
{
id: 13,
name: "Tech Support",
icon: TechSupportIcon,
label: issueTypeLabel,
},
{ id: 19, name: "Other", icon: UnknownIcon, label: issueTypeLabel },
];
export const secondCategories: Categories = {};
issueLocation.map(c => (secondCategories[c.id] = issueType));
const issueLabel = "Issue State";
export const IssueState = [
{ id: 101, name: "Open", icon: OpenIcon, label: issueLabel },
{ id: 102, name: "Closed", icon: ClosedIcon, label: issueLabel },
{ id: 103, name: "In Progress", icon: InProgressIcon, label: issueLabel },
{ id: 104, name: "Complete", icon: CompleteIcon, label: issueLabel },
];
export const thirdCategories: Categories = {};
issueType.map(issueType => (thirdCategories[issueType.id] = IssueState));
export const allCategoryData: CategoryData = {
category: issueLocation,
subCategories: [secondCategories, thirdCategories],
};
export const iconCategories = getAllCategoriesWithIcons();

12
src/constants/Categories/CategoryFunctions.ts
View File

@ -2,7 +2,7 @@ import {
Category,
getCategoriesFromObject,
} from "../../components/common/CategoryList/CategoryList.tsx";
import { allCategoryData, iconCategories } from "./1stCategories.ts";
import { allCategoryData, iconCategories } from "./Categories.ts";
export const sortCategory = (a: Category, b: Category) => {
if (a.name === "Other") return 1;
@ -81,11 +81,9 @@ export const getAllCategoriesWithIcons = () => {
export const getIconsFromObject = (fileObj: any) => {
const categories = getCategoriesFromObject(fileObj);
const icons = categories
.map(categoryID => {
return iconCategories.find(category => category.id === +categoryID)?.icon;
})
.reverse();
const icons = categories.map(categoryID => {
return iconCategories.find(category => category.id === +categoryID)?.icon;
});
return icons.find(icon => icon !== undefined);
return icons.filter(icon => icon !== undefined);
};

2
src/constants/Identifiers.ts
View File

@ -1,4 +1,4 @@
const useTestIdentifiers = true;
export const useTestIdentifiers = false;
export const QSUPPORT_FILE_BASE = useTestIdentifiers
? "MYTEST_support_issue_"

7
src/constants/Misc.ts
View File

@ -3,3 +3,10 @@ export const titleFormatter = /[^a-zA-Z0-9\s-_!?()&'",.;:|—~@#$%^*+=<>]/g;
export const titleFormatterOnSave = /[^a-zA-Z0-9\s-_!()&',.;—~@#$%^+=]/g;
export const log = false;
export const fontSizeSmall = "80%";
export const fontSizeMedium = "100%";
export const fontSizeLarge = "120%";
export const fontSizeExLarge = "150%";
export const maxCommentLength = 10_000;
export const maxNotificationLength = 2000;

29
src/constants/PublishFees/FeeData.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Box } from "@mui/material";
import React from "react";
import { useTestIdentifiers } from "../Identifiers.ts";
export const appName = "Q-Support";
export const feeDestinationName = "Q-Support";
export const feeAmountBase = useTestIdentifiers ? 0.000001 : 0.25;
export const FEE_BASE = useTestIdentifiers
? "MYTEST_support_fees"
: "q_support_fees";
export const maxFeePublishTimeDiff = 10; // time in minutes before/after publish when fee is considered valid
export type FeeType = "default" | "comment" | "like" | "dislike" | "superlike";
export const feeDisclaimerString = `When Publishing (but not editing) Issues ${feeAmountBase} \n
QORT is requested to fund continued development of Q-Support.`;
export const feeDisclaimer = (
<Box
sx={{
fontSize: "28px",
color: "#f44336",
fontWeight: 600,
}}
>
{feeDisclaimerString}
</Box>
);

60
src/constants/PublishFees/FeePricePublish/DataTable.tsx Normal file
View File

@ -0,0 +1,60 @@
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import React from "react";
import { SxProps } from "@mui/material/styles";
export interface DataTableProps {
columnNames: string[];
data: string[][];
sx?: SxProps;
}
export const DataTable = ({ columnNames, data, sx }: DataTableProps) => {
return (
<TableContainer sx={{ ...sx }}>
<Table align="center" stickyHeader>
<TableHead>
<TableRow>
{columnNames.map((columnName, index) => (
<TableCell
sx={{
fontSize: "30px",
textAlign: "center",
fontWeight: "bold",
}}
key={columnName + index}
>
{columnName}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{data.map((tableRow, index) => {
return (
<TableRow key={tableRow.toString() + index}>
{tableRow.map((tableCell, index) => (
<TableCell
sx={{
fontSize: index === 0 ? "30px" : "25px",
fontWeight: index === 0 ? "bold" : "normal",
textAlign: "center",
}}
key={tableCell + index}
>
{tableCell}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
};

48
src/constants/PublishFees/FeePricePublish/FeeHistoryModal.tsx Normal file
View File

@ -0,0 +1,48 @@
import { Button, Modal, useTheme } from "@mui/material";
import { ThemeButton } from "../../../pages/Home/Home-styles.tsx";
import { appName } from "../FeeData.tsx";
import { ModalBody } from "./FeePricePublish-styles.tsx";
import { useEffect, useState } from "react";
import { userHasName } from "../VerifyPayment-Functions.ts";
import { FeeHistoryTable } from "./FeeHistoryTable.tsx";
export const FeeHistoryModal = () => {
const [open, setOpen] = useState<boolean>(false);
const [userOwnsApp, setUserOwnsApp] = useState<boolean>(false);
const theme = useTheme();
useEffect(() => {
userHasName(appName).then(userHasName => setUserOwnsApp(userHasName));
}, []);
const buttonSX = {
fontSize: "20px",
color: theme.palette.secondary.main,
fontWeight: "bold",
};
if (theme.palette.mode === "light")
buttonSX["&:hover"] = { backgroundColor: theme.palette.primary.dark };
return (
<>
<ThemeButton
sx={{ height: "40px", marginRight: "5px" }}
onClick={() => setOpen(true)}
>
{appName} Fees
</ThemeButton>
<Modal
open={open}
aria-labelledby="modal-title"
aria-describedby="modal-description"
onClose={() => setOpen(false)}
>
<ModalBody sx={{ width: "75vw", maxWidth: "75vw" }}>
<FeeHistoryTable />
<Button sx={buttonSX} onClick={() => setOpen(false)}>
Close
</Button>
</ModalBody>
</Modal>
</>
);
};

49
src/constants/PublishFees/FeePricePublish/FeeHistoryTable.tsx Normal file
View File

@ -0,0 +1,49 @@
import { DataTable } from "./DataTable.tsx";
import { FeePrice, fetchFees } from "./FeePricePublish.ts";
import React, { useEffect, useState } from "react";
export interface FeeHistoryProps {
showFeeType?: boolean;
showCoinType?: boolean;
filterData?: () => string[][];
}
export const FeeHistoryTable = ({
showFeeType = true,
showCoinType = true,
filterData,
}: FeeHistoryProps) => {
const [feeData, setFeeData] = useState<FeePrice[]>([]);
const fetchFeesOnStartup = () => {
fetchFees().then(feeResponse => {
setFeeData(filterData ? feeData.filter(filterData) : feeResponse);
});
};
useEffect(fetchFeesOnStartup, []);
const columnNames = ["ID", "Date", "Fee Amount"];
if (showFeeType) columnNames.push("Fee Type");
if (showCoinType) columnNames.push("Coin Type");
const data: string[][] = [];
const getRowData = (row: FeePrice, index: number) => {
const rowData: string[] = [];
rowData.push(
index.toString(),
new Date(row.time).toDateString(),
row.feeAmount.toString()
);
if (showFeeType) rowData.push(row.feeType);
if (showCoinType) rowData.push(row.coinType);
return rowData;
};
feeData.map((row, index) => {
data.push(getRowData(row, index + 1));
});
return <DataTable columnNames={columnNames} data={data} />;
};

43
src/constants/PublishFees/FeePricePublish/FeePricePublish-styles.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Box } from "@mui/material";
import { styled } from "@mui/system";
export const ModalBody = styled(Box)(({ theme }) => ({
position: "absolute",
backgroundColor: theme.palette.background.default,
borderRadius: "4px",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "75%",
maxWidth: "900px",
padding: "15px 35px",
display: "flex",
flexDirection: "column",
gap: "17px",
overflowY: "auto",
maxHeight: "95vh",
boxShadow:
theme.palette.mode === "dark"
? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)"
: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
"&::-webkit-scrollbar-track": {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar-track:hover": {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar": {
width: "16px",
height: "10px",
backgroundColor: theme.palette.mode === "light" ? "#f6f8fa" : "#292d3e",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#575757",
borderRadius: "8px",
backgroundClip: "content-box",
border: "4px solid transparent",
},
"&::-webkit-scrollbar-thumb:hover": {
backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#474646",
},
}));

90
src/constants/PublishFees/FeePricePublish/FeePricePublish.ts Normal file
View File

@ -0,0 +1,90 @@
import { appName, FEE_BASE, feeAmountBase, FeeType } from "../FeeData.tsx";
import { objectToBase64 } from "../../../utils/toBase64.ts";
import { store } from "../../../state/store.ts";
import { setFeeData } from "../../../state/features/globalSlice.ts";
import { useTestIdentifiers } from "../../Identifiers.ts";
export type CoinType = "QORT" | "BTC" | "LTC" | "DOGE" | "DGB" | "RVN" | "ARRR";
export interface FeePrice {
time: number;
feeAmount: number;
feeType: FeeType; // used to differentiate different types of fees such as comments, likes, data, etc.
coinType: CoinType;
}
const feesPublishService = "DOCUMENT";
export const fetchFees = async () => {
const feeData = store.getState().global.feeData;
if (feeData.length > 0) {
return feeData;
}
try {
const response = await qortalRequest({
action: "FETCH_QDN_RESOURCE",
identifier: FEE_BASE,
name: "Q-Support",
service: feesPublishService,
});
return (await response) as FeePrice[];
} catch (e) {
console.log("fetch current fees error: ", e);
return [] as FeePrice[];
}
};
export const fetchFeesRedux = () => {
const feeData = store.getState().global.feeData;
if (feeData.length > 0) {
return feeData;
}
fetchFees().then(feeData => store.dispatch(setFeeData(feeData)));
};
export const addFeePrice = async (
feeAmount = feeAmountBase,
feeType: FeeType = "default",
coinType: CoinType = "QORT"
) => {
let fees = await fetchFees();
fees.push({
time: Date.now(),
feeAmount,
feeType,
coinType,
});
const feesBase64 = await objectToBase64(fees);
console.log("fees are: ", fees);
await qortalRequest({
action: "PUBLISH_QDN_RESOURCE",
name: appName,
identifier: FEE_BASE,
service: feesPublishService,
data64: feesBase64,
});
};
const feeFilter = (fee: FeePrice, feeToVerify: FeePrice) => {
const nameCheck = fee.feeType === feeToVerify.feeType;
const coinTypeCheck = fee.coinType === feeToVerify.coinType;
const timeCheck = feeToVerify.time <= feeToVerify.time;
return nameCheck && coinTypeCheck && timeCheck;
};
export const verifyFeeAmount = async (feeToVerify: FeePrice) => {
if (useTestIdentifiers) return true;
const fees = await fetchFees();
const filteredFees = fees.filter(fee => feeFilter(fee, feeToVerify));
if (filteredFees.length === 0) return false;
const feeToCheck = filteredFees[filteredFees.length - 1]; // gets fee that applies at the time of feeToVerify
return feeToVerify.feeAmount >= feeToCheck.feeAmount;
};

79
src/constants/PublishFees/SendFeeFunctions.ts Normal file
View File

@ -0,0 +1,79 @@
import { feeDestinationName, FeeType } from "./FeeData.tsx";
import { CoinType } from "./FeePricePublish/FeePricePublish.ts";
export interface NameData {
name: string;
reducedName: string;
owner: string;
data: string;
registered: number;
isForSale: boolean;
}
export const getNameData = async (name: string) => {
return qortalRequest({
action: "GET_NAME_DATA",
name: name,
}) as Promise<NameData>;
};
export interface SendCoinResponse {
amount: number;
approvalStatus: string;
fee: string;
recipient: string;
reference: string;
senderPublicKey: string;
signature: string;
timestamp: number;
txGroupId: number;
type: string;
}
export const sendCoin = async (
address: string,
amount: number,
coin: CoinType
) => {
try {
return (await qortalRequest({
action: "SEND_COIN",
coin,
destinationAddress: address,
amount,
})) as SendCoinResponse;
} catch (e) {
console.log("sendCoin refused", e);
}
};
export const sendQORT = async (address: string, amount: number) => {
return await sendCoin(address, amount, "QORT");
};
export const sendQORTtoName = async (name: string, amount: number) => {
const address = await getNameData(name);
if (address) return await sendQORT(address.owner, amount);
else throw Error("Name Not Found");
};
export interface PublishFeeData {
signature: string;
senderName: string;
createdTimestamp?: number; //timestamp of the metadata publish, NOT the send feeAmount publish, added after publish is fetched
updatedTimestamp?: number;
feeType?: FeeType;
coinType?: CoinType;
isPaid?: boolean;
}
export type CommentType = "reply" | "edit" | "comment";
export interface CommentObject {
text: string;
feeData: PublishFeeData;
}
export const payPublishFeeQORT = async (feeAmount: number) => {
const publish = await sendQORTtoName(feeDestinationName, feeAmount);
return publish?.signature;
};

85
src/constants/PublishFees/VerifyPayment-Functions.ts Normal file
View File

@ -0,0 +1,85 @@
import { Issue } from "../../state/features/fileSlice.ts";
import { PublishFeeData } from "./SendFeeFunctions.ts";
export type AccountName = { name: string; owner: string };
export interface GetRequestData {
limit?: number;
offset?: number;
reverse?: boolean;
}
export interface getTransactionBySignatureResponse {
type: "string";
timestamp: number;
reference: string;
fee: number;
signature: string;
txGroupId: number;
recipient: string;
blockHeight: number;
approvalStatus: string;
creatorAddress: string;
senderPublicKey: string;
amount: string;
}
export const stringIsEmpty = (value: string) => {
return value === "";
};
export const getAccountNames = async (
address: string,
params?: GetRequestData
) => {
const names = (await qortalRequest({
action: "GET_ACCOUNT_NAMES",
address: address,
...params,
})) as AccountName[];
const namelessAddress = { name: "", owner: address };
const emptyNamesFilled = names.map(({ name, owner }) => {
return stringIsEmpty(name) ? namelessAddress : { name, owner };
});
const returnValue =
emptyNamesFilled.length > 0 ? emptyNamesFilled : [namelessAddress];
return returnValue as AccountName[];
};
export const getUserAccountNames = async () => {
const account = await getUserAccount();
return await getAccountNames(account.address);
};
export const userHasName = async (name: string) => {
const userAccountNames = await getUserAccountNames();
const userNames = userAccountNames.map(userName => userName.name);
return userNames.includes(name);
};
export const objectToPublishFeeData = (object: Issue) => {
const createdTimestamp = +object?.created || 0;
const updatedTimestamp = +object?.updated || 0;
return {
signature: object?.feeData?.signature,
createdTimestamp,
updatedTimestamp,
feeType: object?.feeData?.feeType || "default",
coinType: object?.feeData?.coinType || "QORT",
senderName: object?.user,
isPaid: object?.feeData?.isPaid || false,
} as PublishFeeData;
};
export const objectHasNullValues = (object: object) => {
const objectAsArray = Object.values(object);
return objectAsArray.some(value => value == null);
};
export type AccountInfo = { address: string; publicKey: string };
export const getUserAccount = async () => {
return (await qortalRequest({
action: "GET_USER_ACCOUNT",
})) as AccountInfo;
};

120
src/constants/PublishFees/VerifyPayment.ts Normal file
View File

@ -0,0 +1,120 @@
import { feeDestinationName, maxFeePublishTimeDiff } from "./FeeData.tsx";
import {
getAccountNames,
getTransactionBySignatureResponse,
objectHasNullValues,
objectToPublishFeeData,
} from "./VerifyPayment-Functions.ts";
import { verifyFeeAmount } from "./FeePricePublish/FeePricePublish.ts";
import { getNameData, PublishFeeData } from "./SendFeeFunctions.ts";
import { Issue } from "../../state/features/fileSlice.ts";
const getSignature = async (signature: string) => {
const url = "/transactions/signature/" + signature;
const response = await fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
return (await response.json()) as getTransactionBySignatureResponse;
};
const verifySignature = async (feeData: PublishFeeData) => {
const {
signature,
createdTimestamp,
updatedTimestamp,
feeType,
coinType,
senderName,
} = feeData;
const [signatureData, accountData] = await Promise.all([
getSignature(signature),
getNameData(senderName),
]);
const namesofFeeRecipient = await getAccountNames(signatureData.recipient);
const doesFeeAmountMatch = await verifyFeeAmount({
time: signatureData.timestamp,
feeAmount: +signatureData.amount,
feeType,
coinType,
});
const signatureTime = signatureData.timestamp;
let doesTimeMatch: boolean = false;
if (!updatedTimestamp) {
const timeDiff = createdTimestamp - signatureTime;
const timeDiffMinutes = Math.abs(timeDiff) / 1000 / 60;
doesTimeMatch = timeDiffMinutes <= maxFeePublishTimeDiff;
} else {
const minutesPublishDiff = 1000 * 60 * maxFeePublishTimeDiff;
const startTime = createdTimestamp - minutesPublishDiff;
const endTime = updatedTimestamp;
const sigTimeAfterStartTime = signatureTime > startTime;
const sigTimeBeforeEndTime = signatureTime < endTime;
doesTimeMatch = sigTimeAfterStartTime && sigTimeBeforeEndTime;
}
const doesSignatureMatch = signature === signatureData?.signature;
const doesSenderMatch = signatureData.creatorAddress === accountData.owner;
const doesFeeRecipientNameMatch =
namesofFeeRecipient.findIndex(
nameData => nameData?.name === feeDestinationName
) >= 0;
if (!doesTimeMatch) console.log("Time does not match");
if (!doesSignatureMatch) console.log("Signature does not match");
if (!doesSenderMatch) console.log("Sender does not match");
if (!doesFeeRecipientNameMatch) console.log("Recipient does not match");
if (!doesFeeAmountMatch) console.log("FeeAmount does not match");
return (
doesTimeMatch &&
doesSignatureMatch &&
doesSenderMatch &&
doesFeeRecipientNameMatch &&
doesFeeAmountMatch
);
};
export const verifyPayment = async (publishToVerify: Issue) => {
if (!publishToVerify) return false;
const publishFeeData = objectToPublishFeeData(publishToVerify);
if (objectHasNullValues(publishFeeData)) return false;
const verifyFunctionsList: Promise<boolean>[] = [];
verifyFunctionsList.push(verifySignature(publishFeeData));
const paymentChecks = await Promise.all(verifyFunctionsList);
return paymentChecks.every(check => check === true);
};
export const appendIsPaidToFeeData = (issue: Issue, isPaid: boolean): Issue => {
return {
...issue,
feeData: {
...(issue?.feeData || { signature: undefined, senderName: "" }),
isPaid,
},
};
};
export const verifyAllPayments = async (issues: Issue[]) => {
const verifiedPayments = await Promise.all(
issues.map(issue => verifyPayment(issue))
);
return issues.map((issue, index) => {
return appendIsPaidToFeeData(issue, verifiedPayments[index]);
});
};

87
src/global.d.ts vendored
View File

@ -1,55 +1,56 @@
// src/global.d.ts
interface QortalRequestOptions {
action: string
name?: string
service?: string
data64?: string
title?: string
description?: string
category?: string
tags?: string[]
identifier?: string
address?: string
metaData?: string
encoding?: string
includeMetadata?: boolean
limit?: numebr
offset?: number
reverse?: boolean
resources?: any[]
filename?: string
list_name?: string
item?: string
items?: strings[]
tag1?: string
tag2?: string
tag3?: string
tag4?: string
tag5?: string
coin?: string
destinationAddress?: string
amount?: number
blob?: Blob
mimeType?: string
file?: File
encryptedData?: string
name?: string
mode?: string
query?: string
excludeBlocked?: boolean
exactMatchNames?: boolean
action: string;
name?: string;
service?: string;
data64?: string;
title?: string;
description?: string;
category?: string;
tags?: string[];
identifier?: string;
address?: string;
metaData?: string;
encoding?: string;
includeMetadata?: boolean;
limit?: numebr;
offset?: number;
reverse?: boolean;
resources?: any[];
filename?: string;
list_name?: string;
item?: string;
items?: strings[];
tag1?: string;
tag2?: string;
tag3?: string;
tag4?: string;
tag5?: string;
coin?: string;
destinationAddress?: string;
amount?: number;
blob?: Blob;
mimeType?: string;
file?: File;
encryptedData?: string;
name?: string;
mode?: string;
query?: string;
excludeBlocked?: boolean;
exactMatchNames?: boolean;
message?: string;
}
declare function qortalRequest(options: QortalRequestOptions): Promise<any>
declare function qortalRequest(options: QortalRequestOptions): Promise<any>;
declare function qortalRequestWithTimeout(
options: QortalRequestOptions,
time: number
): Promise<any>
): Promise<any>;
declare global {
interface Window {
_qdnBase: any // Replace 'any' with the appropriate type if you know it
_qdnTheme: string
_qdnBase: any; // Replace 'any' with the appropriate type if you know it
_qdnTheme: string;
}
}
@ -57,6 +58,6 @@ declare global {
interface Window {
showSaveFilePicker: (
options?: SaveFilePickerOptions
) => Promise<FileSystemFileHandle>
) => Promise<FileSystemFileHandle>;
}
}

118
src/hooks/useFetchIssues.tsx
View File

@ -3,12 +3,12 @@ import { useDispatch, useSelector } from "react-redux";
import {
addFiles,
addToHashMap,
Issue,
removeFromHashMap,
setCountNewFiles,
upsertFiles,
upsertFilesBeginning,
upsertFilteredFiles,
Video,
} from "../state/features/fileSlice.ts";
import {
setFilesPerNamePublished,
@ -24,7 +24,8 @@ import {
QSUPPORT_PLAYLIST_BASE,
} from "../constants/Identifiers.ts";
import { queue } from "../wrappers/GlobalWrapper";
import { getCategoriesFetchString } from "../components/common/CategoryList/CategoryList.tsx";
import { log } from "../constants/Misc.ts";
import { verifyAllPayments } from "../constants/PublishFees/VerifyPayment.ts";
export const useFetchIssues = () => {
const dispatch = useDispatch();
@ -50,7 +51,7 @@ export const useFetchIssues = () => {
);
const checkAndUpdateIssue = React.useCallback(
(video: Video) => {
(video: Issue) => {
const existingVideo = hashMapFiles[video.id];
if (!existingVideo) {
return true;
@ -97,10 +98,10 @@ export const useFetchIssues = () => {
videoId: issueID,
content,
});
console.log("response is: ", res);
res?.isValid
? dispatch(addToHashMap(res))
: dispatch(removeFromHashMap(issueID));
return res;
} catch (error) {
retries = retries + 1;
if (retries < 2) {
@ -112,7 +113,7 @@ export const useFetchIssues = () => {
}
};
const getNewFiles = React.useCallback(async () => {
const getNewIssues = React.useCallback(async () => {
try {
dispatch(setIsLoadingGlobal(true));
@ -149,7 +150,7 @@ export const useFetchIssues = () => {
fetchAll = responseData.slice(0, findVideo);
}
const structureData = fetchAll.map((video: any): Video => {
const structureData = fetchAll.map((video: any): Issue => {
return {
title: video?.metadata?.title,
category: video?.metadata?.category,
@ -186,20 +187,21 @@ export const useFetchIssues = () => {
}
}, [videos, hashMapFiles]);
const getFiles = React.useCallback(
const getIssues = React.useCallback(
async (
filters = {},
reset?: boolean,
resetFilers?: boolean,
resetFilters?: boolean,
limit?: number
) => {
try {
const {
name = "",
categories = [],
categories = "",
QappName = "",
keywords = "",
type = "",
}: any = resetFilers ? {} : filters;
}: any = resetFilters ? {} : filters;
let offset = videos.length;
if (reset) {
offset = 0;
@ -211,10 +213,17 @@ export const useFetchIssues = () => {
defaultUrl += `&name=${name}`;
}
if (categories.length > 0) {
defaultUrl += "&description=" + getCategoriesFetchString(categories);
}
if (categories) {
defaultUrl += "&description=";
if (log) console.log("categories: ", categories);
if (categories) defaultUrl += categories;
if (log) console.log("description: ", defaultUrl);
}
if (QappName) {
defaultUrl += `&query=${QappName}`;
}
if (log) console.log("defaultURL: ", defaultUrl);
if (keywords) {
defaultUrl = defaultUrl + `&query=${keywords}`;
}
@ -236,47 +245,48 @@ export const useFetchIssues = () => {
});
const responseData = await response.json();
// const responseData = await qortalRequest({
// action: "SEARCH_QDN_RESOURCES",
// mode: "ALL",
// service: "DOCUMENT",
// query: "${QTUBE_VIDEO_BASE}",
// limit: 20,
// includeMetadata: true,
// offset: offset,
// reverse: true,
// excludeBlocked: true,
// exactMatchNames: true,
// name: names
// })
const structureData = responseData.map((video: any): Video => {
let structureData = responseData.map((issue: any): Issue => {
return {
title: video?.metadata?.title,
service: video?.service,
category: video?.metadata?.category,
categoryName: video?.metadata?.categoryName,
tags: video?.metadata?.tags || [],
description: video?.metadata?.description,
created: video?.created,
updated: video?.updated,
user: video.name,
title: issue?.metadata?.title,
service: issue?.service,
category: issue?.metadata?.category,
categoryName: issue?.metadata?.categoryName,
tags: issue?.metadata?.tags || [],
description: issue?.metadata?.description,
created: issue?.created,
updated: issue?.updated,
user: issue.name,
videoImage: "",
id: video.identifier,
id: issue.identifier,
};
});
if (reset) {
dispatch(addFiles(structureData));
} else {
dispatch(upsertFiles(structureData));
}
const verifiedIssuePromises: Promise<Issue>[] = [];
for (const content of structureData) {
if (content.user && content.id) {
const res = checkAndUpdateIssue(content);
const issue: Promise<Issue> = getIssue(
content.user,
content.id,
content
);
verifiedIssuePromises.push(issue);
if (res) {
queue.push(() => getIssue(content.user, content.id, content));
queue.push(() => issue);
}
}
}
const issues = await Promise.all(verifiedIssuePromises);
const verifiedIssues = await verifyAllPayments(issues);
structureData = structureData.map((issue, index) => {
return {
...issue,
feeData: verifiedIssues[index]?.feeData,
};
});
if (reset) dispatch(addFiles(structureData));
else dispatch(upsertFiles(structureData));
} catch (error) {
console.log({ error });
} finally {
@ -285,7 +295,7 @@ export const useFetchIssues = () => {
[videos, hashMapFiles]
);
const getFilesFiltered = React.useCallback(
const getIssuesFiltered = React.useCallback(
async (filterValue: string) => {
try {
const offset = filteredVideos.length;
@ -314,7 +324,7 @@ export const useFetchIssues = () => {
// exactMatchNames: true,
// name: names
// })
const structureData = responseData.map((video: any): Video => {
const structureData = responseData.map((video: any): Issue => {
return {
title: video?.metadata?.title,
category: video?.metadata?.category,
@ -345,7 +355,7 @@ export const useFetchIssues = () => {
[filteredVideos, hashMapFiles]
);
const checkNewFiles = React.useCallback(async () => {
const checkNewIssues = React.useCallback(async () => {
try {
const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}&limit=20&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true`;
const response = await fetch(url, {
@ -382,7 +392,7 @@ export const useFetchIssues = () => {
} catch (error) {}
}, [videos]);
const getFilesCount = React.useCallback(async () => {
const getIssuesCount = React.useCallback(async () => {
try {
let url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&limit=0&service=DOCUMENT&identifier=${QSUPPORT_FILE_BASE}`;
@ -411,13 +421,13 @@ export const useFetchIssues = () => {
}, []);
return {
getFiles,
checkAndUpdateFile: checkAndUpdateIssue,
getFile: getIssue,
getIssues,
checkAndUpdateIssue,
getIssue,
hashMapFiles,
getNewFiles,
checkNewFiles,
getFilesFiltered,
getFilesCount,
getNewIssues,
checkNewIssues,
getIssuesFiltered,
getIssuesCount,
};
};

50
src/hooks/useWindowSize.tsx
View File

@ -1,25 +1,25 @@
import { useState, useEffect } from 'react';
export function useWindowSize() {
const [windowSize, setWindowSize] = useState<any>({
width: undefined,
});
useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
});
}
window.addEventListener("resize", handleResize);
// Call handler right away so state gets updated with initial window size
handleResize();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleResize);
}, []); // Empty array means that effect doesn't depend on any values from props or state, so it runs once when the component mounts, and never re-runs.
return windowSize;
}
import { useState, useEffect } from 'react';
export function useWindowSize() {
const [windowSize, setWindowSize] = useState<any>({
width: undefined,
});
useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
});
}
window.addEventListener("resize", handleResize);
// Call handler right away so state gets updated with initial window size
handleResize();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleResize);
}, []); // Empty array means that effect doesn't depend on any values from props or state, so it runs once when the component mounts, and never re-runs.
return windowSize;
}

456
src/index.css
View File

@ -1,229 +1,229 @@
@font-face {
font-family: 'Cambon Light';
src: url("./styles/fonts/Cambon-Light.ttf") format("truetype");
}
@font-face {
font-family: 'Merriweather Sans';
src: url("./styles/fonts/Merriweather Sans.ttf") format("truetype");
}
@font-face {
font-family: 'Karla';
src: url("./styles/fonts/Karla.ttf") format("truetype");
}
@font-face {
font-family: 'Proxima Nova';
src: url("./styles/fonts/ProximaNova.otf") format("opentype");
}
@font-face {
font-family: 'Raleway';
src: url("./styles/fonts/Raleway.ttf") format("truetype");
}
@font-face {
font-family: 'Catamaran';
src: url("./styles/fonts/Catamaran.ttf") format("truetype");
}
@font-face {
font-family: 'Oxygen';
src: url("./styles/fonts/Oxygen.ttf") format("truetype");
}
@font-face {
font-family: 'Cairo';
src: url("./styles/fonts/Cairo.ttf") format("truetype");
}
:root {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.line-clamp {
height: 100px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5; /* number of lines to show */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.edit-btn:hover {
opacity: .75;
transition: .2s all;
}
.post-image {
max-width: 100%;
border-radius: 5px;
width: 100%;
height: 100%;
}
.test-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-height: 25px;
}
.test-grid-item {
border: 1px solid powderblue;
}
body::-webkit-scrollbar-track {
background-color: transparent;
}
body::-webkit-scrollbar-track:hover {
background-color: transparent;
}
body::-webkit-scrollbar {
width: 16px;
height: 10px;
background-color: white;
}
body::-webkit-scrollbar-thumb {
background-color: #838eee;
border-radius: 8px;
background-clip: content-box;
border: 4px solid transparent;
}
body::-webkit-scrollbar-thumb:hover {
background-color: #6270f0;
}
.MuiList-root::-webkit-scrollbar-track {
background-color: transparent;
}
.MuiList-root::-webkit-scrollbar-track:hover {
background-color: transparent;
}
.MuiList-root::-webkit-scrollbar {
width: 14px;
height: 10px;
background-color: white;
}
.MuiList-root::-webkit-scrollbar-thumb {
background-color: lightgray;
border-radius: 8px;
background-clip: content-box;
border: 4px solid transparent;
}
.MuiList-root::-webkit-scrollbar-thumb:hover {
background-color: lightslategray;
}
.my-masonry-grid {
display: -webkit-box; /* Not needed if autoprefixing */
display: -ms-flexbox; /* Not needed if autoprefixing */
display: flex;
margin-left: -20px; /* gutter size offset */
width: auto;
padding: 15px 20px;
}
.my-masonry-grid_column {
padding-left: 20px; /* gutter size */
background-clip: padding-box;
}
/* Style your items */
.my-masonry-grid_column > li { /* change div to reference your elements you put in <Masonry> */
margin-bottom: 30px;
}
.my-svg path {
fill: red
}
.qortal-link {
text-decoration: none; /* Removes the underline */
color: inherit; /* Inherits the color of the parent element */
}
.qortal-link:hover, a:focus {
text-decoration: underline; /* Adds underline on hover and focus for accessibility */
}
.download-icon {
transition: all 0.5s ease-in-out;
animation: downloadIconAnimation 2s infinite;
}
@keyframes downloadIconAnimation {
0% { transform: scale(1); fill: #fff; }
50% { transform: scale(1.2); fill: #3498db; }
100% { transform: scale(1); fill: #fff; }
}
.closePlayer {
position: absolute;
top: 0px;
width: 100%;
transition: all 0.3s;
display: flex;
justify-content: flex-end;
z-index: 8000;
}
/* When the screen is 600px or less, display .myClassUnder600 and hide .myClassOver600 */
@media screen and (max-width: 600px) {
.myClassUnder600 {
display: none !important;
}
}
@media screen and (min-width: 601px) {
.myClassOver600 {
display: none !important;
}
}
.ql-editor {
min-height: 100px;
width: 100%
}
.ql-editor img {
cursor: default;
}
.ql-container {
font-size: 16px
}
.hover-click {
transition: opacity 0.2s;
}
.hover-click:hover {
opacity: 0.7;
@font-face {
font-family: 'Cambon Light';
src: url("./styles/fonts/Cambon-Light.ttf") format("truetype");
}
@font-face {
font-family: 'Merriweather Sans';
src: url("./styles/fonts/Merriweather Sans.ttf") format("truetype");
}
@font-face {
font-family: 'Karla';
src: url("./styles/fonts/Karla.ttf") format("truetype");
}
@font-face {
font-family: 'Proxima Nova';
src: url("./styles/fonts/ProximaNova.otf") format("opentype");
}
@font-face {
font-family: 'Raleway';
src: url("./styles/fonts/Raleway.ttf") format("truetype");
}
@font-face {
font-family: 'Catamaran';
src: url("./styles/fonts/Catamaran.ttf") format("truetype");
}
@font-face {
font-family: 'Oxygen';
src: url("./styles/fonts/Oxygen.ttf") format("truetype");
}
@font-face {
font-family: 'Cairo';
src: url("./styles/fonts/Cairo.ttf") format("truetype");
}
:root {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.line-clamp {
height: 100px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5; /* number of lines to show */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.edit-btn:hover {
opacity: .75;
transition: .2s all;
}
.post-image {
max-width: 100%;
border-radius: 5px;
width: 100%;
height: 100%;
}
.test-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-height: 25px;
}
.test-grid-item {
border: 1px solid powderblue;
}
body::-webkit-scrollbar-track {
background-color: transparent;
}
body::-webkit-scrollbar-track:hover {
background-color: transparent;
}
body::-webkit-scrollbar {
width: 16px;
height: 10px;
background-color: white;
}
body::-webkit-scrollbar-thumb {
background-color: #838eee;
border-radius: 8px;
background-clip: content-box;
border: 4px solid transparent;
}
body::-webkit-scrollbar-thumb:hover {
background-color: #6270f0;
}
.MuiList-root::-webkit-scrollbar-track {
background-color: transparent;
}
.MuiList-root::-webkit-scrollbar-track:hover {
background-color: transparent;
}
.MuiList-root::-webkit-scrollbar {
width: 14px;
height: 10px;
background-color: white;
}
.MuiList-root::-webkit-scrollbar-thumb {
background-color: lightgray;
border-radius: 8px;
background-clip: content-box;
border: 4px solid transparent;
}
.MuiList-root::-webkit-scrollbar-thumb:hover {
background-color: lightslategray;
}
.my-masonry-grid {
display: -webkit-box; /* Not needed if autoprefixing */
display: -ms-flexbox; /* Not needed if autoprefixing */
display: flex;
margin-left: -20px; /* gutter size offset */
width: auto;
padding: 15px 20px;
}
.my-masonry-grid_column {
padding-left: 20px; /* gutter size */
background-clip: padding-box;
}
/* Style your items */
.my-masonry-grid_column > li { /* change div to reference your elements you put in <Masonry> */
margin-bottom: 30px;
}
.my-svg path {
fill: red
}
.qortal-link {
text-decoration: none; /* Removes the underline */
color: inherit; /* Inherits the color of the parent element */
}
.qortal-link:hover, a:focus {
text-decoration: underline; /* Adds underline on hover and focus for accessibility */
}
.download-icon {
transition: all 0.5s ease-in-out;
animation: downloadIconAnimation 2s infinite;
}
@keyframes downloadIconAnimation {
0% { transform: scale(1); fill: #fff; }
50% { transform: scale(1.2); fill: #3498db; }
100% { transform: scale(1); fill: #fff; }
}
.closePlayer {
position: absolute;
top: 0px;
width: 100%;
transition: all 0.3s;
display: flex;
justify-content: flex-end;
z-index: 8000;
}
/* When the screen is 600px or less, display .myClassUnder600 and hide .myClassOver600 */
@media screen and (max-width: 600px) {
.myClassUnder600 {
display: none !important;
}
}
@media screen and (min-width: 601px) {
.myClassOver600 {
display: none !important;
}
}
.ql-editor {
min-height: 100px;
width: 100%
}
.ql-editor img {
cursor: default;
}
.ql-container {
font-size: 16px
}
.hover-click {
transition: opacity 0.2s;
}
.hover-click:hover {
opacity: 0.7;
}

34
src/main.tsx
View File

@ -1,17 +1,17 @@
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
interface CustomWindow extends Window {
_qdnBase: string
}
const customWindow = window as unknown as CustomWindow
const baseUrl = customWindow?._qdnBase || ''
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<BrowserRouter basename={baseUrl}>
<App />
<div id="modal-root" />
</BrowserRouter>
)
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
interface CustomWindow extends Window {
_qdnBase: string
}
const customWindow = window as unknown as CustomWindow
const baseUrl = customWindow?._qdnBase || ''
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<BrowserRouter basename={baseUrl}>
<App />
<div id="modal-root" />
</BrowserRouter>
)

6
src/pages/Home/Channels.tsx
View File

@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { RootState } from "../../state/store";
import { Box, useTheme } from "@mui/material";
import { FileContainer } from "./IssueList-styles.tsx";
import { IssueContainer } from "./IssueList-styles.tsx";
import ResponsiveImage from "../../components/ResponsiveImage";
import { ChannelCard, ChannelTitle } from "./Home-styles";
@ -30,7 +30,7 @@ export const Channels = ({ mode }: VideoListProps) => {
minHeight: "50vh",
}}
>
<FileContainer>
<IssueContainer>
{publishNames &&
publishNames?.slice(0, 10).map(name => {
let avatarUrl = "";
@ -62,7 +62,7 @@ export const Channels = ({ mode }: VideoListProps) => {
</Box>
);
})}
</FileContainer>
</IssueContainer>
</Box>
);
};

5
src/pages/Home/Home-styles.tsx
View File

@ -1,5 +1,6 @@
import { styled } from "@mui/system";
import { Box, Button, Grid, Typography } from "@mui/material";
import { fontSizeSmall } from "../../constants/Misc.ts";
export const SubtitleContainer = styled(Box)(({ theme }) => ({
display: "flex",
@ -88,12 +89,12 @@ export const ThemeButton = styled(Button)(({ theme }) => ({
color: theme.palette.text.primary,
backgroundColor: "#01a9e9",
fontSize: "18px",
"&:hover": { backgroundColor: "#3e74c1" },
"&:hover": { backgroundColor: "#008fcd" },
}));
export const ThemeButtonBright = styled(Button)(({ theme }) => ({
color: theme.palette.text.primary,
backgroundColor: "#44c4ff",
fontSize: "18px",
fontSize: fontSizeSmall,
"&:hover": { backgroundColor: "#01a9e9" },
}));

153
src/pages/Home/Home.tsx
View File

@ -12,40 +12,48 @@ import {
changefilterName,
changefilterSearch,
changeFilterType,
setQappNames,
} from "../../state/features/fileSlice.ts";
import { allCategoryData } from "../../constants/Categories/1stCategories.ts";
import {
allCategoryData,
IssueState,
} from "../../constants/Categories/Categories.ts";
import {
CategoryList,
CategoryListRef,
getCategoriesFetchString,
} from "../../components/common/CategoryList/CategoryList.tsx";
import { StatsData } from "../../components/StatsData.tsx";
import {
CategorySelect,
CategorySelectRef,
} from "../../components/common/CategoryList/CategorySelect.tsx";
import {
AutocompleteQappNames,
getPublishedQappNames,
QappNamesRef,
} from "../../components/common/AutocompleteQappNames.tsx";
interface HomeProps {
mode?: string;
}
export const Home = ({ mode }: HomeProps) => {
const theme = useTheme();
const prevVal = useRef("");
const categoryListRef = useRef<CategoryListRef>(null);
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 totalFilesPublished = useSelector(
(state: RootState) => state.global.totalFilesPublished
);
const totalNamesPublished = useSelector(
(state: RootState) => state.global.totalNamesPublished
);
const filesPerNamePublished = useSelector(
(state: RootState) => state.global.filesPerNamePublished
);
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));
@ -59,60 +67,66 @@ export const Home = ({ mode }: HomeProps) => {
const isFilterMode = useRef(false);
const firstFetch = useRef(false);
const afterFetch = useRef(false);
const isFetchingFiltered = useRef(false);
const isFetching = useRef(false);
const prevVal = useRef("");
const categoryListRef = useRef<CategoryListRef>(null);
const categorySelectRef = useRef<CategorySelectRef>(null);
const countNewFiles = useSelector(
(state: RootState) => state.file.countNewFiles
);
const userAvatarHash = useSelector(
(state: RootState) => state.global.userAvatarHash
);
const [showCategoryList, setShowCategoryList] = useState<boolean>(true);
const [showCategorySelect, setShowCategorySelect] = useState<boolean>(true);
const { files: globalVideos } = useSelector((state: RootState) => state.file);
const setSelectedCategoryFiles = payload => {};
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 {
getFiles,
checkAndUpdateFile,
getFile,
getIssues,
checkAndUpdateIssue,
getIssue,
hashMapFiles,
getNewFiles,
checkNewFiles,
getFilesFiltered,
getFilesCount,
getNewIssues,
checkNewIssues,
getIssuesFiltered,
getIssuesCount,
} = useFetchIssues();
const getFilesHandler = React.useCallback(
async (reset?: boolean, resetFilers?: boolean) => {
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() || [];
await getFiles(
categoryListRef.current?.getSelectedCategories() || [];
const issueType = categorySelectRef?.current?.getSelectedCategory();
if (issueType) selectedCategories[2] = issueType;
await getIssues(
{
name: filterName,
categories: selectedCategories,
categories: getCategoriesFetchString(selectedCategories),
QappName: autocompleteRef?.current?.getQappNameFetchString(),
keywords: filterSearch,
type: filterType,
},
reset,
resetFilers
resetFilters
);
isFetching.current = false;
},
[
getFiles,
getIssues,
filterValue,
getFilesFiltered,
getIssuesFiltered,
isFiltering,
filterName,
filterSearch,
@ -122,33 +136,33 @@ export const Home = ({ mode }: HomeProps) => {
const searchOnEnter = e => {
if (e.keyCode == 13) {
getFilesHandler(true);
getIssuesHandler(true);
}
};
useEffect(() => {
if (isFiltering && filterValue !== prevVal?.current) {
prevVal.current = filterValue;
getFilesHandler();
getIssuesHandler();
}
}, [filterValue, isFiltering, filteredFiles, getFilesCount]);
}, [filterValue, isFiltering, filteredFiles, getIssuesCount]);
const getFilesHandlerMount = React.useCallback(async () => {
if (firstFetch.current) return;
firstFetch.current = true;
setIsLoading(true);
await getFiles();
await getIssues();
afterFetch.current = true;
isFetching.current = false;
setIsLoading(false);
}, [getFiles]);
}, [getIssues]);
let videos = globalVideos;
let issues = globalVideos;
if (isFiltering) {
videos = filteredFiles;
issues = filteredFiles;
isFilterMode.current = true;
} else {
isFilterMode.current = false;
@ -199,9 +213,10 @@ export const Home = ({ mode }: HomeProps) => {
setFilterSearch("");
setFilterName("");
categoryListRef.current?.clearCategories();
categorySelectRef.current?.clearCategory();
autocompleteRef.current?.setSelectedValue(null);
ReactDOM.flushSync(() => {
getFilesHandler(true, true);
getIssuesHandler(true, true);
});
};
@ -268,7 +283,43 @@ export const Home = ({ mode }: HomeProps) => {
fontSize: "20px",
}}
/>
<CategoryList categoryData={allCategoryData} ref={categoryListRef} />
{showCategoryList && (
<CategoryList
categoryData={allCategoryData}
ref={categoryListRef}
afterChange={value => {
setShowCategorySelect(!value[0]);
}}
/>
)}
{showCategorySelect && (
<CategorySelect
categoryData={IssueState}
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={() => {
@ -284,7 +335,7 @@ export const Home = ({ mode }: HomeProps) => {
</ThemeButton>
<ThemeButton
onClick={() => {
getFilesHandler(true);
getIssuesHandler(true);
}}
sx={{
marginTop: "20px",
@ -314,9 +365,9 @@ export const Home = ({ mode }: HomeProps) => {
maxWidth: "1400px",
}}
></SubtitleContainer>
<IssueList issues={videos} />
<IssueList issues={issues} />
<LazyLoad
onLoadMore={getFilesHandler}
onLoadMore={getIssuesHandler}
isLoading={isLoading}
></LazyLoad>
</Box>

25
src/pages/Home/IssueList-styles.tsx
View File

@ -8,8 +8,9 @@ import {
TextField,
Typography,
} from "@mui/material";
import { fontSizeMedium, fontSizeSmall } from "../../constants/Misc.ts";
export const FileContainer = styled(Box)(({ theme }) => ({
export const IssueContainer = styled(Box)(({ theme }) => ({
position: "relative",
display: "flex",
padding: "15px",
@ -33,7 +34,7 @@ export const StoresRow = styled(Grid)(({ theme }) => ({
},
}));
export const VideoCard = styled(Grid)(({ theme }) => ({
export const IssueCard = styled(Grid)(({ theme }) => ({
position: "relative",
display: "flex",
flexDirection: "column",
@ -89,14 +90,14 @@ const DoubleLine = styled(Typography)`
export const VideoCardTitle = styled(DoubleLine)(({ theme }) => ({
fontFamily: "Cairo",
fontSize: "16px",
fontSize: fontSizeMedium,
letterSpacing: "0.4px",
color: theme.palette.text.primary,
userSelect: "none",
}));
export const VideoCardName = styled(Typography)(({ theme }) => ({
fontFamily: "Cairo",
fontSize: "14px",
fontSize: fontSizeSmall,
letterSpacing: "0.4px",
color: theme.palette.text.primary,
userSelect: "none",
@ -107,14 +108,16 @@ export const VideoCardName = styled(Typography)(({ theme }) => ({
}));
export const VideoUploadDate = styled(Typography)(({ theme }) => ({
fontFamily: "Cairo",
fontSize: "12px",
display: "span",
fontSize: fontSizeSmall,
letterSpacing: "0.4px",
color: theme.palette.text.primary,
userSelect: "none",
}));
export const BottomParent = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "flex-start",
justifyItems: "flex-end",
alignItems: "flex-end",
flexDirection: "column",
}));
export const VideoCardDescription = styled(Typography)(({ theme }) => ({
@ -155,11 +158,11 @@ export const MyStoresRow = styled(Grid)(({ theme }) => ({
width: "100%",
}));
export const NameContainer = styled(Box)(({ theme }) => ({
display: "flex",
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
export const NameAndDateContainer = styled(Box)(({ theme }) => ({
display: "grid",
gridTemplateRows: "1fr 1fr",
justifyContent: "end",
alignContent: "center",
gap: "10px",
marginBottom: "10px",
}));

140
src/pages/Home/IssueList.tsx
View File

@ -1,11 +1,10 @@
import { Avatar, Box, Skeleton } from "@mui/material";
import {
BlockIconContainer,
BottomParent,
FileContainer,
IconsBox,
NameContainer,
VideoCard,
IssueCard,
IssueContainer,
NameAndDateContainer,
VideoCardName,
VideoCardTitle,
VideoUploadDate,
@ -13,11 +12,10 @@ import {
import EditIcon from "@mui/icons-material/Edit";
import {
blockUser,
Issue,
setEditFile,
Video,
} from "../../state/features/fileSlice.ts";
import BlockIcon from "@mui/icons-material/Block";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import { formatBytes } from "../IssueContent/IssueContent.tsx";
import { formatDate } from "../../utils/time.ts";
import React, { useMemo, useState } from "react";
@ -26,8 +24,12 @@ import { RootState } from "../../state/store.ts";
import { useNavigate } from "react-router-dom";
import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
import { IssueIcon, IssueIcons } from "../../components/common/IssueIcon.tsx";
import QORTicon from "../../assets/icons/qort.png";
import { fontSizeMedium } from "../../constants/Misc.ts";
interface FileListProps {
issues: Video[];
issues: Issue[];
}
export const IssueList = ({ issues }: FileListProps) => {
const hashMapIssues = useSelector(
@ -60,16 +62,21 @@ export const IssueList = ({ issues }: FileListProps) => {
}, [issues, hashMapIssues]);
return (
<FileContainer>
{filteredIssues.map((file: any, index: number) => {
const existingFile = hashMapIssues[file?.id];
<IssueContainer>
{filteredIssues.map((issue: any, index: number) => {
const existingFile = hashMapIssues[issue?.id];
let hasHash = false;
let fileObj = file;
let issueObj = issue;
if (existingFile) {
fileObj = existingFile;
issueObj = existingFile;
hasHash = true;
}
const icon = getIconsFromObject(fileObj);
const issueIcons = getIconsFromObject(issueObj);
const fileBytes = issueObj?.files.reduce(
(acc, cur) => acc + (cur?.size || 0),
0
);
return (
<Box
sx={{
@ -79,22 +86,22 @@ export const IssueList = ({ issues }: FileListProps) => {
height: "75px",
position: "relative",
}}
key={fileObj.id}
onMouseEnter={() => setShowIcons(fileObj.id)}
key={issueObj.id}
onMouseEnter={() => setShowIcons(issueObj.id)}
onMouseLeave={() => setShowIcons(null)}
>
{hasHash ? (
<>
<IconsBox
sx={{
opacity: showIcons === fileObj.id ? 1 : 0,
opacity: showIcons === issueObj.id ? 1 : 0,
zIndex: 2,
}}
>
{fileObj?.user === username && (
{issueObj?.user === username && (
<BlockIconContainer
onClick={() => {
dispatch(setEditFile(fileObj));
dispatch(setEditFile(issueObj));
}}
>
<EditIcon />
@ -102,10 +109,10 @@ export const IssueList = ({ issues }: FileListProps) => {
</BlockIconContainer>
)}
{fileObj?.user !== username && (
{issueObj?.user !== username && (
<BlockIconContainer
onClick={() => {
blockUserFunc(fileObj?.user);
blockUserFunc(issueObj?.user);
}}
>
<BlockIcon />
@ -113,15 +120,14 @@ export const IssueList = ({ issues }: FileListProps) => {
</BlockIconContainer>
)}
</IconsBox>
<VideoCard
<IssueCard
onClick={() => {
navigate(`/issue/${fileObj?.user}/${fileObj?.id}`);
navigate(`/issue/${issueObj?.user}/${issueObj?.id}`);
}}
sx={{
height: "100%",
width: "100%",
display: "flex",
gap: "25px",
flexDirection: "row",
justifyContent: "space-between",
}}
@ -129,47 +135,59 @@ export const IssueList = ({ issues }: FileListProps) => {
<Box
sx={{
display: "flex",
gap: "25px",
alignItems: "center",
}}
>
{icon ? (
<img
src={icon}
width="50px"
style={{
borderRadius: "5px",
}}
/>
) : (
<AttachFileIcon />
)}
<VideoCardTitle
sx={{
width: "100px",
<div
style={{
display: "flex",
alignItems: "center",
width: "200px",
}}
>
{formatBytes(
fileObj?.files.reduce(
(acc, cur) => acc + (cur?.size || 0),
0
)
)}
<IssueIcons
iconSources={issueIcons}
style={{ marginRight: "20px" }}
showBackupIcon={true}
/>
</div>
<VideoCardTitle
sx={{
width: "150px",
fontSize: fontSizeMedium,
}}
>
{fileBytes > 0 && formatBytes(fileBytes)}
</VideoCardTitle>
<VideoCardTitle sx={{ fontWeight: "bold", width: "500px" }}>
{issueObj.title}
</VideoCardTitle>
<VideoCardTitle>{fileObj.title}</VideoCardTitle>
</Box>
<BottomParent>
<NameContainer
onClick={e => {
e.stopPropagation();
navigate(`/channel/${fileObj?.user}`);
{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 }}
src={`/arbitrary/THUMBNAIL/${fileObj?.user}/qortal_avatar`}
alt={`${fileObj?.user}'s avatar`}
sx={{ height: 24, width: 24, marginRight: "10px" }}
src={`/arbitrary/THUMBNAIL/${issueObj?.user}/qortal_avatar`}
alt={`${issueObj?.user}'s avatar`}
/>
<VideoCardName
sx={{
@ -178,17 +196,17 @@ export const IssueList = ({ issues }: FileListProps) => {
},
}}
>
{fileObj?.user}
{issueObj?.user}
</VideoCardName>
</NameContainer>
</div>
{fileObj?.created && (
{issueObj?.created && (
<VideoUploadDate>
{formatDate(fileObj.created)}
{formatDate(issueObj.created)}
</VideoUploadDate>
)}
</BottomParent>
</VideoCard>
</NameAndDateContainer>
</IssueCard>
</>
) : (
<Skeleton
@ -206,6 +224,6 @@ export const IssueList = ({ issues }: FileListProps) => {
</Box>
);
})}
</FileContainer>
</IssueContainer>
);
};

177
src/pages/Home/FileListComponentLevel.tsx → src/pages/Home/IssueListComponentLevel.tsx
View File

@ -2,31 +2,33 @@ import React, { useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useSelector } from "react-redux";
import { RootState } from "../../state/store";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import { Avatar, Box, Skeleton, useTheme } from "@mui/material";
import { useFetchIssues } from "../../hooks/useFetchIssues.tsx";
import LazyLoad from "../../components/common/LazyLoad";
import {
BottomParent,
FileContainer,
NameContainer,
VideoCard,
IssueCard,
IssueContainer,
NameAndDateContainer,
VideoCardName,
VideoCardTitle,
VideoUploadDate,
} from "./IssueList-styles.tsx";
import { formatDate } from "../../utils/time";
import { Video } from "../../state/features/fileSlice.ts";
import { Issue } from "../../state/features/fileSlice.ts";
import { queue } from "../../wrappers/GlobalWrapper";
import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
import { formatBytes } from "../IssueContent/IssueContent.tsx";
import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
import { IssueIcon, IssueIcons } from "../../components/common/IssueIcon.tsx";
import QORTicon from "../../assets/icons/qort.png";
import { verifyAllPayments } from "../../constants/PublishFees/VerifyPayment.ts";
interface VideoListProps {
mode?: string;
}
export const FileListComponentLevel = ({ mode }: VideoListProps) => {
export const IssueListComponentLevel = ({ mode }: VideoListProps) => {
const { name: paramName } = useParams();
const theme = useTheme();
const [isLoading, setIsLoading] = useState<boolean>(true);
@ -37,16 +39,17 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
(state: RootState) => state.file.hashMapFiles
);
const [videos, setVideos] = React.useState<Video[]>([]);
const [issues, setIssues] = React.useState<Issue[]>([]);
const navigate = useNavigate();
const { getFile, getNewFiles, checkNewFiles, checkAndUpdateFile } =
const { getIssue, getNewIssues, checkNewIssues, checkAndUpdateIssue } =
useFetchIssues();
const getVideos = React.useCallback(async () => {
const getIssues = React.useCallback(async () => {
try {
const offset = videos.length;
const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}_&limit=50&includemetadata=false&reverse=true&excludeblocked=true&name=${paramName}&exactmatchnames=true&offset=${offset}`;
const offset = issues.length;
// `/arbitrary/resources/search?mode=ALL&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}&limit=${videoLimit}`;
const url = `/arbitrary/resources/search?mode=ALL&includemetadata=false&reverse=true&excludeblocked=true&exactmatchnames=true&offset=${offset}&limit=50&service=DOCUMENT&query=${QSUPPORT_FILE_BASE}_&name=${paramName}`;
const response = await fetch(url, {
method: "GET",
headers: {
@ -55,63 +58,69 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
});
const responseData = await response.json();
const structureData = responseData.map((video: any): Video => {
const structureData = responseData.map((issue: any): Issue => {
return {
title: video?.metadata?.title,
category: video?.metadata?.category,
categoryName: video?.metadata?.categoryName,
tags: video?.metadata?.tags || [],
description: video?.metadata?.description,
created: video?.created,
updated: video?.updated,
user: video.name,
title: issue?.metadata?.title,
category: issue?.metadata?.category,
categoryName: issue?.metadata?.categoryName,
tags: issue?.metadata?.tags || [],
description: issue?.metadata?.description,
created: issue?.created,
updated: issue?.updated,
user: issue.name,
videoImage: "",
id: video.identifier,
id: issue.identifier,
};
});
const copiedVideos: Video[] = [...videos];
structureData.forEach((video: Video) => {
const index = videos.findIndex(p => p.id === video.id);
const copiedIssues: Issue[] = [...issues];
structureData.forEach((issue: Issue) => {
const index = issues.findIndex(p => p.id === issue.id);
if (index !== -1) {
copiedVideos[index] = video;
copiedIssues[index] = issue;
} else {
copiedVideos.push(video);
copiedIssues.push(issue);
}
});
setVideos(copiedVideos);
for (const content of structureData) {
const verifiedIssuePromises: Promise<Issue>[] = [];
for (const content of copiedIssues) {
if (content.user && content.id) {
const res = checkAndUpdateFile(content);
if (res) {
queue.push(() => getFile(content.user, content.id, content));
}
const res = checkAndUpdateIssue(content);
const getIssueData = getIssue(content.user, content.id, content);
if (res) queue.push(() => getIssueData);
verifiedIssuePromises.push(getIssueData);
}
}
const issueData = await Promise.all(verifiedIssuePromises);
const verifiedIssues = await verifyAllPayments(issueData);
setIssues(verifiedIssues);
} catch (error) {
} finally {
}
}, [videos, hashMapVideos]);
}, [issues, hashMapVideos]);
const getVideosHandler = React.useCallback(async () => {
const getIssuesHandler = React.useCallback(async () => {
if (!firstFetch.current || !afterFetch.current) return;
await getVideos();
}, [getVideos]);
await getIssues();
}, [getIssues]);
const getVideosHandlerMount = React.useCallback(async () => {
const getIssuesHandlerMount = React.useCallback(async () => {
if (firstFetch.current) return;
firstFetch.current = true;
await getVideos();
await getIssues();
afterFetch.current = true;
setIsLoading(false);
}, [getVideos]);
}, [getIssues]);
useEffect(() => {
if (!firstFetch.current) {
getVideosHandlerMount();
getIssuesHandlerMount();
}
}, [getVideosHandlerMount]);
}, [getIssuesHandlerMount]);
return (
<Box
@ -122,18 +131,21 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
alignItems: "center",
}}
>
<FileContainer>
{videos.map((file: any, index: number) => {
const existingFile = hashMapVideos[file?.id];
<IssueContainer>
{issues.map((issue: any, index: number) => {
const existingFile = hashMapVideos[issue?.id];
let hasHash = false;
let fileObj = file;
let issueObj = issue;
if (existingFile) {
fileObj = existingFile;
issueObj = existingFile;
hasHash = true;
}
const icon = getIconsFromObject(fileObj);
const issueIcons = getIconsFromObject(issueObj);
const fileBytes = issueObj?.files.reduce(
(acc, cur) => acc + (cur?.size || 0),
0
);
return (
<Box
sx={{
@ -143,13 +155,13 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
height: "75px",
position: "relative",
}}
key={fileObj.id}
key={issueObj.id}
>
{hasHash ? (
<>
<VideoCard
<IssueCard
onClick={() => {
navigate(`/issue/${fileObj?.user}/${fileObj?.id}`);
navigate(`/issue/${issueObj?.user}/${issueObj?.id}`);
}}
sx={{
height: "100%",
@ -167,42 +179,49 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
alignItems: "center",
}}
>
{icon ? (
<img
src={icon}
width="50px"
style={{
borderRadius: "5px",
}}
<div
style={{
display: "flex",
alignItems: "center",
width: "200px",
}}
>
<IssueIcons
iconSources={issueIcons}
style={{ marginRight: "20px" }}
showBackupIcon={true}
/>
) : (
<AttachFileIcon />
)}
</div>
<VideoCardTitle
sx={{
width: "100px",
}}
>
{formatBytes(
fileObj?.files.reduce(
(acc, cur) => acc + (cur?.size || 0),
0
)
)}
{fileBytes > 0 && formatBytes(fileBytes)}
</VideoCardTitle>
<VideoCardTitle
sx={{ fontWeight: "bold", width: "500px" }}
>
{issueObj.title}
</VideoCardTitle>
<VideoCardTitle>{fileObj.title}</VideoCardTitle>
</Box>
{issue?.feeData?.isPaid && (
<IssueIcon
iconSrc={QORTicon}
style={{ marginRight: "20px" }}
/>
)}
<BottomParent>
<NameContainer
<NameAndDateContainer
onClick={e => {
e.stopPropagation();
navigate(`/channel/${fileObj?.user}`);
navigate(`/channel/${issueObj?.user}`);
}}
>
<Avatar
sx={{ height: 24, width: 24 }}
src={`/arbitrary/THUMBNAIL/${fileObj?.user}/qortal_avatar`}
alt={`${fileObj?.user}'s avatar`}
src={`/arbitrary/THUMBNAIL/${issueObj?.user}/qortal_avatar`}
alt={`${issueObj?.user}'s avatar`}
/>
<VideoCardName
sx={{
@ -211,17 +230,17 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
},
}}
>
{fileObj?.user}
{issueObj?.user}
</VideoCardName>
</NameContainer>
</NameAndDateContainer>
{fileObj?.created && (
{issueObj?.created && (
<VideoUploadDate>
{formatDate(fileObj.created)}
{formatDate(issueObj.created)}
</VideoUploadDate>
)}
</BottomParent>
</VideoCard>
</IssueCard>
</>
) : (
<Skeleton
@ -239,8 +258,8 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
</Box>
);
})}
</FileContainer>
<LazyLoad onLoadMore={getVideosHandler} isLoading={isLoading}></LazyLoad>
</IssueContainer>
<LazyLoad onLoadMore={getIssuesHandler} isLoading={isLoading}></LazyLoad>
</Box>
);
};

4
src/pages/IndividualProfile/IndividualProfile.tsx
View File

@ -1,5 +1,5 @@
import React, { useMemo } from "react";
import { FileListComponentLevel } from "../Home/FileListComponentLevel.tsx";
import { IssueListComponentLevel } from "../Home/IssueListComponentLevel.tsx";
import { HeaderContainer, ProfileContainer } from "./Profile-styles";
import {
AuthorTextComment,
@ -62,7 +62,7 @@ export const IndividualProfile = () => {
</StyledCardHeaderComment>
</Box>
</HeaderContainer>
<FileListComponentLevel />
<IssueListComponentLevel />
</ProfileContainer>
);
};

32
src/pages/IndividualProfile/Profile-styles.tsx
View File

@ -1,16 +1,16 @@
import { styled } from "@mui/system";
import { Box, Grid, Typography, Checkbox } from "@mui/material";
export const ProfileContainer = styled(Box)(({ theme }) => ({
position: "relative",
display: "flex",
width: "100%",
flexDirection: "column"
}));
export const HeaderContainer = styled(Box)(({ theme }) => ({
position: "relative",
display: "flex",
width: "100%",
justifyContent: "center"
}));
import { styled } from "@mui/system";
import { Box, Grid, Typography, Checkbox } from "@mui/material";
export const ProfileContainer = styled(Box)(({ theme }) => ({
position: "relative",
display: "flex",
width: "100%",
flexDirection: "column"
}));
export const HeaderContainer = styled(Box)(({ theme }) => ({
position: "relative",
display: "flex",
width: "100%",
justifyContent: "center"
}));

119
src/pages/IssueContent/IssueContent.tsx
View File

@ -5,7 +5,6 @@ import { setIsLoadingGlobal } from "../../state/features/globalSlice";
import { Avatar, Box, Typography, useTheme } from "@mui/material";
import { RootState } from "../../state/store";
import { addToHashMap } from "../../state/features/fileSlice.ts";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import DownloadIcon from "@mui/icons-material/Download";
import {
AuthorTextComment,
@ -24,14 +23,20 @@ import { CommentSection } from "../../components/common/Comments/CommentSection"
import { QSUPPORT_FILE_BASE } from "../../constants/Identifiers.ts";
import { DisplayHtml } from "../../components/common/TextEditor/DisplayHtml";
import FileElement from "../../components/common/FileElement";
import { allCategoryData } from "../../constants/Categories/1stCategories.ts";
import { allCategoryData } from "../../constants/Categories/Categories.ts";
import {
Category,
getCategoriesFromObject,
} from "../../components/common/CategoryList/CategoryList.tsx";
import { getIconsFromObject } from "../../constants/Categories/CategoryFunctions.ts";
import { IssueIcon, IssueIcons } from "../../components/common/IssueIcon.tsx";
import QORTicon from "../../assets/icons/qort.png";
import {
appendIsPaidToFeeData,
verifyPayment,
} from "../../constants/PublishFees/VerifyPayment.ts";
export function formatBytes(bytes, decimals = 2) {
export function formatBytes(bytes: number, decimals = 2) {
if (bytes === 0) return "0 Bytes";
const k = 1024;
@ -50,7 +55,7 @@ export const IssueContent = () => {
const [descriptionHeight, setDescriptionHeight] = useState<null | number>(
null
);
const [icon, setIcon] = useState<string>("");
const [issueIcons, setIssueIcons] = useState<string[]>([]);
const userAvatarHash = useSelector(
(state: RootState) => state.global.userAvatarHash
);
@ -67,15 +72,15 @@ export const IssueContent = () => {
const navigate = useNavigate();
const theme = useTheme();
const [fileData, setFileData] = useState<any>(null);
const [issueData, setIssueData] = useState<any>(null);
const [playlistData, setPlaylistData] = useState<any>(null);
const hashMapVideos = useSelector(
(state: RootState) => state.file.hashMapFiles
);
const videoReference = useMemo(() => {
if (!fileData) return null;
const { videoReference } = fileData;
if (!issueData) return null;
const { videoReference } = issueData;
if (
videoReference?.identifier &&
videoReference?.name &&
@ -85,13 +90,13 @@ export const IssueContent = () => {
} else {
return null;
}
}, [fileData]);
}, [issueData]);
const videoCover = useMemo(() => {
if (!fileData) return null;
const { videoImage } = fileData;
if (!issueData) return null;
const { videoImage } = issueData;
return videoImage || null;
}, [fileData]);
}, [issueData]);
const dispatch = useDispatch();
const getVideoData = React.useCallback(async (name: string, id: string) => {
@ -135,9 +140,16 @@ export const IssueContent = () => {
...resourceData,
...responseData,
};
setFileData(combinedData);
dispatch(addToHashMap(combinedData));
checkforPlaylist(name, id, combinedData?.code);
verifyPayment(combinedData).then(feeData => {
console.log(
"async data: ",
appendIsPaidToFeeData(combinedData, feeData)
);
setIssueData(appendIsPaidToFeeData(combinedData, feeData));
dispatch(addToHashMap(combinedData));
checkforPlaylist(name, id, combinedData?.code);
});
}
}
} catch (error) {
@ -217,8 +229,10 @@ export const IssueContent = () => {
const existingVideo = hashMapVideos[id];
if (existingVideo) {
setFileData(existingVideo);
checkforPlaylist(name, id, existingVideo?.code);
verifyPayment(existingVideo).then(feeData => {
setIssueData(appendIsPaidToFeeData(existingVideo, feeData));
checkforPlaylist(name, id, existingVideo?.code);
});
} else {
getVideoData(name, id);
}
@ -259,21 +273,21 @@ export const IssueContent = () => {
useEffect(() => {
if (contentRef.current) {
const height = contentRef.current.offsetHeight;
if (height > 100) {
const maxDescriptionHeight = 200;
if (height > maxDescriptionHeight) {
// Assuming 100px is your threshold
setDescriptionHeight(100);
setDescriptionHeight(maxDescriptionHeight);
}
}
if (fileData) {
const icon = getIconsFromObject(fileData);
setIcon(icon);
if (issueData) {
const icons = getIconsFromObject(issueData);
setIssueIcons(icons);
}
}, [fileData]);
}, [issueData]);
const categoriesDisplay = useMemo(() => {
if (fileData) {
const categoryList = getCategoriesFromObject(fileData);
if (issueData) {
const categoryList = getCategoriesFromObject(issueData);
const categoryNames = categoryList.map((categoryID, index) => {
let categoryName: Category;
if (index === 0) {
@ -294,14 +308,21 @@ export const IssueContent = () => {
const filteredCategoryNames = categoryNames.filter(name => name);
let categoryDisplay = "";
const separator = " > ";
const QappName = issueData?.QappName || "";
filteredCategoryNames.map((name, index) => {
categoryDisplay +=
index !== filteredCategoryNames.length - 1 ? name + separator : name;
if (QappName && index === 1) {
categoryDisplay += QappName + separator;
}
categoryDisplay += name;
if (index !== filteredCategoryNames.length - 1)
categoryDisplay += separator;
});
return categoryDisplay;
}
return "no videodata";
}, [fileData]);
}, [issueData]);
return (
<Box
@ -325,18 +346,12 @@ export const IssueContent = () => {
alignItems: "center",
}}
>
{icon ? (
<img
src={icon}
width="50px"
style={{
borderRadius: "5px",
marginRight: "10px",
}}
<div style={{ display: "flex", alignItems: "center" }}>
<IssueIcons
iconSources={issueIcons}
style={{ marginRight: "20px" }}
/>
) : (
<AttachFileIcon />
)}
</div>
<FileTitle
variant="h1"
color="textPrimary"
@ -344,10 +359,13 @@ export const IssueContent = () => {
textAlign: "center",
}}
>
{fileData?.title}
{issueData?.title}
</FileTitle>
{issueData?.feeData?.isPaid && (
<IssueIcon iconSrc={QORTicon} style={{ marginLeft: "10px" }} />
)}
</div>
{fileData?.created && (
{issueData?.created && (
<Typography
variant="h6"
sx={{
@ -355,7 +373,7 @@ export const IssueContent = () => {
}}
color={theme.palette.text.primary}
>
{formatDate(fileData.created)}
{formatDate(issueData.created)}
</Typography>
)}
@ -407,12 +425,13 @@ export const IssueContent = () => {
</Typography>
</Box>
<ImageContainer>
{fileData?.images &&
fileData.images.map(image => {
{issueData?.images &&
issueData.images.map(image => {
return (
<img
key={image}
src={image}
width={`${1080 / fileData.images.length}px`}
width={`${1080 / issueData.images.length}px`}
style={{
marginRight: "10px",
marginBottom: "10px",
@ -464,12 +483,12 @@ export const IssueContent = () => {
? "auto"
: isExpandedDescription
? "auto"
: "100px",
: "30vh",
overflow: "hidden",
}}
>
{fileData?.htmlDescription ? (
<DisplayHtml html={fileData?.htmlDescription} />
{issueData?.htmlDescription ? (
<DisplayHtml html={issueData?.htmlDescription} />
) : (
<FileDescription
variant="body1"
@ -478,7 +497,7 @@ export const IssueContent = () => {
cursor: "default",
}}
>
{fileData?.fullDescription}
{issueData?.fullDescription}
</FileDescription>
)}
</Box>
@ -509,7 +528,7 @@ export const IssueContent = () => {
marginTop: "25px",
}}
>
{fileData?.files?.map((file, index) => {
{issueData?.files?.map((file, index) => {
return (
<FileAttachmentContainer
sx={{

52
src/state/features/authSlice.ts
View File

@ -1,27 +1,27 @@
import { createSlice } from '@reduxjs/toolkit';
interface AuthState {
user: {
address: string;
publicKey: string;
name?: string;
} | null;
}
const initialState: AuthState = {
user: null
};
export const authSlice = createSlice({
name: 'auth',
initialState,
reducers: {
addUser: (state, action) => {
state.user = action.payload;
},
},
});
export const { addUser } = authSlice.actions;
import { createSlice } from '@reduxjs/toolkit';
interface AuthState {
user: {
address: string;
publicKey: string;
name?: string;
} | null;
}
const initialState: AuthState = {
user: null
};
export const authSlice = createSlice({
name: 'auth',
initialState,
reducers: {
addUser: (state, action) => {
state.user = action.payload;
},
},
});
export const { addUser } = authSlice.actions;
export default authSlice.reducer;

26
src/state/features/fileSlice.ts
View File

@ -1,10 +1,10 @@
import { createSlice } from "@reduxjs/toolkit";
import { RootState } from "../store";
import { PublishFeeData } from "../../constants/PublishFees/SendFeeFunctions.ts";
interface GlobalState {
files: Video[];
filteredFiles: Video[];
hashMapFiles: Record<string, Video>;
files: Issue[];
filteredFiles: Issue[];
hashMapFiles: Record<string, Issue>;
countNewFiles: number;
isFiltering: boolean;
filterValue: string;
@ -14,6 +14,7 @@ interface GlobalState {
selectedCategoryFiles: any[];
editFileProperties: any;
editPlaylistProperties: any;
publishedQappNames: string[];
}
const initialState: GlobalState = {
files: [],
@ -28,9 +29,10 @@ const initialState: GlobalState = {
selectedCategoryFiles: [null, null, null, null],
editFileProperties: null,
editPlaylistProperties: null,
publishedQappNames: [],
};
export interface Video {
export interface Issue {
title: string;
description: string;
created: number | string;
@ -44,6 +46,8 @@ export interface Video {
updated?: number | string;
isValid?: boolean;
code?: string;
feeData?: PublishFeeData;
paymentVerified?: boolean;
}
export const fileSlice = createSlice({
@ -113,12 +117,12 @@ export const fileSlice = createSlice({
},
addArrayToHashMap: (state, action) => {
const videos = action.payload;
videos.forEach((video: Video) => {
videos.forEach((video: Issue) => {
state.hashMapFiles[video.id] = video;
});
},
upsertFiles: (state, action) => {
action.payload.forEach((video: Video) => {
action.payload.forEach((video: Issue) => {
const index = state.files.findIndex(p => p.id === video.id);
if (index !== -1) {
state.files[index] = video;
@ -128,7 +132,7 @@ export const fileSlice = createSlice({
});
},
upsertFilteredFiles: (state, action) => {
action.payload.forEach((video: Video) => {
action.payload.forEach((video: Issue) => {
const index = state.filteredFiles.findIndex(p => p.id === video.id);
if (index !== -1) {
state.filteredFiles[index] = video;
@ -138,7 +142,7 @@ export const fileSlice = createSlice({
});
},
upsertFilesBeginning: (state, action) => {
action.payload.reverse().forEach((video: Video) => {
action.payload.reverse().forEach((video: Issue) => {
const index = state.files.findIndex(p => p.id === video.id);
if (index !== -1) {
state.files[index] = video;
@ -157,6 +161,9 @@ export const fileSlice = createSlice({
const username = action.payload;
state.files = state.files.filter(item => item.user !== username);
},
setQappNames: (state, action) => {
state.publishedQappNames = action.payload;
},
},
});
@ -183,6 +190,7 @@ export const {
blockUser,
setEditFile,
setEditPlaylist,
setQappNames,
} = fileSlice.actions;
export default fileSlice.reducer;

7
src/state/features/globalSlice.ts
View File

@ -1,4 +1,5 @@
import { createSlice } from "@reduxjs/toolkit";
import { FeePrice } from "../../constants/PublishFees/FeePricePublish/FeePricePublish.ts";
interface GlobalState {
isLoadingGlobal: boolean;
@ -9,6 +10,7 @@ interface GlobalState {
totalFilesPublished: number;
totalNamesPublished: number;
filesPerNamePublished: number;
feeData: FeePrice[];
}
const initialState: GlobalState = {
isLoadingGlobal: false,
@ -19,6 +21,7 @@ const initialState: GlobalState = {
totalFilesPublished: null,
totalNamesPublished: null,
filesPerNamePublished: null,
feeData: [],
};
export const globalSlice = createSlice({
@ -61,6 +64,9 @@ export const globalSlice = createSlice({
setFilesPerNamePublished: (state, action) => {
state.filesPerNamePublished = action.payload;
},
setFeeData: (state, action) => {
state.feeData = action.payload;
},
},
});
@ -74,6 +80,7 @@ export const {
setTotalFilesPublished,
setTotalNamesPublished,
setFilesPerNamePublished,
setFeeData,
} = globalSlice.actions;
export default globalSlice.reducer;

146
src/state/features/notificationsSlice.ts
View File

@ -1,73 +1,73 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface AlertTypes {
alertSuccess: string
alertError: string
alertInfo: string
}
interface InitialState {
alertTypes: AlertTypes
}
const initialState: InitialState = {
alertTypes: {
alertSuccess: '',
alertError: '',
alertInfo: ''
}
}
export const notificationsSlice = createSlice({
name: "notifications",
initialState,
reducers: {
setNotification: (
state: InitialState,
action: PayloadAction<{ alertType: string; msg: string }>
) => {
if (action.payload.alertType === "success") {
return {
...state,
alertTypes: {
...state.alertTypes,
alertSuccess: action.payload.msg,
},
};
} else if (action.payload.alertType === "error") {
return {
...state,
alertTypes: {
...state.alertTypes,
alertError: action.payload.msg,
},
};
} else if (action.payload.alertType === "info") {
return {
...state,
alertTypes: {
...state.alertTypes,
alertInfo: action.payload.msg,
},
};
}
return state;
},
removeNotification: (state: InitialState) => {
return {
...state,
alertTypes: {
...state.alertTypes,
alertSuccess: '',
alertError: '',
alertInfo: ''
}
}
},
},
});
export const { setNotification, removeNotification } =
notificationsSlice.actions;
export default notificationsSlice.reducer;
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface AlertTypes {
alertSuccess: string
alertError: string
alertInfo: string
}
interface InitialState {
alertTypes: AlertTypes
}
const initialState: InitialState = {
alertTypes: {
alertSuccess: '',
alertError: '',
alertInfo: ''
}
}
export const notificationsSlice = createSlice({
name: "notifications",
initialState,
reducers: {
setNotification: (
state: InitialState,
action: PayloadAction<{ alertType: string; msg: string }>
) => {
if (action.payload.alertType === "success") {
return {
...state,
alertTypes: {
...state.alertTypes,
alertSuccess: action.payload.msg,
},
};
} else if (action.payload.alertType === "error") {
return {
...state,
alertTypes: {
...state.alertTypes,
alertError: action.payload.msg,
},
};
} else if (action.payload.alertType === "info") {
return {
...state,
alertTypes: {
...state.alertTypes,
alertInfo: action.payload.msg,
},
};
}
return state;
},
removeNotification: (state: InitialState) => {
return {
...state,
alertTypes: {
...state.alertTypes,
alertSuccess: '',
alertError: '',
alertInfo: ''
}
}
},
},
});
export const { setNotification, removeNotification } =
notificationsSlice.actions;
export default notificationsSlice.reducer;

12
src/styles/theme.tsx
View File

@ -91,7 +91,7 @@ const lightTheme = createTheme({
mode: "light",
primary: {
main: "#FCFCFC",
dark: "#F5F5F5",
dark: "#E0E0E0",
light: "#FFFFFF",
},
secondary: {
@ -138,14 +138,14 @@ const darkTheme = createTheme({
palette: {
mode: "dark",
primary: {
main: "#01a9e9", //
dark: "#008fcd", //
light: "#44c4ff", //
main: "#01a9e9", // Qortal Blue
dark: "#008fcd",
light: "#44c4ff",
},
secondary: {
main: "#007FFF", // Electric blue
dark: "#0059B2", // Darker shade of electric blue
light: "#3399FF", // Lighter shade of electric blue
dark: "#0059B2",
light: "#3399FF",
},
background: {
default: "#1C1C1C", // Deep space black

14
src/utils/checkStructure.ts
View File

@ -1,7 +1,7 @@
export const checkStructure = (content: any) => {
let isValid = true
return isValid
}
export const checkStructure = (content: any) => {
let isValid = true
return isValid
}

26
src/utils/extractTextFromSlate.ts
View File

@ -1,14 +1,14 @@
export function extractTextFromSlate(nodes: any) {
if(!Array.isArray(nodes)) return ""
let text = "";
for (const node of nodes) {
if (node.text) {
text += node.text;
} else if (node.children) {
text += extractTextFromSlate(node.children);
}
}
return text;
export function extractTextFromSlate(nodes: any) {
if(!Array.isArray(nodes)) return ""
let text = "";
for (const node of nodes) {
if (node.text) {
text += node.text;
} else if (node.children) {
text += extractTextFromSlate(node.children);
}
}
return text;
}

1
src/utils/fetchVideos.ts
View File

@ -17,6 +17,7 @@ export const fetchAndEvaluateIssues = async (data: any) => {
service: content?.service || "DOCUMENT",
identifier: videoId,
});
if (checkStructure(responseData)) {
obj = {
...content,

33
src/utils/qortalRequests.ts Normal file
View File

@ -0,0 +1,33 @@
import { NameData } from "../constants/PublishFees/SendFeeFunctions.ts";
import { getUserAccountNames } from "../constants/PublishFees/VerifyPayment-Functions.ts";
export const getNameData = async (name: string) => {
return (await qortalRequest({
action: "GET_NAME_DATA",
name: name,
})) as NameData;
};
export const sendQchatDM = async (
recipientName: string,
message: string,
allowSelfAsRecipient = false
) => {
if (!allowSelfAsRecipient) {
const userAccountNames = await getUserAccountNames();
const userNames = userAccountNames.map(name => name.name);
if (userNames.includes(recipientName)) return;
}
const address = await getNameData(recipientName);
try {
return await qortalRequest({
action: "SEND_CHAT_MESSAGE",
destinationAddress: address.owner,
message,
});
} catch (e) {
console.log(e);
return false;
}
};

86
src/utils/queue.ts
View File

@ -1,43 +1,43 @@
type QueueItem = {
request: () => Promise<any>;
resolve: (value: any | PromiseLike<any>) => void;
reject: (reason?: any) => void;
};
export class RequestQueue {
private queue: QueueItem[];
private maxConcurrent: number;
private currentConcurrent: number;
constructor(maxConcurrent = 5) {
this.queue = [];
this.maxConcurrent = maxConcurrent;
this.currentConcurrent = 0;
}
async push(request: () => Promise<any>): Promise<any> {
return new Promise((resolve, reject) => {
this.queue.push({
request,
resolve,
reject,
});
this.checkQueue();
});
}
private checkQueue(): void {
if (this.queue.length === 0 || this.currentConcurrent >= this.maxConcurrent) return;
const { request, resolve, reject } = this.queue.shift() as QueueItem;
this.currentConcurrent++;
request()
.then(resolve)
.catch(reject)
.finally(() => {
this.currentConcurrent--;
this.checkQueue();
});
}
}
type QueueItem = {
request: () => Promise<any>;
resolve: (value: any | PromiseLike<any>) => void;
reject: (reason?: any) => void;
};
export class RequestQueue {
private queue: QueueItem[];
private maxConcurrent: number;
private currentConcurrent: number;
constructor(maxConcurrent = 5) {
this.queue = [];
this.maxConcurrent = maxConcurrent;
this.currentConcurrent = 0;
}
async push(request: () => Promise<any>): Promise<any> {
return new Promise((resolve, reject) => {
this.queue.push({
request,
resolve,
reject,
});
this.checkQueue();
});
}
private checkQueue(): void {
if (this.queue.length === 0 || this.currentConcurrent >= this.maxConcurrent) return;
const { request, resolve, reject } = this.queue.shift() as QueueItem;
this.currentConcurrent++;
request()
.then(resolve)
.catch(reject)
.finally(() => {
this.currentConcurrent--;
this.checkQueue();
});
}
}

90
src/utils/time.ts
View File

@ -1,46 +1,46 @@
import moment from 'moment'
export function formatTimestamp(timestamp: number): string {
const now = moment()
const timestampMoment = moment(timestamp)
const elapsedTime = now.diff(timestampMoment, 'minutes')
if (elapsedTime < 1) {
return 'Just now'
} else if (elapsedTime < 60) {
return `${elapsedTime}m`
} else if (elapsedTime < 1440) {
return `${Math.floor(elapsedTime / 60)}h`
} else {
return timestampMoment.format('MMM D')
}
}
export function formatTimestampSeconds(timestamp: number): string {
const now = moment()
const timestampMoment = moment.unix(timestamp)
const elapsedTime = now.diff(timestampMoment, 'minutes')
if (elapsedTime < 1) {
return 'Just now'
} else if (elapsedTime < 60) {
return `${elapsedTime}m`
} else if (elapsedTime < 1440) {
return `${Math.floor(elapsedTime / 60)}h`
} else {
return timestampMoment.format('MMM D')
}
}
export const formatDate = (unixTimestamp: number): string => {
const date = moment(unixTimestamp, 'x').fromNow()
return date
}
export const formatDateSeconds = (unixTimestamp: number): string => {
const date = moment.unix(unixTimestamp).fromNow();
return date
import moment from 'moment'
export function formatTimestamp(timestamp: number): string {
const now = moment()
const timestampMoment = moment(timestamp)
const elapsedTime = now.diff(timestampMoment, 'minutes')
if (elapsedTime < 1) {
return 'Just now'
} else if (elapsedTime < 60) {
return `${elapsedTime}m`
} else if (elapsedTime < 1440) {
return `${Math.floor(elapsedTime / 60)}h`
} else {
return timestampMoment.format('MMM D')
}
}
export function formatTimestampSeconds(timestamp: number): string {
const now = moment()
const timestampMoment = moment.unix(timestamp)
const elapsedTime = now.diff(timestampMoment, 'minutes')
if (elapsedTime < 1) {
return 'Just now'
} else if (elapsedTime < 60) {
return `${elapsedTime}m`
} else if (elapsedTime < 1440) {
return `${Math.floor(elapsedTime / 60)}h`
} else {
return timestampMoment.format('MMM D')
}
}
export const formatDate = (unixTimestamp: number): string => {
const date = moment(unixTimestamp, 'x').fromNow()
return date
}
export const formatDateSeconds = (unixTimestamp: number): string => {
const date = moment.unix(unixTimestamp).fromNow();
return date
}

348
src/utils/toBase64.ts
View File

@ -1,174 +1,174 @@
export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
const result = reader.result
reader.onload = null // remove onload handler
reader.onerror = null // remove onerror handler
resolve(result)
}
reader.onerror = (error) => {
reader.onload = null // remove onload handler
reader.onerror = null // remove onerror handler
reject(error)
}
})
export function objectToBase64(obj: any) {
// Step 1: Convert the object to a JSON string
const jsonString = JSON.stringify(obj)
// Step 2: Create a Blob from the JSON string
const blob = new Blob([jsonString], { type: 'application/json' })
// Step 3: Create a FileReader to read the Blob as a base64-encoded string
return new Promise<string>((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => {
if (typeof reader.result === 'string') {
// Remove 'data:application/json;base64,' prefix
const base64 = reader.result.replace(
'data:application/json;base64,',
''
)
resolve(base64)
} else {
reject(new Error('Failed to read the Blob as a base64-encoded string'))
}
}
reader.onerror = () => {
reject(reader.error)
}
reader.readAsDataURL(blob)
})
}
export function objectToUint8Array(obj: any) {
// Convert the object to a JSON string
const jsonString = JSON.stringify(obj)
// Encode the JSON string as a byte array using TextEncoder
const encoder = new TextEncoder()
const byteArray = encoder.encode(jsonString)
// Create a new Uint8Array and set its content to the encoded byte array
const uint8Array = new Uint8Array(byteArray)
return uint8Array
}
export function uint8ArrayToBase64(uint8Array: Uint8Array): string {
const length = uint8Array.length
let binaryString = ''
const chunkSize = 1024 * 1024 // Process 1MB at a time
for (let i = 0; i < length; i += chunkSize) {
const chunkEnd = Math.min(i + chunkSize, length)
const chunk = uint8Array.subarray(i, chunkEnd)
binaryString += Array.from(chunk, (byte) => String.fromCharCode(byte)).join(
''
)
}
return btoa(binaryString)
}
export function objectToUint8ArrayFromResponse(obj: any) {
const len = Object.keys(obj).length
const result = new Uint8Array(len)
for (let i = 0; i < len; i++) {
result[i] = obj[i]
}
return result
}
// export function uint8ArrayToBase64(arrayBuffer: Uint8Array): string {
// let binary = ''
// const bytes = new Uint8Array(arrayBuffer)
// const len = bytes.length
// for (let i = 0; i < len; i++) {
// binary += String.fromCharCode(bytes[i])
// }
// return btoa(binary)
// }
export function base64ToUint8Array(base64: string) {
const binaryString = atob(base64)
const len = binaryString.length
const bytes = new Uint8Array(len)
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i)
}
return bytes
}
export function uint8ArrayToObject(uint8Array: Uint8Array) {
// Decode the byte array using TextDecoder
const decoder = new TextDecoder()
const jsonString = decoder.decode(uint8Array)
// Convert the JSON string back into an object
const obj = JSON.parse(jsonString)
return obj
}
export function processFileInChunks(file: File): Promise<Uint8Array> {
return new Promise(
(resolve: (value: Uint8Array) => void, reject: (reason?: any) => void) => {
const reader = new FileReader()
reader.onload = function (event: ProgressEvent<FileReader>) {
const arrayBuffer = event.target?.result as ArrayBuffer
const uint8Array = new Uint8Array(arrayBuffer)
resolve(uint8Array)
}
reader.onerror = function (error: ProgressEvent<FileReader>) {
reject(error)
}
reader.readAsArrayBuffer(file)
}
)
}
// export async function processFileInChunks(file: File, chunkSize = 1024 * 1024): Promise<Uint8Array> {
// const fileStream = file.stream();
// const reader = fileStream.getReader();
// const totalLength = file.size;
// if (totalLength <= 0 || isNaN(totalLength)) {
// throw new Error('Invalid file size');
// }
// const combinedArray = new Uint8Array(totalLength);
// let offset = 0;
// while (offset < totalLength) {
// const { value, done } = await reader.read();
// if (done) {
// break;
// }
// const chunk = new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
// // Set elements one by one instead of using combinedArray.set(chunk, offset)
// for (let i = 0; i < chunk.length; i++) {
// combinedArray[offset + i] = chunk[i];
// }
// offset += chunk.length;
// }
// return combinedArray;
// }
export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
const result = reader.result
reader.onload = null // remove onload handler
reader.onerror = null // remove onerror handler
resolve(result)
}
reader.onerror = (error) => {
reader.onload = null // remove onload handler
reader.onerror = null // remove onerror handler
reject(error)
}
})
export function objectToBase64(obj: any) {
// Step 1: Convert the object to a JSON string
const jsonString = JSON.stringify(obj)
// Step 2: Create a Blob from the JSON string
const blob = new Blob([jsonString], { type: 'application/json' })
// Step 3: Create a FileReader to read the Blob as a base64-encoded string
return new Promise<string>((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => {
if (typeof reader.result === 'string') {
// Remove 'data:application/json;base64,' prefix
const base64 = reader.result.replace(
'data:application/json;base64,',
''
)
resolve(base64)
} else {
reject(new Error('Failed to read the Blob as a base64-encoded string'))
}
}
reader.onerror = () => {
reject(reader.error)
}
reader.readAsDataURL(blob)
})
}
export function objectToUint8Array(obj: any) {
// Convert the object to a JSON string
const jsonString = JSON.stringify(obj)
// Encode the JSON string as a byte array using TextEncoder
const encoder = new TextEncoder()
const byteArray = encoder.encode(jsonString)
// Create a new Uint8Array and set its content to the encoded byte array
const uint8Array = new Uint8Array(byteArray)
return uint8Array
}
export function uint8ArrayToBase64(uint8Array: Uint8Array): string {
const length = uint8Array.length
let binaryString = ''
const chunkSize = 1024 * 1024 // Process 1MB at a time
for (let i = 0; i < length; i += chunkSize) {
const chunkEnd = Math.min(i + chunkSize, length)
const chunk = uint8Array.subarray(i, chunkEnd)
binaryString += Array.from(chunk, (byte) => String.fromCharCode(byte)).join(
''
)
}
return btoa(binaryString)
}
export function objectToUint8ArrayFromResponse(obj: any) {
const len = Object.keys(obj).length
const result = new Uint8Array(len)
for (let i = 0; i < len; i++) {
result[i] = obj[i]
}
return result
}
// export function uint8ArrayToBase64(arrayBuffer: Uint8Array): string {
// let binary = ''
// const bytes = new Uint8Array(arrayBuffer)
// const len = bytes.length
// for (let i = 0; i < len; i++) {
// binary += String.fromCharCode(bytes[i])
// }
// return btoa(binary)
// }
export function base64ToUint8Array(base64: string) {
const binaryString = atob(base64)
const len = binaryString.length
const bytes = new Uint8Array(len)
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i)
}
return bytes
}
export function uint8ArrayToObject(uint8Array: Uint8Array) {
// Decode the byte array using TextDecoder
const decoder = new TextDecoder()
const jsonString = decoder.decode(uint8Array)
// Convert the JSON string back into an object
const obj = JSON.parse(jsonString)
return obj
}
export function processFileInChunks(file: File): Promise<Uint8Array> {
return new Promise(
(resolve: (value: Uint8Array) => void, reject: (reason?: any) => void) => {
const reader = new FileReader()
reader.onload = function (event: ProgressEvent<FileReader>) {
const arrayBuffer = event.target?.result as ArrayBuffer
const uint8Array = new Uint8Array(arrayBuffer)
resolve(uint8Array)
}
reader.onerror = function (error: ProgressEvent<FileReader>) {
reject(error)
}
reader.readAsArrayBuffer(file)
}
)
}
// export async function processFileInChunks(file: File, chunkSize = 1024 * 1024): Promise<Uint8Array> {
// const fileStream = file.stream();
// const reader = fileStream.getReader();
// const totalLength = file.size;
// if (totalLength <= 0 || isNaN(totalLength)) {
// throw new Error('Invalid file size');
// }
// const combinedArray = new Uint8Array(totalLength);
// let offset = 0;
// while (offset < totalLength) {
// const { value, done } = await reader.read();
// if (done) {
// break;
// }
// const chunk = new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
// // Set elements one by one instead of using combinedArray.set(chunk, offset)
// for (let i = 0; i < chunk.length; i++) {
// combinedArray[offset + i] = chunk[i];
// }
// offset += chunk.length;
// }
// return combinedArray;
// }

2
src/vite-env.d.ts vendored
View File

@ -1 +1 @@
/// <reference types="vite/client" />
/// <reference types="vite/client" />

426
src/wrappers/DownloadWrapper.tsx
View File

@ -1,213 +1,213 @@
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import {
setAddToDownloads,
updateDownloads
} from '../state/features/globalSlice'
import { DownloadTaskManager } from '../components/common/DownloadTaskManager'
import { RootState } from '../state/store'
interface Props {
children: React.ReactNode
}
const defaultValues: MyContextInterface = {
downloadVideo: () => {}
}
interface IDownloadVideoParams {
name: string
service: string
identifier: string
properties: any
}
interface MyContextInterface {
downloadVideo: ({
name,
service,
identifier,
properties
}: IDownloadVideoParams) => void
}
export const MyContext = React.createContext<MyContextInterface>(defaultValues)
const DownloadWrapper: React.FC<Props> = ({ children }) => {
const dispatch = useDispatch()
const downloads = useSelector((state: RootState) => state.global?.downloads);
const fetchResource = async ({ name, service, identifier }: any) => {
try {
await qortalRequest({
action: 'GET_QDN_RESOURCE_PROPERTIES',
name,
service,
identifier
})
} catch (error) {}
}
const fetchVideoUrl = async ({ name, service, identifier }: any) => {
try {
fetchResource({ name, service, identifier })
let url = await qortalRequest({
action: 'GET_QDN_RESOURCE_URL',
service: service,
name: name,
identifier: identifier
})
if (url) {
dispatch(
updateDownloads({
name,
service,
identifier,
url
})
)
}
} catch (error) {}
}
const performDownload = ({
name,
service,
identifier,
properties
}: IDownloadVideoParams) => {
if(downloads[identifier]) return
dispatch(
setAddToDownloads({
name,
service,
identifier,
properties
})
)
let isCalling = false
let percentLoaded = 0
let timer = 24
const intervalId = setInterval(async () => {
if (isCalling) return
isCalling = true
const res = await qortalRequest({
action: 'GET_QDN_RESOURCE_STATUS',
name: name,
service: service,
identifier: identifier
})
if(res?.status === 'NOT_PUBLISHED'){
dispatch(
updateDownloads({
name,
service,
identifier,
status: res
})
)
clearInterval(intervalId)
}
isCalling = false
if (res.localChunkCount) {
if (res.percentLoaded) {
if (
res.percentLoaded === percentLoaded &&
res.percentLoaded !== 100
) {
timer = timer - 5
} else {
timer = 24
}
if (timer < 0) {
timer = 24
isCalling = true
dispatch(
updateDownloads({
name,
service,
identifier,
status: {
...res,
status: 'REFETCHING'
}
})
)
setTimeout(() => {
isCalling = false
fetchResource({
name,
service,
identifier
})
}, 25000)
return
}
percentLoaded = res.percentLoaded
}
dispatch(
updateDownloads({
name,
service,
identifier,
status: res
})
)
}
// check if progress is 100% and clear interval if true
if (res?.status === 'READY') {
clearInterval(intervalId)
dispatch(
updateDownloads({
name,
service,
identifier,
status: res
})
)
}
}, 5000) // 1 second interval
fetchVideoUrl({
name,
service,
identifier
})
}
const downloadVideo = async ({
name,
service,
identifier,
properties
}: IDownloadVideoParams) => {
try {
performDownload({
name,
service,
identifier,
properties
})
return 'addedToList'
} catch (error) {
console.error(error)
}
}
return (
<>
<MyContext.Provider value={{ downloadVideo }}>
{/* <DownloadTaskManager /> */}
{children}
</MyContext.Provider>
</>
)
}
export default DownloadWrapper
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import {
setAddToDownloads,
updateDownloads
} from '../state/features/globalSlice'
import { DownloadTaskManager } from '../components/common/DownloadTaskManager'
import { RootState } from '../state/store'
interface Props {
children: React.ReactNode
}
const defaultValues: MyContextInterface = {
downloadVideo: () => {}
}
interface IDownloadVideoParams {
name: string
service: string
identifier: string
properties: any
}
interface MyContextInterface {
downloadVideo: ({
name,
service,
identifier,
properties
}: IDownloadVideoParams) => void
}
export const MyContext = React.createContext<MyContextInterface>(defaultValues)
const DownloadWrapper: React.FC<Props> = ({ children }) => {
const dispatch = useDispatch()
const downloads = useSelector((state: RootState) => state.global?.downloads);
const fetchResource = async ({ name, service, identifier }: any) => {
try {
await qortalRequest({
action: 'GET_QDN_RESOURCE_PROPERTIES',
name,
service,
identifier
})
} catch (error) {}
}
const fetchVideoUrl = async ({ name, service, identifier }: any) => {
try {
fetchResource({ name, service, identifier })
let url = await qortalRequest({
action: 'GET_QDN_RESOURCE_URL',
service: service,
name: name,
identifier: identifier
})
if (url) {
dispatch(
updateDownloads({
name,
service,
identifier,
url
})
)
}
} catch (error) {}
}
const performDownload = ({
name,
service,
identifier,
properties
}: IDownloadVideoParams) => {
if(downloads[identifier]) return
dispatch(
setAddToDownloads({
name,
service,
identifier,
properties
})
)
let isCalling = false
let percentLoaded = 0
let timer = 24
const intervalId = setInterval(async () => {
if (isCalling) return
isCalling = true
const res = await qortalRequest({
action: 'GET_QDN_RESOURCE_STATUS',
name: name,
service: service,
identifier: identifier
})
if(res?.status === 'NOT_PUBLISHED'){
dispatch(
updateDownloads({
name,
service,
identifier,
status: res
})
)
clearInterval(intervalId)
}
isCalling = false
if (res.localChunkCount) {
if (res.percentLoaded) {
if (
res.percentLoaded === percentLoaded &&
res.percentLoaded !== 100
) {
timer = timer - 5
} else {
timer = 24
}
if (timer < 0) {
timer = 24
isCalling = true
dispatch(
updateDownloads({
name,
service,
identifier,
status: {
...res,
status: 'REFETCHING'
}
})
)
setTimeout(() => {
isCalling = false
fetchResource({
name,
service,
identifier
})
}, 25000)
return
}
percentLoaded = res.percentLoaded
}
dispatch(
updateDownloads({
name,
service,
identifier,
status: res
})
)
}
// check if progress is 100% and clear interval if true
if (res?.status === 'READY') {
clearInterval(intervalId)
dispatch(
updateDownloads({
name,
service,
identifier,
status: res
})
)
}
}, 5000) // 1 second interval
fetchVideoUrl({
name,
service,
identifier
})
}
const downloadVideo = async ({
name,
service,
identifier,
properties
}: IDownloadVideoParams) => {
try {
performDownload({
name,
service,
identifier,
properties
})
return 'addedToList'
} catch (error) {
console.error(error)
}
}
return (
<>
<MyContext.Provider value={{ downloadVideo }}>
{/* <DownloadTaskManager /> */}
{children}
</MyContext.Provider>
</>
)
}
export default DownloadWrapper

52
tsconfig.json
View File

@ -1,26 +1,26 @@
{
"compilerOptions": {
"target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "ESNext",
"skipLibCheck": true,
"noImplicitAny": false,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"strictNullChecks": false,
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
{
"compilerOptions": {
"target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "ESNext",
"skipLibCheck": true,
"noImplicitAny": false,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"strictNullChecks": false,
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

20
tsconfig.node.json
View File

@ -1,10 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

16
vite.config.ts
View File

@ -1,8 +1,8 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: ""
})
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: ""
})