Refactor WritePage into its own component

tim-tran · Jan 20, 2019 · e3e89c1 · e3e89c1
1 parent a3a2b35
commit e3e89c1
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 20 deletions.
diff --git a/feelsbook/feelsbook/src/App.js b/feelsbook/feelsbook/src/App.js
@@ -8,7 +8,7 @@ class App extends Component {
     return (
       <div className="App">
         {/* <Title></Title> */}
-        <MainContainer></MainContainer>
+          <MainContainer className='active'></MainContainer>
       </div>
     );
   }

diff --git a/feelsbook/feelsbook/src/components/EntryCard.jsx b/feelsbook/feelsbook/src/components/EntryCard.jsx
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import './css/EntryCard.css';
+import { Card } from 'react-bootstrap';
+import { Nav } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
+
+class EntryCard extends Component {
+    render() {
+        return (
+            <Card style={{ width: '18rem' }}>
+                <Card.Body>
+                    <Card.Title>Card Title</Card.Title>
+                    <Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
+                    <Card.Text>
+                        Some quick example text to build on the card title and make up the bulk of
+                        the card's content.
+                    </Card.Text>
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+export default EntryCard;
diff --git a/feelsbook/feelsbook/src/components/MainContainer.jsx b/feelsbook/feelsbook/src/components/MainContainer.jsx
@@ -1,13 +1,24 @@
 import React, { Component } from 'react';
 import './css/MainContainer.css';
+import WritePage from './WritePage';
 import { Card } from 'react-bootstrap';
 import { Nav } from 'react-bootstrap';
-import { Button } from 'react-bootstrap';
-import { Form } from 'react-bootstrap';
-import { Col } from 'react-bootstrap';
-import { Row } from 'react-bootstrap';
 
 class MainContainer extends Component {
+
+  constructor () {
+    super()
+    this.state = {
+      currentTab: 'write'
+    }
+  }
+
+  changeTab(tab) {
+    this.setState({
+      currentTab: tab
+    })
+  }
+
   render() {
     return (
       <Card className='MainContainer'>
@@ -25,21 +36,7 @@ class MainContainer extends Component {
           </Nav>
         </Card.Header>
         <Card.Body>
-          <Form>
-            <Form.Group controlId="exampleForm.ControlInput1">
-              <Row>
-                <Col sm={10}>
-                  <Form.Control placeholder="Title" className="light-transparency"/>
-                </Col>
-                <Col sm={2}>
-                  <Button variant="primary">Save Entry</Button>
-                </Col>
-              </Row>
-            </Form.Group>
-            <Form.Group controlId="exampleForm.ControlTextarea1">
-              <Form.Control as="textarea" rows="13" placeholder="Write Here!" className="light-transparency"/>
-            </Form.Group>
-          </Form>
+          <WritePage></WritePage>
         </Card.Body>
       </Card>
     );

diff --git a/feelsbook/feelsbook/src/components/WritePage.jsx b/feelsbook/feelsbook/src/components/WritePage.jsx
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import './css/MainContainer.css';
+import { Button } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
+
+class WritePage extends Component {
+
+    render() {
+        return (
+            <Form className='WritePage'>
+                <Form.Group controlId="exampleForm.ControlInput1">
+                    <Row>
+                        <Col sm={10}>
+                            <Form.Control placeholder="Title" className="light-transparency" />
+                        </Col>
+                        <Col sm={2}>
+                            <Button variant="primary">Save Entry</Button>
+                        </Col>
+                    </Row>
+                </Form.Group>
+                <Form.Group controlId="exampleForm.ControlTextarea1">
+                    <Form.Control as="textarea" rows="13" placeholder="Write Here!" className="light-transparency" />
+                </Form.Group>
+            </Form>
+        );
+    }
+}
+
+export default WritePage;