[
    {
        "created": "2022-11-21T23:25:28.008Z",
        "name": "sjs-request-page-index",
        "tags": [
            "sjs-request-page-index"
        ],
        "content": "import { Component } from \"solid-js\";\n\nconst RequestIndex: Component = () => {\n  return (\n    <div class=\"flex flex-col md:flex-row gap-4 justify-center items-center bg-gray-200 p-4 border border-gray-300 min-h-full rounded-lg\">\n      <div class=\"text-2xl flex gap-4 items-center\">\n        <ion-icon class=\"text-4xl\" name=\"arrow-back-circle-outline\"></ion-icon>\n        <span>Select a request from the left panel</span>\n      </div>\n    </div>\n  );\n};\n\nexport default RequestIndex;",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-12-01T02:11:33.780Z",
        "name": "sjs-request-data-function",
        "tags": [
            "sjs-request-data-function"
        ],
        "content": "/**\n * Data function\n * @param id - Request ID\n */\n export const fetchSelectedRequest = ({ params }: RouteDataFuncArgs) => {\n  const [request] = createResource(\n    () => params.id,\n    () =>\nnew Promise((resolve) => {\n  setTimeout(() => {\n    resolve(restRequests()?.find((r) => r.id === params.id));\n         }, 500);\n})\n\n  );\n  return request;\n};\n",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-25T07:00:43.590Z",
        "name": "sjs-request-by-id-page",
        "tags": [
            "sjs-request-by-id-page"
        ],
        "content": "import { Component, Match, Switch } from \"solid-js\";\n\nconst RequestById: Component = () => {\n  return (\n    <div class=\"flex flex-col md:flex-row  gap-4 min-h-full bg-gray-200 p-4 border border-gray-300 rounded-lg\">\n      <div class=\"flex-1\">\n        <Switch>\n          <Match when={true}>\n            <div>Loading...</div>\n          </Match>\n          <Match when={false}>{/* rest client form */}</Match>\n        </Switch>\n      </div>\n      <div class=\"flex-1\">{/* response */}</div>\n    </div>\n  );\n};\n\nexport default RequestById;",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T21:19:15.091Z",
        "name": "sjs-rcf-effect",
        "tags": [
            "sjs-rcf-effect"
        ],
        "content": "createEffect((requestId) => {\r\n      if (!request || !request()) {\r\n        return null;\r\n      }\r\n      if (request()?.id === requestId) {\r\n        return requestId;\r\n      }\r\n      const req = request()?.request;\r\n      controlGroup().name.setValue(request()?.name || \"\");\r\n      requestControlGroup().body.setValue(req?.body || \"\");\r\n      requestControlGroup().url.setValue(req?.url || \"\");\r\n      requestControlGroup().method.setValue(req?.method || \"\");\r\n      return request()?.id;\r\n    });",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-12-01T02:34:40.281Z",
        "name": "sjs-request-update-on-form",
        "tags": [
            "sjs-request-update-on-form"
        ],
        "content": "const onFormValUpdate = (val: IRestRequest) => {\r\n    setRestRequests((requestsPrev) => {\r\n      return requestsPrev!.map((reqItem) => {\r\n        if (reqItem.id === request().id) {\r\n          return {\r\n            ...reqItem,\r\n            request: {\r\n              ...reqItem.request,\r\n              ...val.request,\r\n            },\r\n            name: val.name || reqItem.name\r\n          };\r\n        }\r\n        return reqItem;\r\n      });\r\n    });\r\n  };",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T22:40:23.737Z",
        "name": "sjs-rcf-body-update-func",
        "tags": [
            "sjs-rcf-body-update-func"
        ],
        "content": "const bodyValueUpdated = (value: any) => {\r\n      try {\r\n        if (!value) {\r\n          requestControlGroup().body.setErrors(null);\r\n          return;\r\n        }\r\n        const pretty = JSON.stringify(JSON.parse(value), undefined, 4);\r\n        requestControlGroup().body.setValue(pretty);\r\n        requestControlGroup().body.setErrors(null);\r\n      } catch (e) {\r\n        requestControlGroup().body.setErrors({\r\n          invalidJson: true,\r\n        });\r\n      } finally {\r\n        props.formUpdate?.(props.control.value);\r\n      }\r\n    };",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T22:50:42.048Z",
        "name": "sjs-rco",
        "tags": [
            "sjs-rco"
        ],
        "content": "import { Component, ComponentProps, For, Show } from \"solid-js\";\r\nimport { IRestResponse } from \"../interfaces/rest.interfaces\";\r\n\r\ninterface RestClientOutputProps extends ComponentProps<any> {\r\n  response: IRestResponse | null;\r\n}\r\n\r\nconst RestClientOutput: Component<RestClientOutputProps> = (\r\n  props: RestClientOutputProps\r\n) => {\r\n  return (\r\n    <div>\r\n      <div\r\n        class=\"status px-4 py-2 rounded-lg mb-4\"\r\n        classList={{\r\n          \"bg-green-200 text-green-900 border border-green-900\":\r\n            props.response?.status === 200,\r\n          \"bg-red-200 text-red-900 border border-red-900\":\r\n            props.response?.status !== 200,\r\n        }}\r\n      >\r\n        Code: {props.response && props.response.status}\r\n      </div>\r\n      <Show when={props.response?.headers}>\r\n        <div class=\"rounded-lg mb-4 bg-white px-4 py-2 divide-y\">\r\n          <For each={Object.keys(props.response?.headers)}>\r\n            {(key: string) => {\r\n              const value = props.response?.headers[key];\r\n              return (\r\n                <div class=\"header flex py-1 justify-between\">\r\n                  <span>{key}:</span> <span>{value}</span>\r\n                </div>\r\n              );\r\n            }}\r\n          </For>\r\n        </div>\r\n      </Show>\r\n      <Show when={props.response?.data}>\r\n        <json-viewer class=\"p-4\" data={props.response?.data}></json-viewer>\r\n      </Show>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default RestClientOutput;\r\n",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T23:37:58.385Z",
        "name": "sjs-response-resource",
        "tags": [
            "sjs-response-resource"
        ],
        "content": "const [apiCallParams, setApiCallParams] = createSignal<AxiosRequestConfig>();\r\n  const [response, {mutate}] = createResource(apiCallParams, () => {\r\n    if (!apiCallParams()) {\r\n      return null;\r\n    }\r\n    return axios.request(apiCallParams() as any).catch((err) => {\r\n      console.error(err);\r\n      if (!err.response.data) {\r\n        err.response.data = {\r\n          message: 'Can not process request'\r\n        }\r\n      }\r\n      return err.response;\r\n    });\r\n  });",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T23:41:50.919Z",
        "name": "sjs-request-on-form-submit",
        "tags": [
            "sjs-request-on-form-submit"
        ],
        "content": "const onFormSubmit = async (val: IRestRequest) => {\r\n    const { body, url, method } = val.request;\r\n    setApiCallParams({ body, url, method });\r\n  };",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T23:56:37.983Z",
        "name": "sjs-json-viewer-css",
        "tags": [
            "sjs-json-viewer-css"
        ],
        "content": "json-viewer {\n  @apply rounded-lg;\n\n  /* Background, font and indentation */\n  --background-color: #2a2f3a;\n  --color: #f8f8f2;\n  --font-family: monaco, Consolas, 'Lucida Console', monospace;\n  --font-size: 1rem;\n  --indent-size: 1.5em;\n  --indentguide-size: 1px;\n  --indentguide-style: solid;\n  --indentguide-color: #333;\n  --indentguide-color-active: #666;\n  --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);\n  --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);\n\n  /* Types colors */\n  --string-color: #a3eea0;\n  --number-color: #d19a66;\n  --boolean-color: #4ba7ef;\n  --null-color: #df9cf3;\n  --property-color: #6fb3d2;\n\n  /* Collapsed node preview */\n  --preview-color: rgba(222, 175, 143, 0.9);\n\n  /* Search highlight color */\n  --highlight-color: #6fb3d2;\n}",
        "contentType": "css"
    },
    {
        "created": "2022-12-01T18:43:01.927Z",
        "name": "sjs-no-requests-button",
        "tags": [
            "sjs-no-requests-button"
        ],
        "content": "<button\r\n                onClick={() => setShowModal(true)}\r\n                class=\"cursor-pointer hover:bg-purple-600 hover:text-white flex justify-between gap p-2 bg-white border rounded-md items-center w-full\"\r\n              >\r\n                <p class=\"text-center w-full\">No Requests. Click to add</p>\r\n              </button>",
        "contentType": "typescriptreact"
    }
  ]