Skip to content

Commit c156f9b

Browse files
kevincobain2000kevincobain2000
committed
(v2.5) Clear localstorage button in settings
1 parent 58f4344 commit c156f9b

File tree

1 file changed

+38
-23
lines changed

1 file changed

+38
-23
lines changed

‎ui/src/components/TopNav.tsx

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react';
22

33
import useLocalStorage from 'react-use-localstorage';
4-
import { MagnifyingGlassIcon, Cog6ToothIcon, ArrowUpRightIcon, MoonIcon, SunIcon, XMarkIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid'
4+
import { MagnifyingGlassIcon, Cog6ToothIcon, ArrowUpRightIcon, MoonIcon, SunIcon, XMarkIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid'
55

66
interface Props {
77
handleChangeSettings: (
@@ -62,6 +62,11 @@ export default function TopNav(props: Props) {
6262
handleChangeSettings(showGet, showPost, showDelete, showPut, showPatch, e.target.checked, sort, groupby)
6363
}
6464

65+
const handleClearLocalStorage = () => {
66+
localStorage.clear()
67+
window.location.reload()
68+
}
69+
6570

6671
const toggleDarkMode = () => {
6772
const dataTheme = document.documentElement.getAttribute('data-theme');
@@ -108,22 +113,22 @@ export default function TopNav(props: Props) {
108113
</div>
109114
<div className="flex-none">
110115
<div className="form-control">
111-
<label htmlFor="search" className="relative text-gray-400 focus-within:text-gray-600 block">
112-
<MagnifyingGlassIcon className="pointer-events-none w-4 h-4 absolute top-1/2 transform -translate-y-1/2 left-3" />
113-
<input type="text" placeholder="Filter APIs" className="input pl-10 input-sm input-bordered" onChange={ (e) => handleSearch(e.target.value) } />
114-
</label>
115-
116-
</div>
116+
<label htmlFor="search" className="relative text-gray-400 focus-within:text-gray-600 block">
117+
<MagnifyingGlassIcon className="pointer-events-none w-4 h-4 absolute top-1/2 transform -translate-y-1/2 left-3" />
118+
<input type="text" placeholder="Filter APIs" className="input pl-10 input-sm input-bordered" onChange={(e) => handleSearch(e.target.value)} />
119+
</label>
120+
121+
</div>
117122
<div className="menu menu-horizontal px-6 ">
118123
<label className="swap swap-rotate">
119124
<input type="checkbox" onChange={toggleDarkMode} />
120-
{theme === 'dark' ? <SunIcon className="h-6 w-6"/> : <MoonIcon className="h-6 w-6"/>}
125+
{theme === 'dark' ? <SunIcon className="h-6 w-6" /> : <MoonIcon className="h-6 w-6" />}
121126
</label>
122127
</div>
123128
<div className="ml-1">
124129
<a href="#modal-settings" className="btn btn-ghost btn-sm">
125130
<span className="pr-1">
126-
<Cog6ToothIcon className="h-6 w-6"/>
131+
<Cog6ToothIcon className="h-6 w-6" />
127132
</span>
128133
</a>
129134
<div className="modal" id="modal-settings">
@@ -132,29 +137,29 @@ export default function TopNav(props: Props) {
132137
<h4 className="font-bold mt-10">Sort By</h4>
133138
<div className="form-control">
134139
<label className="label">
135-
140+
136141
<input type="radio" onChange={handleChangeSort} value="default" className="radio" checked={sort == "default"} />
137142
<span className="label-text">Default</span>
138-
143+
139144
<input type="radio" onChange={handleChangeSort} value="route_names" className="radio" checked={sort == "route_names"} />
140-
<span className="label-text">Routes</span>
141-
145+
<span className="label-text">Route Names</span>
146+
142147
<input type="radio" onChange={handleChangeSort} value="method_names" className="radio" checked={sort == "method_names"} />
143148
<span className="label-text">HTTP Methods</span>
144149
</label>
145150
</div>
146151
<h4 className="font-bold mt-10">Group By</h4>
147152
<div className="form-control">
148153
<label className="label">
149-
154+
150155
<input type="radio" onChange={handleChangeGroupby} value="default" className="radio" checked={groupby == "default"} />
151156
<span className="label-text">Default</span>
152-
157+
153158
<input type="radio" onChange={handleChangeGroupby} value="api_uri" className="radio" checked={groupby == "api_uri"} />
154-
<span className="label-text">API URI</span>
155-
159+
<span className="label-text">API Name</span>
160+
156161
<input type="radio" onChange={handleChangeGroupby} value="controller_full_path" className="radio" checked={groupby == "controller_full_path"} />
157-
<span className="label-text">Controller Names</span>
162+
<span className="label-text">Controller Name</span>
158163
</label>
159164
</div>
160165
<h4 className="font-bold mt-10">Display Settings</h4>
@@ -184,9 +189,19 @@ export default function TopNav(props: Props) {
184189
<input type="checkbox" onChange={handleChangeHead} className="toggle toggle-success" checked={showHead == 'true'} />
185190
</label>
186191
</div>
192+
<h4 className="font-bold mt-10">Storage</h4>
193+
<div className="form-control">
194+
<label className="label">
195+
<span className="label-text">
196+
Clear localstorage
197+
<p><small>Delete localstorage data, request body and queries</small></p>
198+
</span>
199+
<button className="btn btn-sm btn-error" onClick={handleClearLocalStorage}>Clear</button>
200+
</label>
201+
</div>
187202
<div className="modal-action">
188203
<a href="#" className="btn btn-sm">
189-
<XMarkIcon className="h-6 w-6"/> Close
204+
<XMarkIcon className="h-6 w-6" /> Close
190205
</a>
191206
</div>
192207
</div>
@@ -195,16 +210,16 @@ export default function TopNav(props: Props) {
195210
<div className="ml-1 ">
196211
<a className="btn btn-ghost btn-sm" href='/request-docs/api?openapi=true' target="_blank">
197212
<span className="pr-1">
198-
<ArrowUpRightIcon className="h-6 w-6"/>
199-
</span>
213+
<ArrowUpRightIcon className="h-6 w-6" />
214+
</span>
200215
OpenAPI 3.0
201216
</a>
202217
</div>
203218
<div className="ml-1 ">
204219
<a className="btn btn-ghost btn-sm" href='https://github.com/rakutentech/laravel-request-docs/issues/new' target="_blank" rel="noreferrer">
205220
<span className="pr-1">
206-
<ChatBubbleLeftIcon className="h-6 w-6"/>
207-
</span>
221+
<ChatBubbleLeftIcon className="h-6 w-6" />
222+
</span>
208223
Feature request
209224
</a>
210225
</div>

0 commit comments

Comments
 (0)