Refactor navigation

src/__tests__/Problems-test.tsx

@@ -1,6 +1,6 @@
 import { render, RenderAPI } from '@testing-library/react-native'
 import React from 'react'
-import { Node, Problem } from 'wollok-ts'
+import { Node, Problem } from 'wollok-ts/dist/model'
 import { ProblemIcon } from '../components/problems/ProblemIcon'
 import { ProblemReporterButton } from '../components/problems/ProblemReporterButton'
 import { ProblemModal } from '../components/problems/ProblemsModal'

src/__tests__/TestItem-test.tsx

@@ -2,8 +2,7 @@ import { fireEvent, render } from '@testing-library/react-native'
 import React from 'react'
 import { ActivityIndicator } from 'react-native-paper'
 import { act, ReactTestInstance } from 'react-test-renderer'
-import { WollokException } from 'wollok-ts/dist/interpreter/runtimeModel'
-import { Body, Test } from 'wollok-ts/dist/model'
+import { Body, Test, WollokException } from 'wollok-ts'
 import TestItem from '../components/tests/TestItem'
 import { theme } from '../theme'
 import { TestRun } from '../utils/wollok-helpers'

src/__tests__/mocks/ProjectProviderMock.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Environment, Problem } from 'wollok-ts'
+import { Environment, Problem } from 'wollok-ts/dist/model'
 import { ProjectContext } from '../../context/ProjectProvider'
 import { ParentComponentProp } from '../../utils/type-helpers'
 
@@ -11,6 +11,8 @@ export const initialContext = {
 	actions: {
 		addEntity: jest.fn(),
 		addDescribe: jest.fn(),
+		addMember: jest.fn(),
+		changeMember: jest.fn(),
 		rebuildEnvironment: jest.fn(),
 		runTest: jest.fn(),
 		execution: jest.fn(),

src/components/entities/Entity/Entity.tsx

@@ -1,8 +1,7 @@
-import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { List, withTheme } from 'react-native-paper'
 import { Module } from 'wollok-ts/dist/model'
-import { HomeScreenNavigationProp } from '../../../pages/Home'
+import { useNodeNavigation } from '../../../context/NodeNavigation'
 import { Theme } from '../../../theme'
 import { ProblemReporterButton } from '../../problems/ProblemReporterButton'
 import { EntityKindIcon } from '../EntityKindIcon'
@@ -15,12 +14,8 @@ type EntityComponentProps = {
 
 function EntityComponent({ entity, theme }: EntityComponentProps) {
 	const styles = stylesheet(theme)
-	const navigation = useNavigation<HomeScreenNavigationProp>()
-	const goToEntityDetails = () => {
-		navigation.navigate('EntityStack', {
-			entityFQN: entity.fullyQualifiedName(),
-		})
-	}
+	const { goToNode } = useNodeNavigation()
+	const goToEntityDetails = () => goToNode(entity)
 
 	return (
 		<List.Item

src/pages/EntityDetails/EntityDetails.tsx → src/components/entity-detail/ModuleDetails.tsx

@@ -3,22 +3,28 @@ import React, { useState } from 'react'
 import { ScrollView } from 'react-native-gesture-handler'
 import { List } from 'react-native-paper'
 import { upperCaseFirst } from 'upper-case-first'
-import { Field, is, Method } from 'wollok-ts/dist/model'
-import { AccordionList } from '../../components/entity-detail/AccordionList'
-import AttributeItemComponent from '../../components/entity-detail/AttributeItem/AttributeItem'
-import NewAttributeModal from '../../components/entity-detail/new-attribute-modal/NewAttributeModal'
-import NewMethodModal from '../../components/entity-detail/new-method-modal/NewMethodModal'
-import MultiFabScreen from '../../components/FabScreens/MultiFabScreen'
-import { ProblemReporterButton } from '../../components/problems/ProblemReporterButton'
-import { useEntity } from '../../context/EntityProvider'
+import { Describe, Field, is, Method, Module } from 'wollok-ts/dist/model'
+import { AccordionList } from './AccordionList'
+import AttributeItemComponent from './AttributeItem/AttributeItem'
+import NewAttributeModal from './new-attribute-modal/NewAttributeModal'
+import NewMethodModal from './new-method-modal/NewMethodModal'
+import MultiFabScreen from '../FabScreens/MultiFabScreen'
+import { ProblemReporterButton } from '../problems/ProblemReporterButton'
+import { useProject } from '../../context/ProjectProvider'
 import { wTranslate } from '../../utils/translation-helpers'
 import { methodFQN, methodLabel } from '../../utils/wollok-helpers'
-import { EntityMemberScreenNavigationProp } from '../EntityMemberDetail'
+import { EditorScreenNavigationProp } from '../../pages/Editor'
 
-export const EntityDetails = function () {
+export type ModuleDetailsProps = {
+	module: Exclude<Module, Describe>
+}
+
+export const ModuleDetails = function ({ module }: ModuleDetailsProps) {
 	const [methodModalVisible, setMethodModalVisible] = useState(false)
 	const [attributeModalVisible, setAttributeModalVisible] = useState(false)
-	const { entity } = useEntity()
+	const {
+		actions: { addMember },
+	} = useProject()
 
 	return (
 		<MultiFabScreen
@@ -38,13 +44,13 @@ export const EntityDetails = function () {
 				<ScrollView>
 					<AccordionList<Field>
 						title={wTranslate('entityDetails.attributes').toUpperCase()}
-						items={entity.members.filter(is('Field')) as Field[]}
+						items={module.members.filter(is('Field')) as Field[]}
 						VisualItem={AttributeItem}
 						initialExpanded={true}
 					/>
 					<AccordionList<Method>
 						title={wTranslate('entityDetails.methods').toUpperCase()}
-						items={entity.members.filter(is('Method')) as Method[]}
+						items={module.members.filter(is('Method')) as Method[]}
 						VisualItem={MethodItem}
 						initialExpanded={true}
 					/>
@@ -53,10 +59,13 @@ export const EntityDetails = function () {
 			<NewMethodModal
 				visible={methodModalVisible}
 				setVisible={setMethodModalVisible}
+				addNewMethod={addMember(module)}
 			/>
 			<NewAttributeModal
 				setVisible={setAttributeModalVisible}
 				visible={attributeModalVisible}
+				addNewField={addMember(module)}
+				contextFQN={module.fullyQualifiedName()}
 			/>
 		</MultiFabScreen>
 	)
@@ -67,18 +76,18 @@ function AttributeItem({ item: attribute }: { item: Field }) {
 }
 
 function MethodItem({ item: method }: { item: Method }) {
-	const navigator = useNavigation<EntityMemberScreenNavigationProp>()
+	const navigator = useNavigation<EditorScreenNavigationProp>()
+	function gotoMethod() {
+		navigator.navigate('Editor', {
+			fqn: methodFQN(method),
+		})
+	}
 	return (
 		<List.Item
 			key={method.name}
 			title={methodLabel(method)}
 			left={() => <ProblemReporterButton node={method} />}
-			onPress={() =>
-				navigator.navigate('EntityMemberDetails', {
-					entityMember: method,
-					fqn: methodFQN(method),
-				})
-			}
+			onPress={gotoMethod}
 		/>
 	)
 }

src/components/entity-detail/new-attribute-modal/NewAttributeModal.tsx

@@ -1,34 +1,30 @@
 import React, { useState } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Text, TextInput, withTheme } from 'react-native-paper'
+import { Text, TextInput } from 'react-native-paper'
 import { upperCaseFirst } from 'upper-case-first'
 import { Expression, Field } from 'wollok-ts/dist/model'
-import { useEntity } from '../../../context/EntityProvider'
-import { Theme } from '../../../theme'
 import { wTranslate } from '../../../utils/translation-helpers'
+import { Visible } from '../../../utils/type-helpers'
 import CheckIcon from '../../ui/CheckIcon'
 import ExpressionInput from '../../ui/ExpressionInput'
 import FormModal from '../../ui/FormModal/FormModal'
 import { ATTRIBUTE_ICONS } from '../attribute-icons'
 
-type Props = {
-	visible: boolean
-	setVisible: (visible: boolean) => void
-	theme: Theme
+type AttributeFormModalProps = Visible & {
+	addNewField: (f: Field) => void
+	contextFQN: string
 }
 
-const AttributeFormModal = (props: Props) => {
-	const {
-		actions: { addMember },
-		entity,
-	} = useEntity()
+const AttributeFormModal = ({
+	visible,
+	setVisible,
+	addNewField,
+	contextFQN,
+}: AttributeFormModalProps) => {
 	const [name, setName] = useState('')
 	const [isConstant, setConstant] = useState(false)
 	const [isProperty, setProperty] = useState(false)
 	const [initialValue, setInitialValue] = useState<Expression>()
-	const { visible, setVisible } = props
-
-	const styles = getStyles(props.theme)
 
 	const checkboxes = [
 		{
@@ -68,7 +64,7 @@ const AttributeFormModal = (props: Props) => {
 			<ExpressionInput
 				value={initialValue}
 				setValue={setInitialValue}
-				fqn={entity.fullyQualifiedName()}
+				contextFQN={contextFQN}
 				inputPlaceholder={wTranslate(
 					'entityDetails.attributeModal.addAnInitialValue',
 				)}
@@ -84,14 +80,15 @@ const AttributeFormModal = (props: Props) => {
 	}
 
 	function newAttribute() {
-		addMember(new Field({ name, isConstant, isProperty, value: initialValue }))
+		addNewField(
+			new Field({ name, isConstant, isProperty, value: initialValue }),
+		)
 	}
 }
 
-const getStyles = (_theme: Theme) =>
-	StyleSheet.create({
-		checkbox: { flexDirection: 'row', alignItems: 'center', marginVertical: 5 },
-		constName: { fontSize: 16 },
-	})
+const styles = StyleSheet.create({
+	checkbox: { flexDirection: 'row', alignItems: 'center', marginVertical: 5 },
+	constName: { fontSize: 16 },
+})
 
-export default withTheme(AttributeFormModal)
+export default AttributeFormModal

src/components/entity-detail/new-method-modal/NewMethodModal.tsx

@@ -1,22 +1,20 @@
 import React, { useState } from 'react'
 import { StyleSheet } from 'react-native'
-import { Text, TextInput, withTheme } from 'react-native-paper'
+import { Text, TextInput } from 'react-native-paper'
 import { upperCaseFirst } from 'upper-case-first'
 import { Body, Method, Parameter } from 'wollok-ts/dist/model'
-import { useEntity } from '../../../context/EntityProvider'
-import { Theme } from '../../../theme'
 import { wTranslate } from '../../../utils/translation-helpers'
+import { Visible } from '../../../utils/type-helpers'
 import FormModal from '../../ui/FormModal/FormModal'
 import ParameterInput from './ParameterInput'
 
-const NewMethodModal = (props: {
-	visible: boolean
-	setVisible: (value: boolean) => void
-	theme: Theme
-}) => {
-	const {
-		actions: { addMember },
-	} = useEntity()
+type NewMethodModalProps = Visible & { addNewMethod: (m: Method) => void }
+
+const NewMethodModal = ({
+	visible,
+	setVisible,
+	addNewMethod,
+}: NewMethodModalProps) => {
 	const [name, setName] = useState('')
 	const [parameters, setParameters] = useState<string[]>([])
 	const [nextParameter, setNextParameter] = useState('')
@@ -26,8 +24,8 @@ const NewMethodModal = (props: {
 			title={wTranslate('entityDetails.methodModal.newMethod')}
 			resetForm={reset}
 			onSubmit={newMethod}
-			setVisible={props.setVisible}
-			visible={props.visible}>
+			setVisible={setVisible}
+			visible={visible}>
 			<TextInput
 				onChangeText={setName}
 				label={wTranslate('entityDetails.methodModal.nameOfMethod')}
@@ -64,7 +62,7 @@ const NewMethodModal = (props: {
 	}
 
 	function newMethod() {
-		addMember(
+		addNewMethod(
 			new Method({
 				name,
 				parameters: parameters.map(
@@ -95,4 +93,4 @@ const styles = StyleSheet.create({
 	subtitle: { fontSize: 16, marginTop: 15 },
 })
 
-export default withTheme(NewMethodModal)
+export default NewMethodModal

src/components/expressions/LiteralModal/LiteralInputModals.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react'
 import { TextInput } from 'react-native-paper'
 import { Literal, LiteralValue } from 'wollok-ts/dist/model'
-import { ExpressionOnSubmit } from '../../../pages/ExpressionMaker/ExpressionMaker'
+import { ExpressionOnSubmit } from '../../../pages/ExpressionMaker'
 import FormModal from '../../ui/FormModal/FormModal'
 
 type LiteralValueModalProps = {

src/components/expressions/expression-lists/messages-list.tsx

@@ -13,7 +13,7 @@ import {
 } from 'wollok-ts/dist/model'
 import { useExpressionContext } from '../../../context/ExpressionContextProvider'
 import { useProject } from '../../../context/ProjectProvider'
-import { ExpressionMakerScreenProp } from '../../../pages/ExpressionMaker/ExpressionMaker'
+import { ExpressionMakerScreenProp } from '../../../pages/ExpressionMaker'
 import { wTranslate } from '../../../utils/translation-helpers'
 import {
 	allMethods,
@@ -80,7 +80,7 @@ function MessageItem({
 
 	function onPress() {
 		if (m.parameters.length) {
-			navigation.push('NewMessageSend', {
+			navigation.push('ArgumentsMaker', {
 				method: m,
 				receiver,
 				onSubmit,

src/components/problems/ProblemIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { IconButton } from 'react-native-paper'
-import { Problem } from 'wollok-ts'
+import { Problem } from 'wollok-ts/dist/model'
 
 interface ProblemIconProps {
 	problem: Problem

src/components/problems/ProblemReporterButton.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Node, Problem } from 'wollok-ts'
+import { Node, Problem } from 'wollok-ts/dist/model'
 import { useProject } from '../../context/ProjectProvider'
 import { isError } from '../../utils/wollok-helpers'
 import { ProblemIcon } from './ProblemIcon'

src/components/problems/ProblemsModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ScrollView } from 'react-native'
 import { List } from 'react-native-paper'
-import { Node, Problem } from 'wollok-ts'
+import { Node, Problem } from 'wollok-ts/dist/model'
 import { wTranslate } from '../../utils/translation-helpers'
 import { methodFQN } from '../../utils/wollok-helpers'
 import FormModal, { FormModalProps } from '../ui/FormModal/FormModal'

src/components/projects/ProjectHeader.tsx

@@ -1,11 +1,8 @@
-import { useNavigation } from '@react-navigation/native'
 import React, { useState } from 'react'
 import { Badge, IconButton } from 'react-native-paper'
-import { Entity, Method, Node } from 'wollok-ts'
+import { Node } from 'wollok-ts/dist/model'
+import { useNodeNavigation } from '../../context/NodeNavigation'
 import { useProject } from '../../context/ProjectProvider'
-import { EntityMemberScreenNavigationProp } from '../../pages/EntityMemberDetail'
-import { HomeScreenNavigationProp } from '../../pages/Home'
-import { methodFQN } from '../../utils/wollok-helpers'
 import { ProblemModal } from '../problems/ProblemsModal'
 import { Row } from '../ui/Row'
 
@@ -21,37 +18,12 @@ export function ProjectHeader({ pushMessage }: ProjectHeaderProp) {
 		actions: { save },
 	} = useProject()
 
-	// Duplicated code
-	const navigation = useNavigation<
-		HomeScreenNavigationProp & EntityMemberScreenNavigationProp
-	>()
-	const goToEntityDetails = (entity: Entity) => {
-		navigation.navigate('EntityStack', {
-			entityFQN: entity.fullyQualifiedName(),
-		})
+	const { goToNode } = useNodeNavigation()
 
+	const goto = (n: Node): void => {
+		goToNode(n)
 		setShowProblems(false)
 	}
-	const goToMethod = (method: Method) => {
-		navigation.navigate('EntityMemberDetails', {
-			entityMember: method,
-			fqn: methodFQN(method),
-		})
-
-		setShowProblems(false)
-	}
-
-	const goto = (n: Node): void =>
-		n.match({
-			Method: goToMethod,
-			Singleton: goToEntityDetails,
-			Field: f => goToEntityDetails(f.parent),
-			Assignment: a => goto(a.parent),
-			Body: b => goto(b.parent),
-			Expression: e => goto(e.parent),
-			Test: t => goto(t.parent),
-			Describe: t => goToEntityDetails(t),
-		})
 
 	return (
 		<Row>