App.js

import logo from './logo.svg';
import './App.css';
import './login'
import Login from './login';
import React, { useState, useEffect, useContext } from 'react'

// MUI imports
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';

import CollectionList from './collection_list';
import CollectionEditor from './collection_editor';
import { dbGetCollections, dbGetItems } from './database_util';


const dummy_collection_data = [
  {
    "title":"My Test Collection"
  },
  {
    "title":"My Second Test Collection"
  },
];



function App() {
  const [foo, setFoo] = useState('');
  const [authenticated, setAuthenticated] = useState(false);
  const [username, setUsername] = useState(""); //test_user
  const [password, setPassword] = useState(""); //admintest12345

  const [loadedCollections, setLoadedCollections] = useState([]);
  const [selectedCollection, setSelectedCollection] = useState(null);
  
  const [loadedRawFiles, setLoadedRawFiles] = useState([]);
  const [loadedLinkFiles, setLoadedLinkFiles] = useState([]);
  const [loadedXMLFiles, setLoadedXMLFiles] = useState([]);

  const [collectionFileCache, setCollectionFileCache] = useState(null);

  const updateCollectionList = async () => {
    let r = await dbGetCollections(0);
    setLoadedCollections(r)
  }

  const updateFileLists = async () => {
    let r = await dbGetItems(selectedCollection.collection_id);
    setLoadedRawFiles(r)
  }

  useEffect(() => {
    // Check if user is already authenticated from localStorage
    const isAuthenticated = localStorage.getItem('authenticated');
    if (isAuthenticated === 'true') {
      setAuthenticated(true);
    }
  }, []);

  useEffect(() => {
    if (authenticated) {
      // If user is authenticated, save the state in localStorage
      localStorage.setItem('authenticated', 'true');
    } else {
      // If user is not authenticated, remove the state from localStorage
      localStorage.removeItem('authenticated');
    }
  }, [authenticated]);

  useEffect(
    () => {
      // console.log("Mounting App");

      updateCollectionList();

    },[]//Only runs once, equivalent of ComponentDidMount
  );

  useEffect(
    () => {
    },[loadedRawFiles,loadedLinkFiles,loadedXMLFiles]
  );

  useEffect(
    () => {
      console.log("Updated authentication",authenticated);
    },[authenticated]
  );

  useEffect(
    () => {
      console.log("Updated loaded collections",loadedCollections);
    },[loadedCollections]
  );
  
  useEffect(
    () => {
      console.log("collectionFileCache Changed: ", collectionFileCache);
    },[collectionFileCache]
  );
  
  useEffect(
    () => {
      console.log("update: selectedCollection");
      if (selectedCollection != null){
        updateFileLists();
      }
    },[selectedCollection]
  );

  const displayLoginStatus = () => {
    if (authenticated) {
      return "User: " + username + ", Password: " + password
    } else {
      return "Log in"
    }
  };

  const loginFunction = () => {
    fetch(
      "http://127.0.0.1:5000/login",
      {
        method: "POST", // or 'PUT'
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({"authenticate":{"username": username,"password": password}}),
      }
    )
    .then((response) => response.json())
    .then((response) => {
      //do something with the response
      console.log("Got Test Response:",response)
      setFoo(response);
      if (response["status"] === "success") {
        // setUsername(true);
        // setAuthenticated(true);
        setAuthenticated(true);
      }
    });

  };

  


  const showEditor= () => {
    if (selectedCollection == null) {
      return (<h1>Select/Create a Collection</h1>);
    } else {
      return (<CollectionEditor collection={selectedCollection} onCollectionUpdate={setSelectedCollection} onFileSelect={onFileChange} loadedRawFiles={loadedRawFiles}/>);
    }
  }

  const onFileSelect = async (e) => {
    var formData = new FormData();
    formData.append(e.target.files[0].name, e.target.files[0]);
    setCollectionFileCache(formData); 
  }

  const onFileChange = async (e) => {
    // console.log(e.target.files[0])

    var formData = new FormData();
  
    
    formData.append(e.target.files[0].name, e.target.files[0]);

    await fetch('http://127.0.0.1:5000//api/v1/upload_raw_text?collection=0', {
    // content-type header should not be specified!
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(success => {
      console.log(success)
      // Do something with the successful response
    })
    .catch(error => console.log(error)
  );

  updateFileLists();
  }

  if (!authenticated) {
    return (
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          height: '100vh',
        }}
      >
        <h1>Login</h1>
          <TextField
            label="Username"
            variant="outlined"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            margin="normal"
          />
          <TextField
            label="Password"
            type="password"
            variant="outlined"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            margin="normal"
          />
          <Button variant="contained" aria-label="Basic button group" onClick={loginFunction}>Login</Button>
      </Box>
    );    
  }

  return (
    <div className="App">
      <Box sx={{padding:2}}>

        
        <Box sx={{textAlign:"left", padding:1}}> {/*This is where the menu should go*/}
          <ButtonGroup variant="contained" aria-label="Basic button group">
            <Button>Home</Button>
            <Button>Menu 2</Button>
            {/*<Button onClick={loginFunction}>Login</Button>*/}
          </ButtonGroup>

          <br/>
          <b>Login Status: {displayLoginStatus()}</b>

        </Box>

        <h1>CETS API</h1>
        
        <Divider orientation="horizontal" flexItem />

        <Box sx={{border: '1px dashed grey', padding:1}}> {/*This provides creation of collections and selection*/}
          <Grid container spacing={2}>
            <Grid item xs={2}>
              <CollectionList collections={loadedCollections} onSelectCollection={setSelectedCollection} onListUpdate={updateCollectionList} onFileSelect={onFileSelect} collectionFileCache={collectionFileCache}/>
            </Grid>
            <Grid item xs={10}>
              {
                showEditor()
              }
              {/* <b>{JSON.stringify(selectedCollection)}</b> */}
            </Grid>
          </Grid>
        </Box>


        {/* testing */}
        {/* <Button
        component="label"
        // role={undefined}
        variant="contained"
        tabIndex={-1}
        >
          Upload File
          <input type="file" hidden/>
        </Button>
        <input type="file" onChange={onFileChange} name="plaintext1"/> */}
      </Box>
    </div>
  );
}

export default App;