feat: import config

messages/renderer/en.json

@@ -212,15 +212,15 @@
   "screens.PrivacyPolicy.whyCollectedDescription": {
     "message": "Crash data and app errors together with the device and app info provide Awana Digital with the information we need to fix errors and bugs in the app. The performance data helps us improve the responsiveness of the app and identify errors. User counts, including total users, users per country, and users per project, help justify ongoing investment in the development of CoMapeo."
   },
-  "screens.ProjectCreationScreen.addName": {
-    "message": "Create Project"
-  },
   "screens.ProjectCreationScreen.advancedProjectSettings": {
     "message": "Advanced Project Settings"
   },
   "screens.ProjectCreationScreen.characterCount": {
     "message": "{count}/{maxLength}"
   },
+  "screens.ProjectCreationScreen.createProject": {
+    "message": "Create Project"
+  },
   "screens.ProjectCreationScreen.enterNameLabel": {
     "message": "Name your project"
   },

src/renderer/src/hooks/mutations/projects.ts

@@ -9,8 +9,14 @@ export function useCreateProject() {
 
 	return useMutation({
 		mutationKey: [CREATE_PROJECT_KEY],
-		mutationFn: (name?: string) => {
-			return api.createProject({ name })
+		mutationFn: (opts?: Parameters<typeof api.createProject>[0]) => {
+			if (opts) {
+				return api.createProject(opts)
+			} else {
+				// Have to avoid passing `undefined` explicitly
+				// See https://github.com/digidem/comapeo-mobile/issues/392
+				return api.createProject()
+			}
 		},
 		onSuccess: () => {
 			queryClient.invalidateQueries({

src/renderer/src/hooks/useConfigFileImporter.test.tsx

@@ -0,0 +1,70 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSelectProjectConfigFile } from './mutations/file-system'
+
+describe('useSelectProjectConfigFile', () => {
+	beforeEach(() => {
+		window.runtime = {
+			init: vi.fn(),
+			getLocale: vi.fn().mockResolvedValue('en'),
+			updateLocale: vi.fn(),
+			selectFile: vi.fn(),
+		}
+	})
+
+	it('returns file path from window.runtime.selectFile', async () => {
+		vi.spyOn(window.runtime, 'selectFile').mockResolvedValue(
+			'/some/path.comapeocat',
+		)
+
+		const queryClient = new QueryClient()
+
+		const wrapper = ({ children }: { children: React.ReactNode }) => (
+			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+		)
+
+		const { result } = renderHook(() => useSelectProjectConfigFile(), {
+			wrapper,
+		})
+
+		let selectedPath: string | undefined
+
+		await act(async () => {
+			await result.current.mutateAsync(undefined, {
+				onSuccess: (val) => {
+					selectedPath = val
+				},
+			})
+		})
+
+		expect(selectedPath).toBe('/some/path.comapeocat')
+	})
+
+	it('returns undefined if user cancels', async () => {
+		vi.spyOn(window.runtime, 'selectFile').mockResolvedValue(undefined)
+
+		const queryClient = new QueryClient()
+
+		const wrapper = ({ children }: { children: React.ReactNode }) => (
+			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+		)
+
+		const { result } = renderHook(() => useSelectProjectConfigFile(), {
+			wrapper,
+		})
+
+		let selectedPath: string | undefined
+
+		await act(async () => {
+			await result.current.mutateAsync(undefined, {
+				onSuccess: (val) => {
+					selectedPath = val
+				},
+			})
+		})
+
+		expect(selectedPath).toBeUndefined()
+	})
+})

src/renderer/src/routes/Onboarding/CreateProjectScreen.tsx

@@ -21,6 +21,7 @@ import {
 import { Text } from '../../components/Text'
 import { PROJECT_NAME_MAX_LENGTH_GRAPHEMES } from '../../constants'
 import { useActiveProjectIdStoreActions } from '../../contexts/ActiveProjectIdProvider'
+import { useSelectProjectConfigFile } from '../../hooks/mutations/file-system'
 import { useCreateProject } from '../../hooks/mutations/projects'
 import ProjectImage from '../../images/add_square.png'
 
@@ -37,8 +38,8 @@ export const m = defineMessages({
 		id: 'screens.ProjectCreationScreen.placeholder',
 		defaultMessage: 'Project Name',
 	},
-	addName: {
-		id: 'screens.ProjectCreationScreen.addName',
+	createProject: {
+		id: 'screens.ProjectCreationScreen.createProject',
 		defaultMessage: 'Create Project',
 	},
 	characterCount: {
@@ -107,52 +108,64 @@ const HorizontalLine = styled('div')({
 function CreateProjectScreenComponent() {
 	const navigate = useNavigate()
 	const { formatMessage } = useIntl()
+
 	const [projectName, setProjectName] = useState('')
-	const [error, setError] = useState(false)
+	const [hasNameError, setHasNameError] = useState(false)
 	const [errorMessage, setErrorMessage] = useState('')
-	const setProjectNameMutation = useCreateProject()
+	const [configPath, setConfigPath] = useState<string | null>(null)
+
+	const createProjectMutation = useCreateProject()
+	const selectConfigFile = useSelectProjectConfigFile()
 	const { setActiveProjectId } = useActiveProjectIdStoreActions()
 
-	const [configFileName, setConfigFileName] = useState<string | null>(null)
+	function handleImportConfig() {
+		selectConfigFile.mutate(undefined, {
+			onSuccess: (filePath) => {
+				if (filePath) {
+					setConfigPath(filePath)
+				}
+			},
+			onError: (err) => {
+				console.error('Error selecting file', err)
+			},
+		})
+	}
 
 	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const value = event.target.value
+		setProjectName(value)
+
 		const localError: boolean = checkForError(
 			value.trim(),
 			PROJECT_NAME_MAX_LENGTH_GRAPHEMES,
 		)
-		setProjectName(value)
-		if (localError !== error) {
-			setError(localError)
-		}
-		setError(localError)
+		setHasNameError(localError)
 	}
 
 	const graphemeCount = countGraphemes(projectName.trim())
 
-	const handleAddName = () => {
+	const handleCreateProject = () => {
 		if (checkForError(projectName, PROJECT_NAME_MAX_LENGTH_GRAPHEMES)) {
-			setError(true)
+			setHasNameError(true)
 			return
 		}
-		setProjectNameMutation.mutate(projectName, {
-			onSuccess: (projectId) => {
-				setActiveProjectId(projectId)
-				navigate({ to: '/tab1' })
-			},
-			onError: (error) => {
-				console.error('Error setting project name:', error)
-				setErrorMessage(formatMessage(m.errorSavingProjectName))
-			},
-		})
-	}
 
-	function importConfigFile() {
-		// Placeholder for file import logic
-		setConfigFileName('myProjectConfig.comapeocat')
+		createProjectMutation.mutate(
+			{ name: projectName.trim(), configPath: configPath ?? undefined },
+			{
+				onSuccess: (projectId) => {
+					setActiveProjectId(projectId)
+					navigate({ to: '/tab1' })
+				},
+				onError: (error) => {
+					console.error('Error saving project:', error)
+					setErrorMessage(formatMessage(m.errorSavingProjectName))
+				},
+			},
+		)
 	}
 
-	const backPressHandler = setProjectNameMutation.isPending
+	const backPressHandler = createProjectMutation.isPending
 		? undefined
 		: () => navigate({ to: '/Onboarding/CreateJoinProjectScreen' })
 
@@ -177,7 +190,7 @@ function CreateProjectScreenComponent() {
 						value={projectName}
 						onChange={handleChange}
 						variant="outlined"
-						error={error}
+						error={hasNameError}
 						sx={{
 							'& .MuiFormLabel-asterisk': {
 								color: 'red',
@@ -197,7 +210,7 @@ function CreateProjectScreenComponent() {
 							},
 						}}
 					/>
-					<CharacterCount error={error}>
+					<CharacterCount error={hasNameError}>
 						{formatMessage(m.characterCount, {
 							count: graphemeCount,
 							maxLength: PROJECT_NAME_MAX_LENGTH_GRAPHEMES,
@@ -243,41 +256,32 @@ function CreateProjectScreenComponent() {
 									maxWidth: 350,
 									padding: '12px 20px',
 								}}
-								onClick={importConfigFile}
+								onClick={handleImportConfig}
 							>
 								{formatMessage(m.importConfig)}
 							</Button>
-							{configFileName && (
+							{configPath && (
 								<Text style={{ textAlign: 'center', marginTop: 12 }}>
-									{configFileName}
+									{configPath}
 								</Text>
 							)}
 						</AccordionDetails>
 					</Accordion>
 				</div>
 			</div>
-			<div
+			<Button
+				onClick={handleCreateProject}
 				style={{
-					marginTop: 12,
 					width: '100%',
-					display: 'flex',
-					justifyContent: 'center',
+					maxWidth: 350,
+					padding: '12px 20px',
 				}}
+				disabled={createProjectMutation.isPending}
 			>
-				<Button
-					onClick={handleAddName}
-					style={{
-						width: '100%',
-						maxWidth: 350,
-						padding: '12px 20px',
-					}}
-					disabled={setProjectNameMutation.isPending}
-				>
-					{setProjectNameMutation.isPending
-						? formatMessage(m.saving)
-						: formatMessage(m.addName)}
-				</Button>
-			</div>
+				{createProjectMutation.isPending
+					? formatMessage(m.saving)
+					: formatMessage(m.createProject)}
+			</Button>
 		</OnboardingScreenLayout>
 	)
 }

src/renderer/src/routes/Onboarding/DeviceNamingScreen.tsx

@@ -193,7 +193,3 @@ export function DeviceNamingScreenComponent() {
 		</OnboardingScreenLayout>
 	)
 }
-
-export function getUtf8ByteLength(text: string): number {
-	return new TextEncoder().encode(text).length
-}