Merge pull request #4 from esteves-esta/dev

removing console logs, fixing url and adding learning sources on readme

README.md

@@ -13,21 +13,21 @@ Formatting Humans of Seoul RSS feed to be to practice reading in koreand and be
 - [Humans of Seoul / Formatted RSS Feed](#humans-of-seoul--formatted-rss-feed)
   - [Index](#index)
 - [Table of Contents](#table-of-contents)
-  - [Images](#images)
+  - [Printscreen](#printscreen)
   - [📖 Features](#-features)
     - [✅ Done ✨✨](#-done-)
   - [🧰 Tech Stack](#-tech-stack)
   - [🚀 How to run locally](#-how-to-run-locally)
-- [Printscreen of site](#printscreen-of-site)
+- [Learning sources](#learning-sources)
 
 ---
 ---
 
-## Images
+## Printscreen
 <img alt="Papago popover" src="./header-readme-papago-popover.png" width="550" />
----
+
 <img alt="Customization modal" src="./header-readme-customization.png" width="550" />
----
+
 <img alt="Posts list modal" src="./header-readme-list.png" width="550" />
 
 ---
@@ -110,6 +110,13 @@ Formatting Humans of Seoul RSS feed to be to practice reading in koreand and be
       ```
 
 
-# Printscreen of site
+# Learning sources
+
+- [Parsing and serializing XML
+](https://developer.mozilla.org/en-US/docs/Web/XML/Parsing_and_serializing_XML)
+- [How to Fetch and Parse RSS Feeds in JavaScript](https://css-tricks.com/how-to-fetch-and-parse-rss-feeds-in-javascript/)
+- [Create an RSS Reader with React and JavaScript](https://thewebdev.info/2021/02/13/create-an-rss-reader-with-react-and-javascript/)
+
+
 
 

app/src/components/FeedProvider/fetcher.ts

@@ -1,26 +1,18 @@
-const FEED_URL = "https://humansofseoul.com/rss";
-// const FEED_URL =
-//   "https://api.allorigins.win/get?url=https://humansofseoul.com/rss";
+// const FEED_URL = "https://humansofseoul.com/rss";
+const FEED_URL =
+  "https://api.allorigins.win/get?url=https://humansofseoul.com/rss";
 // const FEED_URL = "http://localhost:3001/";
 
-/* 
-https://developer.mozilla.org/en-US/docs/Web/XML/Parsing_and_serializing_XML
-https://css-tricks.com/how-to-fetch-and-parse-rss-feeds-in-javascript/
-https://thewebdev.info/2021/02/13/create-an-rss-reader-with-react-and-javascript/
-https://humansofseoul.com/rss
-
-https://allorigins.win/
-*/
-
 export async function fetcher(teste) {
   console.log(teste);
   const response = await fetch(FEED_URL, {
     method: "GET"
   });
-  // const dataXML = new DOMParser().parseFromString(json.contents, "text/xml");
+  const json = await response.json()
+  const dataXML = new DOMParser().parseFromString(json.contents, "text/xml");
 
-  const json = await response.text()
-  const dataXML = new DOMParser().parseFromString(json, "text/xml");
+  // const json = await response.text()
+  // const dataXML = new DOMParser().parseFromString(json, "text/xml");
 
   const itemsHTML = dataXML.querySelectorAll("item");
   const posts = parseDOM2JSON(itemsHTML);
@@ -30,7 +22,7 @@ export async function fetcher(teste) {
       .replace(/([a-zA-Z]{1})\.([a-zA-Z]{1})\./g, "$1$2")
       .split(". ");
   });
-  // console.log(posts)
+
   return { posts };
 }
 
@@ -81,13 +73,7 @@ function parseDOM2JSON(items) {
         eng: paragraphs[indexEng]?.textContent,
         selectedWords: []
       });
-    } /* else {
-      console.log(indexKor);
-      console.log(paragraphs[indexKor]?.textContent);
-      console.log(indexEng);
-      console.log(paragraphs[indexEng]?.textContent);
-      console.log("ooo");
-    } */
+    }
   });
   return posts;
 }

app/src/components/Post/ParagraphLine.tsx

@@ -2,8 +2,8 @@ import React, { ForwardedRef } from "react";
 import classes from "./Post.module.css";
 import { FeedContext } from "../FeedProvider";
 import FeedState from "../../interfaces/feedState";
-import * as HoverCard from '@radix-ui/react-hover-card';
-import { ExternalLink } from 'lucide-react'
+import * as HoverCard from "@radix-ui/react-hover-card";
+import { ExternalLink } from "lucide-react";
 import { ThemeContext } from "../ThemeProvider";
 interface ParagraphLineProps {
   value: string[];
@@ -57,7 +57,6 @@ const ParagraphLine = React.forwardRef(
               className={`${lineClasseDefault} ${lineClasses}`}
               onClick={() => toogleVisibility(index)}
               onKeyDown={(event) => {
-                // console.log({ event: event.key });
                 if (
                   event.key !== "Tab" &&
                   event.key !== "Shift" &&
@@ -124,8 +123,9 @@ function Word({
     setWordsSelected(newWords);
   };
 
-  const lineClasseDefault = `${classes.word} ${hasWordSelection ? classes.wordPadding : ""
-    }`;
+  const lineClasseDefault = `${classes.word} ${
+    hasWordSelection ? classes.wordPadding : ""
+  }`;
   return (
     <>
       {value.map((word, index) => {
@@ -149,12 +149,24 @@ function Word({
               </span>
             </HoverCard.Trigger>
             <HoverCard.Portal container={container}>
-              {hasWordSelection && <HoverCard.Content className={classes.HoverCardContent} sideOffset={5}>
-                <button onClick={() => window.open(` https://papago.naver.com/?sk=ko&tk=en&st=${word} `, '_blank')}>
-                  <ExternalLink /> search on papago
-                </button>
-                <HoverCard.Arrow className={classes.HoverCardArrow} />
-              </HoverCard.Content>}
+              {hasWordSelection && (
+                <HoverCard.Content
+                  className={classes.HoverCardContent}
+                  sideOffset={5}
+                >
+                  <button
+                    onClick={() =>
+                      window.open(
+                        ` https://papago.naver.com/?sk=ko&tk=en&st=${word} `,
+                        "_blank"
+                      )
+                    }
+                  >
+                    <ExternalLink /> search on papago
+                  </button>
+                  <HoverCard.Arrow className={classes.HoverCardArrow} />
+                </HoverCard.Content>
+              )}
             </HoverCard.Portal>
           </HoverCard.Root>
         );

app/src/components/PostsNavigation/PostsNavigation.tsx

@@ -73,7 +73,6 @@ function PostsNavigation({ setOpen, open }) {
       });
     });
 
-    console.log({ arrWords });
     downloadCsvFile(arrWords.join("\n"), "humans-of-seould-selected-word.csv");
   };
 

app/src/hooks/useMatchMedia.ts

@@ -1,15 +1,13 @@
 import React from "react";
 /* https://betterprogramming.pub/using-window-matchmedia-in-react-8116eada2588 */
-const useMatchMedia = (size = 850) => {
+const useMatchMedia = (size = 640) => {
   const [isNarrowScreen, setIsNarrowScreen] = React.useState(false);
 
   React.useEffect(() => {
     const mediaWatcher = window.matchMedia(`( min-width: ${size}px )`);
     setIsNarrowScreen(mediaWatcher.matches);
 
     function updateIsNarrowScreen(event) {
-      // console.log({ event });
-      // console.log({ mediaWatcher: mediaWatcher.matches });
       event.matches && setIsNarrowScreen(event.matches);
     }
 

app/src/interfaces/feedState.ts

@@ -10,19 +10,4 @@ export default interface FeedState {
   setWordsSelected: (selecteds: WordSelected) => void;
 }
 
-type WordSelected = { [key in number]: { [key in number]: string[] } };
-
-// const t: FeedState = {
-//   posts: [],
-//   error: undefined,
-//   isLoading: false,
-//   postOnDisplay: undefined,
-//   setPostOnDisplay: function (post: Post): void {
-//     throw new Error("Function not implemented.");
-//   },
-//   wordsSelected: {34: {234: ['oi']}},
-//   setWordsSelected: function (selecteds: WordSelected): void {
-//     throw new Error("Function not implemented.");
-//   }
-// };
-// console.log(t)
+type WordSelected = { [key in number]: { [key in number]: string[] } };