From 6d338568fedd9d3c2e63f9e7eb753ab487be0312 Mon Sep 17 00:00:00 2001 From: Nilesh Patel Date: Mon, 21 Oct 2019 22:14:43 +0530 Subject: [PATCH] refactor NetlifyLogs --- .all-contributorsrc | 9 ++++ README.md | 4 +- .../NetlifyLogs/{elements.js => elements.ts} | 0 .../pages/common/Modals/NetlifyLogs/index.js | 53 ------------------- .../pages/common/Modals/NetlifyLogs/index.tsx | 50 +++++++++++++++++ 5 files changed, 62 insertions(+), 54 deletions(-) rename packages/app/src/app/pages/common/Modals/NetlifyLogs/{elements.js => elements.ts} (100%) delete mode 100644 packages/app/src/app/pages/common/Modals/NetlifyLogs/index.js create mode 100644 packages/app/src/app/pages/common/Modals/NetlifyLogs/index.tsx diff --git a/.all-contributorsrc b/.all-contributorsrc index b1cf620463b..a7b41bd699e 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1431,6 +1431,15 @@ "contributions": [ "code" ] + }, + { + "login": "NileshPatel17", + "name": "Nilesh Patel", + "avatar_url": "https://avatars2.githubusercontent.com/u/27020381?v=4", + "profile": "https://github.com/NileshPatel17", + "contributions": [ + "code" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index cd65e79057c..096bf5ad22f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-149-orange.svg?style=flat-square)](#contributors-) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) +# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-153-orange.svg?style=flat-square)](#contributors-) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors) @@ -239,11 +239,13 @@ Thanks goes to these wonderful people Abdul Rauf
Abdul Rauf
💻 📖 milap1296
milap1296
💻 yevhen orlov
yevhen orlov
💻 + Nilesh Patel
Nilesh Patel
💻 + ## Backers diff --git a/packages/app/src/app/pages/common/Modals/NetlifyLogs/elements.js b/packages/app/src/app/pages/common/Modals/NetlifyLogs/elements.ts similarity index 100% rename from packages/app/src/app/pages/common/Modals/NetlifyLogs/elements.js rename to packages/app/src/app/pages/common/Modals/NetlifyLogs/elements.ts diff --git a/packages/app/src/app/pages/common/Modals/NetlifyLogs/index.js b/packages/app/src/app/pages/common/Modals/NetlifyLogs/index.js deleted file mode 100644 index 7d2ae652d0d..00000000000 --- a/packages/app/src/app/pages/common/Modals/NetlifyLogs/index.js +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Component } from 'react'; -import { inject, observer } from 'app/componentConnectors'; - -import { Button } from '@codesandbox/common/lib/components/Button'; -import { Container } from '../LiveSessionEnded/elements'; -import { Heading, Explanation } from '../elements'; - -import { List, Item } from './elements'; - -class NetlifyLogs extends Component { - state = { logs: ['Contacting Netlify'] }; - - componentDidMount() { - this.interval = setInterval(this.getLogs, 2000); - } - - componentWillUnmount() { - clearInterval(this.interval); - } - - getLogs = async () => { - const url = this.props.store.deployment.netlifyLogs; - - const data = await fetch(url); - const { logs } = await data.json(); - - this.setState({ logs }); - }; - - render() { - const { signals } = this.props; - - return ( - - Sandbox Site Logs - - Builds typically take a minute or two to complete - - - {this.state.logs.map((log, i) => ( - // eslint-disable-next-line react/no-array-index-key - {log} - ))} - - - - ); - } -} - -export default inject('signals', 'store')(observer(NetlifyLogs)); diff --git a/packages/app/src/app/pages/common/Modals/NetlifyLogs/index.tsx b/packages/app/src/app/pages/common/Modals/NetlifyLogs/index.tsx new file mode 100644 index 00000000000..0c2cfa3c670 --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/NetlifyLogs/index.tsx @@ -0,0 +1,50 @@ +import React, { FunctionComponent, useState, useEffect } from 'react'; +import { useOvermind } from 'app/overmind'; + +import { Button } from '@codesandbox/common/lib/components/Button'; +import { Container } from '../LiveSessionEnded/elements'; +import { Heading, Explanation } from '../elements'; + +import { List, Item } from './elements'; + +const NetlifyLogs: FunctionComponent = () => { + const [logs, setLogs] = useState(['Contacting Netlify']); + const { + state: { + deployment: { netlifyLogs: url }, + }, + actions: { modalClosed }, + } = useOvermind(); + + useEffect(() => { + const getLogs = async apiUrl => { + const data = await fetch(apiUrl); + const { logs: newLogs } = await data.json(); + setLogs(newLogs); + }; + const interval = setInterval(() => getLogs(url), 2000); + return () => { + clearInterval(interval); + }; + }, [url]); + + return ( + + Sandbox Site Logs + + Builds typically take a minute or two to complete + + + {logs.map((log, i) => ( + // eslint-disable-next-line react/no-array-index-key + {log} + ))} + + + + ); +}; + +export default NetlifyLogs;