godzhigella/void.cat
1
0
Fork 0
forked from Kieran/void.cat
Code Pull Requests Activity

Use react-router-dom

Browse Source
This commit is contained in:
Kieran 2022-02-17 11:42:11 +00:00
parent 6f539a4102
commit ad7b40df57
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
6 changed files with 75 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
VoidCat/spa/package.json
View File

@ -9,6 +9,7 @@
"@testing-library/user-event": "^13.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.0"
},

5
VoidCat/spa/src/Admin/Admin.js Normal file
View File

@ -0,0 +1,5 @@
export function Admin(props) {
return (
<h1>Admin</h1>
);
}

25
VoidCat/spa/src/App.js
View File

@ -1,23 +1,20 @@
import { Fragment } from 'react';
import { FilePreview } from "./FilePreview";
import { Dropzone } from "./Dropzone";
import { GlobalStats } from "./GlobalStats";
import {FooterLinks} from "./FooterLinks";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import {FilePreview} from "./FilePreview";
import {HomePage} from "./HomePage";
import {Admin} from "./Admin/Admin";
import './App.css';
function App() {
let hasPath = window.location.pathname !== "/";
return (
<div className="app">
{hasPath ? <FilePreview id={window.location.pathname.substring(1)} />
: (
<Fragment>
<Dropzone />
<GlobalStats />
<FooterLinks />
</Fragment>
)}
<BrowserRouter>
<Routes>
<Route exact path="/" element={<HomePage/>}/>
<Route path="/admin" element={<Admin/>}/>
<Route exact path="/:id" element={<FilePreview/>}/>
</Routes>
</BrowserRouter>
</div>
);
}

29
VoidCat/spa/src/FilePreview.js
View File

@ -1,19 +1,21 @@
import { Fragment, useEffect, useState } from "react";
import "./FilePreview.css";
import {Fragment, useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import {TextPreview} from "./TextPreview";
export function FilePreview(props) {
let [info, setInfo] = useState();
import "./FilePreview.css";
export function FilePreview() {
const params = useParams();
const [info, setInfo] = useState();
async function loadInfo() {
let req = await fetch(`/upload/${props.id}`);
let req = await fetch(`/upload/${params.id}`);
if (req.ok) {
let info = await req.json();
setInfo(info);
}
}
function renderTypes() {
let link = `/d/${info.id}`;
if (info.metadata) {
@ -21,17 +23,17 @@ export function FilePreview(props) {
case "image/jpg":
case "image/jpeg":
case "image/png": {
return <img src={link} alt={info.metadata.name} />;
return <img src={link} alt={info.metadata.name}/>;
}
case "video/mp4":
case "video/matroksa":
case "video/x-matroska":
case "video/webm":
case "video/webm":
case "video/quicktime": {
return <video src={link} controls />;
return <video src={link} controls/>;
}
case "text/plain":{
return <TextPreview link={link}></TextPreview>;
case "text/plain": {
return <TextPreview link={link}/>;
}
case "application/pdf": {
return <object data={link}/>;
@ -49,8 +51,7 @@ export function FilePreview(props) {
<div className="preview">
{info ? (
<Fragment>
this.Download(
<a className="btn" href={`/d/${info.id}`}>{info.metadata?.name ?? info.id}</a>)
this.Download(<a className="btn" href={`/d/${info.id}`}>{info.metadata?.name ?? info.id}</a>)
{renderTypes()}
</Fragment>
) : "Not Found"}

14
VoidCat/spa/src/HomePage.js Normal file
View File

@ -0,0 +1,14 @@
import {Fragment} from "react";
import {Dropzone} from "./Dropzone";
import {GlobalStats} from "./GlobalStats";
import {FooterLinks} from "./FooterLinks";
export function HomePage(props) {
return (
<Fragment>
<Dropzone/>
<GlobalStats/>
<FooterLinks/>
</Fragment>
);
}

29
VoidCat/spa/yarn.lock
View File

@ -1022,6 +1022,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.7.6":
version "7.17.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/template@^7.16.7", "@babel/template@^7.3.3":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@ -4370,6 +4377,13 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
history@^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/history/-/history-5.2.0.tgz#7cdd31cf9bac3c5d31f09c231c9928fad0007b7c"
integrity sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==
dependencies:
"@babel/runtime" "^7.7.6"
hoopy@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@ -6899,6 +6913,21 @@ react-refresh@^0.11.0:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
react-router-dom@^6.2.1:
version "6.2.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec"
integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==
dependencies:
history "^5.2.0"
react-router "6.2.1"
react-router@6.2.1:
version "6.2.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.1.tgz#be2a97a6006ce1d9123c28934e604faef51448a3"
integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==
dependencies:
history "^5.2.0"
react-scripts@5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.0.tgz#6547a6d7f8b64364ef95273767466cc577cb4b60"