· 6 years ago · Sep 05, 2019, 02:24 PM
1import React, { PureComponent } from "react";
2import BaseStoreHeader from "../../common/header";
3import QueueAnim from 'rc-queue-anim';
4import { Layout, Tabs } from 'antd';
5
6
7import {
8 Categorys,
9 SingleCategory,
10 Wrapper,
11 SingleImage,
12 Clear,
13 Types,
14 SingleType,
15 ChosenType,
16 Images,
17} from "./style";
18
19import { HeaderSelectionContext } from "../../../../contexts/stores/csgo/header";
20
21const API = "http://localhost:8080";
22const Endpoint = "/getCSGOBaseData";
23const PrefixImage ="https://steamcommunity-a.akamaihd.net/economy/image/"
24
25const { TabPane} = Tabs;
26
27
28export default class CSGOStoreHeader extends PureComponent {
29 state = {
30 items:[
31 {
32 name: "Knife",
33 types:[
34 {
35 name: "Butterfly Knife",
36 variants: [
37 {
38 name: "Butterfly Knife | Night",
39 family: "Night",
40 image: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpotLu8JAllx8zJfAJG48ymmIWZqOf8MqjUxVRd4cJ5nqeXpdzx0FHgqhFqZmn6IY_DI1U8aFuB_FLql-nt1pe7tMybzHFmvCUj-z-DyAETkzcY"
41 }
42 ]
43 }
44 ]
45
46 },
47 {
48 name: "Pistol",
49 types:[
50 {
51 name: "usp",
52 variants: [
53 {
54 name: "usp Night",
55 family: "Night",
56 image: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpoo6m1FBRp3_bGcjhQ09-jq5WYh8j3KqnUjlRc7cF4n-SPrYrx2wKxqRY9ZGCgdYSScFJtZAnQ-VDryLjqgJG0uJybz3BgvXQm4mGdwUKgJSXXOg/62fx62f"
57 },
58 {
59 name: "usp day",
60 family: "Night",
61 image: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpoo6m1FBRp3_bGcjhQ08-mq4yOluHxIITck29Y_cg_373Fpo7z0QW18hBsY2_yJdKcIwZoaFnYqFXtw-juhcLtuJXNzSNhsj5iuyhKbQ0iow/62fx62f"
62 },
63 {
64 name: "usp late",
65 family: "Night",
66 image: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpoo6m1FBRp3_bGcjhQ08-mq4yOluHxIITZk2pH8Ysg2rmU9N-n21eyqkc9MjilIteRcFA8YwnX_lbvxurv1JG4ucufwXFgpGB8sj-OhYOg/62fx62f"
67 },
68 {
69 name: "usp early",
70 family: "Night",
71 image: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpoo6m1FBRp3_bGcjhQ08-mq4yOluHxIITZk2pH8Ysg2rmU9N-n21eyqkc9MjilIteRcFA8YwnX_lbvxurv1JG4ucufwXFgpGB8sj-OhYOg/62fx62f"
72 }
73 ]
74 }
75 ]
76
77 },
78 {
79 name: "Shotgun",
80 types:[
81 {
82 name: "schwere shrot",
83 variants: [
84 {
85 name: "Orange ddapt",
86 family: "Night",
87 image: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpouLWzKjhz3MzbcDNG09C_k4if2aSna-6FwzsJu5Ypj-uVrdyk2wzkqEQ4ZD3wJo7DcAQ2ZAmE-QC5xejxxcjrmUdg9dQ/62fx62f"
88 }
89 ]
90 },
91 {
92 name: "leichte schrot",
93 variants: [
94 {
95 name: "nackte wahrheit",
96 family: "Night",
97 image: "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpouLWzKjhjxszbYS9L4tuJmo-dlsj4OrzZglRd6dd2j6eR94ms3VXk-hc4Zm2hIYGccw44ZV7UrlG7wu28gJe1ucufm3Nn6yh0-z-DyKRYOT6Q/360fx360f"
98 }
99 ]
100 }
101 ]
102
103 }
104 ],
105 };
106
107
108 componentDidMount() {
109 fetch(API + Endpoint)
110 .then(response => response.json())
111 .then(data => this.setState({ items: data }))
112 .catch(err => console.log(err));
113 }
114
115 render() {
116 return (
117 <HeaderSelectionContext.Consumer>
118 {({
119 selectedCategory,
120 selectedType,
121 selectedVariant,
122 handleVariantSelection,
123 handleTypeSelection,
124 handleCategorySelection
125 }) => (
126 <BaseStoreHeader>
127 <Tabs
128 animated={{ inkBar: false, tabPane: false }}
129 activeKey= {selectedCategory.name}
130 style= {{textAlign: "center"}}
131 onTabClick={(key) => {
132 let newCategory = this.state.items.find(category => category.name === key);
133 handleCategorySelection(newCategory);
134 }}
135 >
136 {this.state.items.map(category => (
137 <TabPane
138 tab={category.name}
139 key={category.name}
140 style={{ textAlign: "center" }}
141 >
142 <QueueAnim duration= {0}interval = {200} leaveReverse={true} className="queue-Type">
143 {selectedCategory.types.map(type => (
144 <SingleType
145 onClick={() => {
146 handleTypeSelection(type);
147 }}
148 key={type.name}
149 >
150 {type.name}
151 </SingleType>
152 ))}
153 </QueueAnim>
154 <Clear/>
155 <QueueAnim interval = {200} leaveReverse={true} className="queue-Variants" style={{textAlign: "center"}}>
156 <SingleType>
157 selected
158 </SingleType>
159 {selectedType.variants.map(variant => (
160 <SingleImage
161 src={PrefixImage + variant.image}
162 key={variant.name}
163 onClick={() => {handleVariantSelection(variant.name)
164 }}
165 />
166 ))}
167 </QueueAnim>
168 </TabPane>
169 ))}
170 </Tabs>
171 </BaseStoreHeader>
172 )}
173 </HeaderSelectionContext.Consumer>
174 );
175 }
176}