utils#required JavaScript Examples

ResourceActivityType = (props) => {
  const {
    resource,
    loadResourceTypes,
    selectType,
    type,
    setActiveView,
  } = props;
  const { types: activityTypes } = resource;

  useEffect(() => {
    loadResourceTypes();
  }, [loadResourceTypes]);

  const { handleSubmit, onChangeActivityType } = props;

  const activityTypesContent = activityTypes?.map((activityType) => (
    <div className="col-md-3" key={activityType.id}>
      <label className="activity-label">
        <Field
          name="activityType"
          component={ResourceActivityTypeField}
          type="radio"
          value={`${activityType.id}`}
          onChange={() => {
            onChangeActivityType(activityType.id);
            selectType([...type, 'select']);
            setActiveView('select');
          }}
          validate={[required]}
        />

        <div className="activity-item">
          <div
            className="activity-img"
            style={{ backgroundImage: `url(${global.config.resourceUrl}${activityType.image})` }}
          />

          <div className="activity-content">
            <span>{activityType.title}</span>
          </div>
        </div>
      </label>
    </div>
  ));

  return (
    <div className="row">
      {/* <div className="col-md-3">
        <AddResourceSidebar {...props} />
      </div> */}
      <div className="col-md-12">
        <div className="resource-activity">
          <FadeDiv>
            <div className="row">
              <div className="col-md-12">
                <h2 className="title">Pick Activity Type</h2>

                <div className="activity-content">
                  <p>
                    Create memorable learning experiences from one of the
                    activity types below:
                  </p>
                </div>
              </div>
            </div>

            <form
              className="row meta-form"
              onSubmit={handleSubmit}
              autoComplete="off"
            >
              {activityTypesContent}
            </form>
          </FadeDiv>
        </div>
      </div>
    </div>
  );
}

ResourceActivityType = (props) => {
  const {
    handleSubmit,
    onChangeActivityType,
  } = props;

  const activitiesContent = activities.map((activity) => (
    <div className="col-md-3" key={activity.id}>
      <label className="activity-label">

        <Field
          name="activityType"
          component={ResourceActivityTypeField}
          type="radio"
          value={activity.id}
          onChange={onChangeActivityType}
          validate={[required]}
        />

        <div className="activity-item">
          <div className="activity-img">
            <img src={activity.icon} className="activity-icon" alt="" />
            <img src={activity.overlayIcon} className="overlay-activity-icon" alt="" />
          </div>
          <div className="activity-content">
            <span>
              {activity.title}
            </span>
          </div>
        </div>
      </label>
    </div>
  ));

  return (
    <div className="row">
      <div className="col-md-3">
        <EditResourceSidebar {...props} />
      </div>

      <div className="col-md-9">
        <div className="resource-activity">
          <FadeDiv>
            <div className="row">
              <div className="col-md-12">
                <h2 className="title">Select the type of activity you want to create?</h2>
                <div className="activity-content">
                  <p>
                    Create memorable learning experiences from one of the activity types below:
                  </p>
                </div>
              </div>
            </div>

            <form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
              {activitiesContent}
              <div className="row">
                <div className="col-md-12">
                  <button type="submit" className="add-resource-continue-btn">Continue</button>
                </div>
              </div>
            </form>
          </FadeDiv>
        </div>
      </div>
    </div>
  );
}

ResourceSelectActivity = (props) => {
  const { handleSubmit, onChangeActivity } = props;

  const questionsContent = questions.map((activity) => (
    <div className="col-md-3" key={activity.id}>
      <label className="question-label">
        <Field
          name="activity"
          component={ResourceActivityTypeField}
          type="radio"
          value={activity.h5pLib}
          onChange={(e) => onChangeActivity(activity, e)}
          validate={[required]}
        />

        <div className="activity-item">
          <div className="activity-img">
            <img src={activity.icon} className="activity-icon" alt="" />
            <img src={activity.overlayIcon} className="overlay-activity-icon" alt="" />
          </div>

          <div className="activity-content">
            <span>{activity.text}</span>
            <p>{activity.description}</p>
          </div>
        </div>
      </label>
    </div>
  ));

  return (
    <div className="row">
      <div className="col-md-3">
        <EditResourceSidebar {...props} />
      </div>

      <div className="col-md-9">
        <div className="resource-question">
          <FadeDiv>
            <div className="row">
              <div className="col-md-12">
                <h2 className="title">Select the activity you want to build from the options below:</h2>
              </div>
            </div>

            <div className="row">
              <form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
                {questionsContent}
                <div className="col-md-12">
                  <button type="submit" className="add-resource-continue-btn">Continue</button>
                </div>
              </form>
            </div>
          </FadeDiv>
        </div>
      </div>
    </div>
  );
}

Creation = (props) => {
  const { handleSubmit, editMode } = props;

  return (
    <div className="group-information">
      <FadeDiv>
        <div className="title-box">
          <h2 className="title">
            {editMode ? 'Edit ' : 'Create '}
            Group
          </h2>
          <div className="title-cross" />
        </div>

        <div className="create-group-wrapper">
          <h2 className="describe">
            {editMode ? ' Editing your group information ' : 'Start your group by adding a name and description'}
          </h2>

          <div className="creation-panel">
            <form className="create-group-form" onSubmit={handleSubmit}>
              <div className="group-info-input">
                <div className="group-name">
                  <Field
                    name="name"
                    component={InputField}
                    label="Group Name"
                    type="text"
                    validate={[required, maxName]}
                  />
                </div>

                <div className="group-description">
                  <Field
                    name="description"
                    component={TextareaField}
                    label="Group Description"
                    validate={[required, maxDescription]}
                  />
                </div>
              </div>

              <button type="submit" className="create-group-continue-btn">
                Continue
              </button>
            </form>
          </div>
        </div>
      </FadeDiv>
    </div>
  );
}

Creation = (props) => {
  const { handleSubmit, editMode } = props;

  return (
    <div className="team-information">
      <FadeDiv>
        <div className="title-box">
          <h2 className="title">
            {editMode ? 'Edit ' : 'Create '}
            Team
          </h2>
          <div className="title-cross" />
        </div>

        <div className="create-team-wrapper">
          <h2 className="describe">
            {editMode ? ' Editing your team information ' : ' Start your team by adding a name and description '}
          </h2>

          <div className="creation-panel">
            <form className="create-team-form" onSubmit={handleSubmit}>
              <div className="team-info-input">
                <div className="team-name">
                  <Field
                    name="name"
                    component={InputField}
                    label="Team Name"
                    type="text"
                    validate={[required, maxName]}
                  />
                </div>

                <div className="team-description">
                  <Field
                    name="description"
                    component={TextareaField}
                    label="Team Description"
                    validate={[required, maxDescription]}
                  />
                </div>
                <h2 className="satelliteteaminfo"> Satellite Team Information (Optional)</h2>
                <div className="team-name">
                  <Field
                    name="noovo_group_title"
                    component={InputField}
                    label="Noovo Group Title"
                    validate={[maxName]}
                  />
                </div>
              </div>

              <button
                type="submit"
                className="create-team-continue-btn"
              //   onClick={() => {
              //     if (editMode) {
              //       handleSubmitInEditMode();
              //     }
              // }}
              >
                {editMode ? 'Update' : 'Continue'}
              </button>
            </form>
          </div>
        </div>
      </FadeDiv>
    </div>
  );
}

ResourceSelectActivity = (props) => {
  const {
    resource,
    handleSubmit,
    // goBackToActivity,
    onChangeActivity,
    loadResourceItems,
    saveSearchKey,
    selectType,
    type,
    setActiveView,
  } = props;

  const [activities, setActivities] = useState([]);
  const [searchActivities, setSearchActivities] = useState([]);
  const [activeType, setActiveType] = useState('');
  const [modalShow, setModalShow] = useState(false);
  const [currentActivity, setCurrentActivity] = useState(null);

  const searchActivity = useCallback(
    (e) => {
      const data = searchActivities.filter((activity) => activity.title.toLowerCase().includes(e.target.value.toLowerCase()));
      setActivities(data);
      saveSearchKey(e.target.value.toLowerCase());
    },
    [saveSearchKey, searchActivities]
  );

  // useEffect(() => {
  //   searchActivity({ target: { value: resource.searchKey } });
  // }, [resource.searchKey, searchActivities, searchActivity]);

  useEffect(() => {
    // get activity type items
    loadResourceItems(resource.newResource.activityTypeId)
      .then((activityItems) => {
        const { searchKey } = resource;
        if (searchKey) {
          const data = activityItems.filter((activity) => activity.title.toLowerCase().includes(searchKey));
          setActivities(data);
        } else {
          setActivities(activityItems);
        }
        setSearchActivities(activityItems);
      })
      .catch(() => {});
  }, [loadResourceItems, resource.newResource.activityTypeId]);

  const questionsContent = activities.map((activity) => (
    <div className="col-lg-4 col-xl-3 responsive-pad" key={activity.id}>
      <div className="activity-item with_options">
        <label className="question-label">
          <Field
            name="activity"
            component={ResourceActivityTypeField}
            type="radio"
            value={activity.h5pLib || activity.type}
            onChange={(e) => {
              onChangeActivity(activity, e);
              setActiveView('describe');
              selectType([...type, 'describe']);
            }}
            validate={[required]}
          />

          <div className="content">
            <div
              className="activity-img"
              style={{
                backgroundImage: activity.image.includes('pexels.com') ? `url(${activity.image})` : `url(${global.config.resourceUrl}${activity.image})`,
              }}
            />

            <div className="activity-content">
              <span>{activity.title}</span>
              <p>{activity.description}</p>
            </div>
          </div>
        </label>

        <div className="option_section">
          <div
            className="option_type"
            onClick={() => {
              setCurrentActivity(activity);
              setActiveType('demo');
              setModalShow(true);
            }}
          >
            <FontAwesomeIcon icon="desktop" className="mr-2" />
            Demo
          </div>
          <div
            className="option_type"
            onClick={() => {
              setCurrentActivity(activity);
              setActiveType('video');
              setModalShow(true);
            }}
          >
            <FontAwesomeIcon icon="play-circle" />
            Video
          </div>
        </div>
      </div>
    </div>
  ));

  return (
    <>
      <div className="row">
        {/* <div className="col-md-3">
          <AddResourceSidebar {...props} />
        </div> */}

        <div className="col-md-12">
          <div className="resource-question">
            <FadeDiv>
              <div className="row">
                <div className="col-md-12">
                  <h2 className="title">
                    Select the activity you want to build from the options below:
                    <div
                      className="back-button"
                      onClick={() => {
                        setActiveView('type');
                        type.splice(type.indexOf('select', 1));
                        selectType(type);
                      }}
                    >
                      <FontAwesomeIcon icon="chevron-left" className="mr-2" />
                      Back
                    </div>
                  </h2>
                </div>
              </div>

              <div className="row">
                <div className="col-md-12">
                  <div className="shadowbox">
                    <div className="search-box">
                      <input type="text" placeholder="Search activity" onChange={searchActivity} defaultValue={resource.searchKey} />
                      <FontAwesomeIcon icon="search" />
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
                  <div className="scroll-blog">
                    <div className="row">{questionsContent}</div>
                  </div>
                </form>
              </div>
            </FadeDiv>
          </div>
        </div>
      </div>

      <MyVerticallyCenteredModal show={modalShow} onHide={() => setModalShow(false)} activity={currentActivity} activeType={activeType} />
    </>
  );
}

CreateProjectPopup = (props) => {
  const { isLoading, project, handleSubmit, handleCloseProjectModal, showCreateProjectModal, getProjectVisibilityTypes, vType } = props;
  const dispatch = useDispatch();
  const stateHeader = useSelector((state) => state.organization);
  const projectState = useSelector((state) => state.project);
  const { teamPermission } = useSelector((state) => state.team);
  const { permission } = stateHeader;
  const [modalShow, setModalShow] = useState(false);
  const openFile = useRef();
  const [visibilityTypeArray, setVisibilityTypeArray] = useState([]);
  // remove popup when escape is pressed
  const escFunction = useCallback(
    (event) => {
      if (event.keyCode === 27) {
        handleCloseProjectModal(event);
      }
    },
    [handleCloseProjectModal]
  );


  useEffect(() => {
    document.addEventListener('keydown', escFunction, false);
    return () => {
      document.removeEventListener('keydown', escFunction, false);
    };
  }, [escFunction]);
  useMemo(() => {
    (async () => {
      const { data } = await getProjectVisibilityTypes();
      setVisibilityTypeArray(data.data);
    })();
  }, [getProjectVisibilityTypes]);

  return (
    (permission?.Project?.includes('project:create')) ? (
      <div className="create-program-wrapper">
        <PexelsAPI
          show={modalShow}
          project={project}
          onHide={() => {
            setModalShow(false);
          }}
          searchName="abstract"
        />

        <form className="create-playlist-form" onSubmit={handleSubmit} autoComplete="off">
          <div className="project-name">
            <Field
              name="name"
              component={InputField}
              type="text"
              validate={[required, maxLength80]}
              autoComplete="new-password"
              className="reduxlabel"
              label="Project name"
              placeholder="e.g Course Name"
            />
          </div>

          <div className="project-description">
            <Field name="description" component={TextareaField} validate={[required, maxLength1000]} autoComplete="new-password" label="Project Description" />
          </div>
          <div className="upload-thumbnail check">
            <div className="upload_placeholder">
              <label style={{ display: 'none' }}>
                <input
                  ref={openFile}
                  type="file"
                  accept="image/x-png,image/jpeg"
                  onChange={(e) => {
                    if (e.target.files.length === 0) {
                      return true;
                    }
                    if (
                      !(
                        e.target.files[0].type.includes('png') ||
                        e.target.files[0].type.includes('jpg') ||
                        e.target.files[0].type.includes('gif') ||
                        e.target.files[0].type.includes('jpeg')
                      )
                    ) {
                      Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Invalid file selected.',
                      });
                    } else if (e.target.files[0].size > 100000000) {
                      Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Selected file size should be less then 100MB.',
                      });
                    } else {
                      uploadThumb(e, permission, teamPermission, projectState?.selectedProject?.id, dispatch);
                    }
                  }}
                />
                <span>Upload</span>
              </label>

              <span className="validation-error">{imageValidation}</span>

              <div>
                {project?.thumbUrl ? (
                  <div className="thumb-display">
                    <label>
                      <h2>Upload Image</h2>
                    </label>
                    <div
                      className="imgbox"
                      style={{
                        backgroundImage: project.thumbUrl.includes('pexels.com') ? `url(${project.thumbUrl})` : `url(${global.config.resourceUrl}${project.thumbUrl})`,
                      }}
                    />
                  </div>
                ) : (
                  <div className="new-box">
                    <label>
                      <h2>Upload Image</h2>
                    </label>
                    <div className="imgbox">
                      {/* eslint-disable-next-line max-len */}
                      <img src="https://images.pexels.com/photos/593158/pexels-photo-593158.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;fit=crop&amp;h=200&amp;w=280" alt="" />
                    </div>
                  </div>
                )}
              </div>

              <div className="button-flex ">
                <div className="pexel" onClick={() => setModalShow(true)}>
                  <img src={pexel} alt="pexel" />
                  <p>Pexels</p>
                </div>
                <div
                  className="gallery"
                  onClick={() => {
                    openFile.current.click();
                  }}
                >
                  <img src={computer} alt="" />
                  <p>My device</p>
                </div>
              </div>
            </div>

            <p className="disclaimer">
              Project Image dimension should be <strong>280px width and 200px height. </strong>
              Maximum File size allowed is <strong>100MB.</strong>
            </p>
          </div>
          <div className="create-project-template-wrapper">
            <button type="submit" className="create-project-submit-btn" disabled={isLoading}>
              {isLoading ? <img src={loader} alt="" /> : 'Create Project'}
            </button>
          </div>
        </form>
      </div>
    ) : (
      <Alert style={{ marginTop: '25px' }} variant="danger">
        You are not authorized to access this.
      </Alert>
    )
  );
}