Merge pull request #38 from min050410/develop

add: global filter
min050410 · Jan 8, 2022 · 7f1dc48 · 7f1dc48
2 parents 5529aeb + 6d9541b
commit 7f1dc48
Show file tree

Hide file tree

Showing 8 changed files with 257 additions and 134 deletions.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -12,11 +12,20 @@ const Header: React.FC<MyProps> = (props: MyProps) => {
     const [searchText, setSearchText] = useState("");
     const [valueText, setValueText] = useState("");
     const [searchFilename, setSearchFilename] = useState("");
-    const [focus, setFocus] = useState(0);
+    const [searchFocus, setsearchFocus] = useState(0);
     const [scrollPosition, setScrollPosition] = useState(0);
+    const [filterFocus, setfilterFocus] = useState(0);
     const updateScroll = () => {
         setScrollPosition(window.scrollY || document.documentElement.scrollTop)
     }
+    //filter_tag
+    const [seletedTag, setSeletedTag] = useState('')
+    const [notSeletedTags, setNotSeletedTags] = useState(['js', 'python', 'c', 'react'])
+
+    let notSeletedTags_map = notSeletedTags.map((not) => (
+        <Link to={`/?f=${not}`}><span onClick={() => tagClick(not)}>{not}</span></Link>
+    ))
+
     // 검색
     const findTitle = (text: string) => {
         for (let i = 0; i < recent.length; i++) {
@@ -26,24 +35,48 @@ const Header: React.FC<MyProps> = (props: MyProps) => {
                 setValueText(recent[i]['title'])
                 setSearchFilename(recent[i]['filename'])
             }
-            if(valueText == ""){
+            if (valueText == "") {
                 setValueText('검색 결과가 없습니다')
             }
         }
     }
+
     const onChange = (e: any) => {
         setSearchText(e.target.value);
         findTitle(e.target.value);
     };
+
     const onFocus = () => {
-        setFocus(1);
+        setsearchFocus(1);
     }
+
     const onBlur = () => {
-        setFocus(0);
+        setsearchFocus(0);
+    }
+
+    //filter
+    const filterClick = (isFocus: number) => {
+        setfilterFocus(isFocus => isFocus ? 0 : 1);
+    }
+
+    const tagClick = (value: string) => {
+        let Taglist = ['js', 'python', 'c', 'react']
+        var index = Taglist.indexOf(value);
+        if (index !== -1) {
+            Taglist.splice(index, 1);
+        }
+        setNotSeletedTags([...Taglist])
+        setSeletedTag(value);
+    }
+
+    const backup = () => {
+        setSeletedTag('')
+        setNotSeletedTags(['js', 'python', 'c', 'react'])
     }
     useEffect(() => {
         window.addEventListener('scroll', updateScroll)
     }, []);
+
     return (
         <header className={props.path == '/postitem' ? "notfixed" : scrollPosition < 50 ? "original" : "change"}>
             <div className="head index">
@@ -61,22 +94,34 @@ const Header: React.FC<MyProps> = (props: MyProps) => {
                         onChange={onChange}
                         value={searchText}>
                     </input>
-                    {focus ? 
-                        searchText == '' ? 
-                            null : 
-                            <div className="searchBox" onBlur={onBlur}> <div className ="search_post">
-                                {props.path == '/postitem' ? 
+                    {searchFocus ?
+                        searchText == '' ?
+                            null :
+                            <div className="searchBox" onBlur={onBlur}> <div className="search_post">
+                                {props.path == '/postitem' ?
                                     (valueText == "검색 결과가 없습니다" ? <span>{valueText}</span> :
-                                    <Link to={`../postitem/?name=${searchFilename}`} state={{ key: Math.random() }}>{valueText}</Link>) :
+                                        <Link to={`../postitem/?name=${searchFilename}`} state={{ key: Math.random() }}>{valueText}</Link>) :
                                     (valueText == "검색 결과가 없습니다" ? <span>{valueText}</span> :
-                                    <Link to={`postitem/?name=${searchFilename}`}><span>{valueText}</span></Link>)} </div></div> 
+                                        <Link to={`postitem/?name=${searchFilename}`} ><span>{valueText}</span></Link>)} </div></div>
                         : null
                     }
-
                 </div>
                 <div className="filter wrap">
-                    <div className="filter img"></div>
-                    <div className="filter text">필터설정</div>
+                    <div className="filter wrap" onClick={() => filterClick(filterFocus)}>
+                        {filterFocus ? <div className="filter img click"></div> : <div className="filter img"></div>}
+                        <div className="filter text">필터설정</div>
+                    </div>
+                    {filterFocus ?
+                        <div className="filterBox">
+                            <div className="left">
+                                <div>적용됨</div>
+                                {seletedTag ? <Link to={`/`}><span onClick={() => backup()}>{seletedTag}</span></Link>
+                                : null}
+                            </div>
+                            <div className="right">
+                                {notSeletedTags_map}
+                            </div>
+                        </div> : null}
                 </div>
             </div>
             <div className="head content">

diff --git a/src/components/popular.tsx b/src/components/popular.tsx
@@ -33,7 +33,7 @@ const Popular_components = () => {
           src="https://user-images.githubusercontent.com/45661217/146631169-54b842c2-d174-488b-9192-02780e57b2a5.png"
         ></img> : null}
       </div>
-      <Link to={`postitem/?name=${post.filename}`}>
+      <Link to={`postitem/?name=${post.filename}`} >
         <h3>{post.title}</h3>
       </Link>
     </div>

diff --git a/src/components/recent.tsx b/src/components/recent.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useState, useEffect } from "react"
 import { Link } from 'gatsby';
 
 //components
@@ -7,46 +8,71 @@ import recent from '../md/recent'
 //styles
 import '../styles/recent.sass'
 
-const Recent_components = () => {
-
-  const recent_list = recent.map((post) =>
-  (
-    <div className="recent_content">
-      <Link to={`postitem/?name=${post.filename}`}>
-        <div className="post">
-          <div className="left">
-            {/* <Link to="postitem/" state={{ myProp: post.filename }}> */}
-            <div className="imgbox">
-              <img
-                src={require(`../assets/images/${post.img}.png`).default}
-                alt={post.img}
-              />
+type MyProps = {
+  location: any
+}
+
+const Recent_components: React.FC<MyProps> = ({location})  => {
+  if (location.search === undefined) {
+    return null;
+  }
+  else if (location.search == null) {
+    return null;
+  }
+  else {
+    const [filter_key, setFilter_key] = useState("");
+    const so = () => {
+      //useEffect용 비동기를 위한 함수
+    }
+    so();
+    const params = new URLSearchParams(location.search);
+    useEffect(() => {
+      setFilter_key(params.get("f"))
+    }, [so])
+
+    //filter함수를 통한 필터링
+    const recent_list = recent.filter(word => word.filter == filter_key || filter_key == null).map((post) =>
+    (
+      <div className="recent_content">
+        <Link to={`postitem/?name=${post.filename}`}>
+          <div className="post">
+            <div className="left">
+              {/* <Link to="postitem/" state={{ myProp: post.filename }}> */}
+              <div className="imgbox">
+                <img
+                  src={require(`../assets/images/${post.img}.png`).default}
+                  alt={post.img}
+                />
+              </div>
+              <div id="text_group">
+                <h3>{post.title}</h3>
+                <div>{post.date}</div>
+              </div>
+              {/* star */}
+              {/* <img className="copylink" src="https://user-images.githubusercontent.com/45661217/146631169-54b842c2-d174-488b-9192-02780e57b2a5.png"></img> */}
             </div>
-            <div id="text_group">
-              <h3>{post.title}</h3>
-              <div>{post.date}</div>
+            <div className="tag">
+              {(post.tag) ? <span>{post.tag}</span> : null}
+              {(post.tag2) ? <span>{post.tag2}</span> : null}
+              {(post.tag3) ? <span>{post.tag3}</span> : null}
             </div>
-            {/* star */}
-            {/* <img className="copylink" src="https://user-images.githubusercontent.com/45661217/146631169-54b842c2-d174-488b-9192-02780e57b2a5.png"></img> */}
-          </div>
-          <div className="tag">
-            {(post.tag) ? <span>{post.tag}</span> : null}
-            {(post.tag2) ? <span>{post.tag2}</span> : null}
-            {(post.tag3) ? <span>{post.tag3}</span> : null}
           </div>
-        </div>
-      </Link>
-    </div>
-  ));
+        </Link>
+      </div>
+    ));
 
-  return (
-    <section>
+    return (
+      <section>
+        <div className="header_wrap">
           <div className="header">최근 블로그</div>
-          <div className="horizontal_container">
-            {recent_list}
-          </div>
-          </section>
-  )
+          {filter_key ? <span className="filter">✨{filter_key} 필터 적용됨</span> : null}
+        </div>
+        <div className="horizontal_container">
+          {recent_list}
+        </div>
+      </section>
+    )
+  }
 }
 
 export default Recent_components;