feat: moved up the state logic for graphql query change

This commit is contained in:
Anoop M D 2022-01-18 21:55:22 +05:30
parent 2f222aebde
commit 3133f5e253
4 changed files with 28 additions and 4 deletions

View File

@ -18,7 +18,7 @@ const RequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange})
width={leftPaneWidth} width={leftPaneWidth}
value={value} value={value}
onRunQuery={onRunQuery} onRunQuery={onRunQuery}
onChange={onQueryChange} onEdit={onQueryChange}
/> />
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>

View File

@ -21,7 +21,6 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
let { let {
schema schema
} = useGraphqlSchema('https://api.spacex.land/graphql'); } = useGraphqlSchema('https://api.spacex.land/graphql');
let [query, setQuery] = useState('');
const [leftPaneWidth, setLeftPaneWidth] = useState(500); const [leftPaneWidth, setLeftPaneWidth] = useState(500);
const [rightPaneWidth, setRightPaneWidth] = useState(window.innerWidth - 700 - asideWidth); const [rightPaneWidth, setRightPaneWidth] = useState(window.innerWidth - 700 - asideWidth);
const [dragging, setDragging] = useState(false); const [dragging, setDragging] = useState(false);
@ -59,7 +58,15 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
}); });
}; };
const onQueryChange = (value) => setQuery(value); const onGraphqlQueryChange = (value) => {
console.log(value);
dispatch({
type: actions.REQUEST_GQL_QUERY_CHANGED,
query: value,
requestTab: focusedTab,
collectionId: collection ? collection.id : null
});
};
if(!activeRequestTabId) { if(!activeRequestTabId) {
return ( return (
@ -118,7 +125,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
schema={schema} schema={schema}
leftPaneWidth={leftPaneWidth} leftPaneWidth={leftPaneWidth}
value={item.request.body.graphql.query} value={item.request.body.graphql.query}
onQueryChange={onQueryChange} onQueryChange={onGraphqlQueryChange}
/> />
</div> </div>
</section> </section>

View File

@ -3,6 +3,7 @@ const SIDEBAR_COLLECTION_ITEM_CLICK = "SIDEBAR_COLLECTION_ITEM_CLICK";
const REQUEST_TAB_CLICK = "REQUEST_TAB_CLICK"; const REQUEST_TAB_CLICK = "REQUEST_TAB_CLICK";
const REQUEST_TAB_CLOSE = "REQUEST_TAB_CLOSE"; const REQUEST_TAB_CLOSE = "REQUEST_TAB_CLOSE";
const REQUEST_URL_CHANGED = "REQUEST_URL_CHANGED"; const REQUEST_URL_CHANGED = "REQUEST_URL_CHANGED";
const REQUEST_GQL_QUERY_CHANGED = "REQUEST_GQL_QUERY_CHANGED";
const RESPONSE_RECEIVED = "RESPONSE_RECEIVED"; const RESPONSE_RECEIVED = "RESPONSE_RECEIVED";
const SEND_REQUEST = "SEND_REQUEST"; const SEND_REQUEST = "SEND_REQUEST";
const SENDING_REQUEST = "SENDING_REQUEST"; const SENDING_REQUEST = "SENDING_REQUEST";
@ -16,6 +17,7 @@ export default {
REQUEST_TAB_CLICK, REQUEST_TAB_CLICK,
REQUEST_TAB_CLOSE, REQUEST_TAB_CLOSE,
REQUEST_URL_CHANGED, REQUEST_URL_CHANGED,
REQUEST_GQL_QUERY_CHANGED,
RESPONSE_RECEIVED, RESPONSE_RECEIVED,
SEND_REQUEST, SEND_REQUEST,
SENDING_REQUEST, SENDING_REQUEST,

View File

@ -73,6 +73,21 @@ const reducer = (state, action) => {
}); });
} }
case actions.REQUEST_GQL_QUERY_CHANGED: {
return produce(state, (draft) => {
const collection = find(draft.collections, (c) => c.id === action.collectionId);
if(collection) {
let flattenedItems = flattenItems(collection.items);
let item = findItem(flattenedItems, action.requestTab.id);
if(item) {
item.request.body.graphql.query = action.query;
}
}
});
}
case actions.ADD_NEW_HTTP_REQUEST: { case actions.ADD_NEW_HTTP_REQUEST: {
return produce(state, (draft) => { return produce(state, (draft) => {
const uid = nanoid(); const uid = nanoid();