[Vue] Assessment Test

Contact.ts

// Generated by https://quicktype.io

export interface Contact {
  gender: string;
  name: Name;
  location: Location;
  email: string;
  login: Login;
  dob: Dob;
  registered: Dob;
  phone: string;
  cell: string;
  id: ID;
  picture: Picture;
  nat: string;
}

export interface Dob {
  date: string;
  age: number;
}

export interface ID {
  name: string;
  value: string;
}

export interface Location {
  street: Street;
  city: string;
  state: string;
  country: string;
  postcode: string;
  coordinates: Coordinates;
  timezone: Timezone;
}

export interface Coordinates {
  latitude: string;
  longitude: string;
}

export interface Street {
  number: number;
  name: string;
}

export interface Timezone {
  offset: string;
  description: string;
}

export interface Login {
  uuid: string;
  username: string;
  password: string;
  salt: string;
  md5: string;
  sha1: string;
  sha256: string;
}

export interface Name {
  title: string;
  first: string;
  last: string;
}

export interface Picture {
  large: string;
  medium: string;
  thumbnail: string;
}

package.json

{
  "name": "vue-assessment-full",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vueuse/core": "^8.2.6",
    "core-js": "^3.6.5",
    "vue": "^2.7.0",
    "vue-demi": "^0.13.6",
    "vue-router": "^3.2.0",
    "vuetify": "^2.6.0"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.181",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-typescript": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "typescript": "^4.1.5",
    "vue-cli-plugin-vuetify": "~2.4.8",
    "vuetify-loader": "^1.7.0"
  }
}

useContracts.ts

import { computed, ref } from "vue-demi";
import { filter, some } from "lodash";
import { useDebounce, useFetch } from "@vueuse/core";

import { Contact } from "@/models/Contact";

export interface Result {
  results: Contact[];
}

export function useContacts() {
  const { isFetching, error, data } = useFetch<Result>(
    "https://randomuser.me/api/?results=100",
    { initialData: { results: [] } }
  )
    .get()
    .json();

  const search = ref("");

  const debouncedSearch = useDebounce(search, 400);

  const filtered = computed<Contact[]>(() => {
    const list = data.value?.results ?? [];

    if (!debouncedSearch.value) return list;

    return filter(list, item => {
      const toSearch = [item.first_name, item.last_name, item.email];
      return some(toSearch, q => q.includes(debouncedSearch.value));
    });
  });

  return {
    isFetching,
    search,
    filtered,
    error,
    contacts: data
  };
}

export function useContactById(id: number | string) {
  const { isFetching, error, data } = useFetch<Result>(
    `https://randomuser.me/api/?seed=${id}`,
    { initialData: { results: null } }
  )
    .get()
    .json();

  const contact = computed<Contact>(() => data.value?.results[0]);

  return {
    isFetching,
    error,
    contact
  };
}