Skip to content

Commit c93cf2d

Browse files
imap07imap07
committed
first commit
1 parent e7b6bc1 commit c93cf2d

27 files changed

+3333
-2
lines changed

‎README.md

+36-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,36 @@
1-
# reactWithGraphql
2-
Boilerplate de react con graphql
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
use node v18
4+
5+
## Getting Started
6+
7+
First, run the development server:
8+
9+
```bash
10+
npm run dev
11+
# or
12+
yarn dev
13+
# or
14+
pnpm dev
15+
```
16+
17+
Open [http://localhost:8001](http://localhost:8001) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎_next/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"type": "commonjs"}

‎next.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const withPlugins = require('next-compose-plugins'),
2+
css = require('@zeit/next-css'),
3+
withAssetsImport = require('next-assets-import'),
4+
graphql = require('next-plugin-graphql');
5+
6+
module.exports = withPlugins([
7+
[graphql],
8+
[withAssetsImport],
9+
]);

‎package.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "prueba630-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev -p 8001",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@material-ui/core": "^4.12.4",
13+
"@material-ui/icons": "^4.11.3",
14+
"@zeit/next-css": "^1.0.1",
15+
"apollo-cache-inmemory": "^1.6.6",
16+
"apollo-client": "^2.6.10",
17+
"apollo-link": "^1.2.14",
18+
"apollo-link-error": "^1.1.13",
19+
"apollo-link-http": "^1.5.17",
20+
"apollo-link-ws": "^1.0.20",
21+
"apollo-utilities": "^1.3.4",
22+
"graphql": "^16.6.0",
23+
"js-cookie": "^3.0.5",
24+
"material-ui": "^0.20.2",
25+
"moment": "^2.29.4",
26+
"next": "13.4.1",
27+
"next-assets-import": "^0.0.2",
28+
"next-compose-plugins": "^2.2.1",
29+
"next-plugin-graphql": "^0.0.2",
30+
"next-with-apollo": "^5.3.0",
31+
"notistack": "^3.0.1",
32+
"react": "18.2.0",
33+
"react-apollo": "^3.1.5",
34+
"react-dom": "18.2.0",
35+
"react-router-dom": "^6.11.1",
36+
"sha256": "^0.2.0",
37+
"subscriptions-transport-ws": "^0.11.0",
38+
"websocket": "^1.0.34"
39+
}
40+
}

‎public/next.svg

+1
Loading

‎public/vercel.svg

+1
Loading

‎src/client/apollo.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { InMemoryCache } from "apollo-cache-inmemory";
2+
import ApolloClient from "apollo-client";
3+
import { HttpLink } from "apollo-link-http";
4+
5+
const createApolloClient = () => {
6+
const httpLink = new HttpLink({
7+
uri: "http://localhost:8000/graphql/",
8+
})
9+
return new ApolloClient({
10+
cache: new InMemoryCache({
11+
addTypename: false,
12+
}),
13+
link: httpLink,
14+
});
15+
};
16+
17+
export { createApolloClient };

‎src/components/App/Context/App.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React, {createContext} from 'react';
2+
3+
const Context = createContext({
4+
session: null
5+
});
6+
7+
export default Context;

‎src/components/App/Hooks/useDebounce.jsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { useEffect, useState } from 'react';
2+
3+
export default function useDebounce(value, delay) {
4+
const [debouncedValue, setDebouncedValue] = useState(value);
5+
6+
useEffect(() => {
7+
const handler = setTimeout(() => {
8+
setDebouncedValue(value);
9+
}, delay);
10+
return () => {
11+
clearTimeout(handler);
12+
};
13+
}, [value, delay]);
14+
15+
return debouncedValue;
16+
}

‎src/components/Event/AddUserEvent.jsx

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import React, { useState, useCallback, useEffect} from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import InputLabel from '@material-ui/core/InputLabel';
4+
import FormControl from '@material-ui/core/FormControl';
5+
import NativeSelect from '@material-ui/core/NativeSelect';
6+
import {useApolloClient} from "@apollo/react-hooks";
7+
import { getQuery, getMutation} from '../../utils/apollo_util';
8+
import {getEvents, getUsersEvents, addUserEvent} from './queries.graphql';
9+
import {getUsers} from '../User/queries.graphql';
10+
import {
11+
Table,
12+
TableBody,
13+
TableCell,
14+
TableContainer,
15+
TableHead,
16+
TableRow,
17+
Box,
18+
Typography,
19+
Button
20+
} from "@material-ui/core";
21+
22+
23+
const useStyles = makeStyles((theme) => ({
24+
formControl: {
25+
margin: theme.spacing(1),
26+
minWidth: 400,
27+
top: 30
28+
},
29+
selectEmpty: {
30+
marginTop: theme.spacing(2),
31+
},
32+
}));
33+
34+
export default function NativeSelects() {
35+
const classes = useStyles(),
36+
apolloClient = useApolloClient(),
37+
[loading, setLoading] = useState(false),
38+
[usersEvent, setUsersEvent] = useState([]),
39+
[events, setEvents] = useState([]),
40+
[users, setUsers] = useState([]),
41+
[error, setError] = useState(''),
42+
[status, setStatus] = useState(0),
43+
[selectedEvent, setSelectedEvent,] = useState(''),
44+
[selectedUser, setSelectedUser] = useState('');
45+
46+
const handleChangeEvent = (event) => {
47+
setUsersEvent([])
48+
setSelectedEvent(event.target.value);
49+
};
50+
const handleChangeUser = (event) => {
51+
setSelectedUser(event.target.value);
52+
};
53+
54+
const getData = useCallback(async () => {
55+
try {
56+
setLoading(true);
57+
const result = await getQuery(apolloClient, getEvents, {});
58+
setEvents(result.events.edges.map(edge => edge.node))
59+
60+
const resultUser= await getQuery(apolloClient, getUsers, {});
61+
setUsers(resultUser.users.edges.map(edge => edge.node))
62+
63+
setLoading(false)
64+
} catch (error) {
65+
setLoading(false)
66+
console.log('error listados', error)
67+
setError(error)
68+
}
69+
}, [apolloClient, setLoading]);
70+
71+
const getUsersEvent = useCallback(async () => {
72+
try {
73+
if(selectedEvent === '') return
74+
setLoading(true);
75+
const result = await getQuery(apolloClient, getUsersEvents, {eventId: selectedEvent});
76+
if(result.error){
77+
setUsersEvent([])
78+
}else{
79+
setUsersEvent(result.usersEvent.data.userEvent.map(item => item))
80+
}
81+
setLoading(false)
82+
} catch (error) {
83+
setLoading(false)
84+
console.log('error listados', error)
85+
setError(error)
86+
}
87+
}, [apolloClient, setLoading, selectedEvent]);
88+
89+
const addUser = useCallback(async (selectedEvent, selectedUser) => {
90+
try {
91+
if(loading) return;
92+
setError('')
93+
setStatus(0)
94+
setLoading(true)
95+
const result = await getMutation(apolloClient, addUserEvent, {
96+
userId: selectedUser,
97+
eventId: selectedEvent
98+
});
99+
if(result.addUserEvent.error){
100+
setError(result.addUserEvent.error)
101+
setLoading(false)
102+
}else{
103+
setStatus(result.addUserEvent.status)
104+
setLoading(false)
105+
setTimeout(()=>{
106+
getUsersEvent()
107+
}, 100)
108+
}
109+
} catch (error) {
110+
setLoading(false)
111+
console.log("Error al crear usuario", error);
112+
}
113+
}, [apolloClient]);
114+
115+
useEffect(() => {
116+
getData()
117+
}, []);
118+
119+
useEffect(() => {
120+
getUsersEvent()
121+
},[selectedEvent])
122+
123+
return (
124+
<div>
125+
<FormControl className={classes.formControl}>
126+
<InputLabel shrink htmlFor="age-native-label-placeholder">
127+
Evento
128+
</InputLabel>
129+
<NativeSelect
130+
value={selectedEvent}
131+
onSelect={selectedEvent}
132+
onChange={handleChangeEvent}
133+
>
134+
<option value="">Selecciona un evento</option>
135+
{
136+
events.map(item => {
137+
return <option value={item.id}>{item.title}</option>
138+
})
139+
}
140+
</NativeSelect>
141+
</FormControl>
142+
<FormControl className={classes.formControl}>
143+
<InputLabel shrink htmlFor="age-native-label-placeholder">
144+
Usuario
145+
</InputLabel>
146+
<NativeSelect
147+
value={selectedUser}
148+
onChange={handleChangeUser}
149+
>
150+
<option value="">Selecciona un usuario</option>
151+
{
152+
users.map(item => {
153+
return <option value={item.id}>{item.name} / {item.email}</option>
154+
})
155+
}
156+
</NativeSelect>
157+
</FormControl>
158+
<Button color={"primary"} style={{marginTop: 40}} onClick={() => addUser(selectedEvent, selectedUser)}>
159+
{loading ? 'Añadiendo usuario' : 'Añadir usuario'}
160+
</Button>
161+
{
162+
error &&
163+
<Typography style={{marginTop: 30}}>
164+
{error}
165+
</Typography>
166+
}
167+
{
168+
status === 200 &&
169+
<Typography style={{marginTop: 30}}>
170+
Usuario agregado correctamente
171+
</Typography>
172+
}
173+
<Box style={{marginTop: 100}}>
174+
<TableContainer>
175+
<Table className={classes.table} aria-label="simple table">
176+
<TableHead>
177+
<TableRow>
178+
<TableCell>Nombre</TableCell>
179+
<TableCell>Email</TableCell>
180+
<TableCell>Status</TableCell>
181+
</TableRow>
182+
</TableHead>
183+
<TableBody>
184+
{ usersEvent.length <= 0 ?
185+
<Typography>Sin datos de usuarios en el evento</Typography>
186+
:
187+
usersEvent.map(item => (
188+
<TableRow key={item.user.id}>
189+
<TableCell>{item.user.name}</TableCell>
190+
<TableCell>{item.user.email}</TableCell>
191+
<TableCell>{
192+
item.status === 'pending' ? 'Pendiente' : item.status === 'accepted' ? 'Aceptado' : 'Rechazado'
193+
}</TableCell>
194+
</TableRow>
195+
))}
196+
</TableBody>
197+
</Table>
198+
</TableContainer>
199+
</Box>
200+
</div>
201+
);
202+
}

0 commit comments

Comments
 (0)