stuff

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 out
 bin
+logs

.vscode/tasks.json

@@ -34,9 +34,6 @@
       "script": "dev",
       "isBackground": true,
       "group": "build",
-      "runOptions": {
-        "runOn": "folderOpen"
-      },
       "presentation": {
         "reveal": "never",
         "echo": false,

package.json

@@ -6,11 +6,18 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "@rollup/plugin-alias": "^3.1.5",
+    "@types/react": "^17.0.18",
+    "chalk": "^4.1.2",
+    "ink": "^3.0.9",
+    "ink-big-text": "^1.2.0",
+    "ink-form": "^1.0.1",
+    "ink-gradient": "^2.0.0",
+    "ink-use-stdout-dimensions": "^1.0.5",
     "ipc-tower": "^0.0.6",
+    "mongoose": "^5.13.7",
     "multiview": "^3.0.1",
-    "rollup": "^2.56.2",
-    "typescript": "^4.3.5"
+    "react": "^17.0.2",
+    "sisteransi": "^1.0.5"
   },
   "scripts": {
     "start": "yarn x bin/app.bundle.js",
@@ -23,5 +30,11 @@
     "rollup:watch": "yarn rollup --watch",
     "compile": "yarn tsc & yarn rollup",
     "compile:watch": "multiview [ yarn tsc:watch ] [ yarn rollup:watch ]"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^3.1.5",
+    "@types/node": "^16.6.1",
+    "rollup": "^2.56.2",
+    "typescript": "^4.3.5"
   }
 }

src/Multiview.tsx

@@ -0,0 +1,52 @@
+import { Box, Spacer, Text, Transform, useInput } from "ink";
+import React, { useMemo, useState } from 'react';
+import useForceUpdate from "./useForceUpdate";
+
+interface Props {
+  screens: {
+    name: string,
+    component: JSX.Element
+  }[]
+}
+
+export default function Multiview(props: Props) {
+
+  const screens = props.screens;
+  const forceUpdate = useForceUpdate()
+  const [screenIdx, setScreenIdx] = useState(0);
+
+  const screen = useMemo(() => {
+    return screens.find((_, idx) => idx === screenIdx).component;
+  }, [screens, screenIdx]);
+
+  useInput((key) => {
+    // F1 === [[A, F2 === [[B ... F5
+    if(['[[A', '[[B', '[[C', '[[D', '[[E'].includes(key)) {
+      const newIdx = key.charCodeAt(2) - 65;
+      if(newIdx < screens.length)
+        setScreenIdx(newIdx);
+    }
+    forceUpdate();
+  })
+
+  return (
+    <Box flexDirection="column" width="100%">
+      <Box
+        paddingX={2}
+        paddingY={0}
+        flexGrow={1}
+        borderStyle="double"
+        borderColor="cyan"
+      >
+        {screen}
+      </Box>
+        <Box height={1} paddingLeft={2}>
+          {screens.map((screen, idx) => <>
+            <Text
+              color={idx === screenIdx ? 'cyan' : ''}
+            >F{idx + 1}: {screen.name}  </Text>
+          </>)}
+        </Box>
+    </Box>
+  )
+}

src/NewTask.tsx

@@ -0,0 +1,44 @@
+import { Box, Text } from "ink";
+import React, { useCallback, useMemo, useState } from "react";
+
+const Input = ({
+
+}: any) => {
+
+  return (
+    <Text></Text>
+  )
+}
+
+const Form = ({
+  children
+}: any) => {
+
+  const [formData, setFormData] = useState({});
+
+  const handleData = useCallback((datum) => {
+
+  }, []);
+
+  const modifiedChildren = useMemo(() => {
+    return children.map(child => {
+      return React.cloneElement(
+        child
+      )
+    })
+  }, [children])
+
+  return (
+    <Box flexDirection="column">
+      
+    </Box>
+  );
+}
+
+export default function NewTask() {
+  return (
+    <Form>
+      <Input />
+    </Form>
+  )
+}

src/TaskView.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, Box } from 'ink';
+import Gradient from 'ink-gradient';
+import BigText from 'ink-big-text';
+
+export default function TaskView() {
+
+
+
+  return (
+    <Gradient name="pastel">
+      <BigText
+        font="tiny"
+        text="Current Tasks"
+      />
+    </Gradient>
+  )
+}

src/app.ts

@@ -1,7 +0,0 @@
-import { ProcessManager } from 'ipc-tower';
-
-console.log('hello template!');
-
-ProcessManager.on('reload', () => {
-  ProcessManager.restart();
-})

src/app.tsx

@@ -0,0 +1,107 @@
+import { Box, render, Text, useApp, useInput, useStdin } from 'ink';
+import { ProcessManager } from 'ipc-tower';
+import mongoose from 'mongoose';
+import React from 'react';
+import { useEffect, useState } from 'react';
+import Multiview from './Multiview';
+import TaskView from './TaskView';
+import NewTask from './NewTask';
+import ansi from 'sisteransi';
+import useStdoutDimensions from 'ink-use-stdout-dimensions';
+import { appendFileSync } from 'fs';
+process.stdout.write('\x1b[?1049h');
+
+ProcessManager.on('reload', () => {
+  console.log('got reload request');
+  ProcessManager.restart();
+});
+
+ProcessManager.on('shutdown', () => {
+  process.stdout.write('\x1b[?1049l');
+});
+
+const useMounted = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true)
+    return () => {
+      setMounted(false);
+    }
+  });
+
+  return mounted;
+}
+
+const App = () => {
+  const [connected, setConnected] = useState(false);
+  const [columns, rows] = useStdoutDimensions();
+  const { exit } = useApp();
+
+  useEffect(() => {
+    ProcessManager.on('shutdown', () => {
+      console.log('rcvd shutdown in app element')
+      exit();
+    });
+  }, []);
+  
+  useEffect(() => {
+    mongoose.connect('mongodb://localhost', {
+      useNewUrlParser: true,
+      useUnifiedTopology: true
+    }).then(() => new Promise(res => setTimeout(res, 1000))).then(() => {
+      setConnected(true);
+    })
+  }, []);
+
+  process.stdout.write(ansi.cursor.to(0, 0));
+
+	return (
+    <Box
+      height={rows}
+      width={columns}
+    >
+      {!connected &&
+        <Box
+          alignItems="center"
+          justifyContent="center"
+          width="100%"
+        >
+          <Text>Connecting to Task Database...</Text>
+        </Box>
+      ||
+        <Multiview
+          screens={[
+            {
+              name: 'Board',
+              component: <TaskView />
+            },
+            {
+              name: 'Board 2',
+              component: <NewTask />
+            }
+          ]}
+        />
+      }
+    </Box>
+  );;;
+};
+
+// import readline from 'readline';
+// const reader = readline.createInterface({
+//   input: process.stdin,
+
+//   output: process.stdout,
+
+//   terminal: false
+// });
+
+// reader.on('line', function (line) {
+//   console.log(line);
+// });
+
+// const instance = 
+render(<App />);
+// ProcessManager.on('shutdown', () => {
+//   instance.unmount();
+// });

src/externals.d.ts

@@ -0,0 +1,2 @@
+declare module 'ink-big-text';
+declare module 'ink-gradient';

src/models/task.ts

@@ -0,0 +1,11 @@
+import { Schema, model } from 'mongoose';
+
+const taskSchema = new Schema({
+  name: String,
+  desc: String,
+  priority: Number
+}, {
+  timestamps: true
+});
+
+export const Task = model('task', taskSchema);

src/useForceUpdate.ts

@@ -0,0 +1,6 @@
+import { useState } from "react";
+
+export default function useForceUpdate(){
+  const [value, setValue] = useState(0);
+  return () => setValue(value => value + 1);
+}

test.js

@@ -0,0 +1,25 @@
+import readline from 'readline';
+
+// var rl = readline.createInterface({
+//   input: process.stdin,
+//   output: process.stdout
+// });
+
+// rl.stdoutMuted = true;
+
+// rl.query = "Password : ";
+// rl.question(rl.query, function(password) {
+//   console.log('\nPassword is ' + password);
+//   rl.close();
+// });
+
+// rl._writeToOutput = function _writeToOutput(stringToWrite) {
+//   // if (rl.stdoutMuted)
+//     // rl.output.write("\x1B[2K\x1B[200D"+rl.query+"["+((rl.line.length%2==1)?"=-":"-=")+"]");
+//   // else
+//     // rl.output.write(stringToWrite);
+// };
+
+setTimeout(() => {
+  
+})

tsconfig.json

@@ -16,5 +16,5 @@
   },
   "include": [
     "src/**/*.ts"
-  ]
+, "src/app.tsx"  ]
 }