serene-core-client 0.1.1

package/src/components/basics/view-text-field.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Typography } from '@mui/material'
+
+interface Props {
+  label: string
+  value: string
+  style?: any
+}
+
+export default function ViewTextField({
+                          label,
+                          value,
+                          style = {}
+                        }: Props) {
+
+  // Render
+  return (
+    <div style={style}>
+      <Typography
+        variant='caption'>
+        {label}
+      </Typography>
+      <Typography variant='body1'>
+        {value}
+      </Typography>
+    </div>
+  )
+}

package/src/components/buttons/labeled-icon-button.tsx

@@ -0,0 +1,53 @@
+import { Box, Button, ButtonProps, styled } from '@mui/material'
+import { grey } from '@mui/material/colors'
+
+interface Props {
+  disabled?: boolean
+  icon: any
+  label: string | undefined
+  onClick: any
+  color?: string
+  textColor?: string
+  backgroundColor?: string
+  style?: any
+}
+
+export default function LabeledIconButton({
+                          disabled,
+                          icon,
+                          label,
+                          onClick,
+                          color = grey[700],
+                          textColor = grey[500],
+                          backgroundColor = grey[100],
+                          style = {}
+                        }: Props) {
+
+  // Consts
+  const Icon = icon
+
+  const ColorButton = styled(Button)<ButtonProps>(({ theme }) => ({
+    color: color,
+    backgroundColor: 'transparent',
+    '&:hover': {
+      color: theme.palette.getContrastText(textColor),
+      backgroundColor: backgroundColor,
+    },
+  }))
+
+  // Render
+  // Wrap in a box, so that if there's no onClick event the button isn't
+  // clickable (pointerEvents set to none instead of auto).
+  return (
+    <Box sx={{ pointerEvents: onClick == null ? 'none' : 'auto' }}>
+      <ColorButton
+        disabled={disabled}
+        onClick={onClick}
+        variant='text'
+        startIcon={<Icon />}
+        style={style}>
+        {label}
+      </ColorButton>
+    </Box>
+  )
+}

package/src/components/mailing-lists/sign-up.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react'
+import { useMutation } from '@apollo/client/react'
+import { mailingListSignupMutation } from '../../apollo/mailing-lists'
+import { Alert, Button, TextField } from '@mui/material'
+
+interface Props {
+  mailingListName: string
+}
+
+export default function MailingListSignUp({
+                          mailingListName
+                        }: Props) {
+
+  // Types
+  type AlertSeverity = 'error' | 'warning' | 'info' | 'success' | undefined
+
+  // State
+  const [alertSeverity, setAlertSeverity] = useState<AlertSeverity>(undefined)
+  const [message, setMessage] = useState<string | undefined>(undefined)
+
+  const [email, setEmail] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [submitDisabled, setSubmitDisabled] = useState(false)
+
+  // GraphQL
+  const [fetchMailingListSignupMutation] =
+    useMutation<any>(mailingListSignupMutation, {
+      fetchPolicy: 'no-cache'
+      /* onCompleted: data => {
+        console.log('elementName: ' + elementName)
+        console.log(data)
+      },
+      onError: error => {
+        console.log(error)
+      } */
+    })
+
+  // Functions
+  function isEmail(search: string): boolean {
+    var serchFind: boolean
+
+    const regexp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)
+
+    serchFind = regexp.test(search)
+
+    console.log(serchFind)
+    return serchFind
+  }
+
+  async function signUpForMailingList() {
+
+    // Verify email address
+    if (isEmail(email) === false) {
+      setAlertSeverity('error')
+      setMessage('The email address you entered is in valid')
+    } else {
+      setAlertSeverity(undefined)
+      setMessage(undefined)
+    }
+
+    // Disable the submit button
+    setSubmitDisabled(true)
+
+    // Call the GraphQL mutation
+    var mailingListSignupData: any
+
+    await fetchMailingListSignupMutation({
+      variables: {
+        mailingListName: mailingListName,
+        email: email,
+        firstName: firstName
+      }
+    }).then(result => mailingListSignupData = result)
+
+    // Process the results
+    const results = mailingListSignupData.data.mailingListSignup
+
+    if (results.status === true) {
+
+      // Success
+      setAlertSeverity('success')
+      setMessage(`You've applied to enter in the private beta!`)
+    } else {
+      // Error
+      setAlertSeverity('error')
+      setMessage(results.message)
+    }
+  }
+
+  // Render
+  return (
+    <>
+      <TextField
+        id='email'
+        label='Email address'
+        onChange={(e) => setEmail(e.target.value)}
+        style={{ marginBottom: '1em', width: '100%' }}
+        value={email}
+        variant='outlined' />
+
+      <TextField
+        label='First name'
+        onChange={(e) => setFirstName(e.target.value)}
+        style={{ marginBottom: '1em', width: '100%' }}
+        value={firstName}
+        variant='outlined' />
+
+      <Button
+        // disabled={submitDisabled}
+        onClick={(e) => signUpForMailingList()}
+        style={{ marginBottom: '2em' }}
+        variant='contained'>
+        Sign-up
+      </Button>
+
+      {alertSeverity && message ?
+        <Alert
+          severity={alertSeverity}>
+          {message}
+        </Alert>
+      :
+        <></>
+      }
+    </>
+  )
+}

package/src/components/notifications/action.tsx

@@ -0,0 +1,50 @@
+import CloseIcon from '@mui/icons-material/Close'
+import IconButton from '@mui/material/IconButton'
+import Snackbar from '@mui/material/Snackbar'
+
+interface Props {
+  message: string
+  autoHideDuration: number
+  notificationOpened: boolean
+  setNotificationOpened: any
+}
+
+export default function ActionNotification({
+                          message,
+                          autoHideDuration,
+                          notificationOpened,
+                          setNotificationOpened }: Props) {
+
+  const handleNotificationClose =
+    (event: React.SyntheticEvent | Event, reason?: string) => {
+      if (reason === 'clickaway') {
+        return
+      }
+
+      // setOpened(false)
+      setNotificationOpened(false)
+    }
+
+  const notificationAction = (
+    <>
+      <IconButton
+        size='small'
+        aria-label='close'
+        color='inherit'
+        onClick={handleNotificationClose}>
+        <CloseIcon fontSize='small' />
+      </IconButton>
+    </>
+  )
+
+  return (
+    <>
+      <Snackbar
+        open={notificationOpened}
+        autoHideDuration={autoHideDuration}
+        onClose={handleNotificationClose}
+        message={message}
+        action={notificationAction} />
+    </>
+  )
+}

package/src/components/tech/load-techs.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react'
+import { useQuery } from '@apollo/client/react'
+import { getTechsQuery } from '../../apollo/techs'
+
+interface Props {
+  userProfileId: string
+  resource: string,
+  setTechs: any
+}
+
+export default function LoadTechByFilter({
+                          userProfileId,
+                          resource,
+                          setTechs
+                        }: Props) {
+
+  // GraphQL
+  const { refetch: fetchTechsQuery } =
+    useQuery<any>(getTechsQuery, {
+      fetchPolicy: 'no-cache'
+      /* onCompleted: data => {
+        console.log('elementName: ' + elementName)
+        console.log(data)
+      },
+      onError: error => {
+        console.log(error)
+      } */
+    })
+
+  // Functions
+  async function getTechsList() {
+
+    // Debug
+    const fnName = `getTechsList()`
+
+    // Query
+    const { data } = await
+            fetchTechsQuery({
+              userProfileId: userProfileId,
+              resource: resource
+            })
+
+    // Set results
+    const results = data.getTechs
+
+    setTechs(results)
+  }
+
+  // Effects
+  useEffect(() => {
+
+    const fetchData = async () => {
+      await getTechsList()
+    }
+
+    // Async call
+    const result = fetchData()
+      .catch(console.error)
+
+  }, [])
+
+  // Render
+  return (
+    <></>
+  )
+}

package/src/components/tech/tech-autocomplete.tsx

@@ -0,0 +1,65 @@
+import Autocomplete from '@mui/material/Autocomplete'
+import FormControl from '@mui/material/FormControl'
+import TextField, { TextFieldVariants } from '@mui/material/TextField'
+
+interface Tech {
+  id: string
+  variantName: string
+}
+
+interface Props {
+  disabled?: boolean
+  label: string
+  onChange: any
+  setValue: any
+  style?: any
+  value: string | null  // id
+  values: Tech[]
+  variant?: TextFieldVariants | undefined
+}
+
+export default function TechAutocomplete({
+                          disabled = false,
+                          label,
+                          onChange = () => {},
+                          setValue,
+                          style = {},
+                          value,
+                          values,
+                          variant = 'standard'
+                        }: Props) {
+
+  const selectedTech = values.find((tech) => tech.id === value) || null
+
+  return (
+    <FormControl fullWidth>
+      <Autocomplete
+        disabled={disabled}
+        value={selectedTech}
+        onChange={(event, newValue) => {
+
+          // console.log(`newValue: ` + JSON.stringify(newValue))
+
+          const newId = newValue ? newValue.id : null
+          setValue(newId)
+
+          // Call the onChange function passed in, which must take a newId
+          // parameter of type string
+          onChange(newId)
+        }}
+        options={values}
+        getOptionLabel={(option) => option?.variantName ?? ''}
+        isOptionEqualToValue={(option, val) => option.id === val.id}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label={label}
+            required
+            variant={variant}
+          />
+        )}
+        style={style}
+      />
+    </FormControl>
+  )
+}

package/src/components/tips/load-tips.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react'
+import { useQuery } from '@apollo/client/react'
+import { getTipsByUserProfileIdAndTagsQuery } from '../../apollo/tips'
+
+// Component function interface
+interface Props {
+  userProfileId: string
+  tipTags: string[]
+  setTips: any
+}
+
+export default function LoadTips({
+                          userProfileId,
+                          tipTags,
+                          setTips
+                        }: Props) {
+
+  // GraphQL
+  const { refetch: fetchGetTipsByUserProfileIdAndTagsQuery } =
+    useQuery<any>(getTipsByUserProfileIdAndTagsQuery, {
+      fetchPolicy: 'no-cache'
+      /* onCompleted: data => {
+        console.log('attributeTypeName: ' + attributeTypeName)
+        console.log(data)
+      },
+      onError: error => {
+        console.log(error)
+      } */
+    })
+
+  // Functions
+  async function getTips() {
+
+    const fnName = `getTips()`
+
+    // Get tips data
+    const { data } = await
+      fetchGetTipsByUserProfileIdAndTagsQuery({
+          variables: {
+            userProfileId: userProfileId,
+            tags: tipTags
+          }
+        })
+
+    // Set profile data
+    const results = data.getTipsByUserProfileIdAndTags
+
+    if (results != null) {
+      // console.log(`${fnName}: results: ${JSON.stringify(results)}`)
+
+      setTips(results.tips)
+    }
+  }
+
+  // Effects
+  useEffect(() => {
+
+    const fetchData = async () => {
+      await getTips()
+    }
+
+    // Async call
+    if (userProfileId != null) {
+      const result = fetchData()
+        .catch(console.error)
+    }
+
+  }, [userProfileId])
+
+  // Render
+  return (
+    <>
+    </>
+  )
+}

package/src/components/tips/tip.tsx

@@ -0,0 +1,96 @@
+import { useMutation } from '@apollo/client/react'
+import { upsertTipGotItMutation } from '../../apollo/tips'
+import { Button, Card, CardActions, CardContent, Typography } from '@mui/material'
+
+// Component function interface
+interface Props {
+  name: string
+  label: string
+  text: string
+  setFocusRef: any
+  setTipVisible: any
+  style: any
+  userProfileId: string
+}
+
+export default function Tip({
+                          name,
+                          label,
+                          text,
+                          setFocusRef = undefined,
+                          setTipVisible,
+                          style = {},
+                          userProfileId
+                        }: Props) {
+
+  // GraphQL
+  const [sendUpsertTipGotItMutation] =
+    useMutation<any>(upsertTipGotItMutation, {
+      fetchPolicy: 'no-cache',
+      /* onCompleted: data => {
+        console.log('attributeTypeName: ' + attributeTypeName)
+        console.log(data)
+      },
+      onError: error => {
+        console.log(error)
+      } */
+    })
+
+  // Functions
+  async function gotIt() {
+
+    const fetchData = async () => {
+
+      // Get tips data
+      const { data } = await
+        sendUpsertTipGotItMutation({
+            variables: {
+              name: name,
+              userProfileId: userProfileId
+            }
+          })
+
+      // Set profile data
+      const results = data.upsertTipGotIt
+    }
+
+    // Async call
+    if (userProfileId != null) {
+      const result = fetchData()
+        .catch(console.error)
+    }
+  }
+
+  // Render
+  return (
+    <div style={style}>
+      <Card style={{ background: '#6495ed', padding: '0.5em' }}>
+        <CardContent style={{ background: '#ffffff' }}>
+          <Typography
+            variant='caption'>
+            {label}
+          </Typography>
+          <Typography
+            variant='body1'>
+            {text}
+          </Typography>
+        </CardContent>
+        <CardActions style={{ background: '#ffffff' }}>
+          <div style={{ textAlign: 'right', width: '100%' }}>
+            <Button
+              onClick={(e) => {
+                setTipVisible(undefined)
+                gotIt()
+
+                if (setFocusRef != null) {
+                  setFocusRef.current.focus()
+                }
+              }}>
+              Got it
+            </Button>
+          </div>
+        </CardActions>
+      </Card>
+    </div>
+  )
+}

package/src/services/access/service.ts

@@ -0,0 +1,126 @@
+import { getCookie, setCookie } from 'cookies-next'
+import { isAdminUserQuery } from '../../apollo/access'
+import { UsersService } from '../users/user-service'
+
+interface ReqRes {
+  req: any
+  res: any
+}
+
+export class AccessService {
+
+  // Consts
+  clName = 'AccessService'
+  accessCodeCookieName = 'inventai-access-code'
+
+  // Services
+  usersService = new UsersService()
+
+  // Code
+  formatValidateAdminUser(json: any) {
+
+    if (json.isAdminUser == null) {
+      return { status: false,
+               message: 'Invalid reply' }
+    }
+
+    const record = json.isAdminUser
+
+    if (record.status == null) {
+      return { status: false,
+               message: 'Invalid reply' }
+    }
+
+    var results =
+          { status: record.status,
+            message: null }
+
+    if (record.message == null) {
+      results.message = record.message
+    }
+
+    return results
+  }
+
+  validateAccessCode(
+    { req, res }: ReqRes,
+    accessCode: string) {
+
+    // Fail if in production but ACCESS_CODE isn't defined
+    if (process.env.NODE_ENV === 'production' &&
+        !process.env.ACCESS_CODE) {
+      return false
+    }
+
+    // Check cookie for saved verification
+    const cookieAccessCode = getCookie(this.accessCodeCookieName, { req, res })
+
+    if (cookieAccessCode) {
+      if (cookieAccessCode === process.env.ACCESS_CODE) {
+        // Return validated successfully
+        return true
+      }
+    }
+
+    // Check access in production
+    if (process.env.NODE_ENV === 'production' &&
+        process.env.ACCESS_CODE === accessCode) {
+
+      // Save admin access to a cookie
+      setCookie(
+        this.accessCodeCookieName,
+        accessCode,
+        { req,
+          res,
+          maxAge: 60 * 60 * 24 * 30 }) // 30 days
+
+      // Return validated successfully
+      return true
+    }
+
+    // Otherwise fail for production, but pass for development
+    if (process.env.NODE_ENV === 'production') {
+      return false
+    }
+
+    return true
+  }
+
+  async validateUserIsAdmin(
+          { req, res }: ReqRes,
+          apolloClient: any) {
+
+    // Debug
+    const fnName = `${this.clName}.validateUserIsAdmin`
+
+    // Get signed-in user id
+    const signedInId = await
+            this.usersService.getUserIdFromCookieAndVerify(
+              { req, res },
+              apolloClient)
+
+    if (signedInId == null ||
+        signedInId === '') {
+      return {
+        status: false,
+        message: 'No signed-in user id given'
+      }
+    }
+
+    // console.log(`${fnName}: signedInId: ${signedInId}`)
+
+    // Send a user is-admin query
+    var validateUserData: any
+
+    await apolloClient.query({
+      query: isAdminUserQuery,
+      variables: {
+        userProfileId: signedInId
+      }
+    }).then((result: any) => validateUserData = result)
+
+    // console.log(`validateUserIsAdmin(): ${JSON.stringify(validateUserData)}`)
+
+    return this.formatValidateAdminUser(validateUserData.data)
+  }
+}