LucasCalazans#73 - Add categories (From API) to localStorage and Skel…

…eton
glaucomariano · Apr 29, 2019 · c7a52b9 · c7a52b9
1 parent 2416b07
commit c7a52b9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 43 deletions.
diff --git a/src/components/Skeleton/__stories__/Skeleton.jsx b/src/components/Skeleton/__stories__/Skeleton.jsx
@@ -6,14 +6,12 @@ const stories = storiesOf('Skeleton', module);
 
 stories.add('Example 1', () => {
     return (
-        <Fragment>
-            <SkeletonWrapper>
-                <SkeletonItem />
-                <SkeletonItem />
-                <SkeletonItem />
-                <SkeletonItem />
-            </SkeletonWrapper>
-        </Fragment>
+        <SkeletonWrapper>
+            <SkeletonItem />
+            <SkeletonItem />
+            <SkeletonItem />
+            <SkeletonItem />
+        </SkeletonWrapper>
     );
 });
 stories.add('Example 2', () => {
@@ -38,16 +36,14 @@ stories.add('Example 2', () => {
 });
 stories.add('Example 3', () => {
     return (
-        <Fragment>
-            <SkeletonWrapper>
-                <SkeletonItem height="140px" space="40px" />
+        <SkeletonWrapper>
+            <SkeletonItem height="140px" space="40px" />
+            <SkeletonItem />
+            <SkeletonItem width="60%" />
+            <SkeletonWrapper type="row">
+                <SkeletonItem />
                 <SkeletonItem />
-                <SkeletonItem width="60%" />
-                <SkeletonWrapper type="row">
-                    <SkeletonItem />
-                    <SkeletonItem />
-                </SkeletonWrapper>
             </SkeletonWrapper>
-        </Fragment>
+        </SkeletonWrapper>
     );
 });
diff --git a/src/components/Skeleton/index.jsx b/src/components/Skeleton/index.jsx
@@ -17,16 +17,8 @@ export const SkeletonWrapper = styled.span`
     min-width: 16px;
     flex-direction: ${({ type }) => (type === 'row' ? 'row' : 'column')};
     box-sizing: border-box;
-    &.skeleton-phone {
-        ${media.tablet`
-            display: none;
-        `}
-    }
-    &.skeleton-desktop {
-        ${media.phone`
-            display: none;
-        `}
-    }
+    ${({ phone }) => phone && media.tablet`display: none`};
+    ${({ desktop }) => desktop && media.phone`display: none`}
 `;
 
 export const SkeletonItem = styled.span`

diff --git a/src/containers/Topmenu/index.jsx b/src/containers/Topmenu/index.jsx
@@ -21,43 +21,39 @@ class Topmenu extends Component {
         isLoading: true,
     };
 
-    componentWillMount() {
-        localStorage.getItem('categories') &&
+    componentDidMount() {
+        const localCategories = localStorage.getItem('categories');
+        if (localCategories) {
             this.setState({
-                categories: JSON.parse(localStorage.getItem('categories')),
+                categories: JSON.parse(localCategories),
                 isLoading: false,
             });
-    }
-
-    componentDidMount = () => {
-        let newCategories = this.getCategories();
-        if (!localStorage.getItem('categories')) {
-            newCategories;
         }
-    };
+        this.getCategories();
+    }
 
     getCategories = async () => {
         const url = BaseApi.getUrl('categories?_limit=4');
         const response = await fetch(url);
         const categories = await response.json();
-        this.setState(() => ({ categories, isLoading: false }));
+
+        this.setState({ categories, isLoading: false }, () => {
+            localStorage.setItem('categories', JSON.stringify(categories));
+        });
     };
 
-    componentWillUpdate(nextProps, nextState) {
-        localStorage.setItem('categories', JSON.stringify(nextState.categories));
-    }
     render() {
         const { isLoading } = this.state;
         if (isLoading) {
             return (
                 <Fragment>
-                    <SkeletonWrapper width="auto" className="skeleton-phone">
+                    <SkeletonWrapper width="auto" phone>
                         <SkeletonItem width="28px" height="4px" />
                         <SkeletonItem width="28px" height="4px" />
                         <SkeletonItem width="28px" height="4px" />
                     </SkeletonWrapper>
                     <MenuCont>
-                        <SkeletonWrapper type="row" width={`${500}px`}>
+                        <SkeletonWrapper type="row" width="500px">
                             <SkeletonItem />
                             <SkeletonItem />
                             <SkeletonItem />