base typescript refactor

Author: jackyzha0

commands/index.js renamed to commands/index.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import {TitleCard} from '../components/Title';
 import {version, description} from '../package.json';
 import {Box, Newline, Text} from "ink";
 
 /// Displays help info
 const Hello = () => <Box flexDirection="column">
-  <TitleCard />
   <Box
     margin={1}
-    color="white"
     flexDirection="column"
   >
     <Text>Version: {version}</Text>

commands/join.js renamed to commands/join.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import useHyper from "../hooks/useHyper.js";
+import useHyper from "../hooks/useHyper";
 import {SessionInfo} from '../components/Title'
 import PropTypes from "prop-types";
 import FileTree from "../components/FileTree";
@@ -11,8 +11,14 @@ import Loader from "../components/Loader";
 import useRemoteRegistry from "../hooks/useRemoteRegistry";
 import useDriveDownload from "../hooks/useDriveDownload";
 
+interface IClientProps {
+  dir: string,
+  forceOverwrite: boolean,
+  sessionId: string,
+}
+
 /// Joins an existing portal using a given `sessionId`
-const Client = ({ dir, forceOverwrite, sessionId }) => {
+const Client = ({ dir, forceOverwrite, sessionId }: IClientProps) => {
   const hyper = useHyper(sessionId)
   const {errors, loading: remoteLoading, remoteRegistry, registryRenderableArray} = useRemoteRegistry(dir, hyper?.hyperObj?.eventLog)
   useDriveDownload(dir, remoteRegistry, hyper?.hyperObj?.drive)

commands/new.js renamed to commands/new.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import useHyper from "../hooks/useHyper.js";
+import useHyper from "../hooks/useHyper";
 import {SessionInfo} from '../components/Title'
 import {Box} from "ink";
 import PropTypes from "prop-types";
@@ -10,9 +10,13 @@ import CommandWrapper from "../components/CommandWrapper";
 import useLocalRegistry from "../hooks/useLocalRegistry";
 import useDriveSync from "../hooks/useDriveSync";
 
+interface IHostProps {
+  dir: string,
+}
+
 /// Creates a new portal in the given directory.
 /// If no directory is provided, uses current working directory
-const Host = ({dir}) => {
+const Host = ({dir}: IHostProps) => {
   const hyper = useHyper()
   const {errors, loading, localRegistry, registryRenderableArray} = useLocalRegistry(dir, hyper?.hyperObj?.eventLog)
   useDriveSync(dir, localRegistry, hyper?.hyperObj?.drive)

components/CommandWrapper.js renamed to components/CommandWrapper.tsx

@@ -1,9 +1,14 @@
 import React from 'react'
 import Loader from "./Loader";
 import {Text} from "ink";
-import {TitleCard} from "./Title";
 
-export default ({loading, error, children}) => {
+interface ICommandWrapperProps {
+  loading: boolean,
+  error: string,
+  children?: React.ReactNode,
+}
+
+export default ({loading, error, children}: ICommandWrapperProps) => {
   if (loading) {
     return <Loader status="Initializing Hyperspace..." />
   }

components/Errors.js renamed to components/Errors.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import {Box, Text} from "ink";
 
-export default ({errors}) => errors.length !== 0 &&
+interface IErrorsProps {
+    errors: string[]
+}
+export default ({errors}: IErrorsProps) => errors.length !== 0 &&
   <Box marginTop={2} flexDirection="column">
     <Text color="red" bold>Errors:</Text>
     {errors.slice(0, 3).map((error, i) => <Text key={i}>

components/FileTree.js renamed to components/FileTree.tsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import {Box, Text} from "ink";
-import {STATUS} from "../domain/registry";
+import {ITreeRepresentation, STATUS} from "../domain/registry";
 import Loader from "./Loader";
 
-const StatusIndicator = ({status}) => {
+interface IStatusIndicatorProps {
+  status: STATUS;
+}
+const StatusIndicator = ({status}: IStatusIndicatorProps) => {
   switch (status) {
     case STATUS.synced:
       return <Text color="green">✔</Text>
@@ -15,7 +18,10 @@ const StatusIndicator = ({status}) => {
   }
 }
 
-export default ({registry}) => {
+interface IFileTreeProps {
+  registry: ITreeRepresentation[],
+}
+export default ({registry}: IFileTreeProps) => {
   const synced = registry.filter(f => f.status === STATUS.synced).length
   return <Box flexDirection="column" marginY={1}>
     <Text bold>Files</Text>

components/Loader.js renamed to components/Loader.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { Text } from 'ink';
 import Spinner from 'ink-spinner';
 
-export default ({status, color}) => (
+interface ILoaderProps {
+    status?: string,
+    color?: string,
+}
+export default ({status, color}: ILoaderProps) => (
   <Text>
     <Text color={color ?? "green"}>
       <Spinner type="dots" />

components/Title.js renamed to components/Title.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import {Text} from "ink";
 
-export const SessionInfo = ({sessionId}) => <>
+interface ITitleProps {
+  sessionId: string,
+}
+export const SessionInfo = ({sessionId}: ITitleProps) => <>
   <Text bold>Session ID </Text>
   <Text>{sessionId}</Text>
 </>

domain/registry.js renamed to domain/registry.ts

@@ -1,41 +1,56 @@
 import path from 'path'
-import {registerWatcher} from "../fs/watcher";
+import {EventCallback, EventData, registerWatcher} from "../fs/watcher";
 import {TrieNode} from "./trie";
-
-export const STATUS = Object.freeze({
-  unsynced: "unsynced",
-  error: "error",
-  synced: "synced",
-})
+import Hyperdrive from "hyperdrive";
+import {Feed} from "hyperspace";
+
+export enum STATUS {
+  unsynced,
+  error,
+  synced,
+}
+
+export interface ITreeRepresentation {
+  padding: number,
+  name: string,
+  isDir: boolean,
+  status: STATUS,
+}
 
 export class Registry {
+  private readonly root: TrieNode;
+  drive: Hyperdrive | undefined;
+  errorCallback: (err: string) => void;
+  rerender: () => void;
+  private subscribers: EventCallback[];
+
   constructor() {
-    this.root = new TrieNode(this, null)
+    this.root = new TrieNode(this, "")
     this.drive = undefined
     this.errorCallback = () => {}
     this.rerender = () => {}
     this.subscribers = []
   }
 
-  // registy error callback
-  onError(fn) {
+  // registry error callback
+  onError(fn: (err: string) => {}) {
     this.errorCallback = fn
     return this
   }
 
-  onRerender(fn) {
+  onRerender(fn: () => void) {
     this.rerender = fn
     return this
   }
 
   // add subscriber to event stream
-  addSubscriber(fn) {
+  addSubscriber(fn: EventCallback) {
     this.subscribers.push(fn)
     return this
   }
 
   // set remote hyperdrive
-  setDrive(drive) {
+  setDrive(drive: Hyperdrive) {
     this.drive = drive
     return this
   }
@@ -48,15 +63,15 @@ export class Registry {
     return this.root.getChildren().map(child => child.download())
   }
 
-  size() {
+  size(): number {
     return this.getTree().length
   }
 
   // returns pre-order traversal of all nodes
   // in trie
-  getTree() {
-    const output = []
-    const toStringRecur = (indent, node) => {
+  getTree(): ITreeRepresentation[] {
+    const output: ITreeRepresentation[] = []
+    const toStringRecur = (indent: number, node: TrieNode) => {
       if (!node) {
         return
       }
@@ -80,7 +95,7 @@ export class Registry {
   }
 
   // insert an entry into the registry
-  insert(pathSegments, isDir = false) {
+  insert(pathSegments: string[], isDir = false): void {
     let cur = this.root
     pathSegments.forEach(segment => {
       if (!cur.children[segment]) {
@@ -96,30 +111,30 @@ export class Registry {
 
   // removes an entry from the registry
   // does nothing if node/dir is not present
-  remove(pathSegments, isDir = false) {
+  remove(pathSegments: string[], isDir = false): void {
     const node = this.find(pathSegments)
 
     // only remove if node is present
     // and is a directory remove on a directory
     if (node && (isDir ? node.isDir : !node.isDir)) {
       const parent = node.parent
-      delete parent.children[node.key]
+      delete parent?.children[node.key]
     }
   }
 
   // attempts to return entry with given path segments
   // returns false if not present
-  find(pathSegments) {
-    return pathSegments.reduce((cur, segment) => {
-      if (!(cur.children && cur.children[segment])) {
-        return false
+  find(pathSegments: string[]): TrieNode | null {
+    return pathSegments.reduce((cur: TrieNode | null, segment) => {
+      if (!cur || !(cur.children && cur.children[segment])) {
+        return null
       }
       return cur.children[segment]
     }, this.root)
   }
 
   // parse events emitted from fs watcher
-  parseEvt({ path: targetPath, status, isDir }) {
+  parseEvt({ path: targetPath, status, isDir }: EventData) {
     if (status === 'genesis') return
     const pathSegments = targetPath.split(path.sep)
     switch (status) {
@@ -128,22 +143,24 @@ export class Registry {
         break
       case 'modify':
         const modNode = this.find(pathSegments)
-        modNode.status = STATUS.unsynced
+        if (modNode) {
+          modNode.status = STATUS.unsynced
+        }
         break
       case 'delete':
         this.remove(pathSegments, isDir)
         break
     }
   }
 
-  _onChangeCallback(data) {
+  _onChangeCallback(data: EventData) {
     this.parseEvt(data)
     this.subscribers.forEach(fn => fn(data))
     this.rerender()
   }
 
   // watch local directory for changes
-  watch(dir, onReady) {
+  watch(dir: string, onReady: () => void) {
     registerWatcher(
       dir,
       data => this._onChangeCallback(data),
@@ -153,9 +170,9 @@ export class Registry {
   }
 
   // subscribe to remote eventLog hypercore feed
-  subscribeRemote(eventLog, onReady) {
-    const process = (data) => {
-      this._onChangeCallback(JSON.parse(data))
+  subscribeRemote(eventLog: Feed, onReady: () => void) {
+    const process = (data: string) => {
+      this._onChangeCallback(JSON.parse(data) as EventData)
       this.rerender()
     }