Issue Tracker
const IssueBar = ({ progressCount, total, newCount, completedCount }) => {
return (
<>
{' '}
Total: {total}
New:
{newCount}
{' '}
In Progress:
{progressCount}
{' '}
Completed:
{completedCount}
)
}
export default IssueBar
!-- Add Issue -->
import { useState, useRef } from 'react'
import { v4 as uuid } from 'uuid'
import { Col, Form, Button, Row } from 'react-bootstrap'
const generateCurrentDate = () => {
const date = new Date()
const year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getUTCDate()
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
console.log(year, month, day)
return `${year}-${day}-${month}`
}
const issue = {
title: '',
subTitle: '',
assignedTo: '',
start: generateCurrentDate(),
end: '',
priority: 'low',
status: 'new',
completedPercentage: 0,
}
const AddIssue = ({ addIssue }) => {
const [issueInfo, setIssueInfo] = useState(issue)
const [errorInfo, setErrorInfo] = useState({
title: '',
subTitle: '',
assignedTo: '',
start: '',
end: '',
completedPercentage: '',
})
const handleChange = (evt) => {
setIssueInfo({
...issueInfo,
[evt.target.name]: evt.target.value,
})
setErrorInfo({
...errorInfo,
[evt.target.name]: '',
})
}
const handleSubmit = (evt) => {
const { title, subTitle, assignedTo, start, end } = issueInfo
evt.preventDefault()
console.log(start)
//validation part
if (title === '') {
setErrorInfo((prevState) => {
return {
...prevState,
title: 'Title is Required',
}
})
}
if (subTitle === '') {
setErrorInfo((prevState) => {
return {
...prevState,
subTitle: 'SubTitle is Required',
}
})
}
if (start === '') {
setErrorInfo((prevState) => {
return {
...prevState,
start: 'Please provide start Date',
}
})
}
if (end === '') {
setErrorInfo((prevState) => {
return {
...prevState,
end: 'Please provide end Date',
}
})
}
if (assignedTo === '') {
setErrorInfo((prevState) => {
return {
...prevState,
assignedTo: 'Please provide assigned user name',
}
})
}
//check every field (value) of userInfo obj , if every filed is true result will be true(valid) otherwise false(if any values is false)
const isValid = Object.values(issueInfo).every((elm) => elm)
console.log('There is a error')
//incase valid is true form will be submitted
if (isValid) {
// if(errorInfo.values())
console.log('submitting')
addIssue({
id: uuid(),
...issueInfo,
})
//reset user Info
setIssueInfo(issue)
}
}
const {
title,
subTitle,
assignedTo,
start,
end,
priority,
status,
completedPercentage,
} = issueInfo
return (
<>
Add Issue
)
}
export default AddIssue
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Recursive:wght@300;400;500&display=swap');
body {
font-family: 'Recursive', sans-serif !important;
}
form label {
font-style: italic;
}
.issue-brand {
font-family: 'Lobster', cursive;
font-size: 1.5rem !important;
margin-right: auto !important;
}
import { useState } from 'react'
import IssueBar from './IssueBar'
import IssueNav from './IssueNav'
import AddIssue from './AddIssue'
import Issues from './Issues'
import './index.css'
import { Col, Row, Container } from 'react-bootstrap'
//uncontrolled component