PXhkmsC9

1/*
2# AwesomeFramework Search Page
3
4## Synopsis
5The design team has sent us a new spec for the search page.
6Your task is to perform a search query and display the results after
7the FantastiSearch API returns you a list of results.
8
9## Assumptions
10
11Assume you have access to UI components available from AwesomeFramework.
12When a component’s property is updated, assume it automatically renders & redraws.
13```js
14let Text = { type: TextBox };
15Text.text = 'hello' //=> draws 'hello' onto the screen
16```
17
18A component can be auto-instantiated by a assigning it a type and then assigning
19it to a parent, e.g.:
20```js
21let myComp = { type: TextBox, text: 'Hello World' };
22myParent.Title = myComp;
23```
24
25Assume components have all of the same style properties that are available in CSS.
26The below will alpha down a component and scale it up, just like CSS.
27When these properties are updated, assume the component renders & redraws.
28```js
29let myComp = { type: TextBox, text: 'I can be lighter and bigger' };
30myComp.opacity = 0.5; //=> alpha down
31myComp.transform = 'scale(1.1)'; //=> scale up
32```
33
34Assume component layout is automatically handled by AwesomeFramework.
35
36## Component API
37### TextBox
38property   | type   | description
39-----------|--------|------------------
40text       | string | text to display
41
42### Image
43property   | type   | description
44-----------|--------|----------------------
45src        | string | image url to display
46
47### Row
48property.  | type   | description
49-----------|--------|-----------------------------------------------
50items      | array  | list of components to be laid out horizontally
51
52### Tile
53property   | type   | description
54-----------|--------|-----------------------
55title      | string | title of tile data
56imageUrl   | string | background image path
57
58*/
59
60class App extends AwesomeFramework.App {
61  constructor() {
62    super.constructor();
63    this.SearchPage = { type: SearchPage };
64  }
65}
66
67
68class Tile extends AwesomeFramework.Component {
69  constructor() {
70    super.constructor();
71    this.Image = {
72      type: Image,
73      opacity: 1,
74      transform: 'scale(1)'
75    };
76    this.Title = {
77      type: TextBox,
78      opacity: 0,
79      backgroundColor: 'gray'
80    };
81    this.Border = {
82      type: AwesomeFramework.Component,
83      opacity: 0,
84      color: 'transparent',
85      borderWidth: 5,
86      borderColor: 'white',
87      borderRadius: 10
88    };
89  }
90
91  set title(title) {
92    this.Title.text = title;
93  }
94
95  set imageUrl(imageUrl) {
96    this.Image.src = imageUrl
97  }
98
99  // focus UI state
100  _focus() {
101  }
102
103  // unfocus UI state
104  _unfocus() {
105  }
106}
107
108// Search always returns 1 row of top 4 results
109const apiResponse = async (query) => {
110  return {
111    title: `${query} Results`,
112    results: new Array(4).fill().map((value, idx) => ({
113      title: `Result ${query} ${idx}`,
114      image: `http://FantastiSearch.com/${query}/${idx}`
115    }))
116  };
117};
118
119class SearchPage extends AwesomeFramework.Page {
120  constructor() {
121    super.constructor();
122    // instantiate template
123    this.QueryString = { type: Textbox };
124    this.Keyboard = { type: Keyboard };
125    this.RowTitle = { type: Textbox };
126    this.Results = { type: Row };
127  }
128
129  // triggered when SearchPage is first attached to the render tree
130  _attach() {
131  }
132
133  // triggered when any Keyboard key is entered
134  _keyPressed(key) {
135  }
136}