source: components/Complain.jsx

main
Last change on this file was 433e0c5, checked in by anastasovv <simon@…>, 2 years ago

Added complaints, managing credits, and lost connection screens

  • Property mode set to 100644
File size: 3.7 KB
Line 
1import React from 'react'
2
3import { useSelector, useDispatch } from 'react-redux'
4
5import { useRef } from 'react'
6
7import { setStyle } from '../redux/reducers/styleSlice';
8
9import axios from 'axios';
10
11const ComplainScreen = () => {
12 const ref = useRef(null);
13
14 const dispatch = useDispatch();
15
16 const styleState = useSelector(state => state.style);
17
18 setTimeout(() => {
19 if (styleState.style.displayComplainScreen && styleState.style.complainScreenInfo.setFocus) {
20 ref.current.focus();
21 dispatch(setStyle({
22 ...styleState.style,
23 complainScreenInfo: {
24 ...styleState.style.complainScreenInfo,
25 setFocus: false
26 }
27 }))
28 }
29 }, 10);
30
31 function onChangeDescription(e) {
32 dispatch(setStyle({
33 ...styleState.style,
34 complainScreenInfo: {
35 ...styleState.style.complainScreenInfo,
36 description: e.target.value,
37 }
38 }))
39 }
40
41 function keyUp(e) {
42 if (e.key === 'Enter') {
43 complain();
44 }
45 }
46
47 function closeForm() {
48 dispatch(setStyle({
49 ...styleState.style,
50 displayComplainScreen: false,
51 complainScreenInfo: {
52 description: '',
53 },
54 inlineAlertText: '',
55 }));
56
57 }
58 function complain() {
59 dispatch(setStyle({
60 ...styleState.style,
61 displayLoadingScreen: true,
62 }))
63
64 axios.post(`/api/postgre`, {
65 action: 'complain',
66 session_id: localStorage.CAESSINO_SESSION_ID,
67 description: styleState.style.complainScreenInfo.description,
68 })
69 .then(res => {
70 if (res.data?.success) {
71 dispatch(setStyle({
72 ...styleState.style,
73 displayLoadingScreen: false,
74 displayComplainScreen: false,
75 complainScreenInfo: {
76 description: '',
77 },
78 notification: {
79 show: true,
80 text: 'Complain sent successfully',
81 status: 'success',
82 },
83 inlineAlertText: '',
84 }));
85 }
86 else {
87 dispatch(setStyle({
88 ...styleState.style,
89 displayComplainScreen: true,
90 inlineAlertText: res.data?.message,
91 }));
92 }
93 })
94 }
95
96 return (
97 <div className="fullscreen fs-centered complainScreen" style={{display: styleState.style.displayComplainScreen ? 'block' : 'none'}}>
98 <div className="fs-inputs-container">
99 {styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
100 <div>
101 <span>Describe the problem:</span>
102 <textarea ref={ref} type="text" onChange={(e) => {onChangeDescription(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.complainScreenInfo.description} placeholder="I have a problem with..."/>
103 <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
104 <button className="primaryButton" onClick={() => closeForm()}>Close Form</button>
105 <button className="secondaryButton" onClick={() => complain()}>Send Complaint</button>
106 </div>
107 </div>
108 </div>
109 </div>
110 )
111}
112
113export default ComplainScreen
Note: See TracBrowser for help on using the repository browser.