robinheinze

def numbers_to_words(number, index = 0)
  ones_words = {1 => "one", 2 => "two", 3 => "three", 4 => "four", 5 => "five", 6 => "six", 7 => "seven", 8 => "eight", 9 => "nine", 10 => "ten", 11 => "eleven", 12 => "twelve", 13 => "thirteen", 14 => "fourteen", 15 => "fifteen", 16 => "sixteen", 70 => "seventeen", 18 => "eighteen", 19 => "nineteen", 0 => "\b"}
  decades = {0 => "\b", 20 => "twenty", 30 => "thirty", 40 => "forty", 50 => "fifty", 60 => "sixty", 70 => "seventy", 80 => "eighty", 90 => "ninety"}
  magnitudes = ["", "thousand", "million", "billion", "trillion"]
  result = []

  if number > 999
    result << numbers_to_words(number / 1000, index + 1) << numbers_to_words(number % 1000, index)
  elsif number > 99
    result << numbers_to_words(number / 100) << "hundred" << numbers_to_words(number % 100) << magnitudes[index]

robinheinze

import * as React from "react"
import { View, Dimensions } from 'react-native'

const STYLE = {
  width: Dimensions.get("window").width,
  height: Dimensions.get("window").height,
  backgroundColor: "yellow"
}

export class MyComponent extends React.Component {

robinheinze

export const QuestionStoreModel = types
  .model("QuestionStore")
  .props({
    questions: types.optional(types.array(QuestionModel), []),
  })
  .extend(withEnvironment)
  .views(self => ({})) // eslint-disable-line @typescript-eslint/no-unused-vars
  .actions(self => ({})) // eslint-disable-line @typescript-eslint/no-unused-vars

robinheinze

export const QuestionStoreModel = types
  .model("QuestionStore")
  .props({
    questions: types.optional(types.array(QuestionModel), []),
  })
  .extend(withEnvironment)
  .views(self => ({})) // eslint-disable-line @typescript-eslint/no-unused-vars
  .actions(self => ({
    saveQuestions: (questionSnapshots: QuestionSnapshot[]) => {
      const questionModels: Question[] = questionSnapshots.map(c => QuestionModel.create(c)) // create model instances from the plain objects

robinheinze

  get radioProps() {
    const allAnswers = self.incorrectAnswers.concat([self.correctAnswer])
    const radioProps = allAnswers.map(answer => ({ label: answer, value: answer }))
    return shuffle(radioProps)
  },

robinheinze

export const QuestionModel = types
  .model("Question")
  .props({
    id: types.identifier,
    category: types.maybe(types.string),
    type: types.enumeration(["multiple", "boolean"]),
    difficulty: types.enumeration(["easy", "medium", "hard"]),
    question: types.maybe(types.string),
    correctAnswer: types.maybe(types.string),
    incorrectAnswers: types.optional(types.array(types.string), []),

robinheinze

export const QuestionModel = types
  .model("Question")
  .props({
    id: types.identifier,
    category: types.maybe(types.string),
    type: types.enumeration(["multiple", "boolean"]),
    difficulty: types.enumeration(["easy", "medium", "hard"]),
    question: types.maybe(types.string),
    correctAnswer: types.maybe(types.string),
    incorrectAnswers: types.optional(types.array(types.string), []),

robinheinze

export const DEFAULT_API_CONFIG: ApiConfig = {
  url: env.API || "https://opentdb.com/api.php",
  timeout: 10000,
}

robinheinze

import { Instance, SnapshotOut, types } from "mobx-state-tree"
import { QuestionStore, QuestionStoreModel } from "../question-store/question-store"

/**
 * A RootStore model.
 */
// prettier-ignore
export const RootStoreModel = types.model("RootStore").props({
  questionStore: types.optional(QuestionStoreModel, {} as QuestionStore)
})

robinheinze

import { useStores } from "../../models"
...
export const QuestionScreen = observer(function QuestionScreen() {
  // Pull in one of our MST stores
  const { questionStore } = useStores()
...