Feature/user profile

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,12 +13,15 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-redux": "^8.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.4",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
+    "redux-saga": "^1.2.1",
     "styled-components": "^5.3.5",
     "typescript": "^4.8.2",
     "uuid": "^8.3.2",
@@ -48,6 +52,8 @@
     ]
   },
   "devDependencies": {
-    "@types/redux-logger": "^3.0.9"
+    "@types/redux-logger": "^3.0.9",
+    "@types/styled-components": "^5.1.26",
+    "@types/uuid": "^8.3.4"
   }
 }

src/assests/services/index.tsx

@@ -0,0 +1,5 @@
+export const URL = async () => {
+    const response = await fetch("https://api.github.com/users");
+    const data = await response.json();
+    return data;
+}

src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: any;
+    export default content;
+  }

src/index.css

@@ -1,13 +1,7 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+*{
+  padding:0;
+  margin:0;
 }
+
+

src/index.tsx

@@ -3,6 +3,7 @@ import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import store from './store/index';
+import "./index.css";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement

src/routes/Home/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+function Home() {
+   const logoutHandler = ():void=>{
+    localStorage.clear();
+}
+  return (<>
+    <div>Home Page</div>
+    <button onClick={logoutHandler}>Home Page</button>
+    </>
+  )
+}
+
+export default Home

src/routes/Profile/index.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react'
+import { userProfile } from '../../store/actions/index';
+import { Dispatch } from "redux";
+import { connect } from "react-redux";
+import { useSelector } from 'react-redux'
+import FaSpinner from 'react-icons';
+import styled from 'styled-components';
+import { BarLoader } from "react-spinners";
+import { profileReducer } from "../../store/reducer/index"
+
+interface profileProps {
+  requestData: () => void,
+  users: any,
+  isLoading: boolean
+}
+
+
+const Container = styled.div`
+display: flex;
+flex-wrap: wrap;
+width:100%;
+height:100%;
+justify-content:center;
+`
+const ProfileImage = styled.img`
+height:80%;
+width:80%;
+margin-top:5%;
+border-radius: 10px;
+`
+
+const ProfileItem = styled.div`
+// border:1px solid black;
+width:20%;
+height:100%;
+display:flex;
+flex-direction:column;
+align-items:center;
+margin-top:25px;
+margin-right:35px;
+border-radius: 15px;
+`
+
+const UserDetailes = styled.div`
+display:flex;
+margin-top:3%;
+justify-content:center;
+`
+
+const UserName = styled.div`
+width:100%;
+font-size:20px;
+font-weight:bold;
+font-family: 'Inter', sans-serif;`
+
+const Profile = (props: profileProps) => {
+
+  useEffect(() => {
+    props.requestData()
+  }, [])
+
+  const userProfile = (url: string) => {
+    return window.open(url)
+  }
+
+  return (<Container>
+    {props.isLoading ? <BarLoader /> : (props.users.map((obj: any) => {
+      return (
+        <>
+          <ProfileItem key={obj.id} onClick={() => userProfile(obj.url)}>
+            <ProfileImage src={obj.avatar_url} />
+            <UserDetailes>
+              <UserName>
+                {obj.login}
+              </UserName>
+            </UserDetailes>
+          </ProfileItem>
+        </>
+      )
+    }))
+
+    }
+  </Container>
+  )
+}
+
+const mapStateToProps = (state: profileProps) => {
+  return {
+    users: state.users,
+    isLoading: state.isLoading,
+  }
+}
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  return {
+    requestData: () => dispatch(userProfile()),
+
+  }
+}
+export default connect(mapStateToProps, mapDispatchToProps)(Profile);
+

src/routes/Signup/index.tsx

@@ -1,19 +1,27 @@
 import { Dispatch } from "redux";
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import { connect } from "react-redux";
 
-import "./style.css";
-import {signUp} from "./../../store/actions/index";
+import { signUp } from "./../../store/actions/index";
+
+import styled from "styled-components";
+import * as style from "./style";
+
+import { FcGoogle } from "react-icons/fc";
+import { AiOutlineEye } from "react-icons/ai";
+
+import foto from "./../../assests/foto.svg";
 
 interface propsType {
-  signUp: (name: string,id:string,pass:string) => void;
+  signUp: (name: string, id: string, pass: string) => void;
 }
 const Signup = (props: propsType) => {
   const [name, setName] = useState("");
   const [userId, setUserId] = useState("");
   const [password, setPassword] = useState("");
 
   const inputNameHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    // console.log(e.target.value);
     setName(e.target.value);
   };
 
@@ -25,44 +33,62 @@ const Signup = (props: propsType) => {
     setPassword(e.target.value);
   };
 
-  const inputSubmit = ():void=>{
- 
-   props.signUp(name, userId, password);
-   setPassword(".....");
+  const inputSubmit = (): void => {
+
+    props.signUp(name, userId, password);
+    setPassword(".....");
   }
 
-  return (
-    <div>
-      <input
-        id="signup_name_input"
-        type="text"
-        placeholder="Enter Your Name"
-        value={name}
-        onChange={inputNameHandler}
-      ></input>
-      <input
-        id="signup_id_input"
-        type="text"
-        placeholder="Enter Your email id"
-        value={userId}
-        onChange={inputIdHandler}
-      ></input>
-      <input
-        id="signup_pass_input"
-        type="text"
-        placeholder="Create Your password"
-        value={password}
-        onChange={inputPassHandler}
-      ></input>
-      <button onClick={inputSubmit}>SignUp</button>
-    </div>
+  return (<Fragment>
+    <style.StyleMainDiv>
+      <style.LeftDiv>
+        <style.HeadingDiv>Welcome,<br /><b>Get Started</b></style.HeadingDiv>
+        <style.Styleimg src={foto} />
+      </style.LeftDiv>
+
+      <style.Rightdiv>
+        <style.StyledDiv>
+          <style.StyledInput
+            type="text"
+            placeholder="Name"
+            value={name}
+            onChange={inputNameHandler}
+          />
+          <style.StyledInput
+            type="text"
+            placeholder="Email"
+          value={userId}
+          onChange={inputIdHandler}
+          ></style.StyledInput>
+          <style.PasswordDiv>
+            <style.PassInput
+              type="password"
+              placeholder="Password"
+            value={password}
+            onChange={inputPassHandler}
+            ></style.PassInput>
+            <style.EyeDiv><AiOutlineEye /></style.EyeDiv>
+          </style.PasswordDiv>
+          <style.CheckDiv>
+            <style.CheckInput type="checkbox" name="signup" value="signup-page"></style.CheckInput>
+            <style.CheckText>By signing up, you agree to the <style.StyledLink href="/terms">Terms of Service and Privacy Policy</style.StyledLink></style.CheckText>
+          </style.CheckDiv>
+          <style.StyledButton id="signup-button" onClick={inputSubmit}>Sign Up</style.StyledButton>
+          <style.StyledText> Or with </style.StyledText>
+          <style.GoogleButton id="signup-button"><style.StyleIconDiv><FcGoogle size="70%" /></style.StyleIconDiv><style.StyleIconText>Sign Up with Google</style.StyleIconText></style.GoogleButton>
+          <style.LoginText>Already have an account? &nbsp; <style.SignUpLink href="/login">Login</style.SignUpLink></style.LoginText>
+        </style.StyledDiv>
+      </style.Rightdiv>
+    </style.StyleMainDiv>
+  </Fragment>
   );
 };
 
 const mapDispatchToProps = (dispatch: Dispatch) => {
   return {
-    signUp: (name:string,id:string,pass:string) => dispatch(signUp(name,id,pass)),
+    signUp: (name: string, id: string, pass: string) => dispatch(signUp(name, id, pass)),
 
   };
 };
-export default connect(null, mapDispatchToProps)(Signup);
+
+export default connect(null, mapDispatchToProps)(Signup);