From 4715d960fc5a7ecb815d637679486c9b88b8fd91 Mon Sep 17 00:00:00 2001 From: Jordan Doyle Date: Sat, 18 Sep 2021 03:21:14 +0100 Subject: [PATCH] Run prettier over chartered-frontend --- chartered-frontend/.prettierignore | 2 ++ chartered-frontend/.prettierrc.json | 1 + chartered-frontend/index.html | 12 ++++++------ chartered-frontend/package-lock.json | 19 +++++++++++++++++++ chartered-frontend/package.json | 4 +++- chartered-frontend/src/index.tsx | 172 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- chartered-frontend/src/overscrollColourFixer.ts | 29 +++++++++++++++++------------ chartered-frontend/src/useAuth.tsx | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------ chartered-frontend/src/util.tsx | 56 +++++++++++++++++++++++++++++++------------------------- chartered-frontend/src/pages/Dashboard.tsx | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- chartered-frontend/src/pages/ErrorPage.tsx | 16 ++++++++-------- chartered-frontend/src/pages/Loading.tsx | 14 ++++++++------ chartered-frontend/src/pages/Login.tsx | 169 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- chartered-frontend/src/sections/Nav.tsx | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------- chartered-frontend/src/pages/crate/CrateView.tsx | 349 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----- chartered-frontend/src/pages/crate/Members.tsx | 769 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------- chartered-frontend/src/pages/ssh-keys/AddSshKeys.tsx | 175 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- chartered-frontend/src/pages/ssh-keys/ListSshKeys.tsx | 303 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 18 files changed, 1410 insertions(+), 1015 deletions(-) diff --git a/chartered-frontend/.prettierignore b/chartered-frontend/.prettierignore new file mode 100644 index 0000000..ba70f38 100644 --- /dev/null +++ a/chartered-frontend/.prettierignore @@ -1,0 +1,2 @@ +.cache +dist diff --git a/chartered-frontend/.prettierrc.json b/chartered-frontend/.prettierrc.json new file mode 100644 index 0000000..0967ef4 100644 --- /dev/null +++ a/chartered-frontend/.prettierrc.json @@ -1,0 +1,1 @@ +{} diff --git a/chartered-frontend/index.html b/chartered-frontend/index.html index 99fbba8..8c2e44d 100644 --- a/chartered-frontend/index.html +++ a/chartered-frontend/index.html @@ -1,13 +1,13 @@ - - - + + + chartered - + - +
- + diff --git a/chartered-frontend/package-lock.json b/chartered-frontend/package-lock.json index 50d1efa..4a3e4f3 100644 --- a/chartered-frontend/package-lock.json +++ a/chartered-frontend/package-lock.json @@ -28,6 +28,7 @@ "@types/react": "^17.0.20", "@types/react-dom": "^17.0.9", "parcel-bundler": "^1.12.5", + "prettier": "2.4.1", "sass": "^1.39.2", "serve": "^12.0.1", "typescript": "^4.4.2" @@ -8651,6 +8652,18 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz", + "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/prismjs": { "version": "1.24.1", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.24.1.tgz", @@ -18439,6 +18452,12 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", + "dev": true + }, + "prettier": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz", + "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==", "dev": true }, "prismjs": { diff --git a/chartered-frontend/package.json b/chartered-frontend/package.json index e2e4938..8f4910c 100644 --- a/chartered-frontend/package.json +++ a/chartered-frontend/package.json @@ -6,7 +6,8 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "parcel index.html --open", - "build": "parcel build index.html" + "build": "parcel build index.html", + "fmt": "prettier --write ." }, "keywords": [], "author": "", @@ -16,6 +17,7 @@ "@types/react": "^17.0.20", "@types/react-dom": "^17.0.9", "parcel-bundler": "^1.12.5", + "prettier": "2.4.1", "sass": "^1.39.2", "serve": "^12.0.1", "typescript": "^4.4.2" diff --git a/chartered-frontend/src/index.tsx b/chartered-frontend/src/index.tsx index c1d1caf..69dd4a4 100644 --- a/chartered-frontend/src/index.tsx +++ a/chartered-frontend/src/index.tsx @@ -1,16 +1,16 @@ import "./index.sass"; -import './overscrollColourFixer.ts'; +import "./overscrollColourFixer.ts"; import React = require("react"); import ReactDOM = require("react-dom"); import { - BrowserRouter as Router, - Switch, - Route, - Redirect, - useLocation - } from "react-router-dom"; + BrowserRouter as Router, + Switch, + Route, + Redirect, + useLocation, +} from "react-router-dom"; import { ProvideAuth, useAuth } from "./useAuth"; @@ -21,69 +21,119 @@ import AddSshKeys from "./pages/ssh-keys/AddSshKeys"; function App() { - return ( - - - - } /> - - } /> - } /> - } /> - } /> - } /> - - - - ); + return ( + + + + } + /> + + } + /> + } + /> + } + /> + } + /> + } + /> + + + + ); } ReactDOM.render(, document.getElementById("root")); function PublicRoute({ - component: Component, - unauthedOnly, - ...rest + component: Component, + unauthedOnly, + ...rest }: { - component: ({ match, location }: { match: any, location: ReturnType }) => JSX.Element; - unauthedOnly: boolean; + component: ({ + match, + location, + }: { + match: any; + location: ReturnType; + }) => JSX.Element; + unauthedOnly: boolean; } & { [r: string]: any }) { - const auth = useAuth(); - - return ( - { - // TODO: check if valid key - if (!unauthedOnly || !auth || !auth.authKey || auth.expires < new Date()) { - return ; - } else { - return ; - } - }} - > - ) + const auth = useAuth(); + + return ( + { + // TODO: check if valid key + if ( + !unauthedOnly || + !auth || + !auth.authKey || + auth.expires < new Date() + ) { + return ; + } else { + return ( + + ); + } + }} + > + ); } function PrivateRoute({ - component: Component, - ...rest + component: Component, + ...rest }: { - component: ({ match, location }: { match: any, location: ReturnType }) => JSX.Element; + component: ({ + match, + location, + }: { + match: any; + location: ReturnType; + }) => JSX.Element; } & { [r: string]: any }) { - const auth = useAuth(); - - return ( - { - // TODO: check if valid key - if (auth && auth?.authKey && auth.expires > new Date()) { - return ; - } else { - return ; - } - }} - > - ) -}+ const auth = useAuth(); + + return ( + { + // TODO: check if valid key + if (auth && auth?.authKey && auth.expires > new Date()) { + return ; + } else { + return ( + + ); + } + }} + > + ); +} diff --git a/chartered-frontend/src/overscrollColourFixer.ts b/chartered-frontend/src/overscrollColourFixer.ts index 5945818..2a23da9 100644 --- a/chartered-frontend/src/overscrollColourFixer.ts +++ a/chartered-frontend/src/overscrollColourFixer.ts @@ -1,19 +1,24 @@ // A quick little utility to fix the overscroll colour at the bottom // of the page vs the top of the page. We don't have a footer so we // just want to carry on the body background, whereas the header is // white so we want to use that at the top of the page. -window.addEventListener('load', () => { - let ticking; +window.addEventListener("load", () => { + let ticking; - window.addEventListener('scroll', function (event) { - if (!ticking) { - ticking = true; + window.addEventListener( + "scroll", + function (event) { + if (!ticking) { + ticking = true; - window.requestAnimationFrame(() => { - document.documentElement.style.backgroundColor = (window.scrollY > 70) ? 'var(--bs-primary)' : '#fff'; - ticking = false; - }); - } - }, false); -});+ window.requestAnimationFrame(() => { + document.documentElement.style.backgroundColor = + window.scrollY > 70 ? "var(--bs-primary)" : "#fff"; + ticking = false; + }); + } + }, + false + ); +}); diff --git a/chartered-frontend/src/useAuth.tsx b/chartered-frontend/src/useAuth.tsx index 85810fa..bbee601 100644 --- a/chartered-frontend/src/useAuth.tsx +++ a/chartered-frontend/src/useAuth.tsx @@ -1,72 +1,75 @@ -import React = require('react'); +import React = require("react"); import { useState, useEffect, useContext, createContext } from "react"; import { unauthenticatedEndpoint } from "./util"; export interface AuthContext { - authKey?: string, - expires?: Date, - login: (username: string, password: string) => Promise, - logout: () => Promise, + authKey?: string; + expires?: Date; + login: (username: string, password: string) => Promise; + logout: () => Promise; } const authContext = createContext(null); export function ProvideAuth({ children }: { children: any }) { - const auth = useProvideAuth(); - return {children}; -}; + const auth = useProvideAuth(); + return {children}; +} export const useAuth = (): AuthContext | null => { - return useContext(authContext); + return useContext(authContext); }; function useProvideAuth(): AuthContext { - const [authKey, setAuthKey] = useState(() => getAuthStorage().authKey); - const [expires, setExpires] = useState(() => getAuthStorage().expires); - - useEffect(() => { - localStorage.setItem("charteredAuthentication", JSON.stringify({ authKey, expires })); - }, [authKey, expires]); - - const login = async (username: string, password: string) => { - let res = await fetch(unauthenticatedEndpoint('login'), { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'User-Agent': window.navigator.userAgent, - }, - body: JSON.stringify({ username, password }), - }); - let json = await res.json(); - - if (json.error) { - throw new Error(json.error); - } - - setExpires(new Date(json.expires)); - setAuthKey(json.key); - }; - - const logout = async () => { - // todo call the service so we can purge the key from the db - localStorage.removeItem("charteredAuthentication"); - setExpires(null); - setAuthKey(null); + const [authKey, setAuthKey] = useState(() => getAuthStorage().authKey); + const [expires, setExpires] = useState(() => getAuthStorage().expires); + + useEffect(() => { + localStorage.setItem( + "charteredAuthentication", + JSON.stringify({ authKey, expires }) + ); + }, [authKey, expires]); + + const login = async (username: string, password: string) => { + let res = await fetch(unauthenticatedEndpoint("login"), { + method: "POST", + headers: { + "Content-Type": "application/json", + "User-Agent": window.navigator.userAgent, + }, + body: JSON.stringify({ username, password }), + }); + let json = await res.json(); + + if (json.error) { + throw new Error(json.error); } - return { - authKey, - expires, - login, - logout, - } + setExpires(new Date(json.expires)); + setAuthKey(json.key); + }; + + const logout = async () => { + // todo call the service so we can purge the key from the db + localStorage.removeItem("charteredAuthentication"); + setExpires(null); + setAuthKey(null); + }; + + return { + authKey, + expires, + login, + logout, + }; } function getAuthStorage() { - const saved = localStorage.getItem("charteredAuthentication"); - const initial = JSON.parse(saved); - return { - authKey: initial?.authKey || null, - expires: initial?.expires ? new Date(initial.expires) : null, - }; + const saved = localStorage.getItem("charteredAuthentication"); + const initial = JSON.parse(saved); + return { + authKey: initial?.authKey || null, + expires: initial?.expires ? new Date(initial.expires) : null, + }; } diff --git a/chartered-frontend/src/util.tsx b/chartered-frontend/src/util.tsx index e0fea43..8b3da03 100644 --- a/chartered-frontend/src/util.tsx +++ a/chartered-frontend/src/util.tsx @@ -1,34 +1,40 @@ import React = require("react"); import { AuthContext } from "./useAuth"; -export const BASE_URL = 'http://localhost:8888'; +export const BASE_URL = "http://localhost:8888"; export function unauthenticatedEndpoint(endpoint: string): string { - return `${BASE_URL}/a/-/web/v1/${endpoint}`; + return `${BASE_URL}/a/-/web/v1/${endpoint}`; } -export function authenticatedEndpoint(auth: AuthContext, endpoint: string): string { - return `${BASE_URL}/a/${auth.authKey}/web/v1/${endpoint}`; +export function authenticatedEndpoint( + auth: AuthContext, + endpoint: string +): string { + return `${BASE_URL}/a/${auth.authKey}/web/v1/${endpoint}`; } -export function useAuthenticatedRequest({ auth, endpoint }: { auth: AuthContext, endpoint: string }, reloadOn = []): { response: S | null, error: string | null } { - const [error, setError] = React.useState(null); - const [response, setResponse] = React.useState(null); - - React.useEffect(async () => { - try { - let req = await fetch(authenticatedEndpoint(auth, endpoint)); - let res = await req.json(); - - if (res.error) { - setError(res.error); - } else { - setResponse(res); - } - } catch (e) { - setError(e.message); - } - }, reloadOn); - - return { response, error }; -}+export function useAuthenticatedRequest( + { auth, endpoint }: { auth: AuthContext; endpoint: string }, + reloadOn = [] +): { response: S | null; error: string | null } { + const [error, setError] = React.useState(null); + const [response, setResponse] = React.useState(null); + + React.useEffect(async () => { + try { + let req = await fetch(authenticatedEndpoint(auth, endpoint)); + let res = await req.json(); + + if (res.error) { + setError(res.error); + } else { + setResponse(res); + } + } catch (e) { + setError(e.message); + } + }, reloadOn); + + return { response, error }; +} diff --git a/chartered-frontend/src/pages/Dashboard.tsx b/chartered-frontend/src/pages/Dashboard.tsx index c01f663..ea1ee13 100644 --- a/chartered-frontend/src/pages/Dashboard.tsx +++ a/chartered-frontend/src/pages/Dashboard.tsx @@ -1,77 +1,90 @@ -import React = require('react'); +import React = require("react"); import { Link } from "react-router-dom"; -import { useAuth } from '../useAuth'; +import { useAuth } from "../useAuth"; import Nav from "../sections/Nav"; -import { ChevronRight } from 'react-bootstrap-icons'; +import { ChevronRight } from "react-bootstrap-icons"; export default function Dashboard() { - const auth = useAuth(); - - const recentlyUpdated = [ - { - name: "hello-world-rs", - version: "0.0.1", - }, - { - name: "cool-beans-rs", - version: "0.0.1", - } - ]; - - return ( -
- + ); +} diff --git a/chartered-frontend/src/pages/crate/CrateView.tsx b/chartered-frontend/src/pages/crate/CrateView.tsx index b54305b..95b4e6b 100644 --- a/chartered-frontend/src/pages/crate/CrateView.tsx +++ a/chartered-frontend/src/pages/crate/CrateView.tsx @@ -1,177 +1,222 @@ -import React = require('react'); +import React = require("react"); -import { useState, useEffect } from 'react'; +import { useState, useEffect } from "react"; -import { useAuth } from '../../useAuth'; +import { useAuth } from "../../useAuth"; import Nav from "../../sections/Nav"; -import Loading from '../Loading'; -import ErrorPage from '../ErrorPage'; -import { Box, HouseDoor, Book, Building } from 'react-bootstrap-icons'; +import Loading from "../Loading"; +import ErrorPage from "../ErrorPage"; +import { Box, HouseDoor, Book, Building } from "react-bootstrap-icons"; import { useParams } from "react-router-dom"; -import { useAuthenticatedRequest } from '../../util'; +import { useAuthenticatedRequest } from "../../util"; -import Prism from 'react-syntax-highlighter/dist/cjs/prism'; -import ReactMarkdown from 'react-markdown'; -import remarkGfm from 'remark-gfm'; -import Members from './Members'; +import Prism from "react-syntax-highlighter/dist/cjs/prism"; +import ReactMarkdown from "react-markdown"; +import remarkGfm from "remark-gfm"; +import Members from "./Members"; -type Tab = 'readme' | 'versions' | 'members'; +type Tab = "readme" | "versions" | "members"; export interface CrateInfo { - versions: CrateInfoVersion[], + versions: CrateInfoVersion[]; } export interface CrateInfoVersion { - vers: string, - homepage: string | null, - description: string | null, - documentation: string | null, - repository: string | null, - deps: CrateInfoVersionDependency[], + vers: string; + homepage: string | null; + description: string | null; + documentation: string | null; + repository: string | null; + deps: CrateInfoVersionDependency[]; } export interface CrateInfoVersionDependency { - name: string, - version_req: string, + name: string; + version_req: string; } export default function SingleCrate() { - const auth = useAuth(); - const { crate } = useParams(); - - const [currentTab, setCurrentTab] = useState('readme'); - - const { response: crateInfo, error } = useAuthenticatedRequest({ - auth, - endpoint: `crates/${crate}`, - }); - - if (error) { - return ; - } else if (!crateInfo) { - return ; - } - - const crateVersion = crateInfo.versions[crateInfo.versions.length - 1]; - - return ( -
-