wip jam-ui new session window

jam-ui/src/components/dashboard/JKDashboardMain.js

@@ -178,8 +178,8 @@ function JKDashboardMain() {
           <Route path="/privacy" component={JKPrivacy} />
           <Route path="/help" component={JKHelp} />
           <PrivateRoute path="/friends" component={JKPeopleFilter} />
-          <PrivateRoute path="/sessions" component={JKMusicSessions} />
           <PrivateRoute path="/sessions/new" component={JKNewMusicSession} />
+          <PrivateRoute path="/sessions" component={JKMusicSessions} />
           <PrivateRoute path="/notifications" component={JKNotifications} />
           {/*Redirect*/}
           <Redirect to="/errors/404" />

jam-ui/src/components/page/JKMusicSessions.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 function JKMusicSessions() {
   return (
-    <div>JKMusicSessions</div>
+    <div>Music Sessions Listing</div>
   )
 }
 

jam-ui/src/components/page/JKNewMusicSession.js

@@ -1,9 +1,117 @@
-import React from 'react'
+import React, { useState } 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 { useAuth } from '../../context/UserAuth';
+import { getFriends } from '../../helpers/rest';
+import Avatar from '../common/Avatar';
 
-function JKNewMusicSession() {
+const CustomOption = props => {
+  const { data, innerRef, innerProps } = props;
   return (
-    <div>JK New Music Session</div>
-  )
-}
+    <div ref={innerRef} {...innerProps}>
+      <Flex direction="row" className="p-2 bg-200 mb-2">
+        <div className="p-2 bg-300">
+          <Avatar src={data.photoUrl} size="s" name={data.label} />
+        </div>
+        <div className="p-2 bg-300">{data.label}</div>
+      </Flex>
+    </div>
+  );
+};
 
-export default JKNewMusicSession
+const JKNewMusicSession = () => {
+  const { t } = useTranslation();
+  const { currentUser } = useAuth();
+
+  const friendOptions = async inputValue => {
+    let matches = [];
+    if (inputValue && inputValue.length >= 3) {
+      await getFriends(currentUser.id)
+        .then(resp => {
+          return resp.json();
+        })
+        .then(data => {
+          matches = data
+            .filter(
+              friend =>
+                friend.first_name.toLowerCase().includes(inputValue.toLowerCase()) ||
+                friend.last_name.toLowerCase().includes(inputValue.toLowerCase())
+            )
+            .map(opt => ({
+              photoUrl: opt.photo_url,
+              label: `${opt.first_name} ${opt.last_name}`,
+              value: opt.id
+            }));
+        });
+    }
+    return matches;
+  };
+
+  return (
+    <div>
+      <Card>
+        <FalconCardHeader title={t('page_title', { ns: 'people' })} titleClass="font-weight-bold" />
+        <CardBody className="pt-0">
+          <Form>
+            <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">
+                <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>
+              </Input>
+            </FormGroup>
+
+            <FormGroup className="mb-3">
+              <Label>
+                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>
+            </FormGroup>
+
+            <FormGroup className="mb-3">
+              <Label>
+                Session Description{' '}
+                <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
+                type="textarea"
+                placeholder="Enter session description. Recommended for public sessions to attract other musicians and them know what
+                to expect in your session."
+              />
+            </FormGroup>
+          </Form>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+export default JKNewMusicSession;

jam-ui/src/helpers/rest.js

@@ -59,6 +59,14 @@ export const getInstruments = () => {
 //   })
 // }
 
+export const getFriends = (userId) => {
+  return new Promise((resolve, reject) => {
+    apiFetch(`/users/${userId}/friends`)
+    .then(response => resolve(response))
+    .catch(error => reject(error))
+  })
+}
+
 export const addFriend = (userId, friendId) => {
   return new Promise((resolve, reject) => {
     apiFetch(`/users/${userId}/friend_requests`, {