|
|
|
@ -11,21 +11,6 @@ interface HomeTabFileProps { |
|
|
|
|
plugin: any |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const loadingInitialState = { |
|
|
|
|
tooltip: '', |
|
|
|
|
showModalDialog: false, |
|
|
|
|
importSource: '', |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const loadingReducer = (state = loadingInitialState, action) => { |
|
|
|
|
return { |
|
|
|
|
...state, |
|
|
|
|
tooltip: action.tooltip, |
|
|
|
|
showModalDialog: false, |
|
|
|
|
importSource: '', |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function HomeTabFile({ plugin }: HomeTabFileProps) { |
|
|
|
|
const [state, setState] = useState<{ |
|
|
|
|
searchInput: string |
|
|
|
@ -48,10 +33,6 @@ function HomeTabFile({ plugin }: HomeTabFileProps) { |
|
|
|
|
recentWorkspaces: [], |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const [, dispatch] = useReducer(loadingReducer, loadingInitialState) |
|
|
|
|
|
|
|
|
|
const inputValue = useRef(null) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
plugin.on('filePanel', 'setWorkspace', async () => { |
|
|
|
|
let recents = JSON.parse(localStorage.getItem('recentWorkspaces')) |
|
|
|
@ -91,41 +72,6 @@ function HomeTabFile({ plugin }: HomeTabFileProps) { |
|
|
|
|
} |
|
|
|
|
}, [plugin]) |
|
|
|
|
|
|
|
|
|
const processLoading = (type: string) => { |
|
|
|
|
_paq.push(['trackEvent', 'hometab', 'filesSection', 'importFrom' + type]) |
|
|
|
|
const contentImport = plugin.contentImport |
|
|
|
|
const workspace = plugin.fileManager.getProvider('workspace') |
|
|
|
|
const startsWith = state.importSource.substring(0, 4) |
|
|
|
|
|
|
|
|
|
if ((type === 'ipfs' || type === 'IPFS') && startsWith !== 'ipfs' && startsWith !== 'IPFS') { |
|
|
|
|
setState((prevState) => { |
|
|
|
|
return { ...prevState, importSource: startsWith + state.importSource } |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
contentImport.import( |
|
|
|
|
state.modalInfo.prefix + state.importSource, |
|
|
|
|
(loadingMsg) => dispatch({ tooltip: loadingMsg }), |
|
|
|
|
async (error, content, cleanUrl, type, url) => { |
|
|
|
|
if (error) { |
|
|
|
|
toast(error.message || error) |
|
|
|
|
} else { |
|
|
|
|
try { |
|
|
|
|
if (await workspace.exists(type + '/' + cleanUrl)) toast('File already exists in workspace') |
|
|
|
|
else { |
|
|
|
|
workspace.addExternal(type + '/' + cleanUrl, content, url) |
|
|
|
|
plugin.call('menuicons', 'select', 'filePanel') |
|
|
|
|
} |
|
|
|
|
} catch (e) { |
|
|
|
|
toast(e.message) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
setState((prevState) => { |
|
|
|
|
return { ...prevState, showModalDialog: false, importSource: '' } |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const toast = (message: string) => { |
|
|
|
|
setState((prevState) => { |
|
|
|
|
return { ...prevState, toasterMsg: message } |
|
|
|
@ -180,74 +126,16 @@ function HomeTabFile({ plugin }: HomeTabFileProps) { |
|
|
|
|
plugin.verticalIcons.select('filePanel') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const showFullMessage = (title: string, loadItem: string, examples: Array<string>, prefix = '') => { |
|
|
|
|
setState((prevState) => { |
|
|
|
|
return { |
|
|
|
|
...prevState, |
|
|
|
|
showModalDialog: true, |
|
|
|
|
modalInfo: { |
|
|
|
|
title: title, |
|
|
|
|
loadItem: loadItem, |
|
|
|
|
examples: examples, |
|
|
|
|
prefix, |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const hideFullMessage = () => { |
|
|
|
|
//eslint-disable-line
|
|
|
|
|
setState((prevState) => { |
|
|
|
|
return { ...prevState, showModalDialog: false, importSource: '' } |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handleSwichToRecentWorkspace = async (e, workspaceName) => { |
|
|
|
|
e.preventDefault() |
|
|
|
|
_paq.push(['trackEvent', 'hometab', 'filesSection', 'loadRecentWorkspace']) |
|
|
|
|
await plugin.call('filePanel', 'switchToWorkspace', { name: workspaceName, isLocalhost: false }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const examples = state.modalInfo.examples.map((urlEl, key) => ( |
|
|
|
|
<div key={key} className="p-1 user-select-auto"> |
|
|
|
|
<a>{urlEl}</a> |
|
|
|
|
</div> |
|
|
|
|
)) |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<ModalDialog id="homeTab" title={'Import from ' + state.modalInfo.title} |
|
|
|
|
okLabel="Import" hide={!state.showModalDialog} handleHide={() => hideFullMessage()} |
|
|
|
|
okFn={() => processLoading(state.modalInfo.title)}> |
|
|
|
|
<div className="p-2 user-select-auto"> |
|
|
|
|
{state.modalInfo.loadItem !== '' && <span>Enter the {state.modalInfo.loadItem} you would like to load.</span>} |
|
|
|
|
{state.modalInfo.examples.length !== 0 && ( |
|
|
|
|
<> |
|
|
|
|
<div>e.g</div> |
|
|
|
|
<div>{examples}</div> |
|
|
|
|
</> |
|
|
|
|
)} |
|
|
|
|
<div className="d-flex flex-row"> |
|
|
|
|
{state.modalInfo.prefix && <span className="text-nowrap align-self-center mr-2">ipfs://</span>}
|
|
|
|
|
<input |
|
|
|
|
ref={inputValue} |
|
|
|
|
type="text" |
|
|
|
|
name="prompt_text" |
|
|
|
|
id="inputPrompt_text" |
|
|
|
|
className="w-100 mt-1 form-control" |
|
|
|
|
data-id="homeTabModalDialogCustomPromptText" |
|
|
|
|
value={state.importSource} |
|
|
|
|
onInput={(e) => { |
|
|
|
|
setState((prevState) => { |
|
|
|
|
return { ...prevState, importSource: inputValue.current.value } |
|
|
|
|
}) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</ModalDialog> |
|
|
|
|
<Toaster message={state.toasterMsg} /> |
|
|
|
|
<div className="justify-content-start mt-1 p-2 d-flex flex-column" id="hTFileSection"> |
|
|
|
|
<div className="justify-content-start p-2 d-flex flex-column" id="hTFileSection"> |
|
|
|
|
<div className="mb-1"> |
|
|
|
|
{(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && ( |
|
|
|
|
<div className="d-flex flex-column mb-5 remixui_recentworkspace"> |
|
|
|
@ -272,7 +160,7 @@ function HomeTabFile({ plugin }: HomeTabFileProps) { |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
<div className="d-flex flex-column flex-nowrap"> |
|
|
|
|
<div className="d-flex flex-column flex-nowrap mt-4"> |
|
|
|
|
<label style={{ fontSize: '1.2rem' }}> |
|
|
|
|
<FormattedMessage id="home.files" /> |
|
|
|
|
</label> |
|
|
|
|