How to use the mobx-state-tree.types.string function in mobx-state-tree

*
 */

import { types as t, getParent } from 'mobx-state-tree'
import R from 'ramda'
import Router from 'next/router'

import { PAGE_SIZE } from '@config'
import { onClient, markStates, buildLog, serializeQuery } from '@utils'
/* eslint-disable no-unused-vars */
const log = buildLog('S:RouteStore')
/* eslint-enable no-unused-vars */

const Query = t.model('Query', {
  page: t.optional(t.string, '1'),
  size: t.optional(t.string, String(PAGE_SIZE.D)),
  tab: t.maybeNull(t.string),
  // sort .... [when, ...]
  // view ... [chart, list ...]
})

const RouteStore = t
  .model('RouteStore', {
    mainPath: t.optional(t.string, ''),
    subPath: t.optional(t.string, ''),
    query: t.optional(Query, {}),
  })
  .views(self => ({
    get root() {
      return getParent(self)
    },
    get curRoute() {

*/

import { types as t, getParent } from 'mobx-state-tree'
import R from 'ramda'
/* import { Community } from '../SharedModel' */

import { markStates, makeDebugger } from '../../utils'
/* eslint-disable no-unused-vars */
const debug = makeDebugger('S:SubscribedCommunitiesStore')
/* eslint-enable no-unused-vars */

export const Community = t.model('Community', {
  id: t.string,
  title: t.string,
  raw: t.string,
  logo: t.string,
  recentContributesDigest: t.optional(t.array(t.number), []),
})

const SubscribedCommunitiesStore = t
  .model('SubscribedCommunitiesStore', {
    entries: t.optional(t.array(Community), []),
    pageNumber: t.optional(t.number, 1),
    pageSize: t.optional(t.number, 20), // TODO: USE CONSTANTS
    totalCount: t.optional(t.number, 1),
    totalPages: t.optional(t.number, 1),
  })
  .views(self => ({
    get root() {
      return getParent(self)
    },
    get all() {

// import R from 'ramda'

import { Tag } from '../SharedModel'
import { markStates, makeDebugger, stripMobx } from '../../utils'
/* import { CMS_THREADS } from '../../config' */

/* eslint-disable no-unused-vars */
const debug = makeDebugger('S:TagSetterStore')
/* eslint-enable no-unused-vars */

const TagSetterStore = t
  .model('TagSetterStore', {
    tags: t.optional(t.array(Tag), []),
    loading: t.optional(t.boolean, false),
    activeCommunityRaw: t.optional(t.string, ''),
    activeThread: t.optional(t.string, 'POST'), // t.optional(t.enumeration('thread', CMS_THREADS), CMS_THREADS[0]),
  })
  .views(self => ({
    get root() {
      return getParent(self)
    },
    get tagsData() {
      return stripMobx(self.tags)
    },
  }))
  .actions(self => ({
    markState(sobj) {
      markStates(sobj, self)
    },
  }))

export default TagSetterStore

import { types } from 'mobx-state-tree'
import Task from './Task'

const Graph2dRangeX = types.model('Graph2dRangeX', {
  help: types.optional(types.string, ''),
  instruction: types.string,
  required: types.optional(types.boolean, false),
  type: types.literal('graph2dRangeX')
})

const Graph2dRangeXTask = types.compose('Graph2dRangeXTask', Task, Graph2dRangeX)

export default Graph2dRangeXTask

/**
 * PokemonDimensionBase
 * auto generated base class for the model PokemonDimensionModel.
 *
 * Represents a Pokémon's dimensions
 */
export const PokemonDimensionModelBase = ModelBase
  .named('PokemonDimension')
  .props({
    __typename: types.optional(types.literal("PokemonDimension"), "PokemonDimension"),
    /** The minimum value of this dimension */
    minimum: types.maybeNull(types.string),
    /** The maximum value of this dimension */
    maximum: types.maybeNull(types.string),
  })
  .views(self => ({
    get store() {
      return self.__getStore()
    }
  }))

export class PokemonDimensionModelSelector extends QueryBuilder {
  get minimum() { return this.__attr(`minimum`) }
  get maximum() { return this.__attr(`maximum`) }
}
export function selectFromPokemonDimension() {
  return new PokemonDimensionModelSelector()
}

export const pokemonDimensionModelPrimitives = selectFromPokemonDimension().minimum.maximum

import { types } from 'mobx-state-tree';

const Sandbox = types.model({
  forkCount: types.number,
  git: types.maybeNull(
    types.model({
      username: types.string,
      repo: types.string,
      path: types.maybeNull(types.string),
      commitSha: types.string,
      branch: types.string,
    })
  ),
  id: types.string,
  insertedAt: types.string,
  likeCount: types.number,
  privacy: types.number,
  template: types.string,
  title: types.maybeNull(types.string),
  updatedAt: types.string,
  viewCount: types.number,
});

export default {
  profiles: types.map(
    types.model({
      viewCount: types.number,
      username: types.string,
      subscriptionSince: types.maybeNull(types.string),
      showcasedSandboxShortid: types.maybeNull(types.string),

updated: number;

  paid: boolean;

  items: OrderItemType[];
}
export const OrderModel = types
  .model('Ordering_Order', {
    id: types.identifier(types.string),
    status: types.string,
    statusDescription: types.string,

    userName: types.string,
    buyerName: types.string,

    shippingAddressId: types.string,
    shippingAddress: types.string,
    shippingCityState: types.string,
    shippingZipCode: types.string,
    shippingCountry: types.string,
    billingAddressId: types.string,
    billingAddress: types.string,
    billingCityState: types.string,
    billingZipCode: types.string,
    billingCountry: types.string,

    paymentMethodId: types.string,
    paymentMethod: types.string,
    totalItems: types.number,
    totalQuantity: types.number,

    subTotal: types.number,

const debug = new Debug('buyer address');

export interface AddressFormType {
  id: string;
  alias: string;
  street: string;
  city: string;
  state: string;
  zipCode: string;
  country: string;
  readonly form: { [idx: string]: FieldDefinition };
  submit: () => Promise<{}>;
}
export const AddressFormModel = types
  .model({
    id: types.optional(types.identifier(types.string), uuid),
    alias: types.maybe(types.string),
    street: types.maybe(types.string),
    city: types.maybe(types.string),
    state: types.maybe(types.string),
    zipCode: types.maybe(types.string),
    country: types.maybe(types.string)
  })
  .views(self => ({
    get validation() {
      const validation = {
        alias: rules.addressForm.alias,
        street: rules.addressForm.street,
        city: rules.addressForm.city,
        state: rules.addressForm.state,
        zipCode: rules.addressForm.zipCode,
        country: rules.addressForm.country

import React, { Component } from "react";
import PropTypes from "prop-types";

import Registry from "../../core/Registry";
import { types, getParentOfType, destroy, getRoot, getParent } from "mobx-state-tree";
import { observer, inject, Provider } from "mobx-react";
import { SortableContainer, SortableElement, sortableHandle } from "react-sortable-hoc";
import arrayMove from "array-move";
import { List } from "antd";

import { guidGenerator } from "../../core/Helpers";

const RankerItemModel = types
  .model({
    backgroundColor: types.optional(types.string, "transparent"),
    value: types.maybeNull(types.string),
    _value: types.maybeNull(types.string),
    selected: types.optional(types.boolean, false),
    idx: types.number,
  })
  .views(self => ({}))
  .actions(self => ({
    setBG(val) {
      self.backgroundColor = val;
    },

    setIdx(idx) {
      self.idx = idx;
    },

    setSelected(val) {