Refactored code to call an API server

awsugmm · Aug 17, 2019 · 93420ce · 93420ce
1 parent b5d5659
commit 93420ce
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 128 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import { BrowserRouter as Router, Route } from "react-router-dom";
 
 import Home from "./Home";
 import Details from "./Details";

diff --git a/src/Details.js b/src/Details.js
@@ -1,8 +1,20 @@
 import React from "react";
-import { Container, Header, Image, Statistic } from "semantic-ui-react";
+import {
+  Container,
+  Divider,
+  Grid,
+  Header,
+  Icon,
+  Image,
+  Statistic,
+  Table,
+  Button
+} from "semantic-ui-react";
 
 import { find, propEq } from "ramda";
 
+import { api_host } from "./constants";
+
 export default class Details extends React.Component {
   constructor(props) {
     super(props);
@@ -13,13 +25,25 @@ export default class Details extends React.Component {
   }
 
   componentDidMount() {
-    let data = require("./sources.json");
-    this.setState(data, () => {
-      let item = find(propEq("slug", this.props.match.params.slug))(
-        this.state.data
+    fetch(`http://${api_host}:8000/api/phones`)
+      .then(data => data.json())
+      .then(json =>
+        this.setState(
+          Object.assign(this.state, {
+            data: json
+          }),
+          () => {
+            let item = find(propEq("slug", this.props.match.params.slug))(
+              this.state.data
+            );
+            this.setState(
+              Object.assign(this.state, {
+                item: item
+              })
+            );
+          }
+        )
       );
-      this.setState(Object.assign(this.state, { item: item }));
-    });
   }
 
   render() {
@@ -28,17 +52,93 @@ export default class Details extends React.Component {
 
     return (
       <Container>
-        <Image src={this.state.item.image} />
-        <Header as="h1">
-          {this.state.item.name}
-          <Header.Subheader>{this.state.item.make}</Header.Subheader>
-        </Header>
-        <Statistic horizontal>
-          <Statistic.Value>
-            {this.state.item.price.toLocaleString()}
-          </Statistic.Value>
-          <Statistic.Label>MMK</Statistic.Label>
-        </Statistic>
+        <Header as="h1">SellPhones™</Header>
+
+        <Grid stackable columns={2}>
+          <Grid.Column>
+            <Image
+              src={this.state.item.image}
+              onError={i => (i.target.src = require("./404.png"))}
+              style={{
+                width: "600px",
+                height: "auto"
+              }}
+            />
+            <Button.Group>
+              <Button icon="call" content="Inquire" />
+              <Button.Or />
+              <Button positive icon="cart" content="Order" />
+            </Button.Group>
+          </Grid.Column>
+          <Grid.Column>
+            <Header as="h1">
+              {this.state.item.name}
+              <Header.Subheader>{this.state.item.make}</Header.Subheader>
+            </Header>
+            <Statistic.Group widths="two">
+              <Statistic horizontal>
+                <Statistic.Value>
+                  {parseInt(this.state.item.price).toLocaleString()}
+                </Statistic.Value>
+                <Statistic.Label>MMK</Statistic.Label>
+              </Statistic>
+              <Statistic horizontal>
+                <Statistic.Value>FREE</Statistic.Value>
+                <Statistic.Label>Shipping</Statistic.Label>
+              </Statistic>
+            </Statistic.Group>
+            <Divider horizontal>
+              <Header as="h4">
+                <Icon name="bar chart" />
+                Specifications
+              </Header>
+            </Divider>
+            <Table definition>
+              <Table.Body>
+                <Table.Row>
+                  <Table.Cell>Released</Table.Cell>
+                  <Table.Cell>{this.state.item.details.released}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>Display Size</Table.Cell>
+                  <Table.Cell>{this.state.item.dimension} inches</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>Memory</Table.Cell>
+                  <Table.Cell>{this.state.item.memory}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>Chipset</Table.Cell>
+                  <Table.Cell>{this.state.item.details.chipset}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>CPU</Table.Cell>
+                  <Table.Cell>{this.state.item.details.cpu}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>Front Camera</Table.Cell>
+                  <Table.Cell>{this.state.item.details.fcamera}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>Rear Camera</Table.Cell>
+                  <Table.Cell>{this.state.item.details.rcamera}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>Resolution</Table.Cell>
+                  <Table.Cell>{this.state.item.details.resolution}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>GPU</Table.Cell>
+                  <Table.Cell>{this.state.item.details.gpu}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>Operating System</Table.Cell>
+                  <Table.Cell>{this.state.item.details.os}</Table.Cell>
+                </Table.Row>
+              </Table.Body>
+            </Table>
+          </Grid.Column>
+        </Grid>
       </Container>
     );
   }

diff --git a/src/Home.js b/src/Home.js
@@ -5,13 +5,13 @@ import {
   Grid,
   Header,
   Image,
-  List,
-  Placeholder
+  List
 } from "semantic-ui-react";
 import { Link } from "react-router-dom";
-
 import { splitEvery } from "ramda";
 
+import { api_host } from "./constants";
+
 class Home extends React.Component {
   constructor(props) {
     super(props);
@@ -21,16 +21,17 @@ class Home extends React.Component {
   }
 
   componentDidMount() {
-    let data = require("./sources.json");
-    this.setState(data);
+    fetch(`http://${api_host}:8000/api/phones`)
+      .then(data => data.json())
+      .then(json => this.setState(Object.assign(this.state, { data: json })));
   }
 
   render() {
     if (this.state.data === null) return <div>loading...</div>;
 
     return (
       <Container>
-        <Header as="h1">SellPhones</Header>
+        <Header as="h1">SellPhones™</Header>
         <Grid>
           {splitEvery(3, this.state.data).map((row, index) => (
             <Grid.Row columns={3} key={index}>
@@ -39,12 +40,12 @@ class Home extends React.Component {
                   <Image
                     src={column.image}
                     onError={i => (i.target.src = require("./404.png"))}
-                    style={{ width: "400px", height: "400px" }}
+                    style={{ width: "400px", height: "auto" }}
                   />
                   <Header as="h2">
                     {column.name}
                     <Header.Subheader>
-                      {column.price.toLocaleString()} MMK
+                      {parseInt(column.price).toLocaleString()} MMK
                     </Header.Subheader>
                   </Header>
                   <List>

diff --git a/src/constants.js b/src/constants.js
@@ -0,0 +1 @@
+export const api_host = "127.0.0.1";
diff --git a/src/sources.json b/src/sources.json