Duplicate ids and unregistering of fields, fields groups and fields a… (#63)

* Duplicate ids and unregistering of fields, fields groups and fields arrays.

Duplicate field, fields groups and fields arrays id checks added. Fields groups and fields array unregistering on unmounting added.

* withMutations -> merge in field, fields group and fields array registration.

Author: DovydasNavickas

packages/simplr-forms/src/abstractions/base-fields-array.ts

@@ -50,10 +50,12 @@ export class BaseFieldsArray<TProps extends FieldsArrayProps,
     componentWillMount() {
         const idBase = `${this.props.name}[${this.props.index}]`;
         this.FieldsArrayId = this.FormStore.GetFieldsGroupId(idBase, this.context.FieldsGroupId);
-        if (this.FormStore.GetState().FieldsGroups.has(this.FieldsArrayId)) {
-            throw new Error(`simplr-forms: FieldsArray '${this.FieldsArrayId}' already exists in form '${this.FormId}'.`);
-        }
-
         this.FormStore.RegisterFieldsArray(this.FieldsArrayId, this.props.name, this.props.index, this.context.FieldsGroupId);
     }
+
+    componentWillUnmount(): void {
+        if (this.FormStore != null && this.props.destroyOnUnmount) {
+            this.FormStore.UnregisterFieldsArray(this.FieldsArrayId);
+        }
+    }
 }

packages/simplr-forms/src/abstractions/base-fields-group.ts

@@ -49,10 +49,12 @@ export class BaseFieldsGroup<TProps extends FieldsGroupProps,
 
     componentWillMount() {
         this.FieldsGroupId = this.FormStore.GetFieldsGroupId(this.props.name, this.context.FieldsGroupId);
-        if (this.FormStore.GetState().FieldsGroups.has(this.FieldsGroupId)) {
-            throw new Error(`simplr-forms: FieldsGroup '${this.FieldsGroupId}' already exists in form '${this.FormId}'.`);
-        }
-
         this.FormStore.RegisterFieldsGroup(this.FieldsGroupId, this.props.name, this.context.FieldsGroupId);
     }
+
+    componentWillUnmount(): void {
+        if (this.FormStore != null && this.props.destroyOnUnmount) {
+            this.FormStore.UnregisterFieldsGroup(this.FieldsGroupId);
+        }
+    }
 }

packages/simplr-forms/src/abstractions/core-field.ts

@@ -286,10 +286,6 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
      * Registers a field in FormStore or throws if the field was already registered
      */
     private registerFieldInFormStore(): void {
-        if (this.FormStore.HasField(this.FieldId)) {
-            throw new Error(`simplr-forms: Duplicate field id '${this.FieldId}'`);
-        }
-
         const defaultValue = this.ProcessValueBeforeStore(this.RawDefaultValue);
         const initialValue = this.ProcessValueBeforeStore(this.RawInitialValue);
         const value = this.ProcessValueBeforeStore(this.RawValue);

packages/simplr-forms/src/stores/form-store.ts

@@ -103,6 +103,11 @@ export class FormStore extends ActionEmitter {
         props?: FieldProps,
         fieldsGroupId?: string
     ): void {
+        if (this.State.Fields.has(fieldId) ||
+            this.State.FieldsGroups.has(fieldId)) {
+            throw new Error(`simplr-forms: Field '${fieldId}' already exists in form '${this.FormId}.`);
+        }
+
         // Construct field state
         const fieldState: FieldStoreState = {
             Name: name,
@@ -154,40 +159,54 @@ export class FormStore extends ActionEmitter {
         }
 
         // Add field into form store state
-        this.State = this.State.withMutations(state => {
-            state.Fields = state.Fields.set(fieldId, recordify<FieldStoreState, FieldStoreStateRecord>(fieldState));
-        });
+        this.State = this.State.merge({
+            Fields: this.State.Fields.set(fieldId, recordify<FieldStoreState, FieldStoreStateRecord>(fieldState))
+        } as FormStoreStateRecord);
 
         this.emit(new Actions.FieldRegistered(this.FormId, fieldId));
     }
 
-    public RegisterFieldsGroup(id: string, name: string, parentId?: string): void {
+    public RegisterFieldsGroup(fieldsGroupId: string, name: string, parentId?: string): void {
+        if (this.State.Fields.has(fieldsGroupId) ||
+            this.State.FieldsGroups.has(fieldsGroupId)) {
+            throw new Error(`simplr-forms: FieldsGroup '${fieldsGroupId}' already exists in form '${this.FormId}.`);
+        }
+
         const fgState: FieldsGroupStoreState = {
             Name: name,
             Parent: parentId
         };
 
         const fgStateRecord = recordify<FieldsGroupStoreState, FieldsGroupStoreStateRecord>(fgState);
-        this.State = this.State.withMutations(state => {
-            state.FieldsGroups = state.FieldsGroups.set(id, fgStateRecord);
-        });
 
-        this.emit(new Actions.FieldsGroupRegistered(this.FormId, id));
+        // Add fields group into form store state
+        this.State = this.State.merge({
+            FieldsGroups: this.State.FieldsGroups.set(fieldsGroupId, fgStateRecord)
+        } as FormStoreStateRecord);
+
+        this.emit(new Actions.FieldsGroupRegistered(this.FormId, fieldsGroupId));
     }
 
-    public RegisterFieldsArray(id: string, name: string, index: number, parentId?: string): void {
-        const fgState: FieldsGroupStoreState = {
+    public RegisterFieldsArray(fieldsArrayId: string, name: string, index: number, parentId?: string): void {
+        if (this.State.Fields.has(fieldsArrayId) ||
+            this.State.FieldsGroups.has(fieldsArrayId)) {
+            throw new Error(`simplr-forms: FieldsArray '${fieldsArrayId}' already exists in form '${this.FormId}.`);
+        }
+
+        const faState: FieldsGroupStoreState = {
             Name: name,
             ArrayName: name,
             Parent: parentId
         };
 
-        const fgStateRecord = recordify<FieldsGroupStoreState, FieldsGroupStoreStateRecord>(fgState);
-        this.State = this.State.withMutations(state => {
-            state.FieldsGroups = state.FieldsGroups.set(id, fgStateRecord);
-        });
+        const faStateRecord = recordify<FieldsGroupStoreState, FieldsGroupStoreStateRecord>(faState);
 
-        this.emit(new Actions.FieldsArrayRegistered(this.FormId, id));
+        // Add fields array into form store state
+        this.State = this.State.merge({
+            FieldsGroups: this.State.FieldsGroups.set(fieldsArrayId, faStateRecord)
+        } as FormStoreStateRecord);
+
+        this.emit(new Actions.FieldsArrayRegistered(this.FormId, fieldsArrayId));
     }
 
     public UnregisterField(fieldId: string): void {
@@ -197,6 +216,20 @@ export class FormStore extends ActionEmitter {
         });
     }
 
+    public UnregisterFieldsGroup(fieldsGroupId: string): void {
+        // Remove fields group from form store state
+        this.State = this.State.withMutations(state => {
+            state.FieldsGroups = state.FieldsGroups.remove(fieldsGroupId);
+        });
+    }
+
+    public UnregisterFieldsArray(fieldsGroupId: string): void {
+        // Remove fields array from form store state
+        this.State = this.State.withMutations(state => {
+            state.FieldsGroups = state.FieldsGroups.remove(fieldsGroupId);
+        });
+    }
+
     public HasField(fieldId: string): boolean {
         return this.State.Fields.has(fieldId);
     }