Experience in this week 20200514

convert HEIC to jpg on macOS terminal

ls -a *.HEIC | xargs -I% magick convert % ./temp_jpeg/%.jpg

convert jpg to PDF on macOS terminal

convert *.jpg hoge.pdf

CompositionAPI Chain Reactive Function TypeScript

how to implement reactive data binding

step 1. make reactive object wrapped by UnwrapRef

function useLoginState(): UnwrapRef<Auth> {
  const loginStateRef = reactive({
    name: undefined,
    state: AuthState.Logout
  } as Auth)
  return loginStateRef
}

reactive() wrap data object

step 2. update reactive object in async function

  setInterval(() => {
    let newLoginState = AuthState.Login
    if (loginStateRef.state !== newLoginState) {
      loginStateRef.state = newLoginState
    }
  }, 500)

update value through UnwrapRef object.

step 3. observe reactive object in html

{{ ghInfoRef.data.issues }}

<template>
      <v-data-table
        v-model="selected"
        :headers="headers"
        :items="ghInfoRef.data.issues"
        :search="search"
        :loading="ghInfoRef.data.issues.length === 0"
        item-key="title"
        show-select
        class="elevation-1"
      >
      </v-data-table>
</template>
<script lang="ts">

interface GHInfo {
  data: {
    issues: GHIssue[]
  }
  loading: boolean
  errored: boolean
}

function useLoginState(): UnwrapRef<Auth> {
  consolelog(`SeparateCompositionComponent.useLoginState()`)

  const loginStateRef = reactive({
    name: undefined,
    state: AuthState.Logout
  } as Auth)

  // emulate async function
  setInterval(() => {
    let newLoginState = AuthState.Login
    if (loginStateRef.state !== newLoginState) {
      loginStateRef.state = newLoginState
    }
  }, 500)
  return loginStateRef
}


function useGitHubAPI(loginStateRef: UnwrapRef<Auth>): UnwrapRef<GHInfo> {
  consolelog(`loginStateRef.loginState:${loginStateRef.state}`)
  const ghInfoRef = reactive({
    data: { issues: [] },
    loading: true,
    errored: false
  } as GHInfo)

  watch(
    () => loginStateRef.state,
    async (current, prev) => {
      consolelog(
        'Watch loginStateRef.state function called with args:',
        current,
        prev
      )

      ghInfoRef.data = {
        issues: filteredIssues
      }

    }
}

const GitHubIssuesCompositionComponent = defineComponent({
  props: {
    message: {
      type: String,
      default: 'default Value----------------------'
    }
  },
  setup(props: Props, context: SetupContext) {
    consolelog(`GitHubIssuesCompositionComponent.setup()`)

    const loginStateRef = useLoginState()
    const ghInfoRef = useGitHubAPI(loginStateRef)
    return { ghInfoRef }
  }
})
export default GitHubIssuesCompositionComponent
</script>