feat: persist request url changes upon saving them

This commit is contained in:
Anoop M D 2022-03-16 01:00:35 +05:30
parent 7370ec63d1
commit e471d94fbc
7 changed files with 59 additions and 17 deletions

View File

@ -84,7 +84,7 @@ const QueryUrl = ({value, onChange, handleRun, collections}) => {
</div> </div>
<div className="flex items-center flex-grow input-container h-full"> <div className="flex items-center flex-grow input-container h-full">
<input <input
className="px-3 w-full" className="px-3 w-full mousetrap"
type="text" defaultValue={value} type="text" defaultValue={value}
onChange={(event) => onChange(event.target.value)} onChange={(event) => onChange(event.target.value)}
/> />

View File

@ -63,15 +63,6 @@ const RequestTabPanel = () => {
}; };
}, [dragging, leftPaneWidth]); }, [dragging, leftPaneWidth]);
const onUrlChange = (value) => {
storeDispatch({
type: actions.REQUEST_URL_CHANGED,
url: value,
requestTab: focusedTab,
collectionUid: collection ? collection.uid : null
});
};
const onGraphqlQueryChange = (value) => { const onGraphqlQueryChange = (value) => {
storeDispatch({ storeDispatch({
type: actions.REQUEST_GQL_QUERY_CHANGED, type: actions.REQUEST_GQL_QUERY_CHANGED,
@ -105,6 +96,15 @@ const RequestTabPanel = () => {
let flattenedItems = flattenItems(collection.items); let flattenedItems = flattenItems(collection.items);
let item = findItem(flattenedItems, activeRequestTabUid); let item = findItem(flattenedItems, activeRequestTabUid);
const onUrlChange = (value) => {
storeDispatch({
type: actions.REQUEST_URL_CHANGED,
url: value,
itemUid: item.uid,
collectionUid: collection ? collection.uid : null
});
};
const runQuery = async () => { const runQuery = async () => {
storeDispatch({ storeDispatch({
type: actions.SEND_REQUEST, type: actions.SEND_REQUEST,

View File

@ -22,11 +22,11 @@ function MyApp({ Component, pageProps }) {
return ( return (
<SafeHydrate> <SafeHydrate>
<AuthProvider> <AuthProvider>
<HotkeysProvider> <StoreProvider>
<StoreProvider> <HotkeysProvider>
<Component {...pageProps} /> <Component {...pageProps} />
</StoreProvider> </HotkeysProvider>
</HotkeysProvider> </StoreProvider>
</AuthProvider> </AuthProvider>
</SafeHydrate> </SafeHydrate>
); );

View File

@ -1,13 +1,21 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import Mousetrap from 'mousetrap'; import Mousetrap from 'mousetrap';
import { useStore } from 'providers/Store';
import actions from 'providers/Store/actions';
export const HotkeysContext = React.createContext(); export const HotkeysContext = React.createContext();
export const HotkeysProvider = props => { export const HotkeysProvider = props => {
const [store, storeDispatch] = useStore();
useEffect(() => { useEffect(() => {
Mousetrap.bind(['command+s', 'ctrl+s'], (e) => { Mousetrap.bind(['command+s', 'ctrl+s'], (e) => {
console.log("Save hotkey"); console.log("Save hotkey");
storeDispatch({
type: actions.HOTKEY_SAVE
});
return false; // this stops the event bubbling return false; // this stops the event bubbling
}); });

View File

@ -18,6 +18,7 @@ const IDB_CONNECTION_READY = "IDB_CONNECTION_READY";
const IDB_COLLECTIONS_SYNC_STARTED = "IDB_COLLECTIONS_SYNC_STARTED"; const IDB_COLLECTIONS_SYNC_STARTED = "IDB_COLLECTIONS_SYNC_STARTED";
const IDB_COLLECTIONS_SYNC_ERROR = "IDB_COLLECTIONS_SYNC_ERROR"; const IDB_COLLECTIONS_SYNC_ERROR = "IDB_COLLECTIONS_SYNC_ERROR";
const TOGGLE_LEFT_MENUBAR = "TOGGLE_LEFT_MENUBAR"; const TOGGLE_LEFT_MENUBAR = "TOGGLE_LEFT_MENUBAR";
const HOTKEY_SAVE = "HOTKEY_SAVE";
export default { export default {
SIDEBAR_COLLECTION_CLICK, SIDEBAR_COLLECTION_CLICK,
@ -39,5 +40,6 @@ export default {
IDB_CONNECTION_READY, IDB_CONNECTION_READY,
IDB_COLLECTIONS_SYNC_STARTED, IDB_COLLECTIONS_SYNC_STARTED,
IDB_COLLECTIONS_SYNC_ERROR, IDB_COLLECTIONS_SYNC_ERROR,
TOGGLE_LEFT_MENUBAR TOGGLE_LEFT_MENUBAR,
HOTKEY_SAVE
}; };

View File

@ -1,6 +1,7 @@
import produce from 'immer'; import produce from 'immer';
import {nanoid} from 'nanoid'; import {nanoid} from 'nanoid';
import union from 'lodash/union'; import union from 'lodash/union';
import find from 'lodash/find';
import filter from 'lodash/filter'; import filter from 'lodash/filter';
import last from 'lodash/last'; import last from 'lodash/last';
import actions from './actions'; import actions from './actions';
@ -154,14 +155,14 @@ const reducer = (state, action) => {
if(collection) { if(collection) {
let flattenedItems = flattenItems(collection.items); let flattenedItems = flattenItems(collection.items);
let item = findItem(flattenedItems, action.requestTab.id); let item = findItem(flattenedItems, action.itemUid);
if(item) { if(item) {
if(!item.draft) { if(!item.draft) {
item.draft = cloneItem(item); item.draft = cloneItem(item);
} }
item.draft.request.url = action.url; item.draft.request.url = action.url;
updateRequestTabAsChanged(draft.requestTabs, item.id); updateRequestTabAsChanged(draft.requestTabs, item.uid);
} }
} }
}); });
@ -340,6 +341,35 @@ const reducer = (state, action) => {
}); });
} }
case actions.HOTKEY_SAVE: {
return produce(state, (draft) => {
if(!draft.activeRequestTabUid) {
return;
}
// find request tab
const activeRequestTab = find(draft.requestTabs, (t) => t.uid === draft.activeRequestTabUid);
// resolve item, save and delete draft
if(activeRequestTab) {
const collection = findCollectionByUid(draft.collections, activeRequestTab.collectionUid);
if(collection) {
let flattenedItems = flattenItems(collection.items);
let item = findItem(flattenedItems, activeRequestTab.uid);
if(item && item.draft) {
item.name = item.draft.name;
item.request = item.draft.request;
item.draft = null;
activeRequestTab.hasChanges = false;
draft.collectionsToSyncToIdb.push(collection.uid);
}
}
}
});
}
default: { default: {
return state; return state;
} }

View File

@ -4,6 +4,8 @@ import filter from 'lodash/filter';
import actions from './actions'; import actions from './actions';
import { saveCollectionToIdb } from './idb'; import { saveCollectionToIdb } from './idb';
// This hook listens to changes in 'collectionsToSyncToIdb' and syncs them to idb
// The app uses this when collections are created as well as when collections get updated
const useSyncCollectionsToIdb = (collectionsToSyncToIdb, collections, idbConnection, dispatch) => { const useSyncCollectionsToIdb = (collectionsToSyncToIdb, collections, idbConnection, dispatch) => {
const [collectionsSyncingToIdb, setCollectionsSyncingToIdb] = useState(false); const [collectionsSyncingToIdb, setCollectionsSyncingToIdb] = useState(false);