ayoisaiah

npm install stream-chat stream-chat-react axios

ayoisaiah

import React, { useState, useEffect } from 'react';
import {
  Chat,
  Channel,
  Thread,
  Window,
  ChannelList,
  ChannelListTeam,
  MessageList,
  MessageTeam,

ayoisaiah

import React, { useEffect } from 'react';
import './App.css';
import { useAuth0 } from './auth0';
import ChatView from './Chat';

function App() {
  useEffect(() => {}, []);

  const { loading, user, loginWithRedirect } = useAuth0();

ayoisaiah

npm install netlify-cli -g

ayoisaiah

npm run build

ayoisaiah

heroku config:set STREAM_API_KEY=<your api key>
heroku config:set STREAM_API_SECRET=<your api secret>
heroku config:set MONGODB_URI=<your mongodb atlas connection string>

ayoisaiah

heroku git:remote -a <app name>

ayoisaiah

// src/pages/Auth.tsx

import React from 'react';
import 'react-bulma-components/dist/react-bulma-components.min.css';
import './Auth.css';

function Auth(props: any) {
  const {
    auth,
    setAuth,

ayoisaiah

/* src/pages/Auth.css*/

.auth {
  width: 100%;
  max-width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ayoisaiah

// src/pages/Home.tsx

import React, { useState } from 'react';
import axios from 'axios';
import Auth from './Auth';

function useInput(type: string) {
  const [value, setValue] = useState('');
  const input = (
    <input