code-snippets / js / components / Import / FromOtherPlugins / ImportForm.tsx

ImportForm.tsx in Code Snippets 3.10.0, at js/components/Import/FromOtherPlugins/ImportForm.tsx

143 lines 4.1 KB

Raw Download Zip

1	import React, { useState } from 'react'
2	import { __ } from '@wordpress/i18n'
3	import {
4	ImporterSelector,
5	ImportOptions,
6	SimpleSnippetTable,
7	StatusDisplay
8	} from './components'
9	import { ImportCard } from '../shared'
10	import {
11	useImporterSelection,
12	useSnippetImport,
13	useImportSnippetSelection
14	} from './hooks'
15
16	export const ImportForm: React.FC = () => {
17	const [autoAddTags, setAutoAddTags] = useState<boolean>(false)
18
19	const importerSelection = useImporterSelection()
20	const snippetImport = useSnippetImport()
21	const snippetSelection = useImportSnippetSelection(snippetImport.snippets)
22
23	const handleImporterChange = async (newImporter: string) => {
24	importerSelection.handleImporterChange(newImporter)
25	snippetSelection.clearSelection()
26	snippetImport.resetAll()
27
28	if (newImporter) {
29	await snippetImport.loadSnippets(newImporter)
30	}
31	}
32
33	const handleImport = async () => {
34	const selectedIds = Array.from(snippetSelection.selectedSnippets)
35	const success = await snippetImport.importSnippets(
36	importerSelection.selectedImporter,
37	selectedIds,
38	autoAddTags,
39	importerSelection.tagValue
40	)
41
42	if (success) {
43	snippetSelection.clearSelection()
44	}
45	}
46
47	if (importerSelection.isLoading) {
48	return (
49	<div className="wrap">
50	<p>{__('Loading importers...', 'code-snippets')}</p>
51	</div>
52	)
53	}
54
55	if (importerSelection.error) {
56	return (
57	<div className="wrap">
58	<div className="notice notice-error">
59	<p>{__('Error loading importers:', 'code-snippets')} {importerSelection.error}</p>
60	</div>
61	</div>
62	)
63	}
64
65	return (
66	<div className="wrap">
67	<div className="import-form-container" style={{ maxWidth: '800px' }}>
68	<p>{__('If you are using another Snippets plugin, you can import all existing snippets to your Code Snippets library.', 'code-snippets')}</p>
69
70	<ImporterSelector
71	importers={importerSelection.importers}
72	selectedImporter={importerSelection.selectedImporter}
73	onImporterChange={handleImporterChange}
74	isLoading={snippetImport.isLoadingSnippets}
75	/>
76
77	{snippetImport.snippetsError && (
78	<StatusDisplay
79	type="error"
80	title={__('Error loading snippets', 'code-snippets')}
81	message={snippetImport.snippetsError}
82	/>
83	)}
84
85	{snippetImport.importError && (
86	<StatusDisplay
87	type="error"
88	title={__('Error importing snippets', 'code-snippets')}
89	message={snippetImport.importError}
90	/>
91	)}
92
93	{snippetImport.importSuccess.length > 0 && (
94	<StatusDisplay
95	type="success"
96	title={`${snippetImport.importSuccess.length} ${__('Snippets imported!', 'code-snippets')}`}
97	message={__('We successfully imported all snippets to your library. Go to ', 'code-snippets')}
98	showSnippetsLink
99	/>
100	)}
101
102	{importerSelection.selectedImporter &&
103	!snippetImport.isLoadingSnippets &&
104	!snippetImport.snippetsError &&
105	snippetImport.snippets.length === 0 &&
106	snippetImport.importSuccess.length === 0 && (
107	<ImportCard>
108	<div style={{ textAlign: 'center', padding: '40px 20px', color: '#666' }}>
109	<div style={{ fontSize: '48px', marginBottom: '16px' }}>📭</div>
110	<h3 style={{ margin: '0 0 8px 0', fontSize: '18px', color: '#333' }}>
111	{__('No snippets found', 'code-snippets')}
112	</h3>
113	<p style={{ margin: '0', fontSize: '14px' }}>
114	{__('No snippets were found for the selected plugin. Make sure the plugin is installed and has snippets configured.', 'code-snippets')}
115	</p>
116	</div>
117	</ImportCard>
118	)}
119
120	{snippetImport.snippets.length > 0 && (
121	<>
122	<ImportOptions
123	autoAddTags={autoAddTags}
124	tagValue={importerSelection.tagValue}
125	onAutoAddTagsChange={setAutoAddTags}
126	onTagValueChange={importerSelection.setTagValue}
127	/>
128
129	<SimpleSnippetTable
130	snippets={snippetImport.snippets}
131	selectedSnippets={snippetSelection.selectedSnippets}
132	onSnippetToggle={snippetSelection.handleSnippetToggle}
133	onSelectAll={snippetSelection.handleSelectAll}
134	onImport={handleImport}
135	isImporting={snippetImport.isImporting}
136	/>
137	</>
138	)}
139	</div>
140	</div>
141	)
142	}
143