assignment-1

LitHaxor · Jun 2, 2020 · 79a0a5d · 79a0a5d
1 parent 78027f7
commit 79a0a5d
Show file tree

Hide file tree

Showing 7 changed files with 268 additions and 51 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "C_Cpp.errorSquiggles": "Enabled"
+}
diff --git a/asignments/week1/DishdetailComponent.js b/asignments/week1/DishdetailComponent.js
@@ -0,0 +1,88 @@
+import React from  'react';
+import {Card, CardImg, CardBody, CardTitle,CardText} from 'reactstrap';
+
+class DishDetail extends React.Component{
+
+    renderDish(dish) {
+        if (dish != null) {
+            return (
+                <div className='col-12 col-md-5 m-1'>
+                    <Card>
+                        <CardImg width="100%" src={dish.image} alt={dish.name} />
+                        <CardBody>
+                            <CardTitle>{dish.name}</CardTitle>
+                            <CardText>{dish.description}</CardText>
+                        </CardBody>
+                    </Card>
+                </div>
+            )
+        }
+        else {
+            return (<div></div>)
+        }
+    }
+
+
+
+
+
+
+    renderComment(comments){
+        if(comments == null){
+            return (
+                <div>
+
+                </div>
+            )
+        }
+        const com = comments.map(comment =>{
+            return(
+                <li key= {comment.id}> 
+                    <p> 
+                        {comment.id}
+                    </p>
+                    <p>
+                        {comment.author} &nbsp; 
+                        date: {comment.date}
+                    </p>
+
+                </li>
+            )
+        })
+        return(
+            <div className="col-12 col-md-5 m-1">
+                <h4>Comments</h4>
+                <ul className="list-unstyled">
+                    {com}
+                </ul>
+            </div>
+        )
+    }
+
+
+
+
+
+    render()
+    {
+        const dish = this.props.dish;
+
+        if(dish == null)
+         return(
+             <div>
+
+             </div>
+         )
+         const dishItem= this.renderDish(dish);
+         const comment = this.renderComment(dish.comments);
+         return(
+             <div className="row">
+                 {dishItem}
+                 {comment}
+             </div>
+         )
+    }
+
+}
+
+export default DishDetail;
diff --git a/asignments/week1/MenuComponent.js b/asignments/week1/MenuComponent.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Card, CardImg, CardImgOverlay, CardTitle } from 'reactstrap';
+import Dishdetail from './DishDetail'
+import { DISHES } from '../shared/dishes';
+
+class Menu extends React.Component{
+    constructor(props)
+    {
+        super(props);
+        this.state={
+            selectedDish: null
+        }
+    }
+
+    onSelectedDish(dish)
+    {
+        this.setState({
+            selectedDish: dish
+        })
+    }
+
+
+    render(){
+
+
+        const menu = this.props.dishes.map(dish => {
+            return (
+                <div key={dish.id} className='col-12 col-md-5 m-1'>
+                    <Card onClick={() => this.onSelectedDish(dish)} >
+                        <CardImg width="100%" src={dish.image} alt={dish.name} />
+                        <CardImgOverlay>
+                            <CardTitle >{dish.name}</CardTitle>
+                        </CardImgOverlay>
+                    </Card>
+                </div>
+            );
+        });
+           return(
+               <div className="container">
+                   <div className="row">
+                       {menu}
+                   </div>
+                   <Dishdetail dish={this.state.selectedDish}></Dishdetail>
+               </div>
+           )
+
+    }
+}
+
+export default Menu; 
diff --git a/debug.log b/debug.log
@@ -5,3 +5,4 @@
 [0601/205147.901:ERROR:crash_report_database_win.cc(428)] unexpected header
 [0601/222229.303:ERROR:crash_report_database_win.cc(428)] unexpected header
 [0601/223744.710:ERROR:crash_report_database_win.cc(428)] unexpected header
+[0602/210423.040:ERROR:crash_report_database_win.cc(428)] unexpected header
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,6 +5,7 @@ import Nav from './components/Nav'
 import Menu from './components/Menu';
 import {DISHES} from './shared/dishes';
 
+
 class App extends React.Component{
 
   constructor(props){
@@ -18,10 +19,12 @@ class App extends React.Component{
   return (
         <div>
           <Nav/>
+
           <Menu dishes={this.state.dishes}/>
         </div>
     );
   }
 }
 
+
 export default App;
diff --git a/src/components/DishDetail.jsx b/src/components/DishDetail.jsx
@@ -0,0 +1,88 @@
+import React from  'react';
+import {Card, CardImg, CardBody, CardTitle,CardText} from 'reactstrap';
+
+class DishDetail extends React.Component{
+
+    renderDish(dish) {
+        if (dish != null) {
+            return (
+                <div className='col-12 col-md-5 m-1'>
+                    <Card>
+                        <CardImg width="100%" src={dish.image} alt={dish.name} />
+                        <CardBody>
+                            <CardTitle>{dish.name}</CardTitle>
+                            <CardText>{dish.description}</CardText>
+                        </CardBody>
+                    </Card>
+                </div>
+            )
+        }
+        else {
+            return (<div></div>)
+        }
+    }
+
+
+
+
+
+
+    renderComment(comments){
+        if(comments == null){
+            return (
+                <div>
+
+                </div>
+            )
+        }
+        const com = comments.map(comment =>{
+            return(
+                <li key= {comment.id}> 
+                    <p> 
+                        {comment.id}
+                    </p>
+                    <p>
+                        {comment.author} &n 
+                        date: {comment.date}
+                    </p>
+
+                </li>
+            )
+        })
+        return(
+            <div className="col-12 col-md-5 m-1">
+                <h4>Comments</h4>
+                <ul className="list-unstyled">
+                    {com}
+                </ul>
+            </div>
+        )
+    }
+
+
+
+
+
+    render()
+    {
+        const dish = this.props.dish;
+
+        if(dish == null)
+         return(
+             <div>
+
+             </div>
+         )
+         const dishItem= this.renderDish(dish);
+         const comment = this.renderComment(dish.comments);
+         return(
+             <div className="row">
+                 {dishItem}
+                 {comment}
+             </div>
+         )
+    }
+
+}
+
+export default DishDetail;
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
@@ -1,66 +1,50 @@
 import React from 'react';
-import {Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle} from 'reactstrap';
+import { Card, CardImg, CardImgOverlay, CardTitle } from 'reactstrap';
+import Dishdetail from './DishDetail'
+import { DISHES } from '../shared/dishes';
 
-
-class Menu extends React.Component {
-
-    constructor(props) {
+class Menu extends React.Component{
+    constructor(props)
+    {
         super(props);
-
-        this.state = {
+        this.state={
             selectedDish: null
         }
     }
 
-    onDishSelect(dish) {
-        this.setState({ selectedDish: dish});
+    onSelectedDish(dish)
+    {
+        this.setState({
+            selectedDish: dish
+        })
     }
+
 
-    renderDish(dish) {
-        if (dish != null)
-            return(
-                <Card>
-                    <CardImg top src={dish.image} alt={dish.name} />
-                    <CardBody>
-                      <CardTitle>{dish.name}</CardTitle>
-                      <CardText>{dish.description}</CardText>
-                    </CardBody>
-                </Card>
-            );
-        else
-            return(
-                <div></div>
-            );
-    }
-
-    render() {
-        const menu = this.props.dishes.map((dish) => {
+    render(){
+
+
+        const menu = this.props.dishes.map(dish => {
             return (
-              <div  className="col-12 col-md-5 m-1">
-                <Card key={dish.id}
-                  onClick={() => this.onDishSelect(dish)}>
-                  <CardImg width="100%" src={dish.image} alt={dish.name} />
-                  <CardImgOverlay>
-                      <CardTitle>{dish.name}</CardTitle>
-                  </CardImgOverlay>
-                </Card>
-              </div>
+                <div key={dish.id} className='col-12 col-md-5 m-1'>
+                    <Card onClick={() => this.onSelectedDish(dish)} >
+                        <CardImg width="100%" src={dish.image} alt={dish.name} />
+                        <CardImgOverlay>
+                            <CardTitle >{dish.name}</CardTitle>
+                        </CardImgOverlay>
+                    </Card>
+                </div>
             );
         });
-
-        return (
-            <div className="container">
-                <div className="row">
-                    {menu}
-                </div>
-                <div className="row">
-                  <div  className="col-12 col-md-5 m-1">
-                    {this.renderDish(this.state.selectedDish)}
-                  </div>
-                </div>
-            </div>
-        );
+           return(
+               <div className="container">
+                   <div className="row">
+                       {menu}
+                   </div>
+                   <Dishdetail dish={this.state.selectedDish}></Dishdetail>
+               </div>
+           )
+
     }
 }
 
-export default Menu;
+export default Menu;