From 981b83cea280d2247ab9c45df74bb4bf57a01607 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Tue, 7 Feb 2023 10:05:03 +0530
Subject: [PATCH] wip jam-ui new session window

---
 .../components/dashboard/JKDashboardMain.js   |   2 +-
 jam-ui/src/components/page/JKMusicSessions.js |   2 +-
 .../src/components/page/JKNewMusicSession.js  | 120 +++++++++++++++++-
 jam-ui/src/helpers/rest.js                    |   8 ++
 4 files changed, 124 insertions(+), 8 deletions(-)

diff --git a/jam-ui/src/components/dashboard/JKDashboardMain.js b/jam-ui/src/components/dashboard/JKDashboardMain.js
index 3cd7eec1f..b0311d272 100644
--- a/jam-ui/src/components/dashboard/JKDashboardMain.js
+++ b/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" />
diff --git a/jam-ui/src/components/page/JKMusicSessions.js b/jam-ui/src/components/page/JKMusicSessions.js
index 756e1120a..59b0d1bb3 100644
--- a/jam-ui/src/components/page/JKMusicSessions.js
+++ b/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>
   )
 }
 
diff --git a/jam-ui/src/components/page/JKNewMusicSession.js b/jam-ui/src/components/page/JKNewMusicSession.js
index ddceda12e..08d23125d 100644
--- a/jam-ui/src/components/page/JKNewMusicSession.js
+++ b/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
\ No newline at end of file
+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;
diff --git a/jam-ui/src/helpers/rest.js b/jam-ui/src/helpers/rest.js
index 4349df431..a185c1118 100644
--- a/jam-ui/src/helpers/rest.js
+++ b/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`, {