From e7144692c59f0700e1d9697269923c0e415b1a76 Mon Sep 17 00:00:00 2001 From: nathanlao Date: Fri, 3 May 2024 22:59:49 -0700 Subject: [PATCH] Added a post and nit changes --- src/components/FadeInWrapper/index.jsx | 1 - src/pages/Post/index.jsx | 2 +- ... I Fetch Raw HTML Content From GitHub.html | 4 +- ...setInterval() For Repeating A Content.html | 3 -- ...rval() For Repeating A String Literal.html | 47 +++++++++++++++++++ src/posts/posts.js | 2 +- 6 files changed, 51 insertions(+), 8 deletions(-) delete mode 100644 src/posts/How Do I Use setInterval() For Repeating A Content.html create mode 100644 src/posts/How Do I Use setInterval() For Repeating A String Literal.html diff --git a/src/components/FadeInWrapper/index.jsx b/src/components/FadeInWrapper/index.jsx index e927d66..471aee7 100644 --- a/src/components/FadeInWrapper/index.jsx +++ b/src/components/FadeInWrapper/index.jsx @@ -1,4 +1,3 @@ -// FadeInWrapper.js import { useEffect, useState } from 'react'; import './FadeInWrapper.css'; diff --git a/src/pages/Post/index.jsx b/src/pages/Post/index.jsx index 03a63b6..1f21f09 100644 --- a/src/pages/Post/index.jsx +++ b/src/pages/Post/index.jsx @@ -10,7 +10,7 @@ const Post = () => { const fetchHTMLContent = async title => { const encodedTitle = encodeURIComponent(title); - const url = `https://raw.githubusercontent.com/nathanlao/but-how-do-I/master/src/posts/${encodedTitle}.html`; + const url = `https://raw.githubusercontent.com/nathanlao/but-how-do-I/main/src/posts/${encodedTitle}.html`; try { const response = await request(url, { diff --git a/src/posts/How Do I Fetch Raw HTML Content From GitHub.html b/src/posts/How Do I Fetch Raw HTML Content From GitHub.html index c294ecc..80bf270 100644 --- a/src/posts/How Do I Fetch Raw HTML Content From GitHub.html +++ b/src/posts/How Do I Fetch Raw HTML Content From GitHub.html @@ -23,7 +23,7 @@ string 

-const [rawHTMLContent, setRawHTMLContent] = useState('');
+const [rawHTMLContent, setRawHTMLContent] = useState('');

@@ -42,7 +42,7 @@ method: 'get', responseType: 'text' }); - return response; + return response; } catch (error) { console.error('Error fetching the HTML content:', error); } diff --git a/src/posts/How Do I Use setInterval() For Repeating A Content.html b/src/posts/How Do I Use setInterval() For Repeating A Content.html deleted file mode 100644 index f2e006b..0000000 --- a/src/posts/How Do I Use setInterval() For Repeating A Content.html +++ /dev/null @@ -1,3 +0,0 @@ - -

Coming soon..

- \ No newline at end of file diff --git a/src/posts/How Do I Use setInterval() For Repeating A String Literal.html b/src/posts/How Do I Use setInterval() For Repeating A String Literal.html new file mode 100644 index 0000000..4aec066 --- /dev/null +++ b/src/posts/How Do I Use setInterval() For Repeating A String Literal.html @@ -0,0 +1,47 @@ + +

Timing events can be useful when you want to execute the code at specified time intervals.

+

setInterval() is one of them that allows us to repeatly run a function.

+

I want to use setInterval() to repeatly render a string content in React:

+
+const [dots, setDots] = useState('');
+
+useEffect(() => {
+  let dotCount = 0;
+  const interval = setInterval(() => {
+  dotCount = (dotCount + 1) % 4; // Reset the count in every 3 strings
+  let dots = '';
+  for (let i = 0; i < dotCount; i++) {
+      dots += '.';
+  }
+  setDots(dots);
+  }, 600);
+  return () => clearInterval(interval);
+}, []);
+
+
+

You may wanna create a Typewriter effect by modifying the logic a bit, but it could be tricky here with the React state updates here, the second character is skipped because index is incremented twice before the set state inner function has run once. Consider using a ref to store your string value (updating a reference will not trigger a component re-rendering):

+
+const [text, setText] = useState('');
+const fullText = Hello world!;
+const index = useRef(0);
+const displayTextRef = useRef('');
+
+useEffect(() => {
+  const interval = setInterval(() => {
+    if (index.current < fullText.length) {
+      displayTextRef.current += fullText.charAt(index.current);
+      setText(() => displayTextRef.current);
+      index.current += 1;
+    } else {
+      clearInterval(interval);
+    }
+  }, 500);
+  return () => {
+    setText('');
+    clearInterval(interval);
+  };
+}, []);
+
+
+

This is it!

+ \ No newline at end of file diff --git a/src/posts/posts.js b/src/posts/posts.js index d5be482..1237a77 100644 --- a/src/posts/posts.js +++ b/src/posts/posts.js @@ -10,7 +10,7 @@ export const postData = [ id: 1 }, { - title: 'How Do I Use setInterval() For Repeating A Content', + title: 'How Do I Use setInterval() For Repeating A String Literal', tags: ['javascript', 'react'], id: 2 },