diff --git a/app/src/actions/Publish.ts b/app/src/actions/Publish.ts index 47c6c99..91130b4 100644 --- a/app/src/actions/Publish.ts +++ b/app/src/actions/Publish.ts @@ -34,7 +34,7 @@ export const setEditorMode = (editorMode: string): Action => { export const publish = (connectionId: string) => (dispatch: Dispatch, getState: () => AppState) => { const state = getState() - const topic = state.publish.topic + const topic = state.publish.manualTopic ?? state.tree.get('selectedTopic')?.path() if (!topic) { return diff --git a/app/src/components/Sidebar/Publish/TopicInput.tsx b/app/src/components/Sidebar/Publish/TopicInput.tsx index d71cc13..2520306 100644 --- a/app/src/components/Sidebar/Publish/TopicInput.tsx +++ b/app/src/components/Sidebar/Publish/TopicInput.tsx @@ -1,18 +1,21 @@ import ClearAdornment from '../../helper/ClearAdornment' -import React, { useCallback, useMemo } from 'react' +import React, { useCallback, useMemo, useRef } from 'react' import { FormControl, Input, InputLabel } from '@material-ui/core' import { publishActions } from '../../../actions' import { bindActionCreators } from 'redux' import { AppState } from '../../../reducers' import { connect } from 'react-redux' -function TopicInput(props: { actions: typeof publishActions; topic?: string }) { +function TopicInput(props: { actions: typeof publishActions; manualTopic?: string; selectedTopic?: string }) { + const inputElement = useRef(null) + const updateTopic = useCallback((e: React.ChangeEvent) => { props.actions.setTopic(e.target.value) }, []) const clearTopic = useCallback(() => { props.actions.setTopic('') + inputElement.current?.focus() }, []) const onTopicBlur = useCallback((e: React.FocusEvent) => { @@ -21,7 +24,7 @@ function TopicInput(props: { actions: typeof publishActions; topic?: string }) { } }, []) - const topicStr = props.topic || '' + const topicStr = props.manualTopic || '' return useMemo( () => ( @@ -29,6 +32,7 @@ function TopicInput(props: { actions: typeof publishActions; topic?: string }) { Topic } @@ -36,7 +40,7 @@ function TopicInput(props: { actions: typeof publishActions; topic?: string }) { onBlur={onTopicBlur} onChange={updateTopic} multiline={false} - placeholder="example/topic" + placeholder={props.selectedTopic ?? 'example/topic'} /> @@ -53,7 +57,8 @@ const mapDispatchToProps = (dispatch: any) => { const mapStateToProps = (state: AppState) => { return { - topic: state.publish.topic, + manualTopic: state.publish.manualTopic, + selectedTopic: state.tree.get('selectedTopic')?.path(), } } diff --git a/app/src/reducers/Publish.ts b/app/src/reducers/Publish.ts index 87047ae..6c75773 100644 --- a/app/src/reducers/Publish.ts +++ b/app/src/reducers/Publish.ts @@ -1,7 +1,7 @@ import { createReducer } from './lib' export interface PublishState { - topic?: string + manualTopic?: string payload?: string retain: boolean editorMode: string @@ -59,7 +59,7 @@ export const publishReducer = createReducer(initialState, { function setTopic(state: PublishState, action: SetTopic) { return { ...state, - topic: action.topic, + manualTopic: action.topic, } }