# Vue assessment topics

All questions in terms of ES6 and Vue 2. No external libs.
Feel free to use playground like https://jsfiddle.net/ if you in doubt.

Term "write a code" assumes writing a proof-of-concept, not actually working code, but syntax/logic correctivity are desirable.

## Basic JS

### One.
Cover conceptual difference between `==` and `===`?

### Two.
How to check if two **arrays of strings** contains the same values?

function isListingStable(before, after){
    // implement
}

isListingStable(
    ["AAPL", "MSFT", "AMZN", "TSLA"],
    ["TSLA", "AAPL", "MSFT", "AMZN"]
)

### Three.
Implement simple function that formats valid UNIX-timestamp as `yyyy-mm-dd`.
Example: `1.62e9` should be `2021-05-03`

function formatDate(timestamp){
    return // implement formatter
}

### Four.

fuction catchRocket(){
    console.log("Gotcha!")
}

document.addEventListener('ironDome', catchRocket);

How to trigger `ironDome` event?

## Data manipulation

Assume we have a dataset of currency conversion rates.

[
    {
        "date": "2021-02-30",
        "baseRate": "EUR",
        "rates": {
            "EUR": 1.00,
            "USD": 1.20,
            "HDK": 9.40,
            "ILS": 4.00,
            ...
        }
    }
]

Write a method using **map/reduce** to get a rates list for the specified currency. Keep codebase **as simple as you can**.
Keep in mind that method should be easy extendable when `date` argument will be used.

import { rates } from './rates.json'

function getRates(forCurrency: String) {
    // TODO
}

*Hint: Way to handle edge cases is up on you.*

## Vue 🎸

### Data flow
Write down all ways to pass data between two components if:
1. they are in parent-child relation;
2. they have common parent;
3. they have common root;
4. they completely separated.
**Hint: globals from window, closure and $modules are welcome.**

(extra) 5. they are on different pages, like between Chrome Extension & Vue website, or Google.Sheets & Google Apps Sidebar in Vue.

### Vue's dollars
Shortly cover **edge cases** of reactivity when `Vue.set`/`this.$set` needed.

On what situations you used `$nextTick` on **previous projects**?

### Slots

Explain the syntax/logic difference between following slots directives:
a) `v-slot:value`
b) `v-slot="value"`
c) `v-slot="{value}"`
d) `v-slot:value="{value}"`
e) `#default="{value}"`
f) `#value="{value}"`

### Directives

What is the difference between `v-if`, `v-show` and `v-on`?

### Watchers

Could we define a `watch` inside mixin? If so how it will looks like?

## Reactivity

### Classes

Having a class:

class Wallet {
    currency: {
        symbol: String,
        name: String,
    },
    balance: Number
    label: String
    lastUpdated: Number
}

Make it reactive using Vue.

How to connect it with another components that will update their state/value on Wallet changes?

What disadvantages will have this class after setting reactivity?

How to **clone** that class without loosing reactivity?

### Approaches

**Briefly** compare reactivity practices available in Vue
**Add 2-3 more approaches** to the table and compare them
**Hint: window**
Approach | Pros + | Cons -
---- | ---- | ----
Vuex | |
event bus | |
... | |

## Single File Components

**Code-review task.**
- Find and mark as much errors as you see.
- **including UX experience**

Mark with comments right inside the code.

<script language="javascript">
Vue.Component("signupPage", {
    data() {
        placeholder: "[e-mail]"
        value: ""
    }
    submit() {
        await alert("Form submitted, thanks!")
    }
})
</script>
<style>
html {
    font-family: Montserrat, serif;
}
</style>
<template language="pug">
div
    h1 Company landing
    h2 All headers are centered
div
    h2 Sign up newsletter
    form(onsubmit.prevent="submit()")
        input(v-model="placeholder" :value="value")
        button(type="button" @click="submit") 
            span Sign as { value }
</template>
<style scoped>
body {
    background-color: orange;
    color: var(--base-color);
}
h1, h2 {
    font-size: 2rem;
    color: #ff8800;
    justify-content: center;
}
h2 {
    font-size: 1rem;
}
input, button {
    border: none;
    background: transparent;
    color: inherit;
}
</style>

## DOM

Assume we have a year-based hourly report table with 10 columns, divided onto 12 section, each around 30 x 24 = 720 items and footer with totals. Data updates via external source trigger. Some of columns might be sortable. Data in cells are plain numbers, not interactivity needed.

Write a **draft** of render-efficient component to display that table. No need to implement all details, just cover all significant logic.

**Hint: use `render` and `innerHTML` manipulation, organise data before render.**

export const subscribeForData = (endpoint, onDataCallback) => {
    // third-party class
    return apifetcher(endpoint).
        on('data', (data) => {
            // data = [
            // {
            //     date: timestamp,
            //     values: [
            //         value,
            //         ... 9 more cols
            //     ],
            // },
            // ... 8759 more rows
            // ]
            onDataCallback(data)
        }).
        on('error', (error) => console.error)
}

new Vue({
    template: `<EfficientTable
    source="wss://localhost:8443/report"
    :renderFooter="false">
    <template v-slot:title>Annual COVID cases report</template>
    </EfficientTable>`
}).mount(window.body)

export default {
    name: "EfficientTable",
    
    // component implementation 
    // goes here: props, render, etc.
}