reactstrap#DropdownMenu TypeScript Examples

The following examples show how to use reactstrap#DropdownMenu. 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: Dropdown.tsx    From opensaas with MIT License 6 votes vote down vote up
Dropdown: React.FC<DropdownProps> = (props) => {
  const { caret, color, size, label, right, className, children, direction = 'down' } = props;
  const [open, setOpen] = React.useState(false);

  const toggle = () => setOpen(!open);

  return (
    <ReactstrapDropdown className={className} direction={direction} isOpen={open} toggle={toggle}>
      <DropdownToggle caret={caret} color={color} size={size}>
        {label}
      </DropdownToggle>
      <DropdownMenu right={right}>{children}</DropdownMenu>
    </ReactstrapDropdown>
  );
}
Example #2
Source File: SettingsButton.tsx    From opensaas with MIT License 6 votes vote down vote up
SettingsButton: React.FC<SettingsButtonProps> = (props: SettingsButtonProps) => {
  const { settings } = props;
  const [open, setOpen] = React.useState(false);
  const toggle = () => setOpen((prevState) => !prevState);
  return (
    <Dropdown className='settings position-fixed pl-2 d-none d-md-block' isOpen={open} toggle={toggle}>
      <DropdownToggle className='btn-dropdown-settings'>
        <SettingsIcon />
      </DropdownToggle>
      <DropdownMenu>
        {settings.map((item, index: number) => {
          const [state, setState] = item.state;
          return (
            <div key={index} className='settings-item flex-row'>
              <Switch
                className='w-100 p-2'
                label=''
                textLabel={item.label}
                name=''
                trackColor='rgb(144, 202, 249)'
                sliderColor='rgb(33, 150, 243)'
                check={state}
                value={state}
                onChange={() => setState(!state)}
              />
            </div>
          );
        })}
      </DropdownMenu>
    </Dropdown>
  );
}
Example #3
Source File: LanguageSwitcher.tsx    From nextclade with MIT License 6 votes vote down vote up
export function LanguageSwitcher({ ...restProps }: LanguageSwitcherProps) {
  const [currentLocale, setCurrentLocale] = useRecoilState(localeAtom)
  const [dropdownOpen, setDropdownOpen] = useState(false)
  const toggle = useCallback(() => setDropdownOpen((prevState) => !prevState), [])
  const setLocaleLocal = useCallback((locale: Locale) => () => setCurrentLocale(locale), [setCurrentLocale])

  return (
    <Dropdown className="language-switcher" isOpen={dropdownOpen} toggle={toggle} {...restProps}>
      <DropdownToggle nav caret>
        <LanguageSwitcherItem locale={currentLocale} />
      </DropdownToggle>
      <DropdownMenu className="language-switcher-menu" positionFixed>
        {localesArray.map((locale) => {
          const isCurrent = locale.key === currentLocale.key
          return (
            <DropdownItem active={isCurrent} key={locale.key} onClick={setLocaleLocal(locale)}>
              <LanguageSwitcherItem locale={locale} />
            </DropdownItem>
          )
        })}
      </DropdownMenu>
    </Dropdown>
  )
}
Example #4
Source File: ClientHistory.tsx    From TutorBase with MIT License 5 votes vote down vote up
ClientHistory = () => {
    let clientData = useSelector(selectClientData);
    let [dropDownOpen, setDropdownOpen] = useState<boolean>(false);
    let [dropDownValue, setDropdownValue] = useState<String>("All");
    let [appointments, setAppointments] = useState<Array<Appointment>>([]);
    let dispatch = useDispatch();

    useEffect(() => {
        const getAppointments = async () => {
            return (await api.GetClientAppointments(clientData.clientId)).data.reverse();
        }

        getAppointments().then(value => {
                setAppointments(value);
                dispatch(clientDataActions.setAppointment(value));
            }
        )
    }, [clientData.clientId, dispatch]);

    let filteredAppointments = appointments;
    if (dropDownValue==="Denied"){
        filteredAppointments = appointments.filter((appointment) => !appointment.confirmed);
    } else if (dropDownValue==="Completed"){
        filteredAppointments = appointments.filter((appointment) => appointment.confirmed);
    }

    let meetingCards = filteredAppointments.map(appointment => (
        <MeetingCard appt={appointment} isTutor={false} includePrevious={true}/>
    ));

    return (
        <Container fluid style={{maxWidth:"100vw"}}>
            <Row className="title" style={{ marginTop: '25px'}}>
            <div className="profile-text">History</div>
            </Row>

            <hr></hr>

            <Dropdown isOpen={dropDownOpen} toggle={() => {setDropdownOpen(!dropDownOpen)}}>
                <DropdownToggle caret >
                    {dropDownValue}
                </DropdownToggle>

                <DropdownMenu>
                    <DropdownItem
                        onClick={(event) => {
                            setDropdownValue("All");
                            setDropdownOpen(false);
                        }}>All</DropdownItem>
                    <DropdownItem
                        onClick={(event) => {
                            setDropdownValue("Completed");
                            setDropdownOpen(false);
                        }}>Completed</DropdownItem>
                    <DropdownItem
                        onClick={(event) => {
                            setDropdownValue("Denied");
                            setDropdownOpen(false);
                        }}>Denied</DropdownItem>
                </DropdownMenu>
            </Dropdown>

            {meetingCards}
        </Container>
    );
}
Example #5
Source File: Meetings.tsx    From TutorBase with MIT License 5 votes vote down vote up
Meetings = (params: IParams) => {
    let clientData = useSelector(selectClientData);
    let tutorData = useSelector(selectTutorData);
    let [dropDownOpen, setDropdownOpen] = useState<boolean>(false);
    let [dropDownValue, setDropdownValue] = useState<String>("All");
    let [appointments, setAppointments] = useState<Array<Appointment>>([]);
    let dispatch = useDispatch();

    useEffect(() => {
        const getAppointments = async () => {
            return params.mode === "Tutor" ? (await api.GetTutorAppointments(tutorData.tutorId)).data : 
            (await api.GetClientAppointments(clientData.clientId)).data;
        }

        getAppointments().then(value => {
                
                setAppointments(value);
                if(params.mode === "Tutor")
                    dispatch(tutorDataActions.setAppointment(value));
                else
                    dispatch(clientDataActions.setAppointment(value));
            }
        )
    }, [clientData.clientId, tutorData.tutorId, dispatch]);


    let filteredAppointments = appointments;
    if (dropDownValue==="Pending"){
        filteredAppointments = appointments.filter((appointment) => !appointment.confirmed);
    } else if (dropDownValue==="Upcoming"){
        filteredAppointments = appointments.filter((appointment) => appointment.confirmed);
    }

    let meetingCards = filteredAppointments.map(appointment => (
        <MeetingCard appt={appointment} isTutor={params.mode==="Tutor"} includePrevious={false}/>
    ));


    return (
        <Container fluid>
            <Row className="title" style={{ marginTop: '25px'}}>
            <div className="profile-text">Meetings</div>
            </Row>

            <hr></hr>

            <Dropdown isOpen={dropDownOpen} toggle={() => {setDropdownOpen(!dropDownOpen)}}>
                <DropdownToggle caret >
                    {dropDownValue}
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("All");
                            setDropdownOpen(false);
                        }}>All</DropdownItem>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("Pending");
                            setDropdownOpen(false);
                        }}>Pending</DropdownItem>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("Upcoming");
                            setDropdownOpen(false);
                        }}>Upcoming</DropdownItem>
                </DropdownMenu>
            </Dropdown>

            {meetingCards}
        </Container>
    );
}
Example #6
Source File: TutorHistory.tsx    From TutorBase with MIT License 5 votes vote down vote up
TutorHistory = () => {
    let tutorData = useSelector(selectTutorData);
    let [dropDownOpen, setDropdownOpen] = useState<boolean>(false);
    let [dropDownValue, setDropdownValue] = useState<String>("All");
    let [appointments, setAppointments] = useState<Array<Appointment>>([]);
    let dispatch = useDispatch();

    useEffect(() => {
        const getAppointments = async () => {
            return (await api.GetTutorAppointments(tutorData.tutorId)).data.reverse();
        }

        getAppointments().then(value => {
                setAppointments(value);
                dispatch(tutorDataActions.setAppointment(value));
            }
        )
    }, [tutorData.tutorId, dispatch]);

    let filteredAppointments = appointments;
    if (dropDownValue==="Denied"){
        filteredAppointments = appointments.filter((appointment) => !appointment.confirmed);
    } else if (dropDownValue==="Completed"){
        filteredAppointments = appointments.filter((appointment) => appointment.confirmed);
    }
   
    let meetingCards = filteredAppointments.map(appointment => (
        <MeetingCard appt={appointment} isTutor={true} includePrevious={true}/>
    ));

    return (
        <Container fluid>
            <Row className="title" style={{ marginTop: '25px'}}>
            <div className="profile-text">History</div>
            </Row>

            <hr></hr>

            <Dropdown isOpen={dropDownOpen} toggle={() => {setDropdownOpen(!dropDownOpen)}}>
                <DropdownToggle caret >
                    {dropDownValue}
                </DropdownToggle>
                <DropdownMenu>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("All");
                            setDropdownOpen(false);
                        }}>All</DropdownItem>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("Completed");
                            setDropdownOpen(false);
                        }}>Completed</DropdownItem>
                    <DropdownItem 
                        onClick={(event) => {
                            setDropdownValue("Denied");
                            setDropdownOpen(false);
                        }}>Denied</DropdownItem>
                </DropdownMenu>
            </Dropdown>

            {meetingCards}
        </Container>
    );
}
Example #7
Source File: 4_selectDateTime.tsx    From TutorBase with MIT License 4 votes vote down vote up
Step4 = () => {
    const cal: any = useRef(null);
    const [mobile, setMobile] = useState(isMobile);
    const [currentView, setCurrentView] = useState("week");
    const [calTypeOpen, setCalTypeOpen] = useState(false);
    const [prevSchedule, setPreviousSchedule] = useState<any>();

    const dispatch = useDispatch();
    const clientFlowData = useSelector(selectClientFlowData);
    let previousAppts = [{
        id: "1",
        calendarId: "0",
        // title: clientFlowData.appointmentSubjectId,
        title: "Tutor Time!",
        category: "time",
        dueDateClass: "",
        start: new Date(clientFlowData.appointmentStartTime),
        end: new Date(clientFlowData.appointmentEndTime),
        bgColor: "lightblue",
        location: clientFlowData.appointmentLocation,
    },];

    useEffect(() => {
        // Gather the currently schedule appointments from tutor and block off times
        const generateTutorTimes = async () => {
            // Add previously schedule meeting to array

            let appts = await api.GetTutorAppointments(clientFlowData.selectedTutor._id);

            if (appts !== null) {
                appts.data.forEach(appt => {
                    previousAppts.push({
                        id: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(),
                        calendarId: "0",
                        title: "Blocked Time",
                        category: "time",
                        dueDateClass: "",
                        start: new Date(appt.start_time),
                        end: new Date(appt.end_time),
                        bgColor: "red",
                        location: "Blocked",
                    })
                })
            }
        }

        generateTutorTimes();
    }, []);

    const generateTutorTimes = async () => {
        // Add previously schedule meeting to array
        let previousAppts = [{
            id: "1",
            calendarId: "0",
            // title: clientFlowData.appointmentSubjectId,
            title: "Tutor Time!",
            category: "time",
            dueDateClass: "",
            start: new Date(clientFlowData.appointmentStartTime),
            end: new Date(clientFlowData.appointmentEndTime),
            bgColor: "lightblue",
            location: clientFlowData.appointmentLocation,
        },];

        let appts = await api.GetTutorAppointments(clientFlowData.selectedTutor._id);

        if (appts !== null) {
            appts.data.forEach(appt => {
                previousAppts.push({
                    id: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(),
                    calendarId: "0",
                    title: "Blocked Time",
                    category: "time",
                    dueDateClass: "",
                    start: new Date(appt.start_time),
                    end: new Date(appt.end_time),
                    bgColor: "red",
                    location: "Blocked",
                })
            })
        }

        return previousAppts;
    }

    const toggleCalType = () => {
        setCalTypeOpen(!calTypeOpen);
    };

    // Template Functions //
    const onClickSchedule = (e: any) => {
        const {calendarId, id} = e.schedule;
        const event = cal.current.calendarInst.getElement(id, calendarId);
    };

    /* After all schedules are rendered
       on the calendar run this function.
       which saves the schedule details
       to store. */
    const onAfterRenderSchedule = (e: any) => {};

    const onBeforeCreateSchedule = (scheduleData: any) => {
        console.log("BEFORE CREATE SCHEDULE:", scheduleData);
        let id = 1;

        const schedule = {
            id: id,
            title: "Tutor Time!",
            isAllDay: scheduleData.isAllDay,
            start: scheduleData.start,
            end: scheduleData.end,
            category: scheduleData.isAllDay ? "allday" : "time",
            dueDateClass: "",
            bgColor: "lightblue",
            // location: scheduleData.location,
            // raw: {
            //   class: scheduleData.raw["class"],
            // },
            // state: scheduleData.state,
        };

        cal.current.calendarInst.createSchedules([schedule]);

        let startDay = scheduleData.start;
        let endDay = scheduleData.end;
        let apptLoc = scheduleData.location;
        let apptSubj = scheduleData.title;

        let apptDate = new Date(startDay._date).toDateString();

        let apptStart = startDay.getTime();
        let apptEnd = endDay.getTime();

        dispatch(actions.setAppointment([apptDate, apptStart, apptEnd, apptLoc, apptSubj]));
    };

    const onBeforeDeleteSchedule = (res: any) => {
        console.log("onBeforeDelete");
        const {id, calendarId} = res.schedule;
        cal.current.calendarInst.deleteSchedule(id, calendarId);
    };

    const onBeforeUpdateSchedule = (e: any) => {
        console.log("onBeforeDelete");

        const {schedule, changes} = e;

        cal.current.calendarInst.updateSchedule(
            schedule.id,
            schedule.calendarId,
            changes
        );

        let startDay = schedule.start;
        let endDay = schedule.end;

        let apptLoc = schedule.location;
        let apptSubj = schedule.title;

        let apptDate = new Date(startDay._date).toDateString();

        let apptStart = startDay.getTime();
        let apptEnd = endDay.getTime();

        dispatch(actions.setAppointment([apptDate, apptStart, apptEnd, apptLoc, apptSubj]));
    };
    ////////////////////////

    // Instance Functions //
    const calNext = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.next();
    };

    const calBack = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.prev();
    };

    const calReturn = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.today();
    };

    const setMonthView = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.changeView("month", true);
        setCurrentView("month");
    };

    const setWeekView = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.changeView("week", true);
        setCurrentView("week");
    };

    const setDayView = () => {
        const calendarInstance = cal.current.getInstance();
        calendarInstance.changeView("day", true);
        setCurrentView("day");
    };
    ////////////////////////

    return (
        <Container>
            <Title>
                <h3 className="hr mt-1">Select a Time</h3>
            </Title>

            <div style={{display: "flex", alignSelf: "left"}}>
                <Button style={{margin: "0.2em"}} onClick={calBack}>
                    Back
                </Button>
                <Button style={{margin: "0.2em"}} onClick={calReturn}>
                    Today
                </Button>
                <Button style={{margin: "0.2em"}} onClick={calNext}>
                    Next
                </Button>
                <Dropdown
                    style={{margin: "0.2em"}}
                    isOpen={calTypeOpen}
                    toggle={() => {
                        toggleCalType();
                    }}
                >
                    <DropdownToggle caret>{currentView}</DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem onClick={setDayView}>Day</DropdownItem>
                        <DropdownItem onClick={setWeekView}>Week</DropdownItem>
                        <DropdownItem onClick={setMonthView}>Month</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>

            <div style={{overflow: 'auto'}}>
                <Calendar
                    height={"400px"}
                    ref={cal}
                    calendars={[
                        {
                            id: "0",
                            name: "Schedule",
                            bgColor: "#9e5fff",
                            borderColor: "#9e5fff",
                        },
                    ]}
                    view={currentView}
                    week={mobile ? mobileWeekOptions : weekOptions}
                    taskView={false}
                    scheduleView={["time"]}
                    useDetailPopup={true}
                    schedules={previousAppts}
                    onClickSchedule={onClickSchedule}
                    onBeforeCreateSchedule={onBeforeCreateSchedule}
                    onBeforeDeleteSchedule={onBeforeDeleteSchedule}
                    onBeforeUpdateSchedule={onBeforeUpdateSchedule}
                    onAfterRenderSchedule={onAfterRenderSchedule}
                />
            </div>
        </Container>
    );
}
Example #8
Source File: DataVisualization.tsx    From TutorBase with MIT License 4 votes vote down vote up
DataVisualization = () => {
  
  const [dropdownLabel2, setDropdownLabel2] = useState("All Time");
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [dropdownOpen2, setDropdownOpen2] = useState(false);
  const [dropdownOpen3, setDropdownOpen3] = useState(false);
  const [dateRange, setDateRange] = useState(new Date(2020,0,0));
  const [course, setCourse] = useState("All Courses");
  const [courses, setCourses] = useState(new Array<string>());
  const [appointments, setAppointments] = useState(0);
  const [hours, setHours] = useState(0);
  const [earnings, setEarnings] = useState(0);
  const [chart, setChart] = useState(0);
  const [meetingsMap, setMeetingsMap] = useState(new Map<number,number>());
  const [earningsMap, setEarningsMap] = useState(new Map<number,number>());
  const toggle = () => setDropdownOpen(prevState => !prevState);
  const toggle2 = () => setDropdownOpen2(prevState => !prevState);
  const toggle3 = () => setDropdownOpen3(prevState => !prevState);
  let tutor = useSelector(selectClientData);
  let tutorID = tutor.clientId;
  useEffect(() => {
    GetTutoringHours(course, tutorID).then( apiResult => {
    setMeetingsMap(apiResult[0]);
    setEarningsMap(apiResult[1]);
    setAppointments(apiResult[3]);
    setHours(apiResult[2]);
    setEarnings(apiResult[4]);
    setCourses(apiResult[5]);
    });
  },[]);



  let coursesDropdowns:Array<ReactElement> = [];
  coursesDropdowns.push(<DropdownItem onClick={() => {
    setCourse("All Courses");
    GetTutoringHours("All Courses", tutorID).then( apiResult => {
      setMeetingsMap(apiResult[0]);
      setEarningsMap(apiResult[1]);
      setAppointments(apiResult[3]);
      setHours(apiResult[2]);
      setEarnings(apiResult[4]);
      setCourses(apiResult[5]);
      });
  }}>
    All Courses
  </DropdownItem>);
  for (let i = 0; i < courses.length; i++) {
    coursesDropdowns.push(<DropdownItem onClick={() => {
      setCourse(courses[i]);
      GetTutoringHours(courses[i], tutorID).then( apiResult => {
        setMeetingsMap(apiResult[0]);
        setEarningsMap(apiResult[1]);
        setAppointments(apiResult[3]);
        setHours(apiResult[2]);
        setEarnings(apiResult[4]);
        setCourses(apiResult[5]);
        });
    }}>
      {courses[i]}
    </DropdownItem>);         
  }
    return (
        <Container fluid className="background" style={{marginBottom:'10em'}}>
        <hr></hr>
        <Row xs="2" className="parent">

        </Row>
        <div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
                <div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
                    <Card body>
                    <CardTitle tag="h5">Appointments</CardTitle>
                    <CardText>
                        <h1>
                        <CountUp 
                            end={appointments} 
                            useEasing={true}
                            duration={3.5}
                            />
                            </h1>
                        </CardText>
                    
                    </Card>
                </div>
                <div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
                    <Card body>
                    <CardTitle tag="h5">Hours Tutored</CardTitle>
                    <CardText>
                        <h1>
                        <CountUp 
                            end={hours} 
                            useEasing={true}
                            duration={4}
                            />
                            </h1>
                        </CardText>
                    
                    </Card>
                </div>
                <div style={{display:'flex', flexDirection:'column', flex:'1 1 0px', flexWrap:'wrap'}}>
                <Card body>
                    <CardTitle tag="h5">Earnings</CardTitle>
                    <CardText>
                        <h1>
                        <CountUp 
                            decimals={2}
                            prefix="$"
                            end={earnings} 
                            useEasing={true}
                            

                            duration={4}/>
                            </h1>
                        </CardText>
                    
                    </Card>
                </div>
            </div>
        
            <div style={{display:'flex', flexDirection:'row'}}>
            <Card body>
                <CardTitle tag="h5">
                <div style={{display:'flex', flexDirection:'row', flexWrap:'wrap'}}>
                  <div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
                    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
                      <DropdownToggle caret>
                        {(chart === 0) ? "Calendar" : (chart === 1 ? "Total Hours" : "Total Earnings")}
                        
                        <FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem header>Tutor Data</DropdownItem>
                        <DropdownItem onClick={() => setChart(0)}>Calendar</DropdownItem>
                        <DropdownItem onClick={() => setChart(1)}>Total Hours</DropdownItem>
                        <DropdownItem divider />
                        <DropdownItem onClick={() => setChart(2)}>Total Earnings</DropdownItem>
                      </DropdownMenu>
                    </Dropdown>
                  </div>
                    { chart != 0 ?
                    <div style={{display:'flex', flexDirection:'column', marginRight:'1em', marginTop:'0.25em'}}>
                    <Dropdown isOpen={dropdownOpen2} toggle={toggle2} style={{alignSelf:'right'}}>
                      <DropdownToggle caret>
                        {dropdownLabel2}
                        <FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem header>Date Range</DropdownItem>
                        <DropdownItem onClick={() => {
                          let date = new Date(getNow());
                          date.setFullYear(2020);
                          date.setMonth(0);
                          date.setDate(0);
                          setDateRange(date);
                          setDropdownLabel2("All Time");
                        }}>
                          All Time
                        </DropdownItem>
                        
                        <DropdownItem onClick={() => {
                              let date = new Date(getNow());
                              date.setFullYear(date.getFullYear() - 1);
                              setDateRange(date);
                              setDropdownLabel2("1Y");

                            }}>1Y
                        </DropdownItem>

                        <DropdownItem onClick={() => { 
                              let date = new Date(getNow()); 
                              date.setMonth(date.getMonth() - 6);
                              setDateRange(date);
                              setDropdownLabel2("6M");
                            }}>6M
                        </DropdownItem>
                        <DropdownItem onClick={() => { 
                              let date = new Date(getNow()); 
                              date.setMonth(date.getMonth() - 1);
                              setDateRange(date);
                              setDropdownLabel2("1M");
                            }}>1M
                        </DropdownItem>
                      </DropdownMenu>
                    </Dropdown>
                    </div>
                    : <div></div>}
                    <div style={{display:'flex', flexDirection:'column', marginTop:'0.25em'}}>
                      <Dropdown isOpen={dropdownOpen3} toggle={toggle3} style={{alignSelf:'right'}}>
                      <DropdownToggle caret>
                        {course}
                        <FontAwesomeIcon icon={faArrowDown} style={{marginLeft:'1em'}}/>
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem header>Filter by Course</DropdownItem>
                        {coursesDropdowns}
                      </DropdownMenu>
                    </Dropdown>
                    </div>
                    </div>
                    </CardTitle>
                    
                    <CardText>
                      {chart == 0 ?
                        <TutorHeatmap dateMap={meetingsMap} />
                        : (chart == 1 ? <LineGraph dateMap={meetingsMap}
                          fromTime={dateRange}
                          isHours={true}/>
                          :<LineGraph dateMap={earningsMap}
                          fromTime={dateRange}
                          isHours={false}/>
                          )}
                      
                      
                    </CardText>

                    
              </Card>
            </div>
            </Container>
    );
}
Example #9
Source File: DiemCheckout.tsx    From reference-merchant with Apache License 2.0 4 votes vote down vote up
export default function DiemCheckout({ paymentId, orderId, demoMode }: DiemCheckoutProps) {
  const [paymentOptions, setPaymentOptions] = useState<
    PaymentOptions | undefined
  >();
  const [selectedOption, setSelectedOption] = useState(0);
  const [chooseWallet, setChooseWallet] = useState(true);

  useEffect(() => {
    let isOutdated = false;

    const fetchOrder = async () => {
      try {
        const fetched = await new Vasp().getPaymentOptions(paymentId);

        if (!isOutdated) {
          setPaymentOptions(fetched);
        }
      } catch (e) {
        console.error("Unexpected error", e);
      }
    };

    // noinspection JSIgnoredPromiseFromCall
    fetchOrder();

    return () => {
      isOutdated = true;
    };
  }, [paymentId]);

  const onCurrencyClick = (index: number) => setSelectedOption(index);

  if (!paymentOptions) {
    return <div>Loading...</div>;
  }

  const handleClick = () => {
    setChooseWallet(false)
  }

  return (
    <>
      <div className="w-100">
        <Row>
          <Col className="text-nowrap text-right">Total price:</Col>
          <Col className="d-flex align-items-center">
            <span className="text-nowrap">
            {fiatToHumanFriendly(paymentOptions.fiatPrice)}{" "}
            {paymentOptions.fiatCurrency}
            </span>
            <FontAwesomeIcon size="xs" icon={faQuestionCircle} className="ml-2" id="totalPriceHelp" />
            <UncontrolledTooltip target="totalPriceHelp">
              The price in fiat set by the merchant
            </UncontrolledTooltip>
          </Col>
        </Row>
        <Row>
          <Col className="text-nowrap text-right align-self-center">
            Payment currency:
          </Col>
          <Col className="d-flex align-items-center">
            <UncontrolledDropdown>
              <DropdownToggle caret color="outline-dark" className="py-0 px-2">
                {paymentOptions.options[selectedOption].currency}
              </DropdownToggle>
              <DropdownMenu>
                {paymentOptions.options.map((op, i) => (
                  <DropdownItem
                    key={op.currency}
                    onClick={() => onCurrencyClick(i)}
                  >
                    {op.currency}
                  </DropdownItem>
                ))}
              </DropdownMenu>
            </UncontrolledDropdown>
            <FontAwesomeIcon size="xs" icon={faQuestionCircle} className="ml-2" id="currencyHelp" />
            <UncontrolledTooltip target="currencyHelp">
              Please select a Diem currency
            </UncontrolledTooltip>
          </Col>
        </Row>
        <Row>
          <Col className="text-nowrap text-right">Total to pay:</Col>
          <Col className="d-flex align-items-center">
            <span className="text-nowrap">
              {diemToHumanFriendly(
                paymentOptions.options[selectedOption].amount
              )}{" "}
              {paymentOptions.options[selectedOption].currency}
            </span>
            <FontAwesomeIcon size="xs" icon={faQuestionCircle} className="ml-2" id="totalToPayHelp" />
            <UncontrolledTooltip target="totalToPayHelp">
              The amount you will be changed in Diem
            </UncontrolledTooltip>
          </Col>
        </Row>
      </div>
      <div>
        {!chooseWallet ? (
          <>
            <QRCode
              className="img-fluid mt-4"
              size={192}
              value={paymentOptions.options[selectedOption].paymentLink}
              imageSettings={{
                src: require("../logo.svg"),
                height: 32,
                width: 32,
                excavate: true,
              }}
            />
            <div className="text-center small py-4 font-weight-bold">
              - OR -
            </div>
            <div className="text-center">
              <Button color="primary" size="sm" onClick={() => setChooseWallet(true)}>
                Open in Diem wallet
              </Button>
            </div>
          </>
        ) : (
          <>
            <div className="mt-4">
              <div className="text-center">Choose your wallet:</div>
              <PayWithDiem
                paymentInfo={paymentOptions}
                orderId={orderId}
                demoMode={demoMode}
              />
            </div>
            <div className="text-center small py-4 font-weight-bold">
              - OR -
            </div>
            <div className="text-center">
              <Button color="primary" size="sm" onClick={()=>handleClick()}>
                Scan QR
              </Button>
            </div>
          </>
        )}
      </div>
    </>
  );
}
Example #10
Source File: Header.tsx    From dwitter-frontend with Apache License 2.0 4 votes vote down vote up
Header: React.FC<{}> = (props) => {
  const [isUserMenuDropdownOpen, setIsUserMenuDropdownOpen] = useState(false);
  const [isMobileNavMenuOpen, setIsMobileNavMenuOpen] = useState(false);
  const [subItemMenuOpenMap, setSubItemMenuOpenMap] = useState<{
    [key: string]: boolean | undefined;
  }>({});

  const [context] = useContext(Context);

  const menu = [
    {
      name: 'hot',
      to: '/',
      width: 48,
    },
    {
      name: 'new',
      to: '/new',
      width: 48,
    },
    {
      name: 'top',
      width: 48,
      subitems: [
        {
          name: 'week',
          to: '/top/week',
        },
        {
          name: 'month',
          to: '/top/month',
        },
        {
          name: 'year',
          to: '/top/year',
        },
        {
          name: 'all',
          to: '/top/all',
        },
      ],
    },
    {
      name: 'random',
      to: '/random',
      width: 80,
    },
    {
      name: 'about',
      to: '/about',
      width: 80,
    },
  ];

  const location = useLocation();

  // If a subitem is selected, this will point to the parent
  // i.e. for /top/year this will contain the whole top object
  const menuSelectedItem = menu.find(
    (item) =>
      item.to === location.pathname ||
      (item.subitems &&
        item.subitems.find((subitem) => subitem.to === location.pathname))
  );

  // And this one will contain "year"
  const menuSelectedSubitem = menuSelectedItem?.subitems?.find(
    (subitem) => subitem.to === location.pathname
  );

  const menuDefaultItem = { name: 'menu', to: '/' };

  const collapsedMenuTo =
    (menuSelectedSubitem && menuSelectedSubitem.to) || // We're in a subitem (i.e. /top/week)
    (menuSelectedItem?.to && menuSelectedItem.to) || // We're on a top level page (i.e. /new)
    menuDefaultItem.to; // default

  const collapsedMenuText =
    (menuSelectedSubitem &&
      menuSelectedItem &&
      menuSelectedItem.name + ' | ' + menuSelectedSubitem.name) || // We're in a subitem (i.e. /top/week)
    (menuSelectedItem && menuSelectedItem.name) || // We're on a top level page (i.e. /new)
    menuDefaultItem.name; // default

  return (
    <header>
      <div
        style={{
          maxWidth: topBarMaxWidth,
          paddingLeft: 16,
          paddingRight: 16,
          display: 'flex',
          alignItems: 'center',
          flex: 1,
          textAlign: 'center',
          whiteSpace: 'nowrap',
          minWidth: 0,
          width: '100%',
        }}
      >
        <div style={{ marginRight: 32 }}>
          <a href="/" className="no-link-styling d-flex align-items-center">
            <div className="d-flex mr-3">
              {[4, 4, 0].map((marginRight, i) => (
                <div
                  key={i}
                  style={{
                    width: 6,
                    height: 23,
                    marginRight,
                    background: 'black',
                    borderRadius: 1,
                  }}
                />
              ))}
            </div>
            Dwitter.net
          </a>
        </div>
        <div className="d-flex d-sm-none">
          <Dropdown
            isOpen={isMobileNavMenuOpen}
            toggle={() => setIsMobileNavMenuOpen(!isMobileNavMenuOpen)}
          >
            <DropdownToggle caret={true}>
              {menuSelectedItem && (
                <NavLink
                  to={collapsedMenuTo}
                  exact={true}
                  style={{
                    pointerEvents: 'none',
                    display: 'inline-block',
                    marginRight: 8,
                  }}
                  activeStyle={{
                    fontWeight: 'bold',
                  }}
                >
                  {collapsedMenuText}
                </NavLink>
              )}
            </DropdownToggle>
            <DropdownMenu>
              {menu.map((item, itemKey) =>
                item.to ? (
                  <Link
                    key={itemKey}
                    className="dropdown-item"
                    to={item.to}
                    onClick={() => setIsMobileNavMenuOpen(false)}
                    style={{
                      fontWeight:
                        item.to === location.pathname ? 'bold' : 'normal',
                    }}
                  >
                    {item.name}
                  </Link>
                ) : (
                  item.subitems?.map((subitem, subitemKey) => (
                    <Link
                      key={subitemKey}
                      className="dropdown-item"
                      to={subitem.to}
                      onClick={() => setIsMobileNavMenuOpen(false)}
                      style={{
                        fontWeight:
                          subitem.to === location.pathname ? 'bold' : 'normal',
                      }}
                    >
                      {item.name} | {subitem.name}
                    </Link>
                  ))
                )
              )}
            </DropdownMenu>
          </Dropdown>
        </div>
        <div className="d-none d-sm-flex align-items-center">
          {menu.map((item, itemKey) =>
            !item.subitems ? (
              <NavLink
                key={item.name}
                to={item.to}
                exact={true}
                style={{ width: item.width }}
                activeStyle={{ fontWeight: 'bold' }}
              >
                {item.name}
              </NavLink>
            ) : (
              <div key={itemKey}>
                <Dropdown
                  isOpen={subItemMenuOpenMap[item.name]}
                  toggle={() =>
                    setSubItemMenuOpenMap((previous) => ({
                      ...previous,
                      [item.name]: !previous[item.name],
                    }))
                  }
                >
                  <DropdownToggle caret>
                    <NavLink
                      key={item.name}
                      to={
                        ['week', 'month', 'year', 'all']
                          .filter(
                            (period) => location.pathname === '/top/' + period
                          )
                          .join('') || '/top'
                      }
                      exact={true}
                      style={{ width: item.width }}
                      activeStyle={{ fontWeight: 'bold' }}
                      onClick={(e) => item.subitems && e.preventDefault()}
                    >
                      {item.name}
                      {['week', 'month', 'year', 'all']
                        .filter(
                          (period) => location.pathname === '/top/' + period
                        )
                        .map((period) => ' | ' + period)}
                    </NavLink>
                  </DropdownToggle>
                  <DropdownMenu>
                    {item.subitems?.map((item) => (
                      <NavLink
                        className="dropdown-item"
                        key={item.name}
                        to={item.to}
                        exact={true}
                        activeStyle={{ fontWeight: 'bold' }}
                        onClick={() => setSubItemMenuOpenMap({})}
                      >
                        {item.name}
                      </NavLink>
                    ))}
                  </DropdownMenu>
                </Dropdown>
              </div>
            )
          )}
        </div>
        <div style={{ flex: 1 }} />
        <div className="create-new-dweet">
          <NavLink
            to="/create"
            className="btn btn-primary d-flex align-items-center justify-content-center"
          >
            <span className="plus-icon"></span>
            <span className="create-new-dweet-label">
              New <span className="create-dweet-label">dweet</span>
            </span>
          </NavLink>
        </div>
        {context.user ? (
          <Dropdown
            isOpen={isUserMenuDropdownOpen}
            toggle={() => setIsUserMenuDropdownOpen(!isUserMenuDropdownOpen)}
            style={{ marginRight: -16, minWidth: 0 }}
            className="settings-dropdown"
          >
            <DropdownToggle
              style={{
                paddingLeft: 16,
                paddingRight: 16,
                width: '100%',
              }}
            >
              <UserView user={context.user} link={false} />
            </DropdownToggle>
            <DropdownMenu className="right">
              <Link
                className="dropdown-item"
                to={'/u/' + context.user.username + '/top'}
                onClick={() => {
                  setIsUserMenuDropdownOpen(false);
                }}
              >
                My dweets
              </Link>
              <Link
                className="dropdown-item"
                to={'/' + context.user.username + '/settings'}
                onClick={() => {
                  setIsUserMenuDropdownOpen(false);
                }}
              >
                Settings
              </Link>
              <div
                style={{
                  height: 1,
                  background: context.theme.secondaryBorderColor,
                  marginTop: 8,
                  marginBottom: 8,
                }}
              />
              <Link
                className="dropdown-item"
                to={'/'}
                onClick={(e) => {
                  e.preventDefault();
                  localStorage.removeItem('token');
                  localStorage.removeItem('user');
                  window.location.href = '/';
                }}
              >
                Log out
              </Link>
            </DropdownMenu>
          </Dropdown>
        ) : (
          <NavLink to="/accounts/login" exact={true} style={{ marginLeft: 15 }}>
            Log in
          </NavLink>
        )}
      </div>
    </header>
  );
}
Example #11
Source File: CovidCard.tsx    From health-cards-tests with MIT License 4 votes vote down vote up
CovidCard: React.FC<{
    holderState: HolderState,
    smartState: SmartState,
    uiState: UiState,
    displayQr: (vc) => Promise<void>,
    openScannerUi: () => Promise<void>,
    connectToIssuer: () => Promise<void>,
    connectToFhir: () => Promise<void>,
    dispatchToHolder: (e: Promise<any>) => Promise<void>
}> = ({ holderState, smartState, uiState, displayQr, openScannerUi, connectToFhir, connectToIssuer, dispatchToHolder }) => {
    const issuerInteractions = holderState.interactions.filter(i => i.siopPartnerRole === 'issuer').slice(-1)
    const issuerInteraction = issuerInteractions.length ? issuerInteractions[0] : null


    let currentStep = CardStep.CONFIGURE_WALLET;
    /* tslint:disable-next-line:prefer-conditional-expression */
    if (issuerInteraction?.status !== 'complete') {
        currentStep = CardStep.CONNECT_TO_ISSUER;
    } else {
        currentStep = CardStep.DOWNLOAD_CREDENTIAL;
    }
    if (holderState.vcStore.length) {
        currentStep = CardStep.COMPLETE
    }

    const retrieveVcClick = async () => {
        const onMessage = async ({ data, source }) => {
            const { verifiableCredential } = data
            window.removeEventListener("message", onMessage)
            await dispatchToHolder(receiveVcs(verifiableCredential, holderState))
        }
        window.addEventListener("message", onMessage)
        window.open(uiState.issuer.issuerDownloadUrl)
    }

    useEffect(() => {
        if (smartState?.access_token && holderState.vcStore.length === 0) {
            const credentials = axios.post(uiState.fhirClient.server + `/Patient/${smartState.patient}/$health-cards-issue`, {
                "resourceType": "Parameters",
                "parameter": [{
                    "name": "credentialType",
                    "valueUri": "https://smarthealth.cards#immunization"
                },{
                    "name": "presentationContext",
                    "valueUri": "https://smarthealth.cards#presentation-context-online"
                }, {
                    "name": "encryptForKeyId",
                    "valueString": "#encryption-key-1"
                }]
            })
            credentials.then(response => {
                const vcs = response.data.parameter.filter(p => p.name === 'verifiableCredential').map(p => p.valueString)
                dispatchToHolder(receiveVcs(vcs, holderState))
            })
        }
    }, [smartState])


    const covidVcs = holderState.vcStore.filter(vc => vc.type.includes("https://smarthealth.cards#covid19"));

    const resources = covidVcs.flatMap(vc =>
        vc.vcPayload.vc.credentialSubject.fhirBundle.entry
            .flatMap(e => e.resource))

    const doses = resources.filter(r => r.resourceType === 'Immunization').length;
    const patient = resources.filter(r => r.resourceType === 'Patient')[0];
    console.log("P", patient);


    useEffect(() => {
        if (covidVcs.length === 0) {
            return;
        }
        let file = new File([JSON.stringify({
            "verifiableCredential": covidVcs.map(v => v.vcSigned)
        })], "c19.smart-health-card", {
            type: "application/smart-health-card"
        })
        const url = window.URL.createObjectURL(file);
        setDownloadFileUrl(url)
    }, [covidVcs.length])
    const [downloadFileUrl, setDownloadFileUrl] = useState("");

    return <> {
        currentStep === CardStep.COMPLETE && <Card style={{ border: "1px solid grey", padding: ".5em", marginBottom: "1em" }}>
            <CardTitle style={{ fontWeight: "bolder" }}>
                COVID Cards ({covidVcs.length})
                </CardTitle>

            <CardSubtitle className="text-muted">Your COVID results are ready to share, based on {" "}
                {resources && <>{resources.length} FHIR Resource{resources.length > 1 ? "s" : ""} <br /> </>}
            </CardSubtitle>
            <ul>
                <li> Name: {patient.name[0].given[0]} {patient.name[0].family}</li>
                <li> Birthdate: {patient.birthDate}</li>
                <li> Immunization doses received: {doses}</li>
            </ul>
            <Button className="mb-1" color="info" onClick={() => displayQr(covidVcs[0])}>Display QR</Button>
            <a href={downloadFileUrl} download="covid19.smart-health-card">Download file</a>
        </Card>
    } {currentStep < CardStep.COMPLETE &&
        <Card style={{ border: ".25em dashed grey", padding: ".5em", marginBottom: "1em" }}>
            <CardTitle>COVID Cards </CardTitle>
            <CardSubtitle className="text-muted">You don't have any COVID cards in your wallet yet.</CardSubtitle>

            <Button disabled={true} className="mb-1" color="info">
                {currentStep > CardStep.CONFIGURE_WALLET && '✓ '} 1. Set up your Health Wallet</Button>

            <RS.UncontrolledButtonDropdown className="mb-1" >
                <DropdownToggle caret color={currentStep === CardStep.CONNECT_TO_ISSUER ? 'success' : 'info'} >
                    {currentStep > CardStep.CONNECT_TO_ISSUER && '✓ '}
                                    2. Get your Vaccination Credential
                                </DropdownToggle>
                <DropdownMenu style={{ width: "100%" }}>
                    <DropdownItem onClick={connectToFhir} >Connect with SMART on FHIR </DropdownItem>
                    <DropdownItem >Load from file (todo)</DropdownItem>
                </DropdownMenu>
            </RS.UncontrolledButtonDropdown>
            <Button
                disabled={currentStep !== CardStep.DOWNLOAD_CREDENTIAL}
                onClick={retrieveVcClick}
                className="mb-1"
                color={currentStep === CardStep.DOWNLOAD_CREDENTIAL ? 'success' : 'info'} >
                3. Save COVID card to wallet</Button>
        </Card>
        }
    </>

}