Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | 88x 88x 88x 16x 16x 16x 16x 3x 13x 8x 5x 88x 17x 17x 17x 17x 2x 15x 88x 88x 88x 6x 6x 6x 6x 3x 88x 10x 10x 10x 10x 2x 8x 15x 4x 4x 88x | import { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { FaCheckCircle } from "react-icons/fa";
function RepositorySelectionForm({ collections = [] }) {
const [url, setURL] = useState("");
const [messageURL, setMessageURL] = useState("");
const handleBlurURL = (e) => {
const inputValue = e.target.value;
setURL(inputValue);
const inputValueTrimmed = inputValue.trim();
if (inputValueTrimmed.length < 1) {
setMessageURL(
<span data-testid="url-error-message" className="text-danger">
GitHub repository or organization URL is required
</span>,
);
} else if (
!inputValueTrimmed.match(
/^https:\/\/github\.com\/[A-Za-z0-9_.-]+(?:\/[A-Za-z0-9_.-]+)?(?:\.git)?\/?$/,
)
) {
setMessageURL(
<span data-testid="url-error-message" className="text-danger">
Please enter a valid GitHub repository or organization URL
</span>,
);
} else {
setMessageURL(
<span data-testid="url-success-message" className="text-success">
Verified{" "}
<FaCheckCircle
data-testid="url-success-icon"
className="text-success"
/>
</span>,
);
}
};
const handleChangeURL = (e) => {
const inputValue = e.target.value;
const inputValueTrimmed = inputValue.trim();
setURL(inputValue);
if (inputValueTrimmed.length < 1) {
setMessageURL(
<span data-testid="url-empty-message" className="text-danger">
GitHub repository or organization URL is required
</span>,
);
} else {
setMessageURL(<span data-testid="url-empty-message"></span>);
}
};
const [name, setName] = useState("");
const [messageName, setMessageName] = useState("");
const handleBlurName = (e) => {
const inputValue = e.target.value;
const inputValueTrimmed = inputValue.trim();
setName(inputValue);
if (inputValueTrimmed.length < 1) {
setMessageName(
<span data-testid="name-error-message" className="text-danger">
Collection name is required
</span>,
);
}
};
const handleChangeName = (e) => {
const inputValue = e.target.value;
const inputValueTrimmed = inputValue.trim();
setName(inputValue);
if (inputValueTrimmed.length < 1) {
setMessageName(
<span data-testid="name-error-message" className="text-danger">
Collection name is required
</span>,
);
} else if (
collections.some((collectionName) => collectionName === inputValueTrimmed)
) {
setMessageName(
<span data-testid="name-error-message" className="text-danger">
Collection name already exists
</span>,
);
} else {
setMessageName(
<span data-testid="name-success-message" className="text-success">
Collection name is available{" "}
<FaCheckCircle
data-testid="name-success-icon"
className="text-success"
/>
</span>,
);
}
};
return (
<Form data-testid="repository-selection-form">
<Form.Group className="mb-3">
<Form.Label htmlFor="collectionName">Collection Name</Form.Label>
<div className="d-flex align-items-center gap-2">
<Form.Control
data-testid="collection-name-input"
required
type="text"
placeholder="Ex. CS 4000 Fall 2024"
style={{ width: "300px" }}
value={name}
onChange={handleChangeName}
onBlur={handleBlurName}
/>
<span data-testid="collection-name-message">{messageName}</span>
</div>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label htmlFor="gitRepo">
GitHub Repository or Organization URL
</Form.Label>
<div className="d-flex align-items-center gap-2">
<Form.Control
data-testid="URL-input"
required
type="text"
placeholder="Ex. https://github.com/frontiers/repo"
style={{ width: "300px" }}
value={url}
onChange={handleChangeURL}
onBlur={handleBlurURL}
/>
<Button data-testid="add-url-button">+ Add</Button>
<span data-testid="github-url-message">{messageURL}</span>
</div>
</Form.Group>
</Form>
);
}
export default RepositorySelectionForm;
|