added regex for URL

Author: syuChen1

client/src/views/ContentCreator/DayEditor/DayEditor.js

@@ -29,6 +29,7 @@ const DayEditor = ({
   const [scienceObj, setScienceObj] = useState('');
   const [makingObj, setMakingObj] = useState('');
   const [computationObj, setComputationObj] = useState('');
+  const [linkError, setLinkError] = useState(false);
 
   const showDayDetailsModal = async (dayObj) => {
     const response = await getDay(dayObj.id);
@@ -41,6 +42,7 @@ const DayEditor = ({
     setDescription(response.data.description);
     setTekS(response.data.TekS);
     setLink(response.data.link);
+    setLinkError(false);
     const learningComponents = response.data.objectives;
     setScienceObj(
       learningComponents[0] ? learningComponents[0].description : ''
@@ -97,6 +99,15 @@ const DayEditor = ({
   };
 
   const handleWorkspace = async (e) => {
+    if (link) {
+      const goodLink = checkURL(link);
+      if (!goodLink) {
+        setLinkError(true);
+        message.error('Please Enter a valid URL starting with HTTP/HTTPS', 4);
+        return;
+      }
+    }
+    setLinkError(false);
     const res = await updateDayDetails(
       selectDay.id,
       description,
@@ -133,6 +144,15 @@ const DayEditor = ({
   };
 
   const handleSave = async (e) => {
+    if (link) {
+      const goodLink = checkURL(link);
+      if (!goodLink) {
+        setLinkError(true);
+        message.error('Please Enter a valid URL starting with HTTP/HTTPS', 4);
+        return;
+      }
+    }
+    setLinkError(false);
     const res = await updateDayDetails(
       selectDay.id,
       description,
@@ -153,6 +173,15 @@ const DayEditor = ({
     }
   };
 
+  const checkURL = (n) => {
+    const regex =
+      /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g;
+    if (n.search(regex) === -1) {
+      return null;
+    }
+    return n;
+  };
+
   return (
     <div>
       <Modal
@@ -294,8 +323,12 @@ const DayEditor = ({
             label='Link to Additional Resources (Optional)'
           >
             <Input
-              onChange={(e) => setLink(e.target.value)}
+              onChange={(e) => {
+                setLink(e.target.value);
+                setLinkError(false);
+              }}
               value={link}
+              style={linkError ? { backgroundColor: '#FFCCCC' } : {}}
               placeholder='Enter a link'
             ></Input>
           </Form.Item>

client/src/views/ContentCreator/LearningStandardCreator/LearningStandardCreator.js

@@ -23,6 +23,7 @@ export default function LearningStandardCreator({
   const [numofDays, setNumofDays] = useState('');
   const [teks, setTeks] = useState('');
   const [link, setLink] = useState('');
+  const [linkError, setLinkError] = useState(false);
   const [learningStandardObj, setLearningStandardObj] = useState('');
   let found;
 
@@ -41,6 +42,7 @@ export default function LearningStandardCreator({
     setName('');
     setTeks('');
     setLink('');
+    setLinkError(false);
     setNumofDays('');
     setVisible(true);
   };
@@ -49,12 +51,16 @@ export default function LearningStandardCreator({
     setVisible(false);
   };
 
-  const handleSubmit = async (e) => {
-    if (unit === '') {
-      message.error('Please select unit');
-      return;
+  const handleSubmit = async () => {
+    if (link) {
+      const goodLink = checkURL(link);
+      if (!goodLink) {
+        setLinkError(true);
+        message.error('Please Enter a valid URL starting with HTTP/HTTPS', 4);
+        return;
+      }
     }
-    console.log(e);
+    setLinkError(false);
     const res = await createLearningStandard(
       description,
       name,
@@ -88,6 +94,16 @@ export default function LearningStandardCreator({
     }
   };
 
+  const checkURL = (n) => {
+    console.log(n);
+    const regex =
+      /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g;
+    if (n.search(regex) === -1) {
+      return null;
+    }
+    return n;
+  };
+
   return (
     <div>
       <button onClick={showModal} id='add-learning-standard-btn'>
@@ -177,7 +193,9 @@ export default function LearningStandardCreator({
             <Input
               onChange={(e) => {
                 setLink(e.target.value);
+                setLinkError(false);
               }}
+              style={linkError ? { backgroundColor: '#FFCCCC' } : {}}
               value={link}
               placeholder='Enter a link'
             />

client/src/views/ContentCreator/LessonEditor/LessonEditor.js

@@ -19,6 +19,7 @@ export default function LessonEditor({
   const [description, setDescription] = useState('');
   const [teks, setTeks] = useState('');
   const [link, setLink] = useState('');
+  const [linkError, setLinkError] = useState(false);
 
   const [displayName, setDisplayName] = useState(learningStandard.name);
 
@@ -29,6 +30,7 @@ export default function LessonEditor({
     setDescription(res.data.expectations);
     setTeks(res.data.teks);
     setLink(res.data.link);
+    setLinkError(false);
   };
 
   useEffect(() => {
@@ -39,8 +41,15 @@ export default function LessonEditor({
     setVisible(false);
   };
 
-  const handleSubmit = async (e) => {
-    console.log(e);
+  const handleSubmit = async () => {
+    if (link) {
+      const goodLink = checkURL(link);
+      if (!goodLink) {
+        setLinkError(true);
+        message.error('Please Enter a valid URL starting with HTTP/HTTPS', 4);
+        return;
+      }
+    }
     const response = await updateLearningStandard(
       learningStandard.id,
       name,
@@ -59,6 +68,15 @@ export default function LessonEditor({
     }
   };
 
+  const checkURL = (n) => {
+    const regex =
+      /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g;
+    if (n.search(regex) === -1) {
+      return null;
+    }
+    return n;
+  };
+
   return (
     <div>
       <button id='link-btn' onClick={showModal}>
@@ -112,7 +130,9 @@ export default function LessonEditor({
             <Input
               onChange={(e) => {
                 setLink(e.target.value);
+                setLinkError(false);
               }}
+              style={linkError ? { backgroundColor: '#FFCCCC' } : {}}
               value={link}
               placeholder='Enter a link'
             />