|
1 | | -/* |
2 | | - * Copyright 2020 Google LLC |
3 | | - * |
4 | | - * Licensed under the Apache License, Version 2.0 (the 'License'); |
5 | | - * you may not use this file except in compliance with the License. |
6 | | - * You may obtain a copy of the License at |
7 | | - * |
8 | | - * https://www.apache.org/licenses/LICENSE-2.0 |
9 | | - * |
10 | | - * Unless required by applicable law or agreed to in writing, software |
11 | | - * distributed under the License is distributed on an 'AS IS' BASIS, |
12 | | - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
13 | | - * See the License for the specific language governing permissions and |
14 | | - * limitations under the License. |
15 | | - */ |
16 | | - |
17 | | -import React, { useState, useEffect } from 'react'; |
18 | | - |
19 | | -import CodeArea from 'components/CodeArea'; |
20 | | -import ConceptOptionList from 'components/ConceptOptionList'; |
21 | | -import TextDescription from 'components/TextDescription'; |
22 | | -import styles from './style.module.css'; |
23 | | -import { reactLoadingPatterns } from 'utils/data/concepts'; |
24 | | - |
25 | | -const checkHashWithPatternId = hashWithoutSharp => { |
26 | | - const isMatchedWithPatternId = reactLoadingPatterns.findIndex(reactLoadingPattern => reactLoadingPattern.id === hashWithoutSharp) > -1; |
27 | | - return isMatchedWithPatternId; |
28 | | -}; |
29 | | - |
30 | | -const ReactLoadingPatterns = () => { |
31 | | - const [selectedPatternId, setSelectedPatternId] = useState(reactLoadingPatterns[0].id); |
32 | | - useEffect(() => { |
33 | | - const hash = window.location.hash; |
34 | | - const hashWithoutSharp = hash.replace('#', ''); |
35 | | - if (checkHashWithPatternId(hashWithoutSharp)) { |
36 | | - setSelectedPatternId(hashWithoutSharp); |
37 | | - } |
38 | | - }, []); |
39 | | - |
40 | | - const selectPatternHandler = event => { |
41 | | - window.history.pushState('object or string', 'Title', `/#${event.currentTarget.value}`); |
42 | | - setSelectedPatternId(event.currentTarget.value); |
43 | | - }; |
44 | | - |
45 | | - return ( |
46 | | - <div className={styles['root']}> |
47 | | - <h2>React Loading Patterns</h2> |
48 | | - <div className={styles['flex-container']}> |
49 | | - <ConceptOptionList |
50 | | - selectOption={selectPatternHandler} |
51 | | - selectedOptionId={selectedPatternId} /> |
52 | | - <CodeArea |
53 | | - className={styles['code-area']} |
54 | | - selectedPatternId={selectedPatternId} /> |
55 | | - </div> |
56 | | - <TextDescription selectedPatternId={selectedPatternId} /> |
57 | | - </div> |
58 | | - ); |
59 | | -}; |
60 | | - |
61 | | -export default ReactLoadingPatterns; |
| 1 | +/* |
| 2 | + * Copyright 2020 Google LLC |
| 3 | + * |
| 4 | + * Licensed under the Apache License, Version 2.0 (the 'License'); |
| 5 | + * you may not use this file except in compliance with the License. |
| 6 | + * You may obtain a copy of the License at |
| 7 | + * |
| 8 | + * https://www.apache.org/licenses/LICENSE-2.0 |
| 9 | + * |
| 10 | + * Unless required by applicable law or agreed to in writing, software |
| 11 | + * distributed under the License is distributed on an 'AS IS' BASIS, |
| 12 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | + * See the License for the specific language governing permissions and |
| 14 | + * limitations under the License. |
| 15 | + */ |
| 16 | + |
| 17 | +import React, { useState, useEffect } from 'react'; |
| 18 | + |
| 19 | +import CodeSnippetArea from 'components/CodeSnippetArea'; |
| 20 | +import ConceptOptionList from 'components/ConceptOptionList'; |
| 21 | +import TextDescription from 'components/TextDescription'; |
| 22 | +import styles from './style.module.css'; |
| 23 | +import { reactLoadingPatterns } from 'utils/data/concepts'; |
| 24 | + |
| 25 | +const checkHashWithPatternId = hashWithoutSharp => { |
| 26 | + const isMatchedWithPatternId = reactLoadingPatterns.findIndex(reactLoadingPattern => reactLoadingPattern.id === hashWithoutSharp) > -1; |
| 27 | + return isMatchedWithPatternId; |
| 28 | +}; |
| 29 | + |
| 30 | +const ReactLoadingPatterns = () => { |
| 31 | + const [selectedPatternId, setSelectedPatternId] = useState(reactLoadingPatterns[0].id); |
| 32 | + useEffect(() => { |
| 33 | + const hash = window.location.hash; |
| 34 | + const hashWithoutSharp = hash.replace('#', ''); |
| 35 | + if (checkHashWithPatternId(hashWithoutSharp)) { |
| 36 | + setSelectedPatternId(hashWithoutSharp); |
| 37 | + } |
| 38 | + }, []); |
| 39 | + |
| 40 | + const selectPatternHandler = event => { |
| 41 | + window.history.pushState('object or string', 'Title', `/#${event.currentTarget.value}`); |
| 42 | + setSelectedPatternId(event.currentTarget.value); |
| 43 | + }; |
| 44 | + |
| 45 | + return ( |
| 46 | + <div className={styles['root']}> |
| 47 | + <h2>React Loading Patterns</h2> |
| 48 | + <div className={styles['flex-container']}> |
| 49 | + <ConceptOptionList |
| 50 | + selectOption={selectPatternHandler} |
| 51 | + selectedOptionId={selectedPatternId} /> |
| 52 | + <CodeSnippetArea |
| 53 | + className={styles['code-area']} |
| 54 | + selectedPatternId={selectedPatternId} /> |
| 55 | + </div> |
| 56 | + <TextDescription selectedPatternId={selectedPatternId} /> |
| 57 | + </div> |
| 58 | + ); |
| 59 | +}; |
| 60 | + |
| 61 | +export default ReactLoadingPatterns; |
0 commit comments