utils#FadeDiv JavaScript Examples

The following examples show how to use utils#FadeDiv. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ResourceActivityBuild.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
ResourceActivityBuild = (props) => {
  const {
    resource,
    editResourcePopup,
    selectType,
    type,
    setActiveView,
  } = props;

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

      <div className="col-md-12">
        <div className="resource-activity">
          <div
            className="back-button"
            style={{ marginLeft: '15px' }}
            onClick={() => {
              setActiveView('describe');
              type.splice(type.indexOf('build', 1));
              selectType(type);
            }}
          >
            <FontAwesomeIcon icon="chevron-left" className="mr-2" />
            Back
          </div>

          <FadeDiv>
            {resource.newResource.activity.type === 'h5p' && (
              <H5PEditor {...props} />
            )}

            {(resource.newResource.activity.type === 'tinymce' || resource.newResource.activity.type === 'immersive_reader') && (
              <TinyEditor {...props} />
            )}

            {editResourcePopup && (
              <H5PEditor
                {...props}
                h5pParams={JSON.stringify(resource.newResource.params)}
                // h5pParams = "{&quot;params&quot;:{&quot;interactiveVideo&quot;:{&quot;video&quot;:{&quot;startScreenOptions&quot;:{&quot;title&quot;:&quot;Interactive Video&quot;,&quot;hideStartTitle&quot;:false},&quot;textTracks&quot;:{&quot;videoTrack&quot;:[{&quot;label&quot;:&quot;Subtitles&quot;,&quot;kind&quot;:&quot;subtitles&quot;,&quot;srcLang&quot;:&quot;en&quot;}]},&quot;files&quot;:[{&quot;path&quot;:&quot;https:\/\/www.youtube.com\/watch?v=XI641BhgOnI&quot;,&quot;mime&quot;:&quot;video\/YouTube&quot;,&quot;copyright&quot;:{&quot;license&quot;:&quot;U&quot;}}]},&quot;assets&quot;:{},&quot;summary&quot;:{&quot;task&quot;:{&quot;library&quot;:&quot;H5P.Summary 1.10&quot;,&quot;params&quot;:{&quot;intro&quot;:&quot;Choose the correct statement.&quot;,&quot;summaries&quot;:[{&quot;subContentId&quot;:&quot;ff6e0e78-49a5-47b5-b50e-2c36efde0568&quot;,&quot;tip&quot;:&quot;&quot;}],&quot;overallFeedback&quot;:[{&quot;from&quot;:0,&quot;to&quot;:100}],&quot;solvedLabel&quot;:&quot;Progress:&quot;,&quot;scoreLabel&quot;:&quot;Wrong answers:&quot;,&quot;resultLabel&quot;:&quot;Your result&quot;,&quot;labelCorrect&quot;:&quot;Correct.&quot;,&quot;labelIncorrect&quot;:&quot;Incorrect! Please try again.&quot;,&quot;alternativeIncorrectLabel&quot;:&quot;Incorrect&quot;,&quot;labelCorrectAnswers&quot;:&quot;Correct answers.&quot;,&quot;tipButtonLabel&quot;:&quot;Show tip&quot;,&quot;scoreBarLabel&quot;:&quot;You got :num out of :total points&quot;,&quot;progressText&quot;:&quot;Progress :num of :total&quot;},&quot;subContentId&quot;:&quot;f8b52010-0902-4f3d-9396-8387036a36b6&quot;,&quot;metadata&quot;:{&quot;contentType&quot;:&quot;Summary&quot;,&quot;license&quot;:&quot;U&quot;,&quot;title&quot;:&quot;Untitled Summary&quot;}},&quot;displayAt&quot;:3}},&quot;override&quot;:{&quot;autoplay&quot;:false,&quot;loop&quot;:false,&quot;showBookmarksmenuOnLoad&quot;:false,&quot;showRewind10&quot;:false,&quot;preventSkipping&quot;:false,&quot;deactivateSound&quot;:false},&quot;l10n&quot;:{&quot;interaction&quot;:&quot;Interaction&quot;,&quot;play&quot;:&quot;Play&quot;,&quot;pause&quot;:&quot;Pause&quot;,&quot;mute&quot;:&quot;Mute&quot;,&quot;unmute&quot;:&quot;Unmute&quot;,&quot;quality&quot;:&quot;Video Quality&quot;,&quot;captions&quot;:&quot;Captions&quot;,&quot;close&quot;:&quot;Close&quot;,&quot;fullscreen&quot;:&quot;Fullscreen&quot;,&quot;exitFullscreen&quot;:&quot;Exit Fullscreen&quot;,&quot;summary&quot;:&quot;Open summary dialog&quot;,&quot;bookmarks&quot;:&quot;Bookmarks&quot;,&quot;endscreen&quot;:&quot;Submit screen&quot;,&quot;defaultAdaptivitySeekLabel&quot;:&quot;Continue&quot;,&quot;continueWithVideo&quot;:&quot;Continue with video&quot;,&quot;playbackRate&quot;:&quot;Playback Rate&quot;,&quot;rewind10&quot;:&quot;Rewind 10 Seconds&quot;,&quot;navDisabled&quot;:&quot;Navigation is disabled&quot;,&quot;sndDisabled&quot;:&quot;Sound is disabled&quot;,&quot;requiresCompletionWarning&quot;:&quot;You need to answer all the questions correctly before continuing.&quot;,&quot;back&quot;:&quot;Back&quot;,&quot;hours&quot;:&quot;Hours&quot;,&quot;minutes&quot;:&quot;Minutes&quot;,&quot;seconds&quot;:&quot;Seconds&quot;,&quot;currentTime&quot;:&quot;Current time:&quot;,&quot;totalTime&quot;:&quot;Total time:&quot;,&quot;singleInteractionAnnouncement&quot;:&quot;Interaction appeared:&quot;,&quot;multipleInteractionsAnnouncement&quot;:&quot;Multiple interactions appeared.&quot;,&quot;videoPausedAnnouncement&quot;:&quot;Video is paused&quot;,&quot;content&quot;:&quot;Content&quot;,&quot;answered&quot;:&quot;@answered answered&quot;,&quot;endcardTitle&quot;:&quot;@answered Question(s) answered&quot;,&quot;endcardInformation&quot;:&quot;You have answered @answered questions, click below to submit your answers.&quot;,&quot;endcardInformationNoAnswers&quot;:&quot;You have not answered any questions.&quot;,&quot;endcardInformationMustHaveAnswer&quot;:&quot;You have to answer at least one question before you can submit your answers.&quot;,&quot;endcardSubmitButton&quot;:&quot;Submit Answers&quot;,&quot;endcardSubmitMessage&quot;:&quot;Your answers have been submitted!&quot;,&quot;endcardTableRowAnswered&quot;:&quot;Answered questions&quot;,&quot;endcardTableRowScore&quot;:&quot;Score&quot;,&quot;endcardAnsweredScore&quot;:&quot;answered&quot;,&quot;endCardTableRowSummaryWithScore&quot;:&quot;You got @score out of @total points for the @question that appeared after @minutes minutes and @seconds seconds.&quot;,&quot;endCardTableRowSummaryWithoutScore&quot;:&quot;You have answered the @question that appeared after @minutes minutes and @seconds seconds.&quot;}},&quot;metadata&quot;:{&quot;title&quot;:&quot;ABC https:\/\/www.youtube.com\/watch?v=XI641BhgOnI&quot;,&quot;license&quot;:&quot;U&quot;}}"
                h5pLib="H5P.InteractiveVideo 1.21"
              />
            )}
          </FadeDiv>
        </div>
      </div>
    </div>
  );
}
Example #2
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
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>
  );
}
Example #3
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
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>
  );
}
Example #4
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
function AddProjectsPage(props) {
  const {
    history,
    match: { params: { groupId } },
    group,
    projects,
    loadProjects,
    loadGroup,
    addProjects,
  } = props;

  useEffect(() => {
    loadProjects();
    loadGroup(groupId);
  }, [loadProjects, loadGroup, groupId]);
  const organization = useSelector((state) => state.organization);
  const { permission } = organization;
  const [selectedProjects, setSelectedProjects] = useState([]);
  const [searchProject, setSearchProject] = useState('');

  const filteredProjects = projects.filter(
    (p) => (group.selectedGroup.projects || []).findIndex((proj) => p.id === proj.id) === -1,
  );

  const handleSubmit = useCallback((projectIds) => {
    addProjects(
      groupId,
      projectIds,
    )
      .then(() => {
        history.push(`/org/${organization.currentOrganization?.domain}/groups/${groupId}/projects`);
      })
      .catch(() => {});
  }, [addProjects, groupId, history]);

  return (
    <>
      <div className="groups-page">
        <FadeDiv className="assign-projects">
          <div className="assign-projects-content">
            {permission?.Group?.includes('group:add-projects')
              ? (
                <AssignProject
                  isSaving={group.isLoading}
                  projects={filteredProjects}
                  handleSubmit={handleSubmit}
                  selectedProjects={selectedProjects}
                  setSelectedProjects={setSelectedProjects}
                  search={searchProject}
                  setSearch={setSearchProject}
                />
              )
              : <Alert variant="danger">You are not authorized to add projects.</Alert>}
          </div>
        </FadeDiv>
      </div>
    </>
  );
}
Example #5
Source File: ResourceSelectActivity.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
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>
  );
}
Example #6
Source File: ResourceActivityType.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
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>
  );
}
Example #7
Source File: ResourceActivityBuild.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
ResourceActivityBuild = (props) => {
  const {
    resource: { editResource },
    selectType,
    type,
    setActiveView,
  } = props;
  return (
    <div className="row">
      <div className="col-md-12">
        <div className="resource-activity">
          <div
            className="back-button"
            style={{ marginLeft: 15 }}
            onClick={() => {
              setActiveView('describe');
              type.splice(type.indexOf('build', 1));
              selectType(type);
            }}
          >
            <FontAwesomeIcon icon="chevron-left" className="mr-2" />
            Back
          </div>

          <FadeDiv>
            {/*
            {newResource.activity.type === 'h5p' && (
              <H5PEditor {...props} />
            )}
            */}

            {editResource.params && editResource.params.data !== '' ? (
              <H5PEditor
                {...props}
                h5pParams={JSON.stringify(editResource.params)}
                h5pLib={editResource.editor}
              />
            ) : (
              <h3>Loading...</h3>
            )}
          </FadeDiv>
        </div>
      </div>
    </div>
  );
}
Example #8
Source File: ResourceActivityType.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
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>
  );
}
Example #9
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
// TODO: need to clean up attribute
function DeletePopup(props) {
  const {
    ui,
    selectedProject,
    hideDeletePopup,
    deleteProject,
    deletePlaylist,
    deleteResource,
  } = props;

  // remove popup when escape is pressed
  const escFunction = useCallback((event) => {
    if (event.keyCode === 27) {
      hideDeletePopup(event);
    }
  }, [hideDeletePopup]);

  useEffect(() => {
    document.addEventListener('keydown', escFunction, false);
    return () => {
      document.removeEventListener('keydown', escFunction, false);
    };
  }, [escFunction]);

  const deleteEntity = useCallback((deleteType, id) => () => {
    if (deleteType === 'Project') {
      deleteProject(id);
    } else if (deleteType === 'Playlist') {
      deletePlaylist(selectedProject.id, id);
    } else if (deleteType === 'Activity') {
      deleteResource(id);
    }
  }, [selectedProject, deleteProject, deletePlaylist, deleteResource]);

  return (
    <FadeDiv className="popup">
      <div className="modal fade" role="dialog" aria-hidden="true">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-body">
              <h5>{`Delete "${ui.title}"?`}</h5>
              <p>
                {`You're about to permanently delete this ${ui.deleteType} and all of its data.`}
              </p>
              <p>Do you want to continue?</p>
            </div>

            <div className="modal-footer">
              <button
                type="submit"
                className="btn btn-sm btn-danger"
                onClick={deleteEntity(ui.deleteType, ui.id)}
              >
                Delete
              </button>

              <button
                type="button"
                className="btn btn-sm btn-default"
                data-dismiss="modal"
                onClick={hideDeletePopup}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </FadeDiv>
  );
}
Example #10
Source File: ResourceDescribeActivity.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
ResourceDescribeActivity = (props) => {
  const {
    resource,
    handleSubmit,
    uploadResourceThumbnailDefault,
    saveFormData,
  } = props;

  const [modalShow, setModalShow] = useState(false);
  const openFile = useRef();

  useEffect(() => {
    uploadResourceThumbnailDefault(resource.editResource.metadata.thumbUrl);
  }, [resource.editResource.metadata.thumbUrl, uploadResourceThumbnailDefault]);

  useEffect(() => {
    const { title, subjectId, educationLevelId } = resource.editResource.metadata;
    const subject = subjectId
      ? subjects.find((subj) => subj.subject === subjectId)
      : { subject: title ? ' ' : '', value: '' };
    const educationLvl = educationLevelId
      ? educationLevels.find((eduLvl) => eduLvl.name === educationLevelId)
      : { name: title ? ' ' : '', value: '' };
    const { metaTitle: savedTitle, metaEducationLevels, metaSubject } = resource.formData;
    const values = {
      metaTitle: savedTitle || title,
      metaSubject: metaSubject || { ...subject },
      metaEducationLevels: metaEducationLevels || { ...educationLvl },
    };
    saveFormData(values);
  }, [saveFormData, resource.editResource.metadata]);

  return (
    <div className="row">
      <div className="col-md-12">
        <div className="resource-question">
          <FadeDiv>
            <div className="row">
              <div className="col-md-12">
                <h2 className="title">Describe Activity:</h2>
              </div>
            </div>

            <div className="row">
              <div className="col-md-12">
                <div className="describe-activity-wrapper">
                  <form className="meta-form" onSubmit={handleSubmit} autoComplete="off">
                    <div className="row">
                      <div className="col-md-12">
                        <div className="meta-title">
                          <Field
                            name="metaTitle"
                            component={MetaTitleInputField}
                            type="text"
                            label="Title"
                            // validate={[required]}
                            defaultValue={resource.formData.metaTitle}
                            resource={resource.formData}
                          />
                        </div>
                      </div>
                    </div>

                    <div className="row">
                      <div className="col-md-6">
                        <div className="meta-subjects">
                          <label><h2>Subject</h2></label>
                          <Field
                            name="metaSubject"
                            component={MetaSubjectsField}
                            data={subjects}
                            valueField="value"
                            textField="subject"
                            defaultValue={resource.formData.metaSubject}
                            resource={resource.formData}
                          />
                        </div>
                      </div>

                      <div className="col-md-6">
                        <div className="meta-education-levels">
                          <label><h2>Education Level</h2></label>
                          <Field
                            name="metaEducationLevels"
                            component={MetaEducationLevelInputField}
                            data={educationLevels}
                            valueField="value"
                            textField="name"
                            defaultValue={resource.formData.metaEducationLevels}
                            resource={resource.formData}
                          />
                        </div>
                      </div>
                    </div>

                    <div className="upload-thumbnail check">
                      <div className="upload_placeholder">
                        <label style={{ display: 'none' }}>
                          <input
                            ref={openFile}
                            type="file"
                            accept="image/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, props);
                              }
                            }}
                          />
                          <span>Upload</span>
                        </label>

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

                        <div>
                          {resource.progress}

                          {resource.editResource.metadata.thumbUrl ? (
                            <div className="thumb-display">
                              <div
                                className="success"
                                style={{
                                  color: 'green',
                                  marginBottom: '20px',
                                  fontSize: '20px',
                                }}
                              >
                                Image Uploaded:
                              </div>
                              <div
                                className="imgbox"
                                style={{
                                  backgroundImage: resource.editResource.metadata.thumbUrl.includes('pexels.com')
                                    ? `url(${resource.editResource.metadata.thumbUrl})`
                                    : `url(${global.config.resourceUrl}${resource.editResource.metadata.thumbUrl})`,
                                }}
                              />
                            </div>
                          ) : (
                            <div className="new-box">
                              <h2>Default Selected thumbnail</h2>
                              <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">
                          <h2>Change thumbnail from below options</h2>

                          <div
                            className="pexel"
                            onClick={() => setModalShow(true)}
                          >
                            <img src={pexel} alt="pexel" />
                            <p>Select from Pexels</p>
                          </div>

                          <div
                            className="gallery"
                            onClick={() => {
                              openFile.current.click();
                            }}
                          >
                            <img src={computer} alt="" />
                            <p>Upload a Photo From your computer</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <p className="disclaimer">
                      Activity Image dimension should be
                      {' '}
                      <strong>290px width and 200px height. </strong>
                      Maximum File size allowed is
                      {' '}
                      <strong>100MB.</strong>
                    </p>
                    <div className="row">
                      <div className="col-md-12">
                        <button type="submit" className="add-resource-continue-btn">Save & Continue</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </FadeDiv>
        </div>
      </div>

      <PexelsAPI
        show={modalShow}
        resourceName={
          resource
          && resource.newResource
          && resource.newResource.activity
          && resource.newResource.activity.title
        }
        searchName="abstract"
        onHide={() => setModalShow(false)}
      />
    </div>
  );
}
Example #11
Source File: ResourceSelectActivity.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
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} />
    </>
  );
}
Example #12
Source File: ResourceDescribeActivity.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
ResourceDescribeActivity = (props) => {
  const {
    resource,
    handleSubmit,
    // goBackToActivity,
    selectType,
    type,
    setActiveView,
  } = props;
  const [modalShow, setModalShow] = useState(false);
  const openFile = useRef();
  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">
                  Describe Activity:
                  <div
                    className="back-button"
                    onClick={() => {
                      setActiveView('select');
                      type.splice(type.indexOf('describe', 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="describe-activity-wrapper">
                  <form
                    className="meta-form"
                    onSubmit={handleSubmit}
                    autoComplete="off"
                  >
                    <div className="flex-form-imag-upload">
                      <div>
                        <div className="row">
                          <div className="col-md-12">
                            <div className="meta-title">
                              <Field
                                name="metaTitle"
                                component={MetaTitleInputField}
                                type="text"
                                label="Title"
                                // validate={!resource.formData.metaTitle ? null : undefined}
                                defaultValue={resource.formData.metaTitle}
                                resource={resource.formData}
                              />
                            </div>
                          </div>
                        </div>

                        <div className="row">
                          <div className="col-md-6">
                            <div className="meta-subjects">
                              <label>
                                <h2>Subject</h2>
                              </label>

                              <Field
                                name="metaSubject"
                                component={MetaSubjectsField}
                                data={subjects}
                                valueField="value"
                                textField="subject"
                                defaultValue={resource.formData.metaSubject}
                                resource={resource.formData}
                              />
                            </div>
                          </div>

                          <div className="col-md-6">
                            <div className="meta-education-levels">
                              <label>
                                <h2>Education Level</h2>
                              </label>

                              <Field
                                name="metaEducationLevels"
                                component={MetaEducationLevelInputField}
                                data={educationLevels}
                                valueField="value"
                                textField="name"
                                defaultValue={resource.formData.metaEducationLevels}
                                resource={resource.formData}
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="upload-thumbnail check">
                      <div className="upload_placeholder">
                        <label style={{ display: 'none' }}>
                          <input
                            ref={openFile}
                            type="file"
                            accept="image/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, props);
                              }
                            }}
                          />
                          <span>Upload</span>
                        </label>

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

                        <div>
                          {resource.progress}

                          {resource.newResource.metadata.thumbUrl ? (
                            <div className="thumb-display">
                              <div
                                className="success"
                                style={{
                                  color: 'green',
                                  marginBottom: '20px',
                                  fontSize: '20px',
                                }}
                              >
                                Image Uploaded:
                              </div>

                              <div
                                className="imgbox"
                                style={{
                                  backgroundImage: resource.newResource.metadata.thumbUrl.includes('pexels.com')
                                    ? `url(${resource.newResource.metadata.thumbUrl})`
                                    : `url(${global.config.resourceUrl}${resource.newResource.metadata.thumbUrl})`,
                                }}
                              />
                            </div>
                          ) : (
                            <div className="new-box">
                              <h2>Default Selected thumbnail</h2>
                              <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">
                          <h2>Change thumbnail from below options</h2>

                          <div
                            className="pexel"
                            onClick={() => setModalShow(true)}
                          >
                            <img src={pexel} alt="pexel" />
                            <p>Select from Pexels</p>
                          </div>

                          <div
                            className="gallery"
                            onClick={() => {
                              openFile.current.click();
                            }}
                          >
                            <img src={computer} alt="" />
                            <p>Upload a Photo From your computer</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <p className="disclaimer">
                      Activity Image dimension should be
                      {' '}
                      <strong>290px width and 200px height. </strong>
                      Maximum File size allowed is
                      {' '}
                      <strong>100MB.</strong>
                    </p>

                    <div className="row">
                      <div className="col-md-12">
                        <button type="submit" className="add-resource-continue-btn">
                          Save & Continue
                        </button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </FadeDiv>
        </div>
      </div>

      <PexelsAPI
        show={modalShow}
        resourceName={
          resource
          && resource.newResource
          && resource.newResource.activity
          && resource.newResource.activity.title
        }
        searchName={
          resource
            && resource.newResource
            && resource.newResource.activity
            && !!resource.newResource.activity.activity_thumbnail_text
            ? resource.newResource.activity.activity_thumbnail_text
            : resource.newResource.activity.title
        }
        onHide={() => setModalShow(false)}
      />
    </div>
  );
}
Example #13
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
function AssignProject(props) {
  const { isSaving, projects, handleSubmit, selectedProjects, setSelectedProjects, search, setSearch } = props;

  const onChange = useCallback(
    (e) => {
      setSearch(e.target.value);
    },
    [setSearch]
  );
  const [filteredProjects, setFilteredProjects] = useState([]);
  const selectProject = useCallback(
    (projectId) => {
      const newProjects = [...selectedProjects];
      const projectIndex = newProjects.indexOf(projectId);
      if (projectIndex === -1) {
        setSelectedProjects([...newProjects, projectId]);
      } else {
        newProjects.splice(projectIndex, 1);
        setSelectedProjects(newProjects);
      }
    },
    [selectedProjects]
  );

  const onFinish = useCallback(() => {
    handleSubmit(selectedProjects);
  }, [selectedProjects, handleSubmit]);
  useEffect(() => {
    if (projects) {
      setFilteredProjects(projects.filter((project) => project.name.toLowerCase().includes(search.toLowerCase())));
    }
  }, [projects, search]);

  const finishButton = (
    <button type="button" className="create-group-submit-btn" disabled={isSaving} onClick={onFinish}>
      Finish
      {isSaving && <FontAwesomeIcon icon="spinner" />}
    </button>
  );

  return (
    <div className="group-information">
      <FadeDiv>
        <div className="title-box">
          <h2 className="title">Add/Assign Project</h2>
          <div className="title-cross" />
          {finishButton}
        </div>

        <div className="assign-project-wrapper">
          <div className="search-box">
            <input type="text" placeholder="Filter by name" value={search} onChange={onChange} />
          </div>

          <div className="assign-projects">
            {filteredProjects.length > 0 ? (
              filteredProjects.map((project) => (
                <div key={project.id} className="assign-project-item" onClick={() => selectProject(project.id)}>
                  <div
                    className="project-img"
                    style={{
                      backgroundImage: project?.thumb_url?.includes('pexels.com') ? `url(${project.thumb_url})` : `url(${global.config.resourceUrl}${project.thumb_url})`,
                    }}
                  />

                  <div className="assign-project-radio">{selectedProjects.indexOf(project.id) > -1 && <span className="checkmark" />}</div>

                  <div className="assign-project-title">{project.name}</div>
                </div>
              ))
            ) : (
              <div> No Project Found. </div>
            )}
          </div>

          {finishButton}
        </div>
      </FadeDiv>
    </div>
  );
}
Example #14
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
function InviteGroup(props) {
  const {
    // team,
    isInviting,
    nextStep,
    user: authUser,
    selectedMembers,
    setSelectedMembers,
    // setInvitedMembers,
  } = props;

  // const [search, setSearch] = useState('');
  // const [selectedMembers, setSelectedMembers] = useState([]);
  // const [filteredMembers, setFilteredMembers] = useState([]);
  const [showInvite, setShowInvite] = useState(false);
  const [errorMsg, setErrorMsg] = useState(null);

  // const onChange = useCallback((e) => {
  //   setSearch(e.target.value);
  // }, []);

  // useEffect(() => {
  //   setFilteredMembers(selectedMembers.filter((mem) => (
  //     mem.name.toLowerCase().includes(search.toLowerCase())
  //     || mem.email.toLowerCase().includes(search.toLowerCase())
  //   )));
  // }, [search, selectedMember]);

  // const invitedUsers = selectedMembers || [];

  const handleInvite = useCallback((users, note) => {
    setSelectedMembers([...selectedMembers, ...users.map((u) => ({ ...u, note }))]);
    setShowInvite(false);
  }, [selectedMembers]);

  return (
    <div className="group-information">
      <FadeDiv>
        <div className="title-box">
          <h2 className="title">Invite Group Members</h2>
          <div className="title-cross" />
        </div>
        Invite at least 1 or more member to your group
        <div className="invite-member-wrapper">
          <div className="search-box">
            {/*
            <input
              type="text"
              placeholder="Filter by name"
              value={search}
              onChange={onChange}
            />
            */}

            <InviteDialogGroup
              handleInvite={handleInvite}
              visible={showInvite}
              setShowInvite={setShowInvite}
              authUser={{ ...authUser, role: 'owner' }}
              users={selectedMembers}
            />
          </div>

          <div className="member-list">
            {/*
            <div className="member-list-content">
              {invitedUsers.map((user) => (
                <MemberItem
                  key={user.id}
                  invited
                  isInviting={isInviting}
                  user={user}
                />
              ))}
            </div>
            */}

            <div className="member-list-content">
              {selectedMembers.map((user) => (
                <MemberItem
                  key={user.id}
                  invited
                  isInviting={isInviting}
                  selected={false}
                  user={user}
                  selectMember={setSelectedMembers}
                  // inviteUser={handleInvite}
                />
              ))}
            </div>
          </div>
          <div style={{ color: 'red' }}>
            {errorMsg}
          </div>
          <button
            type="button"
            className="create-group-continue-btn"
            onClick={() => {
              // setInvitedMembers(selectedMembers.map(
              //   // eslint-disable-next-line no-restricted-globals
              //   ({ id, ...mem }) => ({ id: isNaN(id) ? 0 : id, ...mem }),
              // ));
              if (selectedMembers.length > 0) {
                nextStep();
              } else {
                setErrorMsg('Invite at least 1 member');
              }
            }}
          >
            Continue
          </button>
        </div>
      </FadeDiv>
    </div>
  );
}
Example #15
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
function AddProjectsPage(props) {
  const {
    history,
    match: {
      params: { teamId },
    },
    team,
    projects,
    loadProjects,
    loadTeam,
    addProjects,
  } = props;
  const historyback = useHistory();
  const dispatch = useDispatch();
  const organization = useSelector((state) => state.organization);
  const { activeOrganization } = organization;
  const { teamPermission } = useSelector((state) => state.team);
  useEffect(() => {
    if (activeOrganization) {
      loadProjects();
    }
    loadTeam(teamId);
  }, [loadProjects, loadTeam, teamId, activeOrganization]);
  // Fetch team permission if page reloads
  useEffect(() => {
    if (Object.keys(teamPermission).length === 0 && organization?.currentOrganization?.id && teamId) {
      dispatch(getTeamPermission(organization?.currentOrganization?.id, teamId));
    }
  }, [team]);
  const [selectedProjects, setSelectedProjects] = useState([]);
  const [searchProject, setSearchProject] = useState('');

  const filteredProjects = projects.filter((p) => (team.selectedTeam.projects || []).findIndex((proj) => p.id === proj.id) === -1);

  const handleSubmit = useCallback(
    (projectIds) => {
      addProjects(teamId, projectIds).then((result) => {
        history.push(`/org/${organization.currentOrganization?.domain}/teams/${teamId}/projects`);
        Swal.fire({
          icon: 'success',
          title: result?.message,
        });
      });
    },
    [addProjects, teamId, history]
  );

  return (
    <>
      <div className="side-wrapper-team-projects">
        <div className="bread-crumb">
          <div className="main-flex-top">
            <div>
              <span>Team</span>
              <FontAwesomeIcon icon="angle-right" />
              <span>Add Project</span>
            </div>
          </div>
          <Link to="#" className="back-button-main-page" onClick={() => historyback.goBack()}>
            <FontAwesomeIcon icon="chevron-left" />
            Back
          </Link>
        </div>
      </div>
      <div className="teams-page">
        <br />
        <br />
        <FadeDiv className="assign-projects">
          <div className="assign-projects-content">
            {teamPermission?.Team?.includes('team:add-project') ? (
              <AssignProject
                isSaving={team.isLoading}
                projects={filteredProjects}
                handleSubmit={handleSubmit}
                selectedProjects={selectedProjects}
                setSelectedProjects={setSelectedProjects}
                search={searchProject}
                setSearch={setSearchProject}
              />
            ) : (
              <Alert variant="danger"> You are not authorized to add projects.</Alert>
            )}
          </div>
        </FadeDiv>
      </div>
    </>
  );
}
Example #16
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
function AssignProject(props) {
  const { isSaving, projects, handleSubmit, selectedProjects, setSelectedProjects, search, setSearch } = props;
  const dispatch = useDispatch();
  const onChange = useCallback(
    (e) => {
      setSearch(e.target.value);
    },
    [setSearch]
  );
  const [filteredProjects, setFilteredProjects] = useState(null);
  const selectProject = useCallback(
    (projectId, projectName) => {
      dispatch(selectedProjectForCloning(projectName));
      const newProjects = [...selectedProjects];
      const projectIndex = newProjects.indexOf(projectId);
      if (projectIndex === -1) {
        setSelectedProjects([...newProjects, projectId]);
      } else {
        newProjects.splice(projectIndex, 1);
        setSelectedProjects(newProjects);
      }
    },
    [selectedProjects]
  );

  const onFinish = useCallback(() => {
    handleSubmit(selectedProjects);
  }, [selectedProjects, handleSubmit]);
  useEffect(() => {
    if (projects) {
      setFilteredProjects(projects.filter((project) => project.name.toLowerCase().includes(search.toLowerCase())));
    }
  }, [projects, search]);

  const finishButton = (
    <button type="button" className="create-team-submit-btn" disabled={isSaving} onClick={onFinish}>
      Finish
      {isSaving && <FontAwesomeIcon icon="spinner" />}
    </button>
  );

  return (
    <div className="team-information">
      <FadeDiv>
        <div className="title-box">
          <h2 className="title">Add/Assign Project</h2>
          <div className="title-cross" />
          {filteredProjects?.length > 0 ? finishButton : null}
        </div>

        <div className="assign-project-wrapper">
          <div className="search-box">
            <input type="text" placeholder="Filter by name" value={search} onChange={onChange} />
          </div>

          <div className="assign-projects">
            {filteredProjects ? (
              filteredProjects.length > 0 ? (
                filteredProjects.map((project) => (
                  <div
                    key={project.id}
                    className="assign-project-item"
                    onClick={() => {
                      if (selectedProjects.length === 0 || selectedProjects[0] === project.id) {
                        selectProject(project.id, project.name);
                      } else {
                        Swal.fire({
                          icon: 'warning',
                          title: 'Action Prohibited',
                          text: 'You are only allowed to select 1 project.',
                        });
                      }
                    }}
                  >
                    <div
                      className="project-img"
                      style={{
                        backgroundImage: project.thumb_url?.includes('pexels.com') ? `url(${project.thumb_url})` : `url(${global.config.resourceUrl}${project.thumb_url})`,
                      }}
                    />

                    <div className="assign-project-radio">{selectedProjects.indexOf(project.id) > -1 && <span className="checkmark" />}</div>

                    <div className="assign-project-title">{project.name}</div>
                  </div>
                ))
              ) : (
                <Alert variant="warning"> No Project Found. </Alert>
              )
            ) : (
              <Alert variant="primary">Loading...</Alert>
            )}
          </div>

          {filteredProjects?.length > 0 ? finishButton : null}
        </div>
      </FadeDiv>
    </div>
  );
}
Example #17
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up
function InviteTeam(props) {
  const {
    // team,
    isInviting,
    nextStep,
    user: authUser,
    selectedMembers,
    setSelectedMembers,
    // setInvitedMembers,
  } = props;

  // const [search, setSearch] = useState('');
  // const [selectedMembers, setSelectedMembers] = useState([]);
  // const [filteredMembers, setFilteredMembers] = useState([]);
  const [showInvite, setShowInvite] = useState(false);
  const [errorMsg, setErrorMsg] = useState(null);
  // const onChange = useCallback((e) => {
  //   setSearch(e.target.value);
  // }, []);

  // useEffect(() => {
  //   setFilteredMembers(selectedMembers.filter((mem) => (
  //     mem.name.toLowerCase().includes(search.toLowerCase())
  //     || mem.email.toLowerCase().includes(search.toLowerCase())
  //   )));
  // }, [search, selectedMember]);

  // const invitedUsers = selectedMembers || [];

  const handleInvite = useCallback((users, note) => {
    setSelectedMembers([...selectedMembers, ...users.map((u) => ({ ...u, note }))]);
    setShowInvite(false);
  }, [selectedMembers]);

  return (
    <div className="team-information">
      <FadeDiv>
        <div className="title-box">
          <h2 className="title">Invite Team Members</h2>
          <div className="title-cross" />
        </div>
        Invite at least 1 or more member to your team
        <div className="invite-member-wrapper">
          <div className="search-box">
            {/*
            <input
              type="text"
              placeholder="Filter by name"
              value={search}
              onChange={onChange}
            />
            */}

            <InviteDialog
              handleInvite={handleInvite}
              visible={showInvite}
              setShowInvite={setShowInvite}
              authUser={{ ...authUser, role: 'owner' }}
              users={selectedMembers}
            />
          </div>

          <div className="member-list">
            {/*
            <div className="member-list-content">
              {invitedUsers.map((user) => (
                <MemberItem
                  key={user.id}
                  invited
                  isInviting={isInviting}
                  user={user}
                />
              ))}
            </div>
            */}

            <div className="member-list-content">
              {selectedMembers.map((user) => (
                <MemberItem
                  key={user.id}
                  invited
                  isInviting={isInviting}
                  selected={false}
                  user={user}
                  selectMember={setSelectedMembers}
                // inviteUser={handleInvite}
                />
              ))}
            </div>
          </div>
          <div style={{ color: 'red' }}>
            {errorMsg}
          </div>
          <button
            type="button"
            className="create-team-continue-btn"
            onClick={() => {
              // setInvitedMembers(selectedMembers.map(
              //   // eslint-disable-next-line no-restricted-globals
              //   ({ id, ...mem }) => ({ id: isNaN(id) ? 0 : id, ...mem }),
              // ));
              if (selectedMembers.length > 0) {
                nextStep();
              } else {
                setErrorMsg('Invite at least 1 member');
              }
            }}
          >
            Continue
          </button>
        </div>
      </FadeDiv>
    </div>
  );
}