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:f753684abefac996637b63e61f7a86f8ad1aee4b
Branches Tags
fedi-image-bot:main
fedi-image-bot:v1.0.0
...
compare: fedi-image-bot:8545a492bac21ac3ea89c90e85133bd20790c6b2
Branches Tags
fedi-image-bot:main
fedi-image-bot:v1.0.0

3 Commits
f753684abe ... 8545a492ba

Author SHA1 Message Date
Alie 8545a492ba add build yaml for docker image creation 2024-04-27 18:18:50 +02:00
Alie 42ca60c026 fmt 2024-04-27 18:17:56 +02:00
Alie 0c1de423ef Add login feature with local sesion storage and added tags to post request 2024-04-27 18:03:58 +02:00
12 changed files with 274 additions and 90 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 Normal file
View File

@ -0,0 +1,52 @@
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,13 +1,20 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> rel="icon"
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 type="module" src="/src/main.tsx"></script> <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,12 +1,32 @@
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() {
return ( const [{ apiUrl, middlewareUrl, token }, setRemote] = useState({
<> apiUrl: "",
<ImageModerator /> middlewareUrl: "",
</> 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,43 +1,32 @@
import Button from "../Button/Button"; import Button from "../Button/Button";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
// Let the user input the middleware URL, API url and app + secret interface ImageModeratorProps {
const MWURL = "http://localhost:8081"; token: string;
const APIURL = "http://localhost:8080"; apiUrl: string;
const app = "tester"; middlewareUrl: string;
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 [imageSrc, setImageSrc] = useState(""); const [imageData, setImageData] = useState({ url: "", tags: [] });
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: `{ "url": "${imageSrc}", "status": "available", "tags": [] }`, body: JSON.stringify({
url: imageData.url,
status: "available",
tags: imageData.tags,
}),
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
@ -47,9 +36,13 @@ export default function ImageModerator() {
} }
function discardAction() { function discardAction() {
fetch(`${APIURL}/images`, { fetch(`${apiUrl}/images`, {
method: "POST", method: "POST",
body: `{ "url": "${imageSrc}", "status": "unavailable", "tags": [] }`, body: JSON.stringify({
url: imageData.url,
status: "unavailable",
tags: imageData.tags,
}),
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
@ -59,8 +52,8 @@ export default function ImageModerator() {
} }
const getNewImage = () => { const getNewImage = () => {
setImageSrc(""); setImageData({ url: "", tags: [] });
fetch(endpoint, { fetch(`${middlewareUrl}/image`, {
method: "GET", method: "GET",
}) })
.then((response) => { .then((response) => {
@ -68,8 +61,9 @@ export default function ImageModerator() {
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
const imageUrl = data.url; const url = data.url;
setImageSrc(imageUrl); const tags = data.tags;
setImageData({ url, tags });
}) })
.catch((error) => { .catch((error) => {
setImageAlt("Error"); setImageAlt("Error");
@ -96,7 +90,7 @@ export default function ImageModerator() {
<span>Loading...</span> <span>Loading...</span>
) : ( ) : (
<img <img
src={imageSrc} src={imageData.url}
alt={imageAlt} alt={imageAlt}
style={{ style={{
width: "100%", width: "100%",

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

@ -0,0 +1,111 @@
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,7 +1,5 @@
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( ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
<App />
)

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

@ -1,29 +1,31 @@
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, { ImageModeratorProps } from '../../src/components/ImageModerator/ImageModerator'; import 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()],
}) });