alexandre/PaletteSwitcher
1
0
Fork 0
Code Issues 3 Pull Requests 8 Actions Packages Projects Releases Activity

React client app #5

Merged
CrispyBaguette merged 18 commits from react-client-app into master 2021-12-12 17:42:16 +00:00
Conversation 0 Commits 18 Files Changed 47 +2 -5
1 changed files with 2 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a8f15df46d - Show all commits

7
client/src/App.tsx
View File

@ -1,9 +1,8 @@
import React, { useEffect } from "react"; import React from "react";
import "./App.css"; import "./App.css";
function App() { function App() {
const [imageSrc, setImageSrc] = React.useState(""); const [imageSrc, setImageSrc] = React.useState("");
const [displayOutput, setDisplayOutput] = React.useState(false);
const fileInput = React.useRef<HTMLInputElement>(null); const fileInput = React.useRef<HTMLInputElement>(null);
const handleClick = async () => { const handleClick = async () => {
@ -12,7 +11,6 @@ function App() {
} }
const workerProxy: any = await wasmWorker("main.wasm"); const workerProxy: any = await wasmWorker("main.wasm");
setDisplayOutput(false);
setImageSrc(""); setImageSrc("");
// Check if a file was selected // Check if a file was selected
@ -28,7 +26,6 @@ function App() {
const ditheredImage = await workerProxy.DitherNord(imageData); const ditheredImage = await workerProxy.DitherNord(imageData);
const outputValue = `data:image/png;base64,${ditheredImage}`; const outputValue = `data:image/png;base64,${ditheredImage}`;
setImageSrc(outputValue); setImageSrc(outputValue);
setDisplayOutput(true);
} }
}; };
}; };
@ -50,7 +47,7 @@ function App() {
id="output" id="output"
alt="dithering output" alt="dithering output"
src={imageSrc} src={imageSrc}
style={{ display: displayOutput ? "block" : "none" }} style={{ display: imageSrc !== "" ? "block" : "none" }}
/> />
</div> </div>
</a> </a>