From 7aa4b9fb5c92a5c84e866d10d0f7b4e723d974c2 Mon Sep 17 00:00:00 2001
From: Lucas Teixeira <lucas.teixeira@webjump.com.br>
Date: Sun, 15 Nov 2020 13:24:14 -0300
Subject: [PATCH] WJ-117 - New: FIlmography animation;

---
 src/components/Modal/index.tsx       |  2 +-
 src/containers/Filmography/index.tsx | 93 ++++++++++++++--------------
 src/containers/Filmography/styles.ts |  7 ++-
 3 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index e94e268..21a59de 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 
 import { useModal } from 'components/Modal/hooks';
 import StyleProps from 'components/Modal/types/StyleProps';
diff --git a/src/containers/Filmography/index.tsx b/src/containers/Filmography/index.tsx
index 5129868..928f7c0 100644
--- a/src/containers/Filmography/index.tsx
+++ b/src/containers/Filmography/index.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
 
 import { getEntityRoute } from 'shared/helpers';
 import { Color } from 'shared/enums';
@@ -51,55 +52,57 @@ const Filmography: React.FC<Props> = ({
   }, [data]);
 
   return (
-    <Wrapper theme={theme} background={background} color={color}>
-      <Container>
-        {title && (
-          <Title theme={theme} color={color}>
-            {title}
-          </Title>
-        )}
+    <AnimatePresence>
+      <Wrapper theme={theme} background={background} color={color}>
+        <Container>
+          {title && (
+            <Title theme={theme} color={color}>
+              {title}
+            </Title>
+          )}
 
-        {isLoading && <FilmographyLoading />}
+          {isLoading && <FilmographyLoading />}
 
-        {!isLoading && data.length > 0 && (
-          <>
-            <ListContainer>
-              {parsedData.map((entity: any) => (
-                <ItemContainer
-                  key={entity.id}
-                  onClick={() => handleRedirect(entity)}
-                >
-                  <YearLabel>{entity.year} - </YearLabel>
-                  <MovieName>{entity.title || entity.name}</MovieName>
-                  <CharacterName>
-                    {entity.character && ` como ${entity.character}`}
-                  </CharacterName>
-                  {entity.episodeCount && (
-                    <EpisodeCount>
-                      {entity.episodeCount > 1
-                        ? ` (${entity.episodeCount} episódios)`
-                        : ` (${entity.episodeCount} episódio)`}
-                    </EpisodeCount>
-                  )}
-                </ItemContainer>
-              ))}
-            </ListContainer>
+          {!isLoading && data.length > 0 && (
+            <>
+              <ListContainer>
+                {parsedData.map((entity: any) => (
+                  <ItemContainer
+                    key={entity.id}
+                    onClick={() => handleRedirect(entity)}
+                  >
+                    <YearLabel>{entity.year} - </YearLabel>
+                    <MovieName>{entity.title || entity.name}</MovieName>
+                    <CharacterName>
+                      {entity.character && ` como ${entity.character}`}
+                    </CharacterName>
+                    {entity.episodeCount && (
+                      <EpisodeCount>
+                        {entity.episodeCount > 1
+                          ? ` (${entity.episodeCount} episódios)`
+                          : ` (${entity.episodeCount} episódio)`}
+                      </EpisodeCount>
+                    )}
+                  </ItemContainer>
+                ))}
+              </ListContainer>
 
-            {parsedData?.length < data?.length && (
-              <More onClick={handleMore}>
-                <Button theme="light" background={Color.Transparent}>
-                  Ver Mais
-                </Button>
-              </More>
-            )}
-          </>
-        )}
+              {parsedData?.length < data?.length && (
+                <More onClick={handleMore}>
+                  <Button theme="light" background={Color.Transparent}>
+                    Ver Mais
+                  </Button>
+                </More>
+              )}
+            </>
+          )}
 
-        {!isLoading && data.length === 0 && (
-          <MessageContainer>{message}</MessageContainer>
-        )}
-      </Container>
-    </Wrapper>
+          {!isLoading && data.length === 0 && (
+            <MessageContainer>{message}</MessageContainer>
+          )}
+        </Container>
+      </Wrapper>
+    </AnimatePresence>
   );
 };
 
diff --git a/src/containers/Filmography/styles.ts b/src/containers/Filmography/styles.ts
index ca61ac7..5809e95 100644
--- a/src/containers/Filmography/styles.ts
+++ b/src/containers/Filmography/styles.ts
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { motion } from 'framer-motion';
 
 import DefaultProps from 'shared/types';
 import { Container as DefaultContainer } from 'components/Layout';
@@ -43,7 +44,11 @@ export const ListContainer = styled.div`
   transition: 0.3s height;
 `;
 
-export const ItemContainer = styled.div`
+export const ItemContainer = styled(motion.div).attrs(() => ({
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+}))`
   font-size: ${Size.Default};
   color: ${Color.Text};
   padding: ${Size.Medium} 0;