Skip to content

T
toiletcoin
Commit dbb203d9 by OuiAtichat
Options

add axios mock feed with api

parent cf79696d
Showing with 134 additions and 39 deletions
firebase.json
...@@ -6,5 +6,9 @@ ...@@ -6,5 +6,9 @@
"**/.*", "**/.*",
"**/node_modules/**" "**/node_modules/**"
] ]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
} }
} }
firestore.indexes.json 0 → 100644
{
"indexes": [],
"fieldOverrides": []
}
firestore.rules 0 → 100644
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
\ No newline at end of file
package.json
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1", "bootstrap": "^4.3.1",
"bootstrap-daterangepicker": "^3.0.5", "bootstrap-daterangepicker": "^3.0.5",
"firebase": "^6.3.3", "firebase": "^6.3.3",
......
src/Pages/Home.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import app from '../firebase'; import app, { db } from '../firebase';
import { Row, Container } from 'react-bootstrap'; import { Row, Container } from 'react-bootstrap';
import DataTable from '../components/DataTable'; import DataTable from '../components/DataTable';
import NavBar from '../components/NavBar'; import NavBar from '../components/NavBar';
import DataCard from '../components/DataCard'; import DataCard from '../components/DataCard';
import GetDataSelection from '../components/GetDataSelection/GetDataSelection'; import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
import Mapbox from '../components/Mapbox'; import Mapbox from '../components/Mapbox';
import axios from 'axios';
const Data = [ const Data = [
{ {
...@@ -68,10 +69,13 @@ const Data = [ ...@@ -68,10 +69,13 @@ const Data = [
class Home extends Component { class Home extends Component {
state = { state = {
currentUser: null, currentUser: null,
feedData: null,
}; };
componentDidMount() { componentDidMount() {
this.getCurrentUser(); this.getCurrentUser();
this.getFeedData();
// this.getFireStoreData();
} }
getCurrentUser = async () => { getCurrentUser = async () => {
...@@ -79,8 +83,26 @@ class Home extends Component { ...@@ -79,8 +83,26 @@ class Home extends Component {
this.setState({ currentUser: displayName || email }); this.setState({ currentUser: displayName || email });
}; };
// getFireStoreData = () => {
// db.collection('user')
// .get()
// .then(querySnapshot => {
// querySnapshot.forEach(doc => {
// console.log(`${doc.id} => ${doc.data()}`);
// });
// });
// };
getFeedData = async () => {
const response = await axios.get(
'https://api.nexpie.io/feed/metric/11add2ec-89e7-4985-8525-b0421896b7a2?token=eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJjdHgiOnsib3duZXIiOiJVNDMwMDQ1Mzc3ODY2In0sInNjb3BlIjpbXSwiaWF0IjoxNTU3MjIzOTQwLCJuYmYiOjE1NTcyMjM5NDAsImV4cCI6MTYyMDMzOTE0MCwiZXhwaXJlSW4iOjYzMTE1MjAwLCJqdGkiOiJua1NKcHMyMSIsImlzcyI6ImNlcjp1c2VydG9rZW4ifQ.1I2m6qdNxPzicYNRuKrFOp-Jn9DaSfV0pdAyDtjD7-BOZzRmsqBeIUWxmE24MQWIFlGXuDXq0tLxvBtiEdySBA&starttime=1564938060076&endtime=1565024340076'
);
this.setState({ feedData: response.data.metrics[0].value });
console.log(response.data.metrics[0].value);
};
render() { render() {
const { currentUser } = this.state; const { currentUser, feedData } = this.state;
return ( return (
<> <>
...@@ -94,7 +116,7 @@ class Home extends Component { ...@@ -94,7 +116,7 @@ class Home extends Component {
</Row> </Row>
<Row> <Row>
{Data.map((item, index) => ( {Data.map((item, index) => (
<DataCard key={index} item={item} /> <DataCard key={index} item={item} feedData={feedData} />
))} ))}
</Row> </Row>
<Row> <Row>
......
src/components/DataCard.js
import React from 'react'; import React from 'react';
import { Card, Col, Row, Button } from 'react-bootstrap'; import { Card, Col, Row, Button } from 'react-bootstrap';
import { FaMoneyBillAlt, FaArrowUp, FaArrowDown, FaUserFriends } from 'react-icons/fa'; import { FaMoneyBillAlt, FaArrowUp, FaArrowDown, FaUserFriends, FaFileCsv } from 'react-icons/fa';
import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts'; import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts';
import withWindowDimensions from '../utils/withWindowDimensions'; import withWindowDimensions from '../utils/withWindowDimensions';
import { CSVLink } from 'react-csv'; import { CSVLink } from 'react-csv';
import { FaFileCsv } from 'react-icons/fa'; import moment from 'moment';
const chartdata = [ // const chartdata = [
{ // {
name: 'Page A', // name: 'Page A',
uv: 4000, // uv: 4000,
}, // },
{ // {
name: 'Page B', // name: 'Page B',
uv: 3000, // uv: 3000,
}, // },
{ // {
name: 'Page C', // name: 'Page C',
uv: 2000, // uv: 2000,
}, // },
{ // {
name: 'Page D', // name: 'Page D',
uv: 2780, // uv: 2780,
}, // },
{ // {
name: 'Page E', // name: 'Page E',
uv: 1890, // uv: 1890,
}, // },
{ // {
name: 'Page F', // name: 'Page F',
uv: 2390, // uv: 2390,
}, // },
{ // {
name: 'Page G', // name: 'Page G',
uv: 3490, // uv: 3490,
}, // },
]; // ];
const SmCard = props => { const SmCard = props => {
const smdata = props.smitem; const smdata = props.smitem;
...@@ -65,6 +65,8 @@ const SmCard = props => { ...@@ -65,6 +65,8 @@ const SmCard = props => {
const DataCard = props => { const DataCard = props => {
const data = props.item; const data = props.item;
console.log(props.feedData);
return ( return (
<Col md={6}> <Col md={6}>
<Card <Card
...@@ -79,7 +81,7 @@ const DataCard = props => { ...@@ -79,7 +81,7 @@ const DataCard = props => {
<div style={{ width: '100%', height: 300, padding: '5px' }}> <div style={{ width: '100%', height: 300, padding: '5px' }}>
<ResponsiveContainer> <ResponsiveContainer>
<AreaChart <AreaChart
data={chartdata} data={props.feedData}
margin={{ margin={{
top: 10, top: 10,
right: 30, right: 30,
...@@ -87,9 +89,30 @@ const DataCard = props => { ...@@ -87,9 +89,30 @@ const DataCard = props => {
bottom: 0, bottom: 0,
}} }}
> >
<XAxis stroke="white" dataKey="name" tick={{ fill: 'white' }} /> {/* <XAxis stroke="white" dataKey="name" tick={{ fill: 'white' }} />
<YAxis stroke="white" tick={{ fill: 'white' }} /> <YAxis stroke="white" tick={{ fill: 'white' }} /> */}
<Area type="monotone" dataKey="uv" stroke="white" fill="white" /> <XAxis
stroke="white"
dataKey={value => {
return moment(value[0]).format('DD MMM YY');
}}
tick={{ fill: 'white' }}
/>
<YAxis
stroke="white"
dataKey={value => {
return value[1];
}}
tick={{ fill: 'white' }}
/>
<Area
type="monotone"
dataKey={value => {
return value[1];
}}
stroke="white"
fill="white"
/>
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
......
src/firebase.js
import firebase from '@firebase/app'; import firebase from '@firebase/app';
import '@firebase/auth'; import '@firebase/auth';
import '@firebase/firestore';
const app = firebase.initializeApp({ const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_KEY, apiKey: process.env.REACT_APP_FIREBASE_KEY,
...@@ -11,3 +12,7 @@ const app = firebase.initializeApp({ ...@@ -11,3 +12,7 @@ const app = firebase.initializeApp({
}); });
export default app; export default app;
const db = app.firestore();
export { db };
yarn.lock
...@@ -2262,6 +2262,14 @@ aws4@^1.8.0: ...@@ -2262,6 +2262,14 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ== integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
axios@^0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
dependencies:
follow-redirects "1.5.10"
is-buffer "^2.0.2"
axobject-query@^2.0.2: axobject-query@^2.0.2:
version "2.0.2" version "2.0.2"
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
...@@ -3720,6 +3728,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6. ...@@ -3720,6 +3728,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.
dependencies: dependencies:
ms "2.0.0" ms "2.0.0"
debug@=3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
debug@^3.2.5, debug@^3.2.6: debug@^3.2.5, debug@^3.2.6:
version "3.2.6" version "3.2.6"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
...@@ -4765,6 +4780,13 @@ flush-write-stream@^1.0.0: ...@@ -4765,6 +4780,13 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3" inherits "^2.0.3"
readable-stream "^2.3.6" readable-stream "^2.3.6"
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"
follow-redirects@^1.0.0: follow-redirects@^1.0.0:
version "1.7.0" version "1.7.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
...@@ -5692,6 +5714,11 @@ is-buffer@^1.0.2, is-buffer@^1.1.5: ...@@ -5692,6 +5714,11 @@ is-buffer@^1.0.2, is-buffer@^1.1.5:
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w== integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
is-buffer@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
is-callable@^1.1.4: is-callable@^1.1.4:
version "1.1.4" version "1.1.4"
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75" resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment