import React, { Component } from 'react';
import FilePicker from './components/file-picker';
import HashSelector from './components/hash-selector';
import FileDetails from './components/file-details';
import FileHash from './components/file-hash';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      file: undefined,
      hashType: 'sha-1',
      loading: false,
      hash: undefined
    }
  }

  async setFile(e) {
    const file = e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files[0] : e.target.files[0];
    this.setState({
      file: file,
      loading: true
    });
    try {
      const hash = await this.calculateHash(file, this.state.hashType);
      this.setState({
        loading: false,
        hash: hash
      });
    } catch (err) {
      console.error('Error', err);
    }
  }

  async setHashType(e) {
    const hashType = e.target.value;
    this.setState({
      hashType: hashType,
      loading: true
    });
    try {
      const hash = await this.calculateHash(this.state.file, hashType);
      this.setState({
        loading: false,
        hash: hash
      });
    } catch (err) {
      console.error('Error', err);
    }
  }

  async hash(arrayBuffer, hashType) {
    const hashBuffer = await crypto.subtle.digest(hashType, arrayBuffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join('');
    return hashHex;
  }

  calculateHash(file, hashType) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        const arrayBuffer = reader.result;
        resolve(this.hash(arrayBuffer, hashType));
      };
      reader.onerror = (err) => { reject(err); }
      reader.readAsArrayBuffer(file);
    });
  }

  render() {
    return (
      <div className='flex flex-column justify-center ma4'>
        <FilePicker setFile={this.setFile.bind(this)} />
        {this.state.file ?
          <div>
            <HashSelector hashType={this.state.hashType} setHashType={this.setHashType.bind(this)} />
            <FileDetails file={this.state.file} />
            <FileHash loading={this.state.loading} hash={this.state.hash} />
          </div>
          :
          ''}
      </div>
    );
  }
}

export default App;
@@ -491,16 +491,17 @@
 nst file
+s
  = e.dat
@@ -556,19 +556,16 @@
 er.files
-%5B0%5D
  : e.tar
@@ -577,13 +577,36 @@
 iles
-%5B0%5D
 ;%0A
+    if (files.length) %7B%0A  
     
@@ -623,24 +623,26 @@
 ate(%7B%0A      
+  
 file: file,%0A
@@ -639,18 +639,24 @@
 le: file
-,%0A
+s%5B0%5D,%0A  
       lo
@@ -663,36 +663,40 @@
 ading: true%0A    
+  
 %7D);%0A
+  
     try %7B%0A      
@@ -687,32 +687,34 @@
     try %7B%0A      
+  
 const hash = awa
@@ -739,16 +739,20 @@
 ash(file
+s%5B0%5D
 , this.s
@@ -765,32 +765,34 @@
 ashType);%0A      
+  
 this.setState(%7B%0A
@@ -791,32 +791,34 @@
 State(%7B%0A        
+ 
+ 
 loading: false,%0A
@@ -817,32 +817,34 @@
  false,%0A        
+  
 hash: hash%0A     
@@ -830,32 +830,34 @@
      hash: hash%0A
+  
       %7D);%0A    %7D 
@@ -846,32 +846,34 @@
         %7D);%0A    
+  
 %7D catch (err) %7B%0A
@@ -864,32 +864,34 @@
 %7D catch (err) %7B%0A
+  
       console.er
@@ -901,32 +901,40 @@
 ('Error', err);%0A
+      %7D%0A
     %7D%0A  %7D%0A%0A  asy

Add null check