3 files changed, 33 insertions, 28 deletions

diff --git a/src/components/RequestList/RequestList.tsx b/src/components/RequestList/RequestList.tsx
index 6980738..a925c3b 100644
--- a/src/components/RequestList/RequestList.tsx
+++ b/src/components/RequestList/RequestList.tsx
@@ -38,23 +38,31 @@ export default function RequestList({
 
   const [methods, setMethods] = useState<EnabledMethods>({
     GET: true,
+    HEAD: true,
     POST: true,
     PUT: true,
-    PATCH: true,
     DELETE: true,
+    CONNECT: true,
+    OPTIONS: true,
+    TRACE: true,
+    PATCH: true,
   });
 
   const toggleMethods = useCallback((method: Method | null) => {
     const enabled = method == null;
-    const methods = {
+    const methods: EnabledMethods = {
       GET: enabled,
+      HEAD: enabled,
       POST: enabled,
       PUT: enabled,
-      PATCH: enabled,
       DELETE: enabled,
+      CONNECT: enabled,
+      OPTIONS: enabled,
+      TRACE: enabled,
+      PATCH: enabled,
     };
 
-    if (!enabled) {
+    if (method !== null) {
       methods[method] = true;
     }
 
@@ -72,7 +80,7 @@ export default function RequestList({
   const methodLabel = useMemo(() => {
     if (enabledMethods.length == 1) {
       return enabledMethods[0];
-    } else if (enabledMethods.length === 5) {
+    } else if (enabledMethods.length === Object.keys(methods).length) {
       return "ANY";
     } else {
       return "CUSTOM";
@@ -88,12 +96,9 @@ export default function RequestList({
       );
     } catch {}
 
-    return (
-      requests.map((request, index) => [index, request]).reverse() as [
-        number,
-        RequestResponse
-      ][]
-    )
+    return requests
+      .map<[number, RequestResponse]>((request, index) => [index, request])
+      .reverse()
       .filter(
         ([index, request]) =>
           enabledMethods.length > 0 === null ||
@@ -119,21 +124,11 @@ export default function RequestList({
                 ANY
               </Dropdown.Item>
               <Dropdown.Divider />
-              <Dropdown.Item onClick={() => toggleMethods("GET")}>
-                GET
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => toggleMethods("POST")}>
-                POST
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => toggleMethods("PUT")}>
-                PUT
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => toggleMethods("PATCH")}>
-                PATCH
-              </Dropdown.Item>
-              <Dropdown.Item onClick={() => toggleMethods("DELETE")}>
-                DELETE
-              </Dropdown.Item>
+              {Object.entries(methods).map(([method, enabled]) => (
+                <Dropdown.Item onClick={() => toggleMethods(method as Method)}>
+                  {method}
+                </Dropdown.Item>
+              ))}
             </DropdownButton>
             <Form.Control
               type="text"
diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx
index 108232f..526e0a6 100644
--- a/src/hooks/useRequests.tsx
+++ b/src/hooks/useRequests.tsx
@@ -2,7 +2,16 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { getHost } from "../utils";
 
 export type Headers = [string, string][];
-export type Method = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+export type Method =
+  | "GET"
+  | "HEAD"
+  | "POST"
+  | "PUT"
+  | "DELETE"
+  | "CONNECT"
+  | "OPTIONS"
+  | "TRACE"
+  | "PATCH";
 
 export interface RequestPayload {
   id: string;
diff --git a/tsconfig.json b/tsconfig.json
index a8bbe91..9956ef7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,8 @@
       "~*": ["./*"]
     },
     "strict": true,
-    "target": "ES2015"
+    "target": "ES2015",
+    "lib": ["es2015", "dom" ,"esnext"],
   },
   "include": ["src/**/*"]
 }