add feed

.gitignore

@@ -29,6 +29,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 # vercel
-.vercel
+.vercel

src/components/CarouselPerfil/index.tsx

@@ -1,34 +1,14 @@
-import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import Router from 'next/router'
-
 import Carousel from "react-elastic-carousel";
 
-import { CarouselPerfilStyle } from "./styles";
-import api from '@/service/api';
-import React from 'react';
-import { toast } from 'react-toastify';
-
-import { UserCarousel } from '@/interface'
 import { CardContent, Typography } from '@material-ui/core';
 import { CardUserCarousel } from '@/styles/MaterialGuide/'
 
+import { UserCarousel } from '@/interface'
+import { CarouselPerfilStyle } from "./styles";
 
-export default function CarouselPerfil() {
-  const [userCarousel, setUserCarousel] = useState<any[]>([]);
-
-  useEffect(() => {
-    function fetchApiUnsplash() {
-      api.get('search/users?', {
-        params: {
-          query: 'usa',
-          client_id: process.env.NEXT_PUBLIC_UNSPLASH_API_KEY
-        }
-      }).then((response: any) => setUserCarousel(response.data.results)
-      ).catch(error => toast.warning(error.message));
-    }
-    fetchApiUnsplash();
-  }, [])
+export default function CarouselPerfil({ userCarousel }: any) {
 
   const handleRedirectUserPerfil = (username: string) => () => {
     Router.push(`/users/${username}`)

src/components/Feed/index.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Router from 'next/router'
+
+import Carousel from "react-elastic-carousel";
+
+import { CarouselFeedStyle } from "./styles";
+import api from '@/service/api';
+import React from 'react';
+import { toast } from 'react-toastify';
+
+import { Avatar, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, IconButton, Typography } from '@material-ui/core';
+import MoreVertOutlined from '@material-ui/icons/MoreVertOutlined';
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
+import ModeCommentOutlinedIcon from '@material-ui/icons/ModeCommentOutlined';
+import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined';
+import TurnedInNotOutlinedIcon from '@material-ui/icons/TurnedInNotOutlined';
+import FavoriteOutlinedIcon from '@material-ui/icons/FavoriteOutlined';
+
+import { CardFeedCarousel } from '@/styles/MaterialGuide'
+
+
+export default function CarouselFeed({ feedCarousel }: any) {
+  const [userData, setUserData] = useState<any[]>([]);
+
+  useEffect(() => {
+    function handleSetData() {
+      setUserData(feedCarousel);
+      console.log(userData);
+    }
+    handleSetData();
+  }, [feedCarousel])
+
+  const handleRedirectUserPerfil = (username: string) => () => {
+    Router.push(`/users/${username}`)
+  }
+
+  return (
+    <CarouselFeedStyle>
+      <Carousel
+        showArrows={false}
+        isRTL
+        verticalMode
+        itemPadding={[0, 5]}
+        breakPoints={
+          [
+            { width: 1, itemsToShow: 6 },
+            { width: 550, itemsToShow: 8 },
+            { width: 768, itemsToShow: 10 },
+            { width: 1200, itemsToShow: 12 },
+          ]
+        }
+      >
+        {userData?.map((feed: any, index: number) => (
+          <CardFeedCarousel key={index}>
+            <CardHeader
+              avatar={
+                <Avatar>
+                  <Image src={feed?.profile_image?.medium} alt={`Profile picture of ${feed?.username}`} width={56} height={56} />
+                </Avatar>
+              }
+              title={
+                <Typography variant="body2" onClick={handleRedirectUserPerfil(feed.username)}>{feed?.username}</Typography>
+              }
+              action={
+                <IconButton aria-label="settings">
+                  <MoreVertOutlined />
+                </IconButton>
+              }
+            />
+            <CardMedia
+              component="img"
+              height="510"
+              image={feed?.photos[0]?.urls?.full}
+              alt={`Profile picture of ${feed?.username}`}
+            />
+            <CardActions>
+              <section className="first-buttons">
+                <Checkbox
+                  icon={<ShareOutlinedIcon />}
+                  checkedIcon={<ShareOutlinedIcon />}
+                />
+                <Checkbox
+                  icon={<ModeCommentOutlinedIcon />}
+                  checkedIcon={<ModeCommentOutlinedIcon />}
+                />
+                <Checkbox
+                  icon={<FavoriteBorderIcon />}
+                  checkedIcon={<FavoriteOutlinedIcon />}
+                />
+              </section>
+              <Checkbox
+                icon={<TurnedInNotOutlinedIcon />}
+                checkedIcon={<TurnedInNotOutlinedIcon />}
+              />
+            </CardActions>
+            <CardContent>
+              <Typography variant="body2" component="p">
+                {feed?.username}
+              </Typography>
+            </CardContent>
+          </CardFeedCarousel>
+        ))}
+      </Carousel>
+    </CarouselFeedStyle >
+  );
+}

src/components/Feed/styles.ts

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+export const CarouselFeedStyle = styled.div`
+  width: 100%;
+  height: 100%;
+
+  a {
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .rec-slider-container {
+    padding: 0;
+    margin: 0;
+  }
+  .rec {
+    padding: 0;
+    margin: 0;
+  }
+  .rec-dot {
+    box-shadow: none;
+    border: none;
+    background: none;
+    box-shadow: none;
+  }
+  .rec-item-wrapper {
+    padding: 0;
+    width: 80px;
+  }
+  .MuiTypography-h2 {
+    color: #262626;
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;

src/pages/index.tsx

@@ -1,16 +1,41 @@
+import { useEffect, useState } from 'react';
 import { HomeStyled } from '@/styles/pages/home';
 
 import CarouselPerfil from '@/components/CarouselPerfil';
+import CarouselFeed from '@/components/Feed';
+
 import Header from '@/components/Header';
+import api from '@/service/api';
+import { toast } from 'react-toastify';
 
 export default function Home() {
+  const [userData, setUserData] = useState<any[]>([]);
+
+  useEffect(() => {
+    function fetchApiUnsplash() {
+      api.get('search/users?', {
+        params: {
+          query: 'usa',
+          client_id: process.env.NEXT_PUBLIC_UNSPLASH_API_KEY
+        }
+      }).then((response: any) => setUserData(response.data.results)
+      ).catch(error => toast.warning(error.message));
+    }
+    fetchApiUnsplash();
+  }, [])
+
   return (
     <HomeStyled>
       <Header />
 
-      <div className="home-carousel-content">
-        <CarouselPerfil />
+      <div className="home-content-mobile">
+        <CarouselPerfil userCarousel={userData} />
       </div>
+
+      <div className="home-content-mobile">
+        <CarouselFeed feedCarousel={userData} />
+      </div>
+
     </HomeStyled>
   )
 }

src/pages/users/[username].tsx

@@ -8,6 +8,7 @@ import {
   Button,
   Grid, Typography,
   CircularProgress,
+  Container,
 } from '@material-ui/core'
 
 import PersonRoundedIcon from '@material-ui/icons/PersonRounded';
@@ -17,8 +18,6 @@ import Header from '@/components/Header';
 
 import { UserPerfilStyled } from '@/styles/pages/user';
 
-import { UserInstagram, UserPhotosData } from '@/interface';
-
 interface UserPerfil {
   username: string;
 }
@@ -68,50 +67,52 @@ export default function UserPerfil() {
     <>
       <Header />
       <UserPerfilStyled>
-        {userInfor.map((user) => (
-          <Grid container direction="row" alignItems="center" spacing={2}>
-            <Grid container item xs={4}>
-              <div className="profile-picture">
-                <Image src={user?.profile_image?.medium} alt={`Perfil picture of ${username}`} width={95} height={95} />
-              </div>
-            </Grid>
-            <Grid container direction="row" xs={8} alignItems="center">
-              <Grid item xs={12}>
-                <Typography variant="h2" component="h1">{username}</Typography>
+        <Container>
+          {userInfor.map((user) => (
+            <Grid container direction="row" alignItems="center" justifyContent="center" spacing={2}>
+              <Grid container item xs={4}>
+                <div className="profile-picture">
+                  <Image src={user?.profile_image?.medium} alt={`Perfil picture of ${username}`} width={95} height={95} />
+                </div>
               </Grid>
-              <Grid item xs={12}>
-                <Button
-                  variant="outlined"
-                  style={{ marginTop: 15, padding: '0 16px' }}
-                >Enviar mensagem</Button>
-                <Button
-                  variant="outlined"
-                  style={{ marginTop: 15, padding: '0', marginLeft: 10 }}
-                ><PersonRoundedIcon /></Button>
+              <Grid container direction="row" xs={8} alignItems="center">
+                <Grid item xs={12}>
+                  <Typography variant="h2" component="h1">{username}</Typography>
+                </Grid>
+                <Grid item xs={12}>
+                  <Button
+                    variant="outlined"
+                    style={{ marginTop: 15, padding: '0 16px' }}
+                  >Enviar mensagem</Button>
+                  <Button
+                    variant="outlined"
+                    style={{ marginTop: 15, padding: '0', marginLeft: 10 }}
+                  ><PersonRoundedIcon /></Button>
+                </Grid>
               </Grid>
-            </Grid>
 
-            <Grid container direction="column" justifyContent="space-between">
-              <Typography variant="h1" component="h1">{user?.name}</Typography>
-              <div className="user-bio">
-                <Typography variant="h3" component="p">{user?.bio}</Typography>
-              </div>
-            </Grid>
+              <Grid container direction="column" justifyContent="space-between">
+                <Typography variant="h1" component="h1">{user?.name}</Typography>
+                <div className="user-bio">
+                  <Typography variant="h3" component="p">{user?.bio}</Typography>
+                </div>
+              </Grid>
 
-            <Grid container direction="row" justifyContent="center"
-              alignItems="center" spacing={1}  style={{ height: '550px', marginTop: 5 }}>
-              {isLoad ? <CircularProgress color="secondary" style={{ marginTop: 10 }} /> : (
-                <>
-                  {userPhotos.map((photo: any) => (
-                    <Grid item xs={4}>
-                      <Image src={photo?.urls?.regular} alt={`photo published of ${username}`} width={230} height={230} />
-                    </Grid>
-                  ))}
-                </>
-              )}
+              <Grid container direction="row" justifyContent="center"
+                alignItems="center" spacing={1} style={{ height: '550px', marginTop: 5 }}>
+                {isLoad ? <CircularProgress color="secondary" style={{ marginTop: 10 }} /> : (
+                  <>
+                    {userPhotos.map((photo: any) => (
+                      <Grid item xs={4}>
+                        <Image src={photo?.urls?.regular} alt={`photo published of ${username}`} width={230} height={230} />
+                      </Grid>
+                    ))}
+                  </>
+                )}
+              </Grid>
             </Grid>
-          </Grid>
-        ))}
+          ))}
+        </Container>
       </UserPerfilStyled>
     </>
   );