From b589ad8553dc104e36673f3fa2935e547ce10d72 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 9 Feb 2023 09:35:29 +0530
Subject: [PATCH] working on new session screen

---
 .../src/components/page/JKNewMusicSession.js  |  59 +++++----
 jam-ui/src/hooks/useAutocomplete.js           | 118 ++++++++++++++++++
 2 files changed, 154 insertions(+), 23 deletions(-)
 create mode 100644 jam-ui/src/hooks/useAutocomplete.js

diff --git a/jam-ui/src/components/page/JKNewMusicSession.js b/jam-ui/src/components/page/JKNewMusicSession.js
index 08d23125d..333c6808c 100644
--- a/jam-ui/src/components/page/JKNewMusicSession.js
+++ b/jam-ui/src/components/page/JKNewMusicSession.js
@@ -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>
diff --git a/jam-ui/src/hooks/useAutocomplete.js b/jam-ui/src/hooks/useAutocomplete.js
new file mode 100644
index 000000000..e3443799e
--- /dev/null
+++ b/jam-ui/src/hooks/useAutocomplete.js
@@ -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
+  };
+}