Skip to content

Commit c8cf5b5

Browse files
jeevan-ajjeevan-aj
committed
useReducer
1 parent a03ca2e commit c8cf5b5

15 files changed

+239
-20
lines changed

‎game-hub/src/App.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import { Navbar } from "./components/Navbar.1";
99

1010
function App() {
1111
const [selectedGenre, setSelectedGenere] = useState<Genre | null>(null);
12-
const [selectedPlatform , setSelectedPlatform] = useState<Platform|null>(null)
12+
const [selectedPlatform, setSelectedPlatform] = useState<Platform | null>(
13+
null
14+
);
1315

1416
return (
1517
<Grid
@@ -27,13 +29,21 @@ function App() {
2729
</GridItem>
2830
<Show above="lg">
2931
<GridItem area="aside">
30-
<GenereList selectedGenre={selectedGenre} onSelectGenre={(genre) => setSelectedGenere(genre)} />
32+
<GenereList
33+
selectedGenre={selectedGenre}
34+
onSelectGenre={(genre) => setSelectedGenere(genre)}
35+
/>
3136
</GridItem>
3237
</Show>
3338

3439
<GridItem area="main">
35-
<PlatformSelector onSelectPlatform={(platform)=> setSelectedPlatform(platform)}></PlatformSelector>
36-
<GameGrid selectedGenre={selectedGenre} selectPlatform={selectedPlatform} />
40+
<PlatformSelector
41+
onSelectPlatform={(platform) => setSelectedPlatform(platform)}
42+
></PlatformSelector>
43+
<GameGrid
44+
selectedGenre={selectedGenre}
45+
selectPlatform={selectedPlatform}
46+
/>
3747
</GridItem>
3848
</Grid>
3949
);

‎game-hub/src/components/GenereList.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ function GenereList({selectedGenre,onSelectGenre}:Props) {
2121
const { data, loading, error } = useGenere();
2222
const genereSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 1, 1];
2323
if (error) return null;
24-
console.log(data[0])
2524
return (
2625
<List px={5} mt={7}>
2726
{loading &&

‎game-hub/src/components/Navbar.1.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,22 @@ export function Navbar() {
2222
<Link to={`/layout`}>
2323
<Button>user</Button>
2424
</Link>
25-
{(location.pathname === '/' || location.pathname === '/contact') &&
25+
{(location.pathname === "/" || location.pathname === "/contact") && (
2626
<Link to={`/contact`}>
27-
<Button>contact</Button>
28-
</Link>
29-
}
27+
<Button>contact</Button>
28+
</Link>
29+
)}
3030
{location.pathname === "/layout" && (
3131
<Link to={"onemore"}>
3232
<Button>onemore</Button>
3333
</Link>
3434
)}
35-
<Link to={'/users'}>
36-
<Button>usersList</Button></Link>
35+
<Link to={"/users"}>
36+
<Button>usersList</Button>
37+
</Link>
38+
<Link to={"/signup"}>
39+
<Button>Sign up</Button>
40+
</Link>
3741
</HStack>
3842
<ColorModeSwitch />
3943
</HStack>

‎game-hub/src/page/HomePage.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import React from 'react'
2+
import Counter from '../stateManagement/Counter'
23

34
function HomePage() {
45
return (
5-
<div>HomePage</div>
6+
<div>HomePage
7+
8+
<Counter/>
9+
</div>
610
)
711
}
812

‎game-hub/src/page/Layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function Layout() {
66
return (
77
<>
88
<Navbar/>
9-
<div id="main">
9+
<div id="main" >
1010
<Outlet/>
1111
</div>
1212
</>

‎game-hub/src/page/UserPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
22
import { Link, Outlet } from 'react-router-dom'
33
import Layout from './Layout'
44

‎game-hub/src/routes/Route.tsx

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
import { createBrowserRouter } from "react-router-dom";
22
import App from "../App";
33
import Edit from "../page/Edit";
4-
import Contact from "../page/Contact";
4+
55
import HomePage from "../page/HomePage";
66
import Layout from "../page/Layout";
77
import User from "../page/User";
88
import Error from "../page/ErrorPage";
9-
import UserPage from "../page/UserPage";
9+
import Counter from "../stateManagement/Counter";
10+
import TaskLIst from "../stateManagement/TaskLIst";
11+
import Signup from "../stateManagement/Signup";
12+
import { Navbar } from "../components/Navbar.1";
13+
import Sign from "../stateManagement/SignupPage";
1014

1115
const Router = createBrowserRouter([
1216
{
1317
path: "/",
1418
element: <App />,
15-
errorElement:<Error/>
19+
errorElement: <Error />,
1620
},
1721
{
1822
path: "/layout",
1923
element: <Layout />,
2024
children: [
2125
{ path: "", element: <Edit /> },
2226
{ path: "home", element: <HomePage /> },
23-
{ path: "onemores", element: <User /> },
27+
{ path: "onemore", element: <User /> },
2428
],
2529
},
26-
{ path: "/contact", element: [<Layout />, <Contact />] },
27-
{path:'/users',element:<UserPage/>}
30+
{ path: "/contact", element: [<Layout />, <TaskLIst />, <Signup />] },
31+
32+
{ path: "/users", element: [<Layout />, <Counter />] },
33+
{ path: "/signup", element: [<Navbar />, <Sign />] },
2834
]);
2935

3036
export default Router;

‎game-hub/src/stateManagement/Counter.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Box, Button, HStack} from "@chakra-ui/react";
2+
import { useReducer } from "react";
3+
import CounterReducer from "./Reducers/CounterReducer";
4+
5+
function Counter() {
6+
7+
const [value,dispatch] = useReducer(CounterReducer,0)
8+
9+
return (
10+
<Box
11+
display={"flex"}
12+
flexDirection={"column"}
13+
height={"80vh"}
14+
alignItems={"center"}
15+
justifyContent={"center"}
16+
>
17+
<HStack>
18+
<Button onClick={() => dispatch({type:'DECREMENT'})}>decrement</Button>
19+
<Button onClick={() => dispatch({type:'RESET'})}>reset</Button>
20+
<Button onClick={() => dispatch({type:'INCREMENT'})}>increment</Button>
21+
</HStack>
22+
<h1 className="mt-5">{value}</h1>
23+
</Box>
24+
);
25+
}
26+
27+
export default Counter;

‎game-hub/src/stateManagement/Reducers/CounterReducer.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
interface Action{
2+
type:'INCREMENT' | 'DECREMENT' | 'RESET';
3+
}
4+
5+
function CounterReducer(state:number,action:Action) {
6+
if(action.type ==='INCREMENT') return state+1;
7+
if(action.type ==='DECREMENT') return state-1;
8+
if(action.type === 'RESET') return state = 0
9+
return state
10+
}
11+
12+
export default CounterReducer

‎game-hub/src/stateManagement/Reducers/SignupReducer.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
interface signup {
2+
type:'signup',
3+
name:string
4+
}
5+
6+
interface logout {
7+
type:'logout'
8+
}
9+
10+
type Auth = signup | logout
11+
12+
function SignupReducer(state:string,action:Auth) {
13+
if(action.type==='signup') return action.name
14+
if(action.type ==='logout') return ''
15+
return state
16+
}
17+
18+
export default SignupReducer

‎game-hub/src/stateManagement/Reducers/TaskReducer.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
3+
export interface Task {
4+
id: number;
5+
title: string;
6+
}
7+
8+
interface AddTask{
9+
type:'ADD'
10+
task:Task
11+
}
12+
interface DeleteTask{
13+
type:'DELETE'
14+
id:number;
15+
}
16+
17+
export type TaskAction = AddTask | DeleteTask
18+
19+
const TaskReducer = (task:Task[],action:TaskAction): Task[] => {
20+
if(action.type === 'ADD'){
21+
return [action.task,...task]
22+
}
23+
if(action.type === 'DELETE'){
24+
return task.filter(cur=> (
25+
cur.id !== action.id
26+
))
27+
}
28+
return task
29+
}
30+
31+
export default TaskReducer

‎game-hub/src/stateManagement/Signup.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { useReducer } from "react";
2+
import SignupReducer from "./Reducers/SignupReducer";
3+
import { Card, CardFooter, CardHeader } from "@chakra-ui/react";
4+
5+
const Signup = () => {
6+
const [state, dispatch] = useReducer(SignupReducer, "");
7+
if (state)
8+
return (
9+
<div className="d-flex flex-column w-50 vh-100">
10+
<Card height={"200px"}>
11+
<CardHeader>{state}</CardHeader>
12+
<CardFooter>
13+
<button
14+
className="btn btn-danger w-25"
15+
onClick={() => dispatch({ type: "logout" })}
16+
>
17+
logout
18+
</button>
19+
</CardFooter>
20+
</Card>
21+
</div>
22+
);
23+
24+
return (
25+
<>
26+
<button
27+
className="btn btn-success"
28+
onClick={() => dispatch({ type: "signup", name: "jeevan" })}
29+
>
30+
sign UP
31+
</button>
32+
</>
33+
);
34+
};
35+
36+
export default Signup;

‎game-hub/src/stateManagement/SignupPage.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Signup from "./Signup"
2+
import TaskLIst from "./TaskLIst"
3+
4+
5+
function Sign() {
6+
return (
7+
<div className="d-flex">
8+
<div className="col-6">
9+
<TaskLIst/>
10+
</div>
11+
<div className="col-6">
12+
<Signup/>
13+
</div>
14+
15+
</div>
16+
)
17+
}
18+
19+
export default Sign

‎game-hub/src/stateManagement/TaskLIst.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { useReducer } from "react";
2+
import TaskReducer from "./Reducers/TaskReducer";
3+
4+
function TaskLIst() {
5+
const [task, dispatch] = useReducer(TaskReducer, []);
6+
console.log(task.length);
7+
return (
8+
<div className="mx-5">
9+
<button
10+
onClick={() =>
11+
dispatch({
12+
type: "ADD",
13+
task: { id: Date.now(), title: "task" + Date.now() },
14+
})
15+
}
16+
className="btn btn-primary"
17+
>
18+
Add
19+
</button>
20+
<ul className="">
21+
{task.map((cur) => (
22+
<li
23+
key={cur.id}
24+
className="border 1px solid grey p-2 rounded d-flex justify-content-between m-3"
25+
>
26+
<span className="flex-grow-1">{cur.title}</span>
27+
<button
28+
onClick={() => dispatch({ type: "DELETE", id: cur.id })}
29+
className="btn btn-danger"
30+
>
31+
Delete
32+
</button>
33+
</li>
34+
))}
35+
</ul>
36+
</div>
37+
);
38+
}
39+
40+
export default TaskLIst;

‎game-hub/src/stateManagement/contexts/tasksContext.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Dispatch } from "react";
2+
import { Task, TaskAction } from "../Reducers/TaskReducer";
3+
import React from "react";
4+
5+
interface TaskContextType{
6+
task:Task[]
7+
dispatch:Dispatch<TaskAction>
8+
9+
}
10+
11+
const TaskContext = React.createContext<TaskContextType>({} as TaskContextType)
12+
13+
export default TaskContext

0 commit comments

Comments
 (0)