Permalink
Browse files

lots of changes I should have committed way sooner

  • Loading branch information...
bartconsedine committed Nov 9, 2019
1 parent 46e4d9a commit 7a33d161e2d219bee75acbfde7da358c81352317
@@ -46,7 +46,12 @@
color: black;
}
.show-text-current{
color: blue;
color: black;
background-image: url("./dot.png");
background-repeat: no-repeat;
background-position: center;
background-size: 15px;
font-weight: bold;
}
.hide-text {
color: white;
@@ -61,10 +66,16 @@
}


.excerpt-container{
.excerpt-single{
background-color: white ;
width: 80%;
margin:auto;
text-align: center;
padding: 20px;
}
}

.custom-form{
height: 200px;
width: 400px;
}

@@ -3,11 +3,15 @@ import { Route, Link } from 'react-router-dom';
import { withRouter } from 'react-router';
import './App.css';
import Login from './components/Login'
import Register from './components/Register'
import ChunkPage from './components/Chunkpage'
import ChunkSingle from './components/Chunksingle'
import Concentrater from './components/Concentrater'
import Register from './components/Register'
import ChunkCustom from './components/Chunkcustom'
import Filter from './components/Filter'
import Nav from './components/Nav'
import axios from 'axios'

import {
loginUser,
registerUser
@@ -35,10 +39,24 @@ class App extends Component {
author: "",
chapter: "",
excerpts: ""
}
},
filterData: {
title: "",
author: "",
chapter: "",
excerpts: ""
},
showNav: true
};
}

navToggle = () => {

this.setState({showNav: !this.state.showNav})
}





async componentDidMount() {
@@ -52,14 +70,14 @@ class App extends Component {
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log(error));
const response = await axios("http://localhost:3001/excerpts/2")
const response = await axios("http://localhost:3001/api/excerpts/2")
this.setState({ excerptData: {
title: response.data.title,
author: response.data.author,
chapter: response.data.chapter,
excerpts: response.data.excerpts,


} });


@@ -102,18 +120,48 @@ class App extends Component {
}))
}

handleFilterChange = (e) => {
console.log(this.state.authFormData)
const { name, value } = e.target;
this.setState(prevState => ({
authFormData: {
...prevState.authFormData,
[name]: value
}
}))
}


handleFilterSubmit = async event => {
event.preventDefault()
console.log("form submitted", this.state.filterData)
await axios({
url: `http://localhost:2468/user`,
method: 'POST',
data: {
// name: formData.name,

}


})
// .then(res => setUserID(res.data.user.id))
.catch(error => console.log(error))

// setRedirect(true)
}



render() {
return (
<div className="App">
<h1>Metric Reader</h1>
<Link to="/register">Register</Link>
<Link to="/login">Login</Link>
<Link to="/chunkpage">Page</Link>
<Link to="/chunksingle">Single</Link>
<Link to="/concentrater">Concentration</Link>


{this.state.showNav && <Nav/>}
<Filter
handleFilterSubmit={this.handleFilterSubmit}
handleFilterChange={this.handleFilterChange}
/>
<Route exact path="/register" render={() => (
<Register
handleRegister={this.handleRegister}
@@ -123,14 +171,30 @@ class App extends Component {
currentUser={this.state.currentUser}
/>)}
/>
<Route exact path="/custom" render={() => (
<ChunkCustom
handleRegister={this.handleRegister}
handleFormChange={this.handleFormChange}
handleChange={this.authHandleChange}
formData={this.state.authFormData}
currentUser={this.state.currentUser}
excerptData={this.state.excerptData}
navToggle={this.navToggle}
showNav={this.state.showNav}
/>)}
/>
<Route exact path="/chunkpage" render={() => (
<ChunkPage
excerptData={this.state.excerptData}
navToggle={this.navToggle}
showNav={this.state.showNav}
/>)}
/>
<Route exact path="/chunksingle" render={() => (
<ChunkSingle
excerptData={this.state.excerptData}
navToggle={this.navToggle}
showNav={this.state.showNav}
/>)}
/>
<Route exact path="/login" render={() => (
@@ -143,6 +207,8 @@ class App extends Component {
/>)} />
<Route exact path="/concentrater" render={() => (
<Concentrater
navToggle={this.navToggle}
showNav={this.state.showNav}
/>)} />

</div>
@@ -0,0 +1,128 @@
import React, { useState, useEffect } from 'react';


const ChunkCustom = (props) => {

const [formData, setFormData] = useState({
text: ""
});

const [showText, setShowText] = useState(false);


const handleSubmit = event => {
event.preventDefault()
console.log("form submitted", formData)
setShowText(true)
props.navToggle ()
}

const handleChange = (e) => {
const { name, value } = e.target
console.log(formData)
setFormData(prevFormData => ({
...prevFormData,
[name]: value,
})
)
}

const [count, setCount] = useState(-1)
var numbers = []
for(var i=1; i<51; i++){
numbers.push(i)
}
let stopCounter = 0

const counter = () => {

let interval = setInterval(() => {
stopCounter += 1
if(stopCounter > 50){
clearInterval(interval)
props.navToggle()
setFormData({text: " "})
}
setCount((i) => i+ 1)
}, 5);

return () => clearInterval(interval);

}

const lengthCheck = (array) => {
return array.length
}
const excerptCreate = (text) =>{


const excerptData = text
const parsedExcerpt = excerptData.split(" ")
let chunkHolder = []
let chunkIndex = 0
let chunkTracker = 0

for(var i=0;i<parsedExcerpt.length;i++){
if(chunkTracker < 1){
chunkHolder[chunkIndex] = (parsedExcerpt[i]) + " "
}else{
chunkHolder[chunkIndex] = chunkHolder[chunkIndex] + (parsedExcerpt[i]) + " "
}

chunkTracker += 1

if(lengthCheck(chunkHolder[chunkIndex])> 40){
chunkTracker = 0
chunkIndex += 1
}
// else if(chunkTracker > 6){
// chunkTracker = 0
// chunkIndex += 1
// }
}
return(
chunkHolder.map((item, index) => {
if(index == count){
return <a className={'show-text-current'}>{item}</a>

}
else if(index % 2 == 0){
return <a className={index <= count ? 'show-text' : 'hide-text'}>{item}</a>

}else{
return <a className={index <= count ? "show-text" : "hide-text"}>{item}<br></br></a>
}
// return <div>{item}{index}</div>
})

)


}

return(

<div>
<h1>{props.excerptData.title && props.excerptData.title}</h1>
<div><button onClick={() => counter()}>Start</button></div>
<div className="excerpt-container">{showText && excerptCreate(formData.text)}</div>

{props.showNav && <form className='edit-info-form' onSubmit={handleSubmit}>
<h1>Edit Form:</h1>
<label htmlFor='text'>Name:</label>
<input
className='custom-form'
type='text'
name="text"
placeholder='insert tex'
value={formData.text}
onChange={handleChange} />
<button className='submit-button' type="submit">Submit</button>
</form>}
</div>
)


}

export default ChunkCustom
@@ -11,12 +11,15 @@ const ChunkPage = (props) => {
let stopCounter = 0

const counter = () => {

props.navToggle()
let interval = setInterval(() => {
stopCounter += 1
if(stopCounter > 50) clearInterval(interval)
if(stopCounter > 50){
clearInterval(interval)
props.navToggle()
}
setCount((i) => i+ 1)
}, 400);
}, 1000);

return () => clearInterval(interval);

@@ -13,15 +13,18 @@ const ChunkSingle = (props) => {


const counter = (e) => {

props.navToggle()
let interval = setInterval(() => {
stopCounter += 1
console.log("e.length",e.length)
console.log("stopCounter",stopCounter)
if(stopCounter > e.length -2) clearInterval(interval)
if(stopCounter > e.length) {
clearInterval(interval)
props.navToggle()
}
setCount((i) => i + 1)

}, 4);
}, 100);

return () => clearInterval(interval);

@@ -1,7 +1,7 @@
import React, {useState, useEffect} from 'react'


const Concentrater = () => {
const Concentrater = (props) => {

const [count, setCount] = useState(0)
var numbers = []
@@ -14,19 +14,21 @@ const Concentrater = () => {
return(numbers.map((item) =>{
if(item % 2 == 0){
return <a className={item <= count ? 'show' : 'hide'}>{item}</a>

}else{
return <a className={item <= count ? "show" : "hide"}>{item}<br></br></a>
}
}))
}
const counter = () => {

props.navToggle()
let interval = setInterval(() => {
stopCounter += 1
if(stopCounter > 50) clearInterval(interval)
if(stopCounter > 50) {
clearInterval(interval)
props.navToggle()
}
setCount((i) => i+ 1)
}, 400);
}, 10);

return () => clearInterval(interval);

Oops, something went wrong.

0 comments on commit 7a33d16

Please sign in to comment.