fedi-image-bot
/
bot-image-moderation-fe
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: fedi-image-bot:8545a492bac21ac3ea89c90e85133bd20790c6b2
Branches Tags
fedi-image-bot:main
fedi-image-bot:v1.0.1
fedi-image-bot:v1.0.0
..
compare: fedi-image-bot:f753684abefac996637b63e61f7a86f8ad1aee4b
Branches Tags
fedi-image-bot:main
fedi-image-bot:v1.0.1
fedi-image-bot:v1.0.0

No commits in common. "8545a492bac21ac3ea89c90e85133bd20790c6b2" and "f753684abefac996637b63e61f7a86f8ad1aee4b" have entirely different histories.
8545a492ba ... f753684abe

12 changed files with 90 additions and 274 deletions
Show Stats Expand all files Collapse all files

18
.eslintrc.cjs
View File

@ -2,17 +2,17 @@ module.exports = {
root: true, root: true,
env: { browser: true, es2020: true }, env: { browser: true, es2020: true },
extends: [ extends: [
"eslint:recommended", 'eslint:recommended',
"plugin:@typescript-eslint/recommended", 'plugin:@typescript-eslint/recommended',
"plugin:react-hooks/recommended", 'plugin:react-hooks/recommended',
], ],
ignorePatterns: ["dist", ".eslintrc.cjs"], ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: "@typescript-eslint/parser", parser: '@typescript-eslint/parser',
plugins: ["react-refresh"], plugins: ['react-refresh'],
rules: { rules: {
"react-refresh/only-export-components": [ 'react-refresh/only-export-components': [
"warn", 'warn',
{ allowConstantExport: true }, { allowConstantExport: true },
], ],
}, },
}; }

52
.gitea/workflows/02_build.yaml
View File

@ -1,52 +0,0 @@
name: Build image
on:
push:
branches:
- main
- build
tags:
- v*
jobs:
build:
container:
image: docker:dind
volumes:
- /data/.cache/act:/data/.cache/act
- /var/lib/docker/image:/var/lib/docker/image
- /var/lib/docker/overlay2:/var/lib/docker/overlay2
steps:
- name: Starting docker daemon
run: docker-init -- dockerd --host=unix:///var/run/docker.sock &
- name: Installing necessary packages
run: apk add nodejs git curl bash
- name: Checkout
uses: actions/checkout@v3
- name: Docker meta
id: meta
uses: https://github.com/docker/metadata-action@v4
with:
# list of Docker images to use as base name for tags
images: |
git.fai.st/fedi-image-bot/moderation-fe
# generate Docker tags based on the following events/attributes
tags: |
type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
type=ref,event=branch
type=semver,pattern={{raw}}
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v2
- name: Login to fai.st docker registry
uses: docker/login-action@v2
with:
registry: git.fai.st
username: ${{ secrets.DOCKER_USER }}
password: ${{ secrets.DOCKER_PASS }}
- name: Build and push
uses: docker/build-push-action@v4
with:
platforms: linux/amd64,linux/arm64
context: .
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}

15
index.html
View File

@ -1,20 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link <link rel="icon" type="image/svg+xml" href="/vite.svg" />
rel="icon" <meta name="viewport" content="width=device-width, initial-scale=1.0" />
type="image/svg+xml"
href="/vite.svg" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script <script type="module" src="/src/main.tsx"></script>
type="module"
src="/src/main.tsx"></script>
</body> </body>
</html> </html>

12
init-mongo.js
View File

@ -1,10 +1,10 @@
db = new Mongo().getDB("bot"); db = new Mongo().getDB("bot");
db.createCollection("authorizations"); db.createCollection('authorizations');
db.authorizations.insert([ db.authorizations.insert([
{ {
app: "tester", app: "tester",
secret: "test", secret: "test"
}, }
]); ])

30
src/App.tsx
View File

@ -1,32 +1,12 @@
import { useState } from "react";
import "./App.css"; import "./App.css";
import ImageModerator from "./components/ImageModerator/ImageModerator"; import ImageModerator from "./components/ImageModerator/ImageModerator";
import Login from "./components/Login/Login";
function App() { function App() {
const [{ apiUrl, middlewareUrl, token }, setRemote] = useState({ return (
apiUrl: "", <>
middlewareUrl: "", <ImageModerator />
token: "", </>
}); );
if (token) {
return (
<>
<ImageModerator
token={token}
apiUrl={apiUrl}
middlewareUrl={middlewareUrl}
/>
</>
);
} else {
return (
<>
<Login setRemote={setRemote} />
</>
);
}
} }
export default App; export default App;

6
src/components/Button/Button.tsx
View File

@ -1,8 +1,8 @@
export interface ButtonProps { export interface ButtonProps {
label: string; label: string;
action?: () => void; action?: () => void;
} }
export default function ImageViewer(props: ButtonProps) { export default function ImageViewer(props: ButtonProps) {
return <button onClick={props.action}>{props.label}</button>; return <button onClick={props.action}>{props.label}</button>
} }

64
src/components/ImageModerator/ImageModerator.tsx
View File

@ -1,32 +1,43 @@
import Button from "../Button/Button"; import Button from "../Button/Button";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
interface ImageModeratorProps { // Let the user input the middleware URL, API url and app + secret
token: string; const MWURL = "http://localhost:8081";
apiUrl: string; const APIURL = "http://localhost:8080";
middlewareUrl: string; const app = "tester";
} const secret = "test";
export default function ImageModerator({ export default function ImageModerator() {
token,
apiUrl,
middlewareUrl,
}: ImageModeratorProps) {
const acceptLabel = "Accept"; const acceptLabel = "Accept";
const discardLabel = "Discard"; const discardLabel = "Discard";
const endpoint = `${MWURL}/image`;
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [imageData, setImageData] = useState({ url: "", tags: [] }); const [imageSrc, setImageSrc] = useState("");
const [imageAlt, setImageAlt] = useState("No image"); const [imageAlt, setImageAlt] = useState("No image");
const [token, setToken] = useState("");
useEffect(() => {
fetch(`${APIURL}/login`, {
method: "POST",
body: JSON.stringify({ app, secret }),
headers: { "Content-type": "application/json" },
})
.then((response) => {
return response.json();
})
.then((body) => {
setToken(body.token);
});
}, []);
console.log(token);
function acceptAction() { function acceptAction() {
fetch(`${apiUrl}/images`, { fetch(`${APIURL}/images`, {
method: "POST", method: "POST",
body: JSON.stringify({ body: `{ "url": "${imageSrc}", "status": "available", "tags": [] }`,
url: imageData.url,
status: "available",
tags: imageData.tags,
}),
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
@ -36,13 +47,9 @@ export default function ImageModerator({
} }
function discardAction() { function discardAction() {
fetch(`${apiUrl}/images`, { fetch(`${APIURL}/images`, {
method: "POST", method: "POST",
body: JSON.stringify({ body: `{ "url": "${imageSrc}", "status": "unavailable", "tags": [] }`,
url: imageData.url,
status: "unavailable",
tags: imageData.tags,
}),
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
@ -52,8 +59,8 @@ export default function ImageModerator({
} }
const getNewImage = () => { const getNewImage = () => {
setImageData({ url: "", tags: [] }); setImageSrc("");
fetch(`${middlewareUrl}/image`, { fetch(endpoint, {
method: "GET", method: "GET",
}) })
.then((response) => { .then((response) => {
@ -61,9 +68,8 @@ export default function ImageModerator({
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
const url = data.url; const imageUrl = data.url;
const tags = data.tags; setImageSrc(imageUrl);
setImageData({ url, tags });
}) })
.catch((error) => { .catch((error) => {
setImageAlt("Error"); setImageAlt("Error");
@ -90,7 +96,7 @@ export default function ImageModerator({
<span>Loading...</span> <span>Loading...</span>
) : ( ) : (
<img <img
src={imageData.url} src={imageSrc}
alt={imageAlt} alt={imageAlt}
style={{ style={{
width: "100%", width: "100%",

111
src/components/Login/Login.tsx
View File

@ -1,111 +0,0 @@
import { useEffect, useState } from "react";
export default function Login({ setRemote }: { setRemote: Function }) {
const sendLabel = "Login";
const [middlewareUrl, setMiddlewareUrl] = useState("");
const [apiUrl, setApiUrl] = useState("");
const [app, setApp] = useState("");
const [secret, setSecret] = useState("");
function sendAction() {
event?.preventDefault();
try {
if (apiUrl && middlewareUrl && app && secret) {
localStorage.setItem(
"credentials",
JSON.stringify({ apiUrl, middlewareUrl, app, secret })
);
}
} catch (error) {
console.error(error);
}
fetch(`${apiUrl}/login`, {
method: "POST",
body: JSON.stringify({ app, secret }),
headers: { "Content-type": "application/json" },
})
.then((response) => {
return response.json();
})
.then((body) => {
setRemote({ apiUrl, middlewareUrl, token: body.token });
});
}
function handleChange(
e: {
target: { value: React.SetStateAction<string> };
},
setter: React.Dispatch<React.SetStateAction<string>>
): void {
setter(e.target.value);
}
useEffect(() => {
const savedRemote = localStorage.getItem("credentials");
if (savedRemote) {
const savedData = JSON.parse(savedRemote);
setApiUrl(savedData.apiUrl);
setMiddlewareUrl(savedData.middlewareUrl);
setApp(savedData.app);
setSecret(savedData.secret);
}
}, []);
useEffect(() => {
if (secret) {
sendAction();
}
}, [secret]);
return (
<div
style={{
height: "100vh",
width: "100vw",
}}>
<form
style={{
height: "100%",
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
onSubmit={sendAction}>
<label>API URL: </label>
<input
type="url"
id="api"
name="api"
value={apiUrl}
onChange={(e) => handleChange(e, setApiUrl)}
/>
<label>Source URL: </label>
<input
type="url"
id="middleware"
name="middleware"
value={middlewareUrl}
onChange={(e) => handleChange(e, setMiddlewareUrl)}
/>
<label>App name: </label>
<input
type="text"
id="username"
name="username"
value={app}
onChange={(e) => handleChange(e, setApp)}
/>
<label>Secret: </label>
<input
type="password"
value={secret}
onChange={(e) => handleChange(e, setSecret)}
/>
<button type="submit">{sendLabel}</button>
</form>
</div>
);
}

10
src/main.tsx
View File

@ -1,5 +1,7 @@
import ReactDOM from "react-dom/client"; import ReactDOM from 'react-dom/client'
import App from "./App.tsx"; import App from './App.tsx'
import "./index.css"; import './index.css'
ReactDOM.createRoot(document.getElementById("root")!).render(<App />); ReactDOM.createRoot(document.getElementById('root')!).render(
<App />
)

32
test/unit/ImageModerator.test.tsx
View File

@ -1,31 +1,29 @@
import React from "react"; import React from "react";
import { render, screen } from "@testing-library/react"; import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "bun:test"; import { describe, expect, it } from "bun:test";
import ImageModerator, { import ImageModerator, { ImageModeratorProps } from '../../src/components/ImageModerator/ImageModerator';
ImageModeratorProps,
} from "../../src/components/ImageModerator/ImageModerator";
const properties: ImageModeratorProps = { const properties: ImageModeratorProps = {
acceptLabel: "Accept", acceptLabel: "Accept",
discardLabel: "Discard", discardLabel: "Discard"
}; }
it("should render into the document", () => { it("should render into the document", () => {
render(<ImageModerator {...properties} />); render(<ImageModerator {...properties} />);
}); });
it("should show a new image when accept button is clicked", () => { it("should show a new image when accept button is clicked", () => {
const acceptButton = screen.getByText(properties.acceptLabel); const acceptButton = screen.getByText(properties.acceptLabel);
const imgElement = screen.getByRole("img"); const imgElement = screen.getByRole("img");
const imgElementSrcBefore = imgElement.getAttribute("src"); const imgElementSrcBefore = imgElement.getAttribute("src");
acceptButton.click(); acceptButton.click();
expect(imgElement.getAttribute("src")).not.toEqual(imgElementSrcBefore); expect(imgElement.getAttribute("src")).not.toEqual(imgElementSrcBefore);
}); });
it("should show a new image when discard button is clicked", () => { it("should show a new image when discard button is clicked", () => {
const discardButton = screen.getByText(properties.discardLabel); const discardButton = screen.getByText(properties.discardLabel);
const imgElement = screen.getByRole("img"); const imgElement = screen.getByRole("img");
const imgElementSrcBefore = imgElement.getAttribute("src"); const imgElementSrcBefore = imgElement.getAttribute("src");
discardButton.click(); discardButton.click();
expect(imgElement.getAttribute("src")).not.toEqual(imgElementSrcBefore); expect(imgElement.getAttribute("src")).not.toEqual(imgElementSrcBefore);
}); });

8
vite.config.ts
View File

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