Merge pull request #12 from guicoelhodev/develop

Create posts to show into Home page

package.json

@@ -16,6 +16,7 @@
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",
+    "@types/react-lottie": "^1.2.6",
     "@vitejs/plugin-react": "^3.0.0",
     "axios": "^1.2.1",
     "eslint": "8.26.0",
@@ -27,6 +28,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.41.0",
     "react-icons": "^4.6.0",
+    "react-lottie": "^1.2.3",
     "react-query": "^3.39.2",
     "sharp": "^0.31.3",
     "styled-components": "^5.3.6",

src/components/FC/Chat/index.tsx

@@ -9,7 +9,7 @@ import { SearchFriends } from './SearchFriends';
 import { listFriendsActiveMock } from './tmpMocks';
 
 import { UserActionsContext } from '@context/userActions';
-import { handleChatState } from 'src/reducers/globalComponentsReducer/actions';
+import { handleChatStateActions } from 'src/reducers/globalComponentsReducer/actions';
 
 import * as S from './style';
 
@@ -28,7 +28,9 @@ export const Chat: React.FC = () => {
       <S.Header open={globalComponentsState.chat}>
         <p>Chat</p>
 
-        <button onClick={() => dispatchGlobalComponents(handleChatState())}>
+        <button
+          onClick={() => dispatchGlobalComponents(handleChatStateActions())}
+        >
           <BsChevronUp />
         </button>
       </S.Header>

src/components/FC/ModalLanguages/index.tsx

@@ -1,17 +1,17 @@
 import { Modal } from '@components/UI/Modal';
-import React, { Dispatch, SetStateAction, useMemo } from 'react';
+import { UserActionsContext } from '@context/userActions';
+import React, { useContext, useMemo } from 'react';
 import { useState } from 'react';
 import { languages } from 'src/global/data/languages';
+import { handleUserLanguagesActions } from 'src/reducers/globalComponentsReducer/actions';
 
 import * as S from './style';
 
-interface IModalLanguages {
-  setState: Dispatch<SetStateAction<boolean>>;
-}
-
-export const ModalLanguages: React.FC<IModalLanguages> = ({ setState }) => {
+export const ModalLanguages: React.FC = () => {
   const [inputValue, setInputValue] = useState('');
   const [languagesSelected, setLanguagesSelected] = useState(['']);
+  const { globalComponentsState, dispatchGlobalComponents } =
+    useContext(UserActionsContext);
 
   let filteredLanguages = languages.filter((item) =>
     item.name.includes(inputValue)
@@ -38,14 +38,22 @@ export const ModalLanguages: React.FC<IModalLanguages> = ({ setState }) => {
     } else {
       let userJson = JSON.parse(tmpUser);
       userJson = { ...userJson, languages: languagesSelected };
-      localStorage.setItem('@USER_CREDENTIALS', JSON.stringify(userJson));
+      return localStorage?.setItem(
+        '@USER_CREDENTIALS',
+        JSON.stringify(userJson)
+      );
     }
 
-    setState(false);
+    dispatchGlobalComponents(handleLanguagesUser());
   };
 
   return (
-    <Modal setModalState={setState} title="Favorite tools">
+    <Modal
+      handleModalState={() =>
+        dispatchGlobalComponents(handleUserLanguagesActions())
+      }
+      title="Favorite tools"
+    >
       <S.Container>
         <S.SearchContainer>
           <input
@@ -59,7 +67,7 @@ export const ModalLanguages: React.FC<IModalLanguages> = ({ setState }) => {
               <S.Checkbox
                 type="checkbox"
                 defaultChecked={
-                  userSession?.languages.includes(lang.name) ? true : false
+                  userSession?.languages?.includes(lang.name) ? true : false
                 }
                 onChange={({ target }) => {
                   if (target.checked)

src/components/UI/Layout/index.tsx

@@ -19,13 +19,14 @@ import {
 } from 'react-icons/ai';
 import { useRouter } from 'next/router';
 import { UserActionsContext } from '@context/userActions';
-import { handleChatState } from 'src/reducers/globalComponentsReducer/actions';
+import { handleChatStateActions } from 'src/reducers/globalComponentsReducer/actions';
 
 interface ILayout {
   children: ReactNode;
+  fill?: boolean;
 }
 
-export const Layout: React.FC<ILayout> = ({ children }) => {
+export const Layout: React.FC<ILayout> = ({ children, fill }) => {
   const { theme, themeToggler } = useContext(ThemeContext);
   const { globalComponentsState, dispatchGlobalComponents } =
     useContext(UserActionsContext);
@@ -61,7 +62,7 @@ export const Layout: React.FC<ILayout> = ({ children }) => {
     {
       title: 'Chat',
       icon: <BsFillChatDotsFill />,
-      onClick: () => dispatchGlobalComponents(handleChatState()),
+      onClick: () => dispatchGlobalComponents(handleChatStateActions()),
     },
   ];
 
@@ -80,7 +81,7 @@ export const Layout: React.FC<ILayout> = ({ children }) => {
           <Image src={SocialLogo} alt="aaa" />
         </aside>
       </S.Header>
-      <S.PageContainer>{children}</S.PageContainer>
+      <S.PageContainer fill={fill}>{children}</S.PageContainer>
       <S.NavigatePages>
         {navList.map((item) => (
           <S.ButtonNav

src/components/UI/Layout/style.ts

@@ -1,5 +1,9 @@
 import styled from 'styled-components';
 
+interface IPageContainer {
+  fill?: boolean;
+}
+
 export const Container = styled.div`
   position: relative;
   background-color: ${(props) => props.theme.primaryBg};
@@ -8,8 +12,8 @@ export const Container = styled.div`
   height: 100%;
 `;
 
-export const PageContainer = styled.div`
-  max-width: 80rem;
+export const PageContainer = styled.div<IPageContainer>`
+  max-width: ${(props) => (props.fill ? 'none' : '80rem')};
   padding-right: 4rem;
   margin: 0 auto;
   min-height: calc(${(props) => props.theme.maxHeight} - 4rem);

src/components/UI/Modal/index.tsx

@@ -3,14 +3,14 @@ import { AiOutlineCloseCircle } from 'react-icons/ai';
 import * as S from './style';
 
 interface IModal {
-  setModalState: Dispatch<SetStateAction<boolean>>;
+  handleModalState: any;
   title: string;
   children: ReactNode;
   aspectRatio?: number;
   maxWidth?: string;
 }
 export const Modal: React.FC<IModal> = ({
-  setModalState,
+  handleModalState,
   title,
   children,
   maxWidth,
@@ -22,10 +22,7 @@ export const Modal: React.FC<IModal> = ({
         <header>
           <h3>{title}</h3>
 
-          <button
-            title="Close modal"
-            onClick={() => setModalState((prev) => !prev)}
-          >
+          <button title="Close modal" onClick={() => handleModalState()}>
             <AiOutlineCloseCircle />
           </button>
         </header>

src/components/UI/buttons/Button/index.tsx

@@ -0,0 +1,26 @@
+import { darkTheme } from '@style/theme';
+import React, { MouseEvent, ReactNode } from 'react';
+import * as S from './style';
+
+export interface PropsBtn {
+  color?: keyof typeof darkTheme;
+  bg?: string;
+  radius?: string;
+  svgDirection?: 'left' | 'right';
+  svgColor?: keyof typeof darkTheme;
+  borderColor?: string;
+  boxShadow?: string;
+}
+
+interface IButton extends PropsBtn {
+  children: ReactNode;
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const Button: React.FC<IButton> = (props) => {
+  return (
+    <S.Container {...props} onClick={props.onClick}>
+      {props.children}
+    </S.Container>
+  );
+};

src/components/UI/buttons/Button/style.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { PropsBtn } from '.';
+
+export const Container = styled.button<PropsBtn>`
+  height: 100%;
+  cursor: pointer;
+  padding: 0.3rem 0.6rem;
+  background: ${({ bg, theme }) => (bg ? bg : theme.primaryColor)};
+  color: ${({ color, theme }) => (color ? theme[color] : '#000')};
+  box-shadow: ${({ boxShadow }) => boxShadow};
+
+  border-radius: ${({ radius }) => (radius ? radius : '30px')};
+
+  display: flex;
+  align-items: center;
+  border: 1px solid ${({ borderColor, bg }) => (borderColor ? borderColor : bg)};
+
+  svg {
+    width: 20px;
+    height: 20px;
+    fill: ${({ svgColor, theme }) => (svgColor ? theme[svgColor] : '#000')};
+  }
+
+  p {
+    color: inherit;
+    margin-left: ${({ svgDirection }) =>
+      svgDirection === 'left' ? '10px' : 0};
+    margin-right: ${({ svgDirection }) =>
+      svgDirection === 'right' ? '10px' : 0};
+    font-size: 1rem;
+    font-family: 'Montserrat', sans-serif;
+  }
+`;

src/content/Advice/index.tsx

@@ -0,0 +1,72 @@
+import { NextPage } from 'next';
+import Head from 'next/head';
+import Image from 'next/image';
+import { useContext } from 'react';
+import { IThemeContext, ThemeContext } from '../../context/theme';
+import { BsFillSunFill, BsFillMoonFill } from 'react-icons/bs';
+import Figma from '../../assets/svg/figma_logo.png';
+
+import * as S from './style';
+import { NextPageAuthenticated } from '@auth';
+import Link from 'next/link';
+import { Layout } from '@components/UI/Layout';
+import { Chat } from '@components/FC/Chat';
+
+const Advice: NextPageAuthenticated = () => {
+  const { theme, themeToggler } = useContext(ThemeContext);
+
+  return (
+    <Layout>
+      <Chat />
+      <S.Container>
+        <Head>
+          <title>Social Dev | Advice</title>
+        </Head>
+
+        <S.AdviceContainer>
+          <h1>Calm down</h1>
+
+          <S.ToggleTheme>
+            <button onClick={() => themeToggler()}>
+              {theme === 'light' ? <BsFillSunFill /> : <BsFillMoonFill />}
+            </button>
+          </S.ToggleTheme>
+          <h2>
+            We are working hard to create a first version of social dev app
+          </h2>
+
+          <S.Section>
+            <p>But..</p>
+            <span> You can see our figma UI design, to kill the curiosity</span>
+
+            <article>
+              <S.FigmaButton>
+                <a
+                  href="https://www.figma.com/file/aM023hg9G2bOPsLHfGUSaW/Social-dev?node-id=1%3A672"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <Image height={25} src={Figma} alt="figma logo content" />
+                  <p>Check figma project</p>
+                </a>
+              </S.FigmaButton>
+            </article>
+          </S.Section>
+          <Image
+            alt="confused anime girl gif"
+            className="confused-girl"
+            width={200}
+            height={200}
+            src={'https://media.tenor.com/zVtSqLENqIIAAAAj/jinx-flipzflops.gif'}
+          />
+
+          <Link href="/profile">Perfil pessoal</Link>
+        </S.AdviceContainer>
+      </S.Container>
+    </Layout>
+  );
+};
+
+export default Advice;
+
+Advice.auth = true;