Merge pull request #128 from rakutentech/feature/v2-bugs

(v2.1) add auto releaser

Author: kevincobain2000

.github/workflows/releaser.yml

@@ -3,7 +3,7 @@ on:
     branches:
       - master
 
-name: "CI Node"
+name: "CI Release Dist"
 
 jobs:
   test:
@@ -39,6 +39,9 @@ jobs:
 
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@v4
+        with:
+          commit-message: (action) Update dist
+          title: '(action) update dist astro'
 
 
 

README.md

@@ -181,4 +181,4 @@ Fixing lints
 - v2.0 UI Renewal to React static
     - `@QAParam` is now `@LRDparam`
     - No special changes for users, upgrade to v2.x as usual
-
+- v2.1 UI - adds search bar and few aligment fixes on table

src/Controllers/LaravelRequestDocsController.php

@@ -55,12 +55,13 @@ public function api(Request $request)
             );
         }
 
-
         return response()->json(
             $docs,
             Response::HTTP_OK,
             [
-                'Content-type'=> 'application/json; charset=utf-8'
+                'Content-type'=> 'application/json; charset=utf-8',
+                'Cache-Control' => 'public, max-age=60',
+                'Expires' => gmdate('D, d M Y H:i:s \G\M\T', time() + 60),
             ],
             JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE
         );
@@ -95,8 +96,8 @@ public function assets(Request $request)
             }
 
             // set cache control headers
-            $headers['Cache-Control'] = 'public, max-age=31536000';
-            $headers['Expires'] = gmdate('D, d M Y H:i:s \G\M\T', time() + 31536000);
+            $headers['Cache-Control'] = 'public, max-age=1800';
+            $headers['Expires'] = gmdate('D, d M Y H:i:s \G\M\T', time() + 1800);
             return response()->file($path, $headers);
         }
         return response()->json(['error' => 'file not found'], 404);

ui/package-lock.json

@@ -17,6 +17,7 @@
     "@fontsource/roboto": "^4.5.8",
     "@heroicons/react": "^2.0.15",
     "astro": "^2.0.6",
+    "fuse.js": "^6.6.2",
     "react-ace": "^10.1.0",
     "react-anchor-link-smooth-scroll": "^1.0.12",
     "react-markdown": "^8.0.5",

ui/package.json

@@ -5,6 +5,7 @@ import ApiInfo from './ApiInfo';
 import ApiAction from './ApiAction';
 import useLocalStorage from 'react-use-localstorage';
 import shortid from 'shortid';
+import Fuse from 'fuse.js';
 
 interface IAPIRule {
     [key: string]: string[];
@@ -24,6 +25,7 @@ interface IAPIInfo {
 export default function App() {
 
     const [lrdDocsJson, setLrdDocsJson] = useState<IAPIInfo[]>([]);
+    const [lrdDocsJsonCopy, setLrdDocsJsonCopy] = useState<IAPIInfo[]>([]);
     const [allParamsRegistry, setAllParamsRegistery] = useLocalStorage('allParamsRegistry', "{}");
     const [apiURL, setApiURL] = useState<string>('');
     const [host, setHost] = useState<string>('');
@@ -39,7 +41,10 @@ export default function App() {
     const [showPatch] = useLocalStorage('showPatch', 'true');
     const [showHead] = useLocalStorage('showHead', 'true');
 
-
+    const searchOptions = {
+        keys: ['uri', 'docBlock'],
+        threshold: 0.3
+    };    
 
     useEffect(() => {
         // get query param named api
@@ -72,13 +77,31 @@ export default function App() {
             .then((lrdDocsJson) => {
                 setError(null)
                 setLrdDocsJson(lrdDocsJson)
+                setLrdDocsJsonCopy(lrdDocsJson)
                 setSendingRequest(false)
             }).catch((error) => {
                 setError(error.message)
                 setSendingRequest(false)
             })
     }
 
+    const handleSearch = (search: string) => {
+        search = search.trim()
+        if (!search) {
+            setLrdDocsJson(lrdDocsJsonCopy)
+            return
+        }
+        const fuse = new Fuse(lrdDocsJson, searchOptions);
+
+        const filteredData = fuse.search(search);
+        const filteredLrdJson: IAPIInfo[] = []
+        for (let i = 0; i < filteredData.length; i++) {
+            filteredLrdJson.push(filteredData[i].item)
+        }
+
+        setLrdDocsJson(filteredLrdJson)
+    }
+
     const handleChangeSettings = (showGet: string,
         showPost: string,
         showDelete: string,
@@ -92,7 +115,7 @@ export default function App() {
     }
     return (
         <>
-            <TopNav handleChangeSettings={handleChangeSettings} />
+            <TopNav handleChangeSettings={handleChangeSettings} handleSearch={handleSearch} />
             {sendingRequest && (
                 <progress className="progress progress-success w-full"></progress>
             )}

ui/src/components/App.tsx

@@ -29,7 +29,7 @@ export default function Sidebar(props: Props) {
         <>
             <aside>
                 <h2 className="title pl-5 pt-2 mb-5">
-                    API List
+                    API List  <span className='text-slate-500 capitalize'>Total {lrdDocsJson.length}</span>
                 </h2>
                 <ul>
                     {lrdDocsJson.map((lrdDocsItem) => (

ui/src/components/Sidebar.tsx

@@ -13,10 +13,11 @@ interface Props {
         showHead: string,
         sort: string,
         groupby: string) => void
+    handleSearch: (search: string) => void
 }
 export default function TopNav(props: Props) {
 
-    const { handleChangeSettings } = props
+    const { handleChangeSettings, handleSearch } = props
     const [theme, setTheme] = useLocalStorage('theme', '');
     const [sort, setSort] = useLocalStorage('sort', 'default');
     const [groupby, setGroupby] = useLocalStorage('groupby', 'default');
@@ -97,6 +98,9 @@ export default function TopNav(props: Props) {
                     </a>
                 </div>
                 <div className="flex-none">
+                    <div className="form-control">
+                        <input type="text" placeholder="Search" className="input input-sm input-bordered" onChange={ (e) => handleSearch(e.target.value) } />
+                    </div>                    
                     <div className="menu menu-horizontal px-6 ">
                         <label className="swap swap-rotate">
                             <input type="checkbox" onChange={toggleDarkMode} />