Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/denmonz/Orrick-Flashcards
Browse files Browse the repository at this point in the history 
	* started working w/o pulling first
  • Loading branch information
@ZhiliWang
ZhiliWang committed Mar 10, 2020
2 parents 21308eb + b638cff commit b83becf
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 73 deletions.
142 changes: 99 additions & 43 deletions Product/Website/src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, {useCallback, useState, createRef} from 'react'
import React, {useCallback, useState, useEffect} from 'react'
import {useDropzone} from 'react-dropzone'
import {AppBar, Toolbar, Typography, IconButton, Card, CardContent, Button, Grid, Tabs, Tab, Switch, FormGroup, FormControlLabel } from '@material-ui/core';
import {AppBar, Toolbar, Typography, IconButton, Card, Container, Button, Grid, Tabs, Tab, Switch, FormGroup, FormControlLabel } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import GetAppIcon from '@material-ui/icons/GetApp';
import './App.css';
Expand All @@ -17,11 +17,21 @@ const useStyles = makeStyles(theme => ({
},
card: {
width:'80%',
height: '15vw',
marginTop: '2%',
marginLeft: '5%',
padding: '5%',
flex: 1,
flexDirection: 'row'
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
cardtext: {
fontSize: 30
},
background: {
backgroundColor: 'grey',
flex: 1
}
}));

Expand All @@ -42,14 +52,34 @@ function ButtonAppBar() {
}


function MyDropzone({upload, setUpload, display, setDisplay}) {
function MyDropzone({upload, setUpload, display, setDisplay, qna, setQna}) {
var text = '';
var messages = '';

const fetchFlask = () => {
console.log("fetching python localhost");
fetch('http://127.0.0.1:5000/demo').then(response => response.json().then(data => setQna(data)))

// useEffect(() => {
// fetch('/a').then(response => response.json().then(data => {console.log(data);}))
// },[])
// fetch('/a', {
// method: 'GET',
// mode:'no-cors',
// dataType: 'json'
// })
// .then(r => r.json())
// .then(r => {
// console.log(r);
// setQna(r);
// })
// .catch(err => console.log(err))
}

const onDrop = useCallback((acceptedFiles) => {
acceptedFiles.forEach((file) => {
const reader = new FileReader();

reader.onabort = () => console.log('file reading was aborted');
reader.onerror = () => console.log('file reading has failed');
reader.onload = () => {
Expand All @@ -67,11 +97,12 @@ function MyDropzone({upload, setUpload, display, setDisplay}) {
text = result.value; // The generated text
messages = result.messages; // Any messages, such as warnings during conversion
})
.then(function() {
fetchFlask();
})
.done(function() {
setUpload(text);
setDisplay(true);
console.log(text)
console.log(messages)
});
}
}
Expand Down Expand Up @@ -159,29 +190,39 @@ function Flashcard({qna, quiz}) {
function AllQuiz({qna}) {
const classes = useStyles();
const key = Object.keys(qna)
const [flip, setFlip] = useState(false)

var total_len = 0;
for (var i=0; i < key.length; i++) {
total_len += qna[key[i]].length
}

const [flip, setFlip] = useState(Array.apply(null, Array(key.length)).map(function (x) { return Array.apply(null, Array(total_len)).map(function (x) {return false}); }))

const handleFlip = () => {
if (flip === false) {
setFlip(true)
const handleFlip = (index, key) => {
if (flip[key][index] === false) {
let old = flip.slice()
old[key][index] = true
setFlip(old)
}
else {
setFlip(false)
let old = flip.slice()
old[key][index] = false
setFlip(old)
}
}

return (
<React.Fragment>
<Grid container style={{flexGrow: 1}} spacing={1}>
{key.map(k =>
qna[k].map(r =>
{key.map((k,j) =>
qna[k].map((r,i) =>
<React.Fragment>
<Grid item xs={12}>
<Card className={classes.card} onClick={handleFlip}>
{flip ? <Typography>{r.answer}</Typography> : <Typography>{r.question}</Typography>}
<Card className={classes.card} onClick={() => handleFlip(i,j)}>
{flip[j][i] ? <Typography className={classes.cardtext}>Answer: {r.answer}</Typography> : <Typography className={classes.cardtext}>Question: {r.question}</Typography>}
</Card>
</Grid>
</React.Fragment>
</React.Fragment>
))}
</Grid>
</React.Fragment>
Expand All @@ -190,25 +231,30 @@ function AllQuiz({qna}) {

function FilterQuiz({filter, qna}) {
const classes = useStyles();
const [flip, setFlip] = useState(false)

const handleFlip = () => {
if (flip === false) {
setFlip(true)
const [flip, setFlip] = useState(Array.apply(null, Array(qna[filter].length)).map(function (x) { return false }))

const handleFlip = (index) => {
if (flip[index] === false) {
let old = flip.slice()
old[index] = true
setFlip(old)
}
else {
setFlip(false)
let old = flip.slice()
old[index] = false
setFlip(old)
}
}

return (
<React.Fragment>
<Grid container style={{flexGrow: 1}} spacing={1}>
{qna[filter].map(r =>
{qna[filter].map((r, i) =>
<React.Fragment>
<Grid item xs={12}>
<Card className={classes.card} onClick={handleFlip}>
{flip ? <Typography>{r.answer}</Typography> : <Typography>{r.question}</Typography>}
<Card className={classes.card} onClick={() => handleFlip(i)}>
{flip[i] ? <Typography className={classes.cardtext}>Answer: {r.answer}</Typography> : <Typography className={classes.cardtext}>Question: {r.question}</Typography>}
</Card>
</Grid>
</React.Fragment>
Expand All @@ -230,12 +276,12 @@ function AllCard({qna}) {
<React.Fragment>
<Grid item xs={6}>
<Card className={classes.card}>
<Typography>{r.question}</Typography>
<Typography className={classes.cardtext}>{r.question}</Typography>
</Card>
</Grid>
<Grid item xs={6}>
<Card className={classes.card}>
<Typography>{r.answer}</Typography>
<Typography className={classes.cardtext}>{r.answer}</Typography>
</Card>
</Grid>
</React.Fragment>
Expand All @@ -255,12 +301,12 @@ function FilterCard({filter, qna}) {
<React.Fragment>
<Grid item xs={6}>
<Card className={classes.card}>
<Typography>{r.question}</Typography>
<Typography className={classes.cardtext}>{r.question}</Typography>
</Card>
</Grid>
<Grid item xs={6}>
<Card className={classes.card}>
<Typography>{r.answer}</Typography>
<Typography className={classes.cardtext}>{r.answer}</Typography>
</Card>
</Grid>
</React.Fragment>
Expand All @@ -275,7 +321,9 @@ function App() {
const [qna, setQna] = useState(sampledata)
const [display, setDisplay] = useState(true)
const [quiz, setQuiz] = useState(false)

// useEffect(() => {
// fetch('http://127.0.0.1:5000/q',{mode:'no-cors',dataType:'json'}).then(response => response.json().then(data => {console.log(data);}))
// },[])
const handleQuiz = () => {
if (quiz === true) {
setQuiz(false)
Expand All @@ -285,12 +333,16 @@ function App() {
}
}

const handleNew = () => {
setDisplay(false)
}

return (
<React.Fragment>
<ButtonAppBar/>
<MyDropzone upload={upload} setUpload={setUpload} display={display} setDisplay={setDisplay}/>
{display? null : <MyDropzone upload={upload} setUpload={setUpload} display={display} setDisplay={setDisplay} qna={qna} setQna={setQna}/>}
<br/>
<Typography align="center">
{/* <Typography align="center">
Uploaded text will shown below ↓
</Typography>
<br/>
Expand All @@ -300,17 +352,21 @@ function App() {
{upload}
</Typography>
</CardContent>
</Card>
<Button variant='contained' style={{margin: '1%'}}>Download as PDF</Button>
<FormGroup style={{margin: '1%'}}>
<FormControlLabel
control={
<Switch checked={quiz} onChange={handleQuiz} lable="Quiz Mode"/>
}
label="Quiz Mode"
/>
</FormGroup>
{display? <Flashcard qna={qna} quiz={quiz}/>: null}
</Card> */}
{display?
<React.Fragment>
<Button variant='contained' style={{margin: '1%'}} onClick={() => window.print()}>Download as PDF</Button>
<Button variant='contained' color='primary' onClick={handleNew} style={{margin: '1%'}}>Create New Flashcards</Button>
<FormGroup style={{margin: '1%'}}>
<FormControlLabel
control={
<Switch checked={quiz} onChange={handleQuiz} lable="Quiz Mode"/>
}
label="Quiz Mode"
/>
</FormGroup>
<Flashcard qna={qna} quiz={quiz}/>
</React.Fragment>: null}
</React.Fragment>
);
}
Expand Down
Binary file added Product/Website/src/apple.docx
View file
Binary file not shown.
31 changes: 1 addition & 30 deletions Product/Website/src/sampledata.js
View file

Large diffs are not rendered by default.

0 comments on commit b83becf

Please sign in to comment.