update

huxulm · Feb 19, 2024 · dee1f8f · dee1f8f
1 parent 8b3d284
commit dee1f8f
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 15 deletions.
diff --git a/src/Search.tsx b/src/Search.tsx
@@ -2,7 +2,7 @@ import { useSolutions } from "./hooks/useSolutions";
 import { useQuestionTags } from "./hooks/useQuestionTags";
 import { useTags } from "./hooks/useTags";
 import { useState } from "react";
-import { Button, Col, Container, Form, InputGroup, Row, Spinner } from "react-bootstrap";
+import { Button, ButtonGroup, Col, Container, Form, InputGroup, Row, Spinner } from "react-bootstrap";
 import "./app.scss";
 
 const LC_HOST = `https://leetcode.cn`;
@@ -21,30 +21,54 @@ export default function Search() {
         setLang(() => lang === "en" ? "zh" : "en")
     }
 
+    const [selectedTags, setSelectedTags] = useState<Record<string, Boolean>>({});
+    const onSelectTags = (key: string) => {
+        setSelectedTags({ ...selectedTags, [key]: !!!selectedTags[key] })
+    }
+
+    const onResetTags = () => {
+        setSelectedTags({})
+    }
+
     const renderTags = (tags: any[]) => {
         if (!tags) return
         return <div className="d-flex flex-wrap" style={{ columnGap: ".5rem" }}>
-            {tags.map(t => {
-                return <span className="rounded p-1 fw-medium tag">{t}</span>
+            {tags[1].map((t: any) => {
+                return <span className={`rounded p-1 fw-medium tag`}>{t}</span>
             })}
         </div>
     }
+
+    const filteredSolutions = Object.keys(solutions).filter((id) =>{
+        const tags = qtags[id]? (qtags[id][0] || []) : [];
+        if (Object.keys(selectedTags).filter(id => !!selectedTags[id]).length == 0 && tags.length == 0) { return true; }
+        if (Object.keys(selectedTags).filter(id => !!selectedTags[id]).length == 0 || tags.filter((id: string) => true === selectedTags[id]).length > 0) { return true; }
+        return false;
+        // return true;
+    })
     return (
         <Container className="search" data-bs-theme="dark">
             <Row as="div" className="justify-content-center p-3">
-                <Col md={5} sm={12} lg={5} className="position-relative">
-                    <input className="form-control fw-light" placeholder="题目 或 题解标题（模糊匹配）" onChange={onSearchTextChange}></input>
-                    <span className="qtot">总数：{Object.keys(solutions).length}</span>
-                </Col>
+                <Row md={12} sm={12} lg={12} className="justify-content-center">
+                    <Col md={5} sm={12} lg={5} className="position-relative">
+                        <input className="form-control fw-light" placeholder="题目 或 题解标题（模糊匹配）" onChange={onSearchTextChange}></input>
+                        <span className="qtot">总数：{Object.keys(solutions).length}</span>
+                    </Col>
+                    <Col md={2} sm={12} lg={2}>
+                        <ButtonGroup className="w-100">
+                            <Button variant="outline-secondary" size="sm" onClick={onChangeLang}>{`${lang === 'en' ? "中文" : "英文"}标签`}</Button>
+                            <Button variant="outline-secondary" onClick={onResetTags}>重置</Button>
+                        </ButtonGroup>
+                    </Col>
+                </Row>
             </Row>
             <Row className="justify-content-center">
                 <Col as="ul" md={8} sm={12} lg={10}>
                     <div className="d-flex flex-wrap" style={{ columnGap: "1rem" }}>
-                        <Button variant="outline-secondary rounded" size="sm" onClick={onChangeLang}>{`${lang === 'en' ? "中文" : "英文"}标签`}</Button>
                         {tags.map(tag => {
                             return (
-                                <span className="p-1">
-                                    <span className="rounded p-1 bg-warning-subtle fw-medium tag">{lang === 'en' ? tag[1] : tag[2]}</span>
+                                <span onClick={() => onSelectTags(tag[1])} className="p-1">
+                                    <span className={`rounded p-1 fw-medium tag ${!!selectedTags[`${tag[1]}`] ? "active" : ""}`}>{lang === 'en' ? tag[1] : tag[2]}</span>
                                 </span>
                             );
                         })}
@@ -64,26 +88,35 @@ export default function Search() {
                             </tr>
                         </thead>
                         <tbody className="table-body">
-                            {Object.keys(solutions).sort(function (ia: any, ib: any) {
+                            {filteredSolutions.sort(function (ia: any, ib: any) {
                                 let a = solutions[ia]
                                 let b = solutions[ib]
                                 return a[2] < b[2] ? 1 : (a[2] == b[2] ? 0 : -1);
-                            }).map((id, i) => {
+                            })/* .filter((id) =>{
+                                const tags = qtags[id]? (qtags[id][0] || []) : [];
+                                if (tags.length == 0 || Object.keys(selectedTags).filter(id => !!selectedTags[id]).length == 0) { return true; }
+                                for (let i = 0; i < tags.length; i++) {
+                                    if(!selectedTags[tags[i]]) {
+                                        return false;
+                                    }
+                                }
+                                return true;
+                            }) */.map((id, i) => {
                                 const sol = solutions[id];
                                 let link = "";
                                 let link1 = "";
                                 if (sol) {
                                     link = LC_HOST + "/problems/" + sol[5] + "/solution/" + sol[1]
                                     link1 = LC_HOST + "/problems/" + sol[5]
                                 }
+                                let _tags = qtags["" + sol[6]];
                                 return (
-
                                     <tr className="table-row bg-color">
-                                        <td>{i+1}</td>
+                                        <td>{i + 1}</td>
                                         <td className="fw-bold text-left">
                                             <a href={link1}>{`${sol[3]}. ${sol[4]}`}</a>
                                         </td>
-                                        <td>{renderTags(qtags[sol[6]] ? qtags["" + sol[6]][lang === "en" ? 0 : 1] : [])}</td>
+                                        <td>{_tags && renderTags([sol[6], _tags[lang === "en" ? 0 : 1] || []])}</td>
                                         <td>
                                             <a href={link}>
                                                 <span className="text-primary">{sol[0]}</span>

diff --git a/src/app.scss b/src/app.scss
@@ -204,8 +204,14 @@ td,
   .tag {
     cursor: pointer;
     background: $gray-100;
+    user-select: none;
     &:hover {
+      background: var(--bs-btn-active-bg)!important;
+    }
+    &.active {
       background: $orange-200!important;
+      transition: all ease-in-out 100ms;
+      font-weight: 600;
     }
   }