refactor NetlifyLogs

Author: NileshPatel17

.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,

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
     <td align="center"><a href="https://armujahid.me"><img src="https://avatars1.githubusercontent.com/u/3725386?v=4" width="100px;" alt="Abdul Rauf"/><br /><sub><b>Abdul Rauf</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=armujahid" title="Code">💻</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=armujahid" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/milap1296"><img src="https://avatars2.githubusercontent.com/u/19545730?v=4" width="100px;" alt="milap1296"/><br /><sub><b>milap1296</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=milap1296" title="Code">💻</a></td>
     <td align="center"><a href="http://yevhenorlov.com"><img src="https://avatars2.githubusercontent.com/u/17388747?v=4" width="100px;" alt="yevhen orlov"/><br /><sub><b>yevhen orlov</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=yevhenorlov" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/NileshPatel17"><img src="https://avatars2.githubusercontent.com/u/27020381?v=4" width="100px;" alt="Nilesh Patel"/><br /><sub><b>Nilesh Patel</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=NileshPatel17" title="Code">💻</a></td>
   </tr>
 </table>
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## Backers

packages/app/src/app/pages/common/Modals/NetlifyLogs/elements.js renamed to packages/app/src/app/pages/common/Modals/NetlifyLogs/elements.ts

@@ -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 (
+    <Container>
+      <Heading>Sandbox Site Logs</Heading>
+      <Explanation>
+        Builds typically take a minute or two to complete
+      </Explanation>
+      <List>
+        {logs.map((log, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <Item key={i}>{log}</Item>
+        ))}
+      </List>
+      <Button small onClick={() => modalClosed()}>
+        Close
+      </Button>
+    </Container>
+  );
+};
+
+export default NetlifyLogs;