###### tags: `tests`
# react/react native test

## Task 1: Design a simple UI screen with buttons and grid-like layout to display/adjust some options

- design:
https://xd.adobe.com/view/cec9bcd8-cc21-4b82-45af-c034e2f180c7-b8f8/screen/0df4ebee-eefd-4d38-ac39-aebd1dfadacb/
- All values are static.
- The navigation bar is not required

### Definition of done :

1. The app should have just one screen from the xd design
2. App won’t have navigation
3. The app should look and work the same way on all platforms(in a browser, on IOS and android device). 'React Native for Web' should be used for the browser version.
4. use flex for layout
5. use best dev/design practices
6. Make the design responsive for different screens
- elaborate and explain your reasoning: which components/visuals you decided to make responsive and which you didnt and why.
- specifically describe how you are handling fonts

### Notice :

- you’re free to use any ReactNative design framework
- you’re free to use any boilerplate including RN forWeb (like https://www.npmjs.com/package/create-react-native-web-app)

### Hooks questions
1. Adjust the following hook which initializes some API. Pre-conditions are:

- the initializeAPI function should be called strictly once during lifecycle of the component using that hook.
- onInitialized callback function may be changed during initialization
- after initialization only the latest (value of) onInitialized callback passed should be invoked
- we’re assuming the initialization never fails, so don’t need to add error handling

const useMyAPI = onInitialized => {
 useEffect(() => {
   initializeAPI().then(onInitialized)
 }, [])
}

2. Optimize the following list’s render. Which are the (at least) 2 things missing in the current implementation and how do they affect the rendering process ? Flow typing added just to describe `items` format, you're free to use plain JS in the solution.

// @flow

type Item {
  id: string,
  title: string,
}

type AppProps {
  items: $ReadOnlyArray<Item>,
}
 
const App = (props: AppProps) => {
 const renderItem = (item: Item, index: number) => (
   <li key={index} onClick={() => console.log(item)}>
     {item.title}
   </li>
 )
 
 return (
   <ul>
     {props.items.map(renderItem)}
   </ul>
 );
}

3. The following hook was designed to debounce value changes. It should change output value each time the source value stops changing (with an ms time gap, e.g. if no changes during this amount of milliseconds - it returns the latest value). What’s wrong with its implementation ? Which issues we could have with it and why ? Rewrite this hook and provide the working solution which doesn’t violate the hooks rules.

import { useEffect, useState } from 'react';
import { debounce } from 'lodash'
 
const useDebouncedValue = (value, ms = 100) => {
 const [debounced, setDebounced] = useState(value)
 
 useEffect(debounce(() => {
   setDebounced(value)
 }, ms), [ms, setDebounced, value])
 
 return debounced
}

## Bugfix
- The following component should display a notification each time when the user switches to another tab / application. The notification can be dismissed by clicking the button.
- It is also a part of react-native-web application so it should work in the browser, on iOS and on Android.

import React from 'react'
import { StyleSheet, Text } from 'react-native'

const Test = () => {
  const [notify, setNotify] = useState(false)

  const toggleNotify = useCallback(() => {
    setNotify(!notify)
  }, [])

  useEffect(() => {
    window.addEventListener("blur", (e) => {
      toggleNotify()
    })
  })

  return (
    <View style={styles.container}>
      {notify && (
        <View style={styles.notification}>
        <Text style={styles.label}>Don't forgot to save the changes Your did</Text>
        <Button style={styles.button} title="Dismiss"onClick={onDismiss} />
        </View>
      )}
      <Text style={styles.label}>Some UI would be here...</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {},
  label: {},
  notifiction: {},
  button: {}
})

export default Test

1. Answer the following questions
1. Would the component work on all platforms?
2. Why does the button click doesn’t have any effect? And how to fix it?
3. What are 2 things missing in useEffect to make codemore robust, correct, performant?
4. What else could be improved and/or simplified in thecode?
2. fix the code according to your above answers