App.js

1import React, { useState, useEffect } from "react";
2import api from "./shared/api";
3
4export default function App() {
5  const schema = {
6    regNo: "",
7    name: "",
8    course: "",
9    cat1: "",
10    cat2: "",
11    da1: "",
12    da2: "",
13    quiz: "",
14    fat: "",
15    convert: {
16      cat1: '',
17      cat2: '',
18      da1: '',
19      da2: '',
20      quiz: '',
21      fat: ''
22    }
23  };
24
25  const [users, setUsers] = useState([]);
26  const [user, setUser] = useState(schema);
27  const [formErrors, setFormErrors] = useState({});
28
29  const convert = {
30    cat1: (val) => (val / 50) * 15,
31    cat2: (val) => (val / 50) * 15,
32    da1: (val) => (val / 10) * 10,
33    da2: (val) => (val / 10) * 10,
34    quiz: (val) => (val / 10) * 10,
35    fat: (val) => (val / 100) * 40
36  };
37
38  const patterns = {
39    regNo: /^[0-9]{2}[A-Z]{3}[0-9]{4}$/,
40    name: /^[A-Za-z ]{3,}$/,
41    course: /^[A-Z]{3,}[0-9]*$/,
42    cat1: /^([0-4]?[0-9]|50)(\.[0-9]{1,2})?$/,
43    cat2: /^([0-4]?[0-9]|50)(\.[0-9]{1,2})?$/,
44    da1: /^([0-9]|10)(\.[0-9]{1,2})?$/,
45    da2: /^([0-9]|10)(\.[0-9]{1,2})?$/,
46    quiz: /^([0-9]|10)(\.[0-9]{1,2})?$/,
47    fat: /^([0-9]{1,2}|100)(\.[0-9]{1,2})?$/
48  };
49
50  const handleChange = (e) => {
51    const { name, value } = e.target;
52
53    setUser(prev => {
54      const updatedUser = {
55        ...prev,
56        [name]: value
57      };
58
59      if (convert[name]) {
60        updatedUser.convert = {
61          ...prev.convert,
62          [name]: convert[name](parseFloat(value) || 0).toFixed(2)
63        };
64      }
65
66      return updatedUser;
67    });
68
69    setFormErrors(prev => ({ ...prev, [name]: "" })); // Clear error on change
70  };
71
72  const validateForm = () => {
73    const errors = {};
74    for (let field in patterns) {
75      if (!patterns[field].test(user[field])) {
76        errors[field] = `Invalid ${field.toUpperCase()}`;
77      }
78    }
79    return errors;
80  };
81
82  const addUser = async (e) => {
83    e.preventDefault();
84    const errors = validateForm();
85
86    if (Object.keys(errors).length > 0) {
87      setFormErrors(errors);
88      return;
89    }
90
91    await api.post('/users', user);
92    setUser(schema);
93    setFormErrors({});
94    fetchUsers();
95  };
96
97  const fetchUsers = async () => {
98    const res = await api.get('/users');
99    setUsers(res.data);
100  };
101
102  useEffect(() => {
103    fetchUsers();
104  }, []);
105
106  const renderInput = (label, name) => (
107    <>
108      <input
109        name={name}
110        placeholder={`Enter ${label}`}
111        value={user[name]}
112        onChange={handleChange}
113        style={{ borderColor: formErrors[name] ? 'red' : undefined }}
114      />
115      {formErrors[name] && <small style={{ color: 'red' }}>{formErrors[name]}</small>}
116    </>
117  );
118
119  return (
120    <>
121      <h2>Fill</h2>
122      <form onSubmit={addUser}>
123        {renderInput("RegNo", "regNo")}
124        {renderInput("Name", "name")}
125        {renderInput("Course", "course")}
126        {renderInput("CAT1", "cat1")}
127        {renderInput("CAT2", "cat2")}
128        {renderInput("DA1", "da1")}
129        {renderInput("DA2", "da2")}
130        {renderInput("Quiz", "quiz")}
131        {renderInput("FAT", "fat")}
132        <button type="submit">Submit</button>
133      </form>
134
135      <div>
136        <h3>Converted Scores:</h3>
137        <p>CAT1: {user.convert.cat1}</p>
138        <p>CAT2: {user.convert.cat2}</p>
139        <p>DA1: {user.convert.da1}</p>
140        <p>DA2: {user.convert.da2}</p>
141        <p>Quiz: {user.convert.quiz}</p>
142        <p>FAT: {user.convert.fat}</p>
143      </div>
144
145      <h2>List</h2>
146      <div>
147        {users.map(user => (
148          <div key={user.id}>
149            <p>
150              {user.regNo} {user.name} {user.course} {user.cat1} {user.cat2} {user.da1} {user.da2} {user.quiz} {user.fat}
151            </p>
152          </div>
153        ))}
154      </div>
155    </>
156  );
157}