add rss feed components

Author: adammetal

public/index.html

@@ -9,6 +9,10 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.css

@@ -1,23 +1,25 @@
-import logo from './logo.svg';
-import './App.css';
+import { useState } from "react";
+import News from "./News";
+import NewsContainer from "./NewsContainer";
 
 function App() {
+  const [source, setSource] = useState("https://dev.to/feed/");
+  const [saved, setSaved] = useState([]);
+
+  const handleChange = (e) => {
+    setSource(e.target.value);
+  }
+
+  const handleSave = (item) => {
+    setSaved([...saved, item]);
+  }
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <input type="text" value={source} onChange={handleChange} />
+      <NewsContainer url={source} onSave={handleSave} />
+      <h1>Saved news</h1>
+      <News news={saved} />
     </div>
   );
 }

src/App.js

@@ -0,0 +1,27 @@
+function Item(props) {
+  const item = props.item;
+  const onSave = props.onSave;
+
+  const title = item.title;
+  const desc = item.desc;
+  const link = item.link;
+
+  const handleClickOnSaveBtn = () => {
+    onSave({ title, desc, link });
+  }
+
+  return (
+    <div className="item">
+      <h1>{title}</h1>
+      <div>{desc}</div>
+      <a href={link}>{link}</a>
+      {onSave ? (
+        <div>
+          <button onClick={handleClickOnSaveBtn}>Save</button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default Item;

src/App.test.js

@@ -0,0 +1,16 @@
+import Item from "./Item";
+
+function News(props) {
+  const news = props.news;
+  const onSave = props.onSave;
+
+  return (
+    <div className="container">
+      {news.map((item) => (
+        <Item key={item.link} item={item} onSave={onSave} />
+      ))}
+    </div>
+  );
+}
+
+export default News;

src/Item.js

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import News from "./News";
+
+function parseXml(str) {
+  const parser = new DOMParser();
+  return parser.parseFromString(str, "text/xml");
+}
+
+function parseHtml(str) {
+  const parser = new DOMParser();
+  return parser.parseFromString(str, "text/html");
+}
+
+function parseNews(newsDomTree) {
+  const items = newsDomTree.getElementsByTagName("item");
+  const news = [];
+  for (const item of items) {
+    const title = item.getElementsByTagName("title")[0].innerHTML;
+    const link = item.getElementsByTagName("link")[0].innerHTML;
+    let desc = item.getElementsByTagName("description")[0];
+
+    desc =
+      parseHtml(desc.textContent).body.textContent.substring(0, 250) + "...";
+
+    news.push({ title, desc, link });
+  }
+  return news;
+}
+
+function NewsContainer(props) {
+  const { url, onSave } = props;
+  const [news, setNews] = useState([]);
+
+  useEffect(() => {
+    fetch(url)
+      .then((res) => res.text())
+      .then((res) => parseXml(res))
+      .then((res) => parseNews(res))
+      .then((res) => {
+        setNews(res);
+      })
+      .catch(() => {
+        setNews([]);
+      });
+  }, [url]);
+
+  return <News news={news} onSave={onSave} />;
+}
+
+NewsContainer.defaultProps = {
+  url: "https://dev.to/feed/"
+}
+
+export default NewsContainer;

src/News.js

@@ -1,13 +1,42 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
+  font-family: 'Roboto', sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-auto-rows: minmax(15rem, auto);
+  column-gap: 1rem;
+  row-gap: 1rem;
+  margin: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+}
+
+.item {
+  box-shadow: 0px 0px 5px 0px #00000085;
+  border-radius: 4px;
+  padding: 0.5rem 1rem 1rem 1rem;
+}
+
+.item > h1 {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.item > div {
+  margin: 0.5rem 0;
 }

src/NewsContainer.js

@@ -5,9 +5,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <App />,
   document.getElementById('root')
 );