Refactor /app/pages/common/Modals/NetlifyLogs/index.js to /app/pages/common/Modals/NetlifyLogs/index.tsx 🧠 Overmind | Hacktoberfest

.all-contributorsrc

@@ -1394,6 +1394,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "ganes1410",
+      "name": "R.Ganesh",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/16988745?v=4",
+      "profile": "https://github.com/ganes1410",
+      "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-148-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-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/)
 
 [![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors)
@@ -235,11 +235,13 @@ Thanks goes to these wonderful people
   </tr>
   <tr>
     <td align="center"><a href="http://hetpatel33.github.io"><img src="https://avatars0.githubusercontent.com/u/13877514?v=4" width="100px;" alt="Het Patel"/><br /><sub><b>Het Patel</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=hetpatel33" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ganes1410"><img src="https://avatars3.githubusercontent.com/u/16988745?v=4" width="100px;" alt="R.Ganesh"/><br /><sub><b>R.Ganesh</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=ganes1410" title="Code">💻</a></td>
   </tr>
 </table>
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## Backers

packages/app/src/app/pages/common/Modals/NetlifyLogs/index.tsx

@@ -0,0 +1,53 @@
+import React, { 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';
+
+export const NetlifyLogs = () => {
+  const [logs, setLogs] = useState(['Contacting Netlify']);
+  const {
+    state: {
+      deployment: { netlifyLogs },
+    },
+    actions: { modalClosed },
+  } = useOvermind();
+
+  useEffect(() => {
+    const getLogs = async () => {
+      const url = netlifyLogs;
+
+      const data = await fetch(url);
+      // eslint-disable-next-line no-shadow
+      const { logs } = await data.json();
+
+      setLogs(logs);
+    };
+
+    const interval = setInterval(getLogs, 2000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [netlifyLogs]);
+
+  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>
+  );
+};

packages/app/src/app/pages/common/Modals/index.js

@@ -19,7 +19,7 @@ import { FeedbackModal } from './FeedbackModal';
 import { ForkServerModal } from './ForkServerModal';
 import LiveSessionEnded from './LiveSessionEnded';
 import LiveSessionVersionMismatch from './LiveSessionVersionMismatch';
-import NetlifyLogs from './NetlifyLogs';
+import { NetlifyLogs } from './NetlifyLogs';
 import NewSandbox from './NewSandbox';
 import PickSandboxModal from './PickSandboxModal';
 import PreferencesModal from './PreferencesModal';