c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

We code better now

Browse Source
This commit is contained in:
Daniel Kluge
2022-06-12 14:22:15 +02:00
parent 929519225a
commit 0a0020b5c0
12 changed files with 230 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
components/ProjectModal.tsx
View File

@ -1,69 +1,48 @@
import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react";
import { useContext, useEffect, useRef, useState } from "react";
import asciidoctor from "asciidoctor";
import styles from "../styles/ProjectModal.module.css";
import type { Project, Diary } from "../lib/projects/types";
import type { Project, Diary } from "../lib/content/types";
import { useCommands } from "./contexts/CommandInterface";
import { generateContent, projectEmpty } from "../lib/content/generate";
import { useModalFunctions } from "./contexts/ModalFunctions";
//import Link from "next/link";
interface ModalInput {
project: Project|Diary|undefined;
projectType: "project"|"diary";
visible: boolean;
setVisible: CallableFunction;
}
const ProjectModal: NextPage = () => {
const [visible, setVisible] = useState<boolean>(false);
const [diaryPages, setDiaryPages] = useState<string[]>([]);
const [content, setContent] = useState<string>(projectEmpty);
const ad = asciidoctor();
const setModalContent = async (content: Project|Diary, selectedPage?: number) => {
if (content.type === "diary") setDiaryPages(content.entries.map(entry => entry.title));
setContent(await generateContent(content, selectedPage));
};
const { updateCallbacks: updateCmdCallbacks } = useCommands();
const { updateCallbacks: updateModalCallbacks } = useModalFunctions();
updateCmdCallbacks({ setModalVisible: setVisible, setModalContent});
updateModalCallbacks({ setVisible, setContent: setModalContent, setHtml: setContent });
const ProjectModal: NextPage<ModalInput> = ({ project, projectType, visible, setVisible }) => {
const projectEmpty = "<div>Kein Projekt ausgewählt.</div>";
const [projectData, setProjectData] = useState<string>(projectEmpty);
const containerRef = useRef<HTMLDivElement>(null);
const projectNotFoundHtml = `<div class="${"error"}">Sorry! There is no data for this project. Please check back later to see if that changed!</div>`;
const projectServerErrorHtml = `<div class="${"error"}">Sorry! A server error happend when the project data was fetched!</div>`;
const generateFooter = (project: string, lastUpdate: string) => `<hr>
<div id="footer">
<div id="footer-text">
Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/frontpage-projects/src/branch/senpai/${project}.adoc">Document source</a>
</div>
</div>
`;
useEffect(() => {
if (project && project.name) {
// TODO
// set Spinner
setProjectData("Loading...");
fetch(`/api/${projectType === "diary" ? "diaries" : "projects"}/${project.name}`).then((res) => {
if (res.status === 404) setProjectData(projectNotFoundHtml);
if (res.status !== 200) setProjectData(projectServerErrorHtml);
res.text().then(data => {
try {
const adDoc = ad.load(data, { attributes: { showtitle: true } });
setProjectData(adDoc.convert(adDoc).toString() + generateFooter(project.name, adDoc.getAttribute("docdatetime")));
} catch {
setProjectData(projectServerErrorHtml);
}
});
});
} else if (typeof project === "undefined") setProjectData(projectEmpty);
}, [project, projectType, projectEmpty, projectNotFoundHtml, projectServerErrorHtml]);
useEffect(() => {
if (projectData && containerRef.current && projectData !== "") {
containerRef.current.innerHTML = projectData;
if (content && containerRef.current) {
containerRef.current.innerHTML = content;
}
}, [projectData, visible]);
}, [content]);
if (!visible) return <></>;
return <div className={styles.modal}>
<a href="javascript:void(0);" onClick={() => setVisible(false)}>
<a onClick={() => setVisible(false)}>
<div className={styles.modalClose}><div className={styles.modalCloseAlign}>X</div></div>
</a>
<div className={styles.modalContainer}>
{
// TODO
// If diaryPages
// Show page selector
}
<div className={`${styles.modalText} asciidoc`} ref={containerRef}>
</div>

2
components/REPL/REPLHistory.tsx
View File

@ -1,6 +1,6 @@
import { NextPage } from "next";
import Link from "next/link";
import { BaseSyntheticEvent, MutableRefObject, useEffect, useRef } from "react";
import type { BaseSyntheticEvent, MutableRefObject } from "react";
import styles from "../../styles/REPL/REPLHistory.module.css";
interface REPLHistoryParams {

138
components/REPL/REPLInput.tsx
View File

@ -1,27 +1,17 @@
import type { NextPage } from "next";
import useSWR from "swr";
import { MutableRefObject, useState, createRef, useEffect } from "react";
import { MutableRefObject, useState, createRef } from "react";
import { CommandInterface } from "../../lib/commands";
import styles from "../../styles/REPL/REPLInput.module.css";
import type { ProjectList } from "../../lib/projects/types";
import { useCommands } from "../contexts/CommandInterface";
import { useModalFunctions } from "../contexts/ModalFunctions";
interface REPLInputParams {
historyCallback: CallableFunction;
historyClear: CallableFunction;
inputRef: MutableRefObject<HTMLInputElement|null>;
modalManipulation: {
setModalVisible: CallableFunction;
setModalProject: CallableFunction;
setModalProjectType: CallableFunction;
}
}
async function fetchProjects(endpoint: string): Promise<ProjectList> {
const res = await fetch(endpoint);
return res.json();
}
const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef, modalManipulation}) => {
const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef}) => {
const typed = createRef<HTMLSpanElement>();
const completion = createRef<HTMLSpanElement>();
const [currentCmd, setCurrentCmd] = useState<string[]>([]);
@ -29,8 +19,8 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
const [inCmdHistory, setInCmdHistory] = useState<number>(-1);
const [cmdHistory, setCmdHistory] = useState<string[]>([]);
const [usrInputTmp, setUsrInputTmp] = useState<string>("");
const [cmdIf, setCmdIf] = useState<CommandInterface>(new CommandInterface(modalManipulation, {projects: [], diaries: []}));
const { data: projects, error: projectsError } = useSWR("/api/projects?swr=1", fetchProjects);
const {cmdContext: cmdIf} = useCommands();
const { modalFunctions } = useModalFunctions();
const setInput = (inputRef: HTMLInputElement, input: string) => {
const nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
@ -38,8 +28,8 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
nativeSetter.call(inputRef, input);
//if(typed.current) typed.current.innerHTML = input;
//if(completion.current) completion.current.innerHTML = "";
const event = new Event("input", { bubbles: true });
inputRef.dispatchEvent(event);
inputRef.dispatchEvent(new Event("input", { bubbles: true }));
inputRef.dispatchEvent(new Event("change", { bubbles: true }));
};
const clearInput = (inputRef: HTMLInputElement) => {
@ -83,74 +73,68 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
return false;
} else setJustTabbed(0);
if (e.key === "Enter") {
e.preventDefault();
const command = (e.target as HTMLInputElement).value.trim();
if (cmdHistory.at(-1) !== command) setCmdHistory(cmdHistory.concat([command]).splice(0, 100));
clearInput(input);
setInCmdHistory(-1);
setCurrentCmd([]);
if (command === "clear") {
switch (true) {
case e.key === "Enter": {
e.preventDefault();
const command = (e.target as HTMLInputElement).value.trim();
if (cmdHistory.at(-1) !== command) setCmdHistory(cmdHistory.concat([command]).splice(0, 100));
clearInput(input);
setInCmdHistory(-1);
setCurrentCmd([]);
if (command === "clear") {
historyClear();
return false;
}
const result = cmdIf.executeCommand(command);
historyCallback(result);
return false;
}
case e.key === "d" && e.ctrlKey: {
e.preventDefault();
const result = cmdIf.executeCommand("exit");
clearInput(input);
historyCallback(result);
return false;
}
case e.key === "l" && e.ctrlKey: {
e.preventDefault();
clearInput(input);
historyClear();
return false;
}
const result = cmdIf.executeCommand(command);
historyCallback(result);
return false;
}
if (e.key === "d" && e.ctrlKey) {
e.preventDefault();
const result = cmdIf.executeCommand("exit");
clearInput(input);
historyCallback(result);
return false;
}
if (e.key === "l" && e.ctrlKey) {
e.preventDefault();
clearInput(input);
historyClear();
return false;
}
if ((e.key === "c" || e.key === "u") && e.ctrlKey) {
e.preventDefault();
clearInput(input);
return false;
}
if (e.key === "ArrowUp") {
e.preventDefault();
const idx = inCmdHistory + 1;
if (idx < cmdHistory.length) {
if (inCmdHistory === -1) setUsrInputTmp(input.value);
const cmd = cmdHistory[cmdHistory.length - idx - 1];
setInput(input, cmd);
setInCmdHistory(idx);
case (e.key === "c" || e.key === "u") && e.ctrlKey: {
e.preventDefault();
clearInput(input);
return false;
}
}
case e.key === "ArrowUp": {
e.preventDefault();
const idx = inCmdHistory + 1;
if (idx < cmdHistory.length) {
if (inCmdHistory === -1) setUsrInputTmp(input.value);
if (e.key === "ArrowDown") {
e.preventDefault();
const idx = inCmdHistory - 1;
if (0 <= idx) {
const cmd = cmdHistory[cmdHistory.length - idx - 1];
setInput(input, cmd);
setInCmdHistory(idx);
} else if (idx === -1) {
setInput(input, usrInputTmp);
setInCmdHistory(-1);
const cmd = cmdHistory[cmdHistory.length - idx - 1];
setInput(input, cmd);
setInCmdHistory(idx);
}
return false;
}
case e.key === "ArrowDown": {
e.preventDefault();
const idx = inCmdHistory - 1;
if (0 <= idx) {
const cmd = cmdHistory[cmdHistory.length - idx - 1];
setInput(input, cmd);
setInCmdHistory(idx);
} else if (idx === -1) {
setInput(input, usrInputTmp);
setInCmdHistory(-1);
}
return false;
}
}
};
useEffect(() => {
if (!projectsError && projects) setCmdIf(new CommandInterface(modalManipulation, projects));
// In any other case we just don't create another interface.
}, [projects, projectsError, modalManipulation]);
return <div className={styles.wrapperwrapper}>
<span className={styles.inputstart}>$&nbsp;</span>
<div className={styles.wrapper}>

9
components/REPL/index.tsx
View File

@ -6,14 +6,9 @@ import type { NextPage } from "next";
interface IREPLProps {
inputRef: MutableRefObject<HTMLInputElement|null>;
modalManipulation: {
setModalVisible: CallableFunction;
setModalProject: CallableFunction;
setModalProjectType: CallableFunction;
}
}
const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
const REPL: NextPage<IREPLProps> = ({ inputRef }) => {
const date = new Date();
const [history, manipulateHistory] = useState<string[]>([`cer0 0S - ${date.toLocaleDateString()}`]);
const containerRef = useRef<HTMLDivElement>(null);
@ -30,7 +25,7 @@ const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
return (<div className={styles.container} ref={containerRef}>
<REPLHistory history={history} inputRef={inputRef} />
<REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} modalManipulation={modalManipulation} />
<REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} />
<div style={{flexGrow: 2}} onClick={focusInput}></div>
</div>);
};

18
components/contexts/CommandInterface.tsx Normal file
View File

@ -0,0 +1,18 @@
import { createContext, useContext } from "react";
import type { PropsWithChildren } from "react";
import { CommandInterface } from "../../lib/commands";
import type { Diary, Project, ContentList } from "../../lib/content/types";
interface CommandInterfaceCallbacks {
setModalVisible?: (visible: boolean) => void;
setModalContent?: (content: Project | Diary, selectedPage?: number) => void;
}
const commandInterface = new CommandInterface();
const CommandContext = createContext(commandInterface);
const setCommandCallbacks = (callbacks: CommandInterfaceCallbacks) => commandInterface.callbacks = {...commandInterface.callbacks, ...callbacks};
const setContents = (content: ContentList) => commandInterface.content = content;
const useCommands = () => ({cmdContext: useContext(CommandContext), updateCallbacks: setCommandCallbacks, setContents});
const CommandsProvider = (props: PropsWithChildren<{}>) => <CommandContext.Provider value={commandInterface} {...props} />;
export { CommandsProvider, useCommands };

17
components/contexts/ModalFunctions.tsx Normal file
View File

@ -0,0 +1,17 @@
import { createContext, useContext } from "react";
import type { PropsWithChildren } from "react";
import type { Project, Diary } from "../../lib/content/types";
interface ModalFunctions {
setVisible?: CallableFunction;
setContent?: (content: Project| Diary) => void;
setHtml?: (html: string) => void;
}
const modalFunctions: ModalFunctions = {};
const ModalContext = createContext(modalFunctions);
const updateCallbacks = (callbacks: ModalFunctions) => Object.assign(modalFunctions, callbacks);
const useModalFunctions = () => ({modalFunctions: useContext(ModalContext), updateCallbacks});
const ModalFunctionProvider = (props: PropsWithChildren<{}>) => <ModalContext.Provider value={modalFunctions} {...props} />;
export { ModalFunctionProvider, useModalFunctions };