From 9159256a3c9636e24e2d12de1364b3b72a666f58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Tue, 20 Aug 2019 03:18:32 -0700
Subject: [PATCH] File components

Summary: _typescript_

Reviewed By: passy

Differential Revision: D16830536

fbshipit-source-id: 979ee7d0ced339ff5c0d200c209d34656827e152
---
 src/ui/components/{File.js => File.tsx}       | 34 +++++++--------
 .../components/{FileList.js => FileList.tsx}  | 43 +++++++++----------
 src/ui/index.js                               |  6 +--
 3 files changed, 40 insertions(+), 43 deletions(-)
 rename src/ui/components/{File.js => File.tsx} (81%)
 rename src/ui/components/{FileList.js => FileList.tsx} (87%)

diff --git a/src/ui/components/File.js b/src/ui/components/File.tsx
similarity index 81%
rename from src/ui/components/File.js
rename to src/ui/components/File.tsx
index d0053ceeb..27d5bf8f1 100644
--- a/src/ui/components/File.js
+++ b/src/ui/components/File.tsx
@@ -5,33 +5,31 @@
  * @format
  */
 
-import {Component} from 'react';
+import React, {Component} from 'react';
+import fs from 'fs';
 
-const React = require('react');
-const fs = require('fs');
-
-type FileProps = {|
+type FileProps = {
   /** Path to the file in the file system */
-  src: string,
+  src: string;
   /** Initial content that should be shown while the file is loading */
-  buffer?: ?string,
+  buffer?: string | null | undefined;
   /** Encoding to parse the contents of the file. Defaults to UTF-8. */
-  encoding: string,
+  encoding: string;
   /** Content that should be rendered, when the file loading failed. */
-  onError?: (err: Error) => React.Element<any>,
+  onError?: (err: Error) => React.ReactNode;
   /** Content that should be rendered, while the file is loaded. */
-  onLoading?: () => React.Element<any>,
+  onLoading?: () => React.ReactNode;
   /** Callback when the data is successfully loaded. */
-  onData?: (content: string) => void,
+  onData?: (content: string) => void;
   /** Content that should be rendered, when the file is successfully loaded. This ususally should render the file's contents. */
-  onLoad: (content: string) => React.Element<any>,
-|};
+  onLoad: (content: string) => React.ReactNode;
+};
 
-type FileState = {|
-  error: ?Error,
-  loaded: boolean,
-  content: string,
-|};
+type FileState = {
+  error: Error | null | undefined;
+  loaded: boolean;
+  content: string;
+};
 
 /**
  * Wrapper for loading file content from the file system.
diff --git a/src/ui/components/FileList.js b/src/ui/components/FileList.tsx
similarity index 87%
rename from src/ui/components/FileList.js
rename to src/ui/components/FileList.tsx
index ffc9281c4..ad469210e 100644
--- a/src/ui/components/FileList.js
+++ b/src/ui/components/FileList.tsx
@@ -6,43 +6,42 @@
  */
 
 import {Component} from 'react';
-
-const path = require('path');
-const fs = require('fs');
+import path from 'path';
+import fs from 'fs';
 
 const EMPTY_MAP = new Map();
 const EMPTY_FILE_LIST_STATE = {error: null, files: EMPTY_MAP};
 
 export type FileListFileType = 'file' | 'folder';
 
-export type FileListFile = {|
-  name: string,
-  src: string,
-  type: FileListFileType,
-  size: number,
-  mtime: number,
-  atime: number,
-  ctime: number,
-  birthtime: number,
-|};
+export type FileListFile = {
+  name: string;
+  src: string;
+  type: FileListFileType;
+  size: number;
+  mtime: number;
+  atime: number;
+  ctime: number;
+  birthtime: number;
+};
 
 export type FileListFiles = Array<FileListFile>;
 
 type FileListProps = {
   /** Path to the folder */
-  src: string,
+  src: string;
   /** Content to be rendered in case of an error */
-  onError?: ?(err: Error) => React$Node,
+  onError?: (err: Error) => React.ReactNode | null | undefined;
   /** Content to be rendered while loading */
-  onLoad?: () => void,
+  onLoad?: () => void;
   /** Content to be rendered when the file list is loaded */
-  onFiles: (files: FileListFiles) => React$Node,
+  onFiles: (files: FileListFiles) => React.ReactNode;
 };
 
-type FileListState = {|
-  files: Map<string, FileListFile>,
-  error: ?Error,
-|};
+type FileListState = {
+  files: Map<string, FileListFile>;
+  error: Error | null | undefined;
+};
 
 /**
  * List the contents of a folder from the user's file system. The file system is watched for
@@ -54,7 +53,7 @@ export default class FileList extends Component<FileListProps, FileListState> {
     this.state = EMPTY_FILE_LIST_STATE;
   }
 
-  watcher: ?fs.FSWatcher;
+  watcher: fs.FSWatcher | null | undefined;
 
   fetchFile(name: string): Promise<FileListFile> {
     return new Promise((resolve, reject) => {
diff --git a/src/ui/index.js b/src/ui/index.js
index 2775561d9..6f62b1efc 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -100,9 +100,9 @@ export {
 export {default as ContextMenu} from './components/ContextMenu.js';
 
 // file
-export type {FileListFile, FileListFiles} from './components/FileList.js';
-export {default as FileList} from './components/FileList.js';
-export {default as File} from './components/File.js';
+export type {FileListFile, FileListFiles} from './components/FileList.tsx';
+export {default as FileList} from './components/FileList.tsx';
+export {default as File} from './components/File.tsx';
 
 // context menu items
 export {