change document title and control headers via config

Author: kevincobain2000

config/request-docs.php

@@ -1,6 +1,8 @@
 <?php
 
 return [
+    // changes doc title
+    'title' => 'LRD - Laravel Request Docs',
     'enabled' => true,
     // change it to true will make lrd to throw exception if rules in request class need to be changed
     // keep it false
@@ -38,8 +40,9 @@
     'rules_methods' => [
         'rules'
     ],
-    // Can be overridden as // @LRDresponses 200|400|401
-    'default_responses' => [ "200", "400", "401", "403", "404", "405", "422", "429", "500", "503"],
+
+    // changes default headers on first load for Set Global Headers
+    // Later the local storage is used when edits are made
     'default_headers' => [
         'Content-Type' => 'application/json',
     ],

src/Controllers/LaravelRequestDocsController.php

@@ -130,7 +130,7 @@ public function assets(Request $request)
     public function config(Request $request)
     {
         $config = [
-            'default_responses' => config('request-docs.default_responses'),
+            'title' => config('request-docs.title'),
             'default_headers'  => config('request-docs.default_headers'),
         ];
         return response()->json($config);

ui/src/components/ApiAction.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 
 import useLocalStorage from 'react-use-localstorage';
-import { defaultHeaders, makeCurlCommand } from '../libs/strings'
-import type {IAPIInfo, LRDResponse} from '../libs/types'
+import {makeCurlCommand } from '../libs/strings'
+import type {IAPIInfo, LRDResponse, IConfig} from '../libs/types'
 import ApiActionResponse from './elements/ApiActionResponse'
 import ApiActionRequest from './elements/ApiActionRequest'
 import ApiActionTabs from './elements/ApiActionTabs'
@@ -15,15 +15,16 @@ import { objectToFormData } from '../libs/object';
 interface Props {
     lrdDocsItem: IAPIInfo,
     method: string,
-    host: string
+    host: string,
+    config: IConfig,
 }
 export default function ApiAction(props: Props) {
-    const { lrdDocsItem, method, host } = props
+    const { lrdDocsItem, method, host, config } = props
     const [error, setError] = useState<string | null>(null);
 
     const [allParamsRegistry, setAllParamsRegistery] = useLocalStorage('allParamsRegistry', "{}");
 
-    const [requestHeaders, setRequestHeaders] = useLocalStorage('requestHeaders', defaultHeaders);
+    const [requestHeaders, setRequestHeaders] = useLocalStorage('requestHeaders', JSON.stringify(config.default_headers, null, 2));
     const [curlCommand, setCurlCommand] = useState("");
     const [requestUri, setRequestUri] = useState(lrdDocsItem.uri);
     const [timeTaken, setTimeTaken] = useState(0);

ui/src/components/App.tsx

@@ -7,14 +7,18 @@ import ApiAction from './ApiAction';
 import useLocalStorage from 'react-use-localstorage';
 import shortid from 'shortid';
 import Fuse from 'fuse.js';
-import type { IAPIInfo } from '../libs/types'
+import type { IAPIInfo, IConfig } from '../libs/types'
 
 
 export default function App() {
 
     const [lrdDocsJson, setLrdDocsJson] = useState<IAPIInfo[]>([]);
     const [lrdDocsJsonCopy, setLrdDocsJsonCopy] = useState<IAPIInfo[]>([]);
     const [apiURL, setApiURL] = useState<string>('');
+    const [config, setConfig] = useState<IConfig>({
+        title: "",
+        default_headers: ["Content-Type: application/json", "Accept: application/json"]
+    });
     const [host, setHost] = useState<string>('');
     const [sendingRequest, setSendingRequest] = useState(false);
     const [error, setError] = useState<string | null>(null);
@@ -40,23 +44,27 @@ export default function App() {
         // get query param named api
         const urlParams = new URLSearchParams(window.location.search);
         let url = urlParams.get('api');
+        let configAPI = ""
 
         if (!url) {
             // get current url without query params
             const domain = location.protocol + '//' + location.host
             setHost(domain)
             url = domain + "/request-docs/api"
+            configAPI = domain + "/request-docs/config"
         }
 
         if (url) {
             // extract host from url
             const domain = url?.split('/').slice(0, 3).join('/');
             setHost(domain)
+            configAPI = domain + "/request-docs/config"
         }
         setApiURL(url)
 
         const api = getUrl(url, showGet, showPost, showDelete, showPut, showPatch, showHead, sort, groupby)
         generateDocs(api)
+        fetchConfig(configAPI)
     }, [])
 
     const scrollToAnchorOnHistory = () => {
@@ -70,7 +78,19 @@ export default function App() {
             }
         }
     }
-
+    const fetchConfig = (url: string) => {
+        const response = fetch(url);
+        response
+            .then(c => c.json())
+            .then((c) => {
+                setConfig(c)
+                if (c.title && document) {
+                    document.title = c.title
+                }
+            }).catch((error) => {
+                setError(error.message)
+            })
+    }
     const generateDocs = (url: string) => {
         setSendingRequest(true)
         const response = fetch(url);
@@ -155,7 +175,7 @@ export default function App() {
                                         <ApiInfo lrdDocsItem={lrdDocsItem} method={lrdDocsItem.http_method} />
                                     </div>
                                     <div className="col-span-5 ml-5">
-                                        <ApiAction lrdDocsItem={lrdDocsItem} method={lrdDocsItem.http_method} host={host} />
+                                        <ApiAction lrdDocsItem={lrdDocsItem} method={lrdDocsItem.http_method} host={host} config={config} />
                                     </div>
                                 </div>
                             </div>

ui/src/components/TopNav.tsx

@@ -38,7 +38,7 @@ export default function TopNav(props: Props) {
     const [showDelete, setShowDelete] = useLocalStorage('showDelete', 'true');
     const [showPut, setShowPut] = useLocalStorage('showPut', 'true');
     const [showPatch, setShowPatch] = useLocalStorage('showPatch', 'true');
-    const [showHead, setShowHead] = useLocalStorage('showHead', 'true');
+    const [showHead, setShowHead] = useLocalStorage('showHead', 'false');
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const handleChangeGroupby = (e: any) => {

ui/src/libs/strings.tsx

@@ -1,8 +1,4 @@
 
-export const defaultHeaders = `{
-    "Content-Type": "application/json",
-    "Accept": "application/json"
-}`
 export const explode = (str: string, maxLength: number, by: string) => {
     let buff = "";
     const numOfLines = Math.floor(str.length / maxLength);
@@ -13,9 +9,9 @@ export const explode = (str: string, maxLength: number, by: string) => {
 }
 
 export const makeCurlCommand = (host:string, url: string, method: string, queries: string, headers: any): string => {
-    
+
     let curl = `curl`
-    curl += `\n -X ${method}`        
+    curl += `\n -X ${method}`
     try {
         const jsonRequestHeaders = JSON.parse(headers)
         for (const [key, value] of Object.entries(jsonRequestHeaders)) {
@@ -41,4 +37,4 @@ export const makeCurlCommand = (host:string, url: string, method: string, querie
         return post(queries)
     }
     return ""
-}
+}

ui/src/libs/types.tsx

@@ -2,6 +2,11 @@ export interface IAPIRule {
     [key: string]: string[];
 }
 
+export interface IConfig {
+    title: string;
+    default_headers: string[];
+}
+
 export interface IAPIInfo {
     uri: string;
     middlewares: string[];
@@ -15,7 +20,7 @@ export interface IAPIInfo {
     group: string;
     group_index: number;
     responses: string[];
-    
+
 }
 
 export interface LRDResponse {