Convert main App to typescript.

react-slideshow/src/App.tsx

@@ -8,7 +8,13 @@ import {
 import Random from './rand';
 import './App.css';
 
-let CONFIG;
+type Config = {
+  sleepTimeSeconds: number;
+  showUI: boolean;
+
+}
+
+let CONFIG: Config;
 if (process.env.NODE_ENV === 'production') {
   CONFIG = {
     sleepTimeSeconds: 5 * 60,
@@ -22,7 +28,7 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 const IMAGE_CHUNK = 256;
-const roundup = (v, mod) => {
+const roundup = (v: number, mod: number) => {
   let r = v % mod;
   if (r === 0) {
     return v;
@@ -36,7 +42,7 @@ const roundup = (v, mod) => {
  * From https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
  * @param {Array} a items An array containing the items.
  */
-function shuffle(a) {
+function shuffle(a: Array<MediaItem>) {
   let rng = new Random(new Date().getDay());
     for (let i = a.length - 1; i > 0; i--) {
         const j = Math.floor(rng.nextFloat() * (i + 1));
@@ -45,17 +51,36 @@ function shuffle(a) {
     return a;
 }
 
-class Album extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: null,
-      mediaItems: null,
-      idx: 0,
-      showUI: props.showUI,
-      timeout: 0,
-    };
-  }
+type MediaMetadata = {
+  width: number;
+  height: number;
+};
+type MediaItem = {
+  id: string;
+  mediaMetadata: MediaMetadata;
+  filename: string;
+};
+type AlbumProps = {
+  album: string;
+  showUI: boolean;
+  sleepTimeSeconds: number;
+};
+type AlbumState = {
+  error: any;
+  // TODO(wathiede): define a MediaItem type.
+  mediaItems: Array<MediaItem> | null;
+  idx: number;
+  showUI: boolean;
+  timerID: any | null;
+};
+class Album extends React.Component<AlbumProps, AlbumState> {
+  state: AlbumState = {
+    error: null,
+    mediaItems: null,
+    idx: 0,
+    showUI: this.props.showUI,
+    timerID: null,
+  };
   componentDidMount() {
     this.loadAlbum()
   }
@@ -67,17 +92,19 @@ class Album extends React.Component {
         (result) => {
           this.setState({mediaItems: result});
           let {sleepTimeSeconds} = this.props;
-          this.timerID = setInterval(()=>{
+          let timerID = setInterval(()=>{
             let {idx} = this.state;
             this.setState({idx: idx+1})
             console.log('timer fired');
           }, sleepTimeSeconds*1000);
+          this.setState({timerID});
         },
         (error) => this.setState({error}),
       );
   }
   componentWillUnmount() {
-    clearInterval(this.timerID);
+    let {timerID} = this.state;
+    clearInterval(timerID);
   }
   nextPhoto() {
   }
@@ -91,18 +118,17 @@ class Album extends React.Component {
     if (ratio > 1) {
       // Landscape image
       w = roundup(w, IMAGE_CHUNK);
-      h = (w/ratio).toFixed();
+      h = Math.round(w/ratio);
     } else {
       // Portrait image
       h = roundup(h, IMAGE_CHUNK);
-      w = (h/ratio).toFixed();
+      w = Math.round(h/ratio);
     }
     console.log(`Window size ${window.innerWidth}x${window.innerHeight} with a devicePixelRatio of ${window.devicePixelRatio} for a total size of ${w}x${h}`);
 
     //let w = roundup(window.innerWidth*window.devicePixelRatio, IMAGE_CHUNK);
     //let h = roundup(window.innerHeight*window.devicePixelRatio, IMAGE_CHUNK);
-    let {idx, error, mediaItems, showUI, timeout} = this.state;
-    let {sleepTimeSeconds} = this.props;
+    let {idx, error, mediaItems, showUI} = this.state;
     if (error !== null) {
       return <h2>Error: {JSON.stringify(error)}</h2>;
     } else if (mediaItems !== null) {
@@ -137,7 +163,7 @@ class Album extends React.Component {
       let image = photos[idx];
       let nextImage = photos[nextIdx];
       let prevImage = photos[prevIdx];
-      let style = {
+      let style: React.CSSProperties = {
         height: '100%',
         width: '100%',
         backgroundColor: 'black',
@@ -146,17 +172,17 @@ class Album extends React.Component {
         backgroundPosition: 'center center',
         backgroundSize: 'cover',
       };
-      let prefetchStyle = {
+      let prefetchStyle: React.CSSProperties = {
         position: 'absolute',
         width: '25%',
         height: '25%',
         bottom: 0,
       };
-      let leftPrefetchStyle = {
+      let leftPrefetchStyle: React.CSSProperties = {
         left: 0,
         ...prefetchStyle
       };
-      let rightPrefetchStyle = {
+      let rightPrefetchStyle: React.CSSProperties = {
         right: 0,
         ...prefetchStyle
       };
@@ -192,13 +218,16 @@ class Album extends React.Component {
   }
 }
 
-class AlbumIndex extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: null,
-      albums: null,
-    };
+type AlbumIndexProps = {
+};
+type AlbumIndexState = {
+  error: any | null,
+  albums: Array<any> | null,
+};
+class AlbumIndex extends React.Component<AlbumIndexProps, AlbumIndexState> {
+  state: AlbumIndexState = {
+    error: null,
+    albums: null,
   }
   componentDidMount() {
     fetch(process.env.PUBLIC_URL + "/api/albums")
@@ -233,10 +262,12 @@ class AlbumIndex extends React.Component {
   }
 }
 
-const AlbumRoute = ({sleepTimeSeconds, showUI}) => {
+type AlbumRouteProps = { sleepTimeSeconds: number, showUI: boolean };
+const AlbumRoute = ({sleepTimeSeconds, showUI}: AlbumRouteProps) => {
   // We can use the `useParams` hook here to access
   // the dynamic pieces of the URL.
   let { albumId } = useParams();
+  albumId = albumId || '';
   return <Album album={albumId} showUI={showUI} sleepTimeSeconds={sleepTimeSeconds} />;
 }
 

react-slideshow/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />