diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..db87e1f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +charset = utf-8 +trim_trailing_whitespace = false +insert_final_newline = false \ No newline at end of file diff --git a/src/App.css b/src/App.css index 92f956e..821d2d2 100644 --- a/src/App.css +++ b/src/App.css @@ -2,31 +2,13 @@ text-align: center; } -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; +.controls { + background-color: white; + position: sticky; + top: 0; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +button { + font-size: 2em; + margin: 1em 1em; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 7e261ca..6c7c852 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,67 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; +import SectionManager from './components/SectionManager'; + import './App.css'; class App extends Component { + constructor(props) { + super(props); + + this.state = { + scroll: { + sectionName: 'C', + }, + post: { + postNumber: 1, + }, + }; + } + + scrollToSectionA = () => { + this.setState({ + scroll: { + sectionName: 'A', + } + }) + } + + scrollToSectionC = () => { + this.setState({ + scroll: { + sectionName: 'C', + } + }) + } + + changeText = () => { + this.setState( + (oldState) => ({ + post: { + postNumber: oldState.post.postNumber + 1, + } + }) + ) + } + + scrollToTopAndChangeText = () => { + this.scrollToSectionA(); + this.changeText(); + } + render() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+ + + + +
+
); } diff --git a/src/components/SectionManager/index.js b/src/components/SectionManager/index.js new file mode 100644 index 0000000..949d830 --- /dev/null +++ b/src/components/SectionManager/index.js @@ -0,0 +1,83 @@ +import React, { Component, createRef } from 'react'; +import SectionA from '../../sections/SectionA'; +import SectionB from '../../sections/SectionB'; +import SectionC from '../../sections/SectionC'; + +export default class SectionManager extends Component { + static placeHolderURL = 'https://jsonplaceholder.typicode.com/posts'; + + constructor(props) { + super(props); + + this.state = { + sectionBody: undefined, + }; + + this.sectionRefs = { + 'A': createRef(), + 'B': createRef(), + 'C': createRef(), + } + } + + componentWillReceiveProps(nextProps) { + const { scroll: scrollProps, post: postProps } = nextProps; + const { scroll: oldScrollProps, post: oldPostProps } = this.props; + + if (scrollProps.sectionName !== oldScrollProps.sectionName) { + this.scrollToSection(scrollProps.sectionName) + } + + if (postProps.postNumber !== oldPostProps.postNumber) { + this.updateSectionBody(postProps.postNumber); + } + } + + componentDidMount() { + this.updateSectionBody(this.props.post.postNumber); + + setTimeout(() => { this.scrollToSection(this.props.scroll.sectionName); }, 500); + + } + + updateSectionBody(postNumber) { + this.setState({ + sectionBody: undefined, + }) + + fetch(`${SectionManager.placeHolderURL}/${postNumber}`) + .then((responseString) => { + return responseString.json(); + }) + .then((responseObject) => { + this.setState({ + sectionBody: responseObject.body, + }); + }); + + } + + scrollToSection(sectionName) { + const sectionRef = this.sectionRefs[sectionName]; + console.log(sectionRef.current, sectionRef.current !== null); + + if ( + (sectionRef !== undefined) && + (sectionRef.current !== null) + ) { + sectionRef.current.scrollIntoView({ + behavior: 'smooth' + }); + } + } + + render() { + return ( +
+ + + +
+ ); + } +} \ No newline at end of file diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/sections/SectionA/index.js b/src/sections/SectionA/index.js new file mode 100644 index 0000000..1912442 --- /dev/null +++ b/src/sections/SectionA/index.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; + +import '../section.css'; + +class SectionA extends Component { + render() { + return ( +
+
+ This is section A +
+ { + this.props.body + } +
+
+ ) + } +}; + +export default React.forwardRef((props, ref) => { + return ; +}); diff --git a/src/sections/SectionB/index.js b/src/sections/SectionB/index.js new file mode 100644 index 0000000..b4dbcec --- /dev/null +++ b/src/sections/SectionB/index.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; + +import '../section.css'; + +class SectionB extends Component { + render() { + return ( +
+
+ This is section B +
+ { + this.props.body + } +
+
+ ) + } +}; + +export default React.forwardRef((props, ref) => { + return ; +}); diff --git a/src/sections/SectionC/index.js b/src/sections/SectionC/index.js new file mode 100644 index 0000000..18e82b2 --- /dev/null +++ b/src/sections/SectionC/index.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; + +import '../section.css'; + +class SectionC extends Component { + render() { + return ( +
+
+ This is section C +
+ { + this.props.body + } +
+
+ ) + } +}; + +export default React.forwardRef((props, ref) => { + return ; +}); diff --git a/src/sections/section.css b/src/sections/section.css new file mode 100644 index 0000000..293a785 --- /dev/null +++ b/src/sections/section.css @@ -0,0 +1,23 @@ +.section { + width: 100%; + min-height: 50vh; + display: flex; + align-items: center; + justify-content: center; + font-size: 2em; +} + +.section:nth-child(1) { + background-color: darkblue; + color: azure; +} + +.section:nth-child(2) { + background-color: lightblue; + color: blueviolet; +} + +.section:nth-child(3) { + background-color: darkblue; + color: azure; +} \ No newline at end of file