refactor NetlifyLogs

Author: NileshPatel17

README.md

@@ -231,6 +231,7 @@ Thanks goes to these wonderful people
     <td align="center"><a href="https://github.com/chinmay17"><img src="https://avatars2.githubusercontent.com/u/7131231?v=4" width="100px;" alt="Chinmay Chaudhary"/><br /><sub><b>Chinmay Chaudhary</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=chinmay17" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/Sakthivel"><img src="https://avatars3.githubusercontent.com/u/205201?v=4" width="100px;" alt="Sakthivel Sengodan Sapient"/><br /><sub><b>Sakthivel Sengodan Sapient</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=sakthivel" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/vanya829"><img src="https://avatars0.githubusercontent.com/u/1397979?v=4" width="100px;" alt="vanya829"/><br /><sub><b>vanya829</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=vanya829" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/nileshpatel17"><img src="https://avatars0.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>
 

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