seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

working on new session screen

This commit is contained in:
Nuwan 2023-02-09 09:35:29 +05:30
parent 981b83cea2
commit b589ad8553
2 changed files with 154 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
jam-ui/src/components/page/JKNewMusicSession.js
View File

@ -1,10 +1,11 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { Form, FormGroup, Input, Label, Text, Card, CardBody, Button } from 'reactstrap';
import FalconCardHeader from '../common/FalconCardHeader';
import Flex from '../common/Flex';
import JKTooltip from '../common/JKTooltip';
import { useTranslation } from 'react-i18next';
import AsyncSelect from 'react-select/async';
//import useAutoComplete from '../../hooks/useAutocomplete';
import { useAuth } from '../../context/UserAuth';
import { getFriends } from '../../helpers/rest';
import Avatar from '../common/Avatar';
@ -51,18 +52,26 @@ const JKNewMusicSession = () => {
return matches;
};
const handleSubmit = (event) => {
event.preventDefault()
const formData = new FormData(event.target)
console.log(formData.get('privacy'));
console.log(formData.get('friendIds'));
console.log(formData.get('description'));
}
return (
<div>
<Card>
<FalconCardHeader title={t('page_title', { ns: 'people' })} titleClass="font-weight-bold" />
<CardBody className="pt-0">
<Form>
<Form onSubmit={handleSubmit}>
<FormGroup className="mb-3">
<Label>
Session Privacy{' '}
<JKTooltip title="Public sessions can be seen in the Browse Sessions feature by other musicians in the JamKazam community, and others can join your session. If you choose the “Private - only invited musicians can join” option, your session will not be visible to the community as a whole, and only those musicians you invite will be able to see or join your session. If you choose the “Private – anyone can request to join, but requires approval” option, your session will be visible to the community in the Browse Sessions feature, and non-invited musicians may request to join your session, but you will have to grant permission per user to allow users into your session." />
</Label>
<Input type="select" aria-label="Session Privacy">
<Input type="select" aria-label="Session Privacy" name="privacy">
<option value="1">Public – anyone can join</option>
<option value="2">Private – only invited musicians can join</option>
<option value="3">Private – anyone can request to join, but requires approval</option>
@ -74,26 +83,25 @@ const JKNewMusicSession = () => {
Session Invitations{' '}
<JKTooltip title="If you invite other users to join your session, this will generate an in-app notification and in some cases also an email invitation to invitees. Invited users will also see your session in the “For Me” section of the Browse Sessions feature. Invited users can join your session without further permission or action on your part, regardless of whether your session is public or private." />
</Label>
<Flex direction="row" className="p-2 bg-200 mb-2" >
<AsyncSelect
placeholder="Enter friend name"
isMulti
loadOptions={friendOptions}
noOptionsMessage={e => (e.inputValue ? 'No options' : null)}
components={{
Option: CustomOption,
DropdownIndicator: () => null,
IndicatorSeparator: () => null
}}
styles={{
control: (baseStyles, state) => ({
...baseStyles,
borderRadius: '1.25em'
})
}}
/>
<Button>Choose friend</Button>
</Flex>
<AsyncSelect
name="friendIds"
placeholder="Enter friend name"
isMulti
loadOptions={friendOptions}
noOptionsMessage={e => (e.inputValue ? 'No options' : null)}
components={{
Option: CustomOption,
DropdownIndicator: () => null,
IndicatorSeparator: () => null
}}
styles={{
control: (baseStyles, state) => ({
...baseStyles,
borderRadius: '1.25em'
})
}}
/>
</FormGroup>
<FormGroup className="mb-3">
@ -102,11 +110,16 @@ const JKNewMusicSession = () => {
<JKTooltip title="If you’re creating a public session, we strongly recommend that you enter a description of your session – for example, what kinds of music you’re interested in playing. This description will be displayed next to your session in the Browse Sessions feature, which will help other musicians in the community understand if your session is a good fit for them." />
</Label>
<Input
name="description"
type="textarea"
placeholder="Enter session description. Recommended for public sessions to attract other musicians and them know what
to expect in your session."
/>
</FormGroup>
<FormGroup className="mb-3">
<Button color="primary">Create Session</Button>
</FormGroup>
</Form>
</CardBody>
</Card>

118
jam-ui/src/hooks/useAutocomplete.js Normal file
View File

@ -0,0 +1,118 @@
import React, { useRef, useState } from 'react';
const KEY_CODES = {
DOWN: 40,
UP: 38,
PAGE_DOWN: 34,
ESCAPE: 27,
PAGE_UP: 33,
ENTER: 13
};
export default function useAutoComplete({ delay = 500, source, onChange }) {
const [myTimeout, setMyTimeOut] = useState(setTimeout(() => {}, 0));
const listRef = useRef();
const [suggestions, setSuggestions] = useState([]);
const [isBusy, setBusy] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(-1);
const [textValue, setTextValue] = useState('');
function delayInvoke(cb) {
if (myTimeout) {
clearTimeout(myTimeout);
}
setMyTimeOut(setTimeout(cb, delay));
}
function selectOption(index) {
if (index > -1) {
onChange(suggestions[index]);
setTextValue(suggestions[index].label);
}
clearSuggestions();
}
async function getSuggestions(searchTerm) {
if (searchTerm && source) {
const options = await source(searchTerm);
setSuggestions(options);
}
}
function clearSuggestions() {
setSuggestions([]);
setSelectedIndex(-1);
}
function onTextChange(searchTerm) {
setBusy(true);
setTextValue(searchTerm);
clearSuggestions();
delayInvoke(() => {
getSuggestions(searchTerm);
setBusy(false);
});
}
const optionHeight = listRef?.current?.children[0]?.clientHeight;
function scrollUp() {
if (selectedIndex > 0) {
setSelectedIndex(selectedIndex - 1);
}
//listRef?.current?.scrollTop -= optionHeight
}
function scrollDown() {
if (selectedIndex < suggestions.length - 1) {
setSelectedIndex(selectedIndex + 1);
}
//listRef?.current?.scrollTop = selectedIndex * optionHeight
}
function pageDown() {
setSelectedIndex(suggestions.length - 1);
//listRef?.current?.scrollTop = suggestions.length * optionHeight
}
function pageUp() {
setSelectedIndex(0);
//listRef?.current?.scrollTop = 0
}
function onKeyDown(e) {
const keyOperation = {
[KEY_CODES.DOWN]: scrollDown,
[KEY_CODES.UP]: scrollUp,
[KEY_CODES.ENTER]: () => selectOption(selectedIndex),
[KEY_CODES.ESCAPE]: clearSuggestions,
[KEY_CODES.PAGE_DOWN]: pageDown,
[KEY_CODES.PAGE_UP]: pageUp
};
if (keyOperation[e.keyCode]) {
keyOperation[e.keyCode]();
} else {
setSelectedIndex(-1);
}
}
return {
bindOption: {
onClick: e => {
let nodes = Array.from(listRef.current.children);
selectOption(nodes.indexOf(e.target.closest('li')));
}
},
bindInput: {
value: textValue,
onChange: e => onTextChange(e.target.value),
onKeyDown
},
bindOptions: {
ref: listRef
},
isBusy,
suggestions,
selectedIndex
};
}