Compare commits
3 Commits
f753684abe
...
8545a492ba
Author | SHA1 | Date |
---|---|---|
Alie | 8545a492ba | |
Alie | 42ca60c026 | |
Alie | 0c1de423ef |
|
@ -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 },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|
|
@ -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 }}
|
|
@ -6,4 +6,4 @@ COPY . /temp/prod/
|
||||||
RUN cd /temp/prod && bun run build
|
RUN cd /temp/prod && bun run build
|
||||||
|
|
||||||
FROM nginx AS release
|
FROM nginx AS release
|
||||||
COPY --from=install /temp/prod/dist /usr/share/nginx/html
|
COPY --from=install /temp/prod/dist /usr/share/nginx/html
|
||||||
|
|
15
index.html
15
index.html
|
@ -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>
|
||||||
|
|
|
@ -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
30
src/App.tsx
|
@ -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;
|
||||||
|
|
|
@ -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>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%",
|
||||||
|
|
|
@ -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
10
src/main.tsx
|
@ -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 />
|
|
||||||
)
|
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
|
@ -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()],
|
||||||
})
|
});
|
||||||
|
|
Loading…
Reference in New Issue