<repo_name>Kaylee2319/Outpost<file_sep>/client/src/components/PolicyGuide.jsx
import React from 'react';
import '../css/PolicyGuide.css';
import NavBar from './NavBar';
import Footer from './Footer';
import { BsPeople } from 'react-icons/bs';
import { IoIosSearch } from 'react-icons/io';
import { FaRegHandshake } from 'react-icons/fa';

const PolicyGuide = ({ history }) => {
  const handleClick = () => {
    history.push('/signup');
  };
  return (
    <>
      <NavBar />
      <div>
        <h1 className="policyTitle">How It Works</h1>
        <h3 className="policyTitle1">Join a community of veteran gamers</h3>
      </div>
      <div className="iconbar2">
        <div className="howtoSearch">
          <div className="howSearch">
            Search
            <IoIosSearch size={55} style={{ color: 'black' }} />
          </div>
          <p className="howSearch1">
            Search for military veteran players and chat through 1-1 or group
            chats of your favorite games
          </p>
        </div>
        <div className="howtoconnect">
          <p className="howConnect1">
            Connect through the app, add your friends and schedule a game time.
          </p>
          <div className="howConnect">
            Connect
            <BsPeople size={55} style={{ color: 'black' }} />
          </div>
        </div>
        <div className="howtoGameon">
          <div className="howGameOn">
            Game On!
            <FaRegHandshake size={55} style={{ color: 'black' }} />
          </div>
          <p className="howGameOn1">
            Meet players at the platform of your choice & Game On!
          </p>
        </div>
      </div>
      <div className="howButton">
        <button onClick={handleClick} className="howtoButton">
          BECOME A MEMBER
        </button>
      </div>
      <Footer />
    </>
  );
};

export default PolicyGuide;
<file_sep>/client/src/components/LoginPage.jsx
import React, { useState, useContext } from 'react';
import '../css/LoginPage.css';
import NavBar from './NavBar';
import Footer from './Footer';
import { Link } from 'react-router-dom';
import { FaXbox } from 'react-icons/fa';
import { FaPlaystation } from 'react-icons/fa';
import { SiNintendoswitch } from 'react-icons/si';
import { SiSteam } from 'react-icons/si';
import { SiTwitch } from 'react-icons/si';
import { AppContext } from '../context/AppContext';
import axios from 'axios';
import swal from 'sweetalert';

const LoginPage = ({ history }) => {
  const { setCurrentUser } = useContext(AppContext);
  const [formData, setFormData] = useState(null);

  const handleChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

  const handleLogin = async (event) => {
    event.preventDefault();
    try {
      const response = await axios.post('/api/login', formData);
      setCurrentUser(response.data);
      sessionStorage.setItem('user', response.data);
      history.push('/profile');
    } catch (error) {
      swal(`Oops!`, 'Something went wrong.');
    }
  };

  return (
    <>
      <NavBar />
      <div className="topTitle">
        <p className="gameUp">Choose your rally point</p>
      </div>
      <div className="signInTitle">
        <p className="signIn">Game up with veterans!</p>
      </div>
      <div className="signinWith">
        <h1 className="signButton">
          <FaXbox size={30} style={{ color: 'black' }} />
        </h1>
        <h1 className="signButton">
          <FaPlaystation size={30} style={{ color: 'black' }} />
        </h1>
        <h1 className="signButton">
          <SiNintendoswitch size={30} style={{ color: 'black' }} />
        </h1>
        <h1 className="signButton">
          <SiSteam size={30} style={{ color: 'black' }} />
        </h1>
        <h1 className="signButton">
          <SiTwitch size={30} style={{ color: 'black' }} />
        </h1>
      </div>
      <div className="or">
        <p className="or">OR</p>
      </div>
      <form className="loginForm" onSubmit={handleLogin}>
        <p className="email">Email:</p>
        <input
          className="emailBox"
          id="email"
          type="email"
          name="email"
          onChange={handleChange}
        />
        <p className="passwords">Password:</p>
        <input
          className="passwordBox"
          type="password"
          name="password"
          onChange={handleChange}
        />
        <Link to="/passwordreset" className="forgot">
          <span className="forgotten">Forgot Password?</span>
        </Link>
        <input className="loginButton" type="submit" value="SIGN IN" />
      </form>
      <div className="noAccountTitle">
        <p className="noAccountTitle">Don't have an account?</p>
      </div>
      <div className="signupLink">
        <Link to="/signup" className="signupLink">
          <span className="signLink">Sign up</span>
        </Link>
      </div>
      <Footer />
    </>
  );
};
export default LoginPage;
<file_sep>/client/src/components/NavBar.jsx
import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { AppContext } from '../context/AppContext';
import '../css/NavBar.css';
import { FiMenu } from 'react-icons/fi';
import { MdPersonPin } from 'react-icons/md';
import { AiOutlineUserAdd } from 'react-icons/ai';

const NavBar = () => {
  const { currentUser } = useContext(AppContext);

  return (
    <>
      <div className="navbar">
        <Link to="/menu" className="menu">
          <FiMenu size={30} style={{ color: '055F9E' }} />
        </Link>
        <Link to="/" className="name">
          Outpost
        </Link>
        <div>
          {!currentUser ? (
            <Link to="/login" className="signup">
              <AiOutlineUserAdd size={27} style={{ color: '055F9E' }} />
            </Link>
          ) : (
            <Link to="/profile" className="profile">
              <MdPersonPin size={27} style={{ color: '055F9E' }} />
            </Link>
          )}
        </div>
      </div>
    </>
  );
};

export default NavBar;
<file_sep>/server/routes/secure/users.js
const router = require('express').Router(),
  {
    getUserProfile,
    getUserByID,
    updateUserProfile,
    uploadAvatar,
    updatePassword,
    logoutUser,
    deleteUser
  } = require('../../controllers/users');

router.get('/profile', getUserProfile);
router.get('/allusers/:id', getUserByID);
router.patch('/profile', updateUserProfile);
router.post('/avatar', uploadAvatar);
router.put('/password', updatePassword);
router.post('/logout', logoutUser);
router.delete('/', deleteUser);

module.exports = router;
<file_sep>/README.md
# Outpost-Gaming

## About us

- We are a team of veterans and students at Wyncode in Miami, FL.

- The purpose for Outpost is to address suicide among veterans which is currently at an average of 22 veterans per day. With this app, we can help provide a safe space outlet for veterans to come together, schedule gaming days, attend online group chats and talk about whatever is on their mind.

- Additionally, we want to provide resources to other military communities and mental health support/therapy.

## Link to Site

- https://outpost-gaming.herokuapp.com/

## How to View in Phone View

- This is a cellphone app only

- to view it as a cellphone on chrome use your developer tools, follow the steps below

- Right Click

- select inspect

- ![inspect](https://user-images.githubusercontent.com/70960077/100637841-56d95680-3301-11eb-87dd-deb3dfc6a821.png)

- click the toggle device button in the top left of the console.

- ![togglebutton](https://user-images.githubusercontent.com/70960077/100638028-88eab880-3301-11eb-89c2-59b6b026a591.png)

- click the 3 dots in the top right corner

- click more tools

- ![3dots](https://user-images.githubusercontent.com/70960077/100637804-49bc6780-3301-11eb-953e-debe6727bee2.png)

- click developer tools

- ![webDev](https://user-images.githubusercontent.com/70960077/100637927-6ce71700-3301-11eb-8ede-f1c9fb619d2f.png)

- click the toggle device button in the top left of the console.

- ![togglebutton](https://user-images.githubusercontent.com/70960077/100638028-88eab880-3301-11eb-89c2-59b6b026a591.png)

## Setup to Clone the Repo

- `git clone` this repo
- `cd` into it.
- `yarn install`
- `cd client && yarn install`
- `cp .env.sample .env`

## Available Build Commands

- `yarn dev`: Runs BOTH your Express.JS and React developer environment locally at the same time. Any logs coming from Express will be prefaced with `[0]`, any logs from `create-react-app` will be prefaced with `[1]`.

- `yarn server`: Runs JUST your Express.JS server.

- `yarn client`: Runs JUST your front-end React app.

Open [http://localhost:3000](http://localhost:3000) to view your local React app in the browser. The page will reload if you make edits.
<file_sep>/client/src/components/VeteranPrograms.jsx
import React from 'react';
import '../css/VeteranPrograms.css';
import NavBar from './NavBar';
import Footer from './Footer';

const VeteranPrograms = () => {
  return (
    <>
      <NavBar />
      <div>
        <div className="VaTitle">Veteran Programs</div>
        <p className="aboutVaPg">Thank you for your service.</p>
        <p className="aboutVaPg">We're here to guide.</p>
      </div>
      <div className="mission22">
        <div className="m22img"></div>
        <div className="aboutMission">
          <p className="aboutMission1">
            Recovery + Resiliency is a 12-month program available to combat
            Veterans
          </p>
          <a href="https://mission22.com/">
            <button className="missionbutton">Go</button>
          </a>
        </div>
      </div>
      <div className="talkspace">
        <div className="talkimg"></div>
        <div className="aboutTs">
          <p className="aboutTs1">
            TalkSpace: Online Counseling & Therapy for Veterans. HIPPA Compliant
            & Secure SSL
          </p>
          <a href="https://www.talkspace.com/online-therapy/veterans/">
            <button className="tsbutton">Go</button>
          </a>
        </div>
      </div>
      <div className="feedvets">
        <div className="feedimg"></div>
        <div className="aboutFeedvet">
          <p className="aboutFeedvet1">
            Since 2009, Feed Our Vets has provided free food assistance to more
            than 25,000 Veterans.
          </p>
          <a href="https://feedourvets.org/">
            <button className="feedvetbutton">Go</button>
          </a>
        </div>
      </div>
      <div className="nva">
        <div className="nvaimg"></div>
        <div className="aboutNva">
          <p className="aboutNva1">
            {' '}
            We help Veterans and their families who are enduring a crisis or who
            have a critical need for help.
          </p>
          <a href="https://nvf.org/">
            <button className="nvabutton">Go</button>
          </a>
        </div>
      </div>
      <div className="wounded">
        <div className="woundedimg"></div>
        <div className="aboutWounded">
          <p className="aboutWounded1">
            Veterans and service members who incurred a physical or mental
            injury, while serving in the military. You are our focus. You are
            our mission.
          </p>
          <a href="https://www.woundedwarriorproject.org/">
            <button className="woundedbutton">Go</button>
          </a>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default VeteranPrograms;
<file_sep>/client/src/components/GamersProfile.jsx
import React, { useState, useContext, useEffect } from 'react';
import '../css/ProfilePage.css';
import NavBar from './NavBar';
import Footer from './Footer';
import axios from 'axios';
import swal from 'sweetalert';
import { Link } from 'react-router-dom';
import { AppContext } from '../context/AppContext';
import { MdComputer, MdDevicesOther } from 'react-icons/md';
import { FaXbox, FaPlaystation } from 'react-icons/fa';
import { SiNintendoswitch } from 'react-icons/si';
import wyncode from '../images/wyncode.png';

const GamersProfile = ({ match }) => {
  const [loading, setLoading] = useState(true);
  const { gamer, setGamer } = useContext(AppContext);

  useEffect(() => {
    console.log('PARAMS', match);
    axios
      .get(`/api/users/allusers/${match.params.id}`)
      .then((response) => {
        setGamer(response.data);
        setLoading(false);
      })
      .catch((error) => {
        swal(`Oops!`, 'Something went wrong.');
        setLoading(false);
      });
  }, [setGamer, match]);

  if (loading) return <h1>Loading...</h1>;

  return (
    <>
      <NavBar />
      <div key={gamer?._id}>
        <div className="pic">
          <img
            className="proPic"
            src={gamer?.avatar ? gamer?.avatar : `${wyncode}`}
            alt="profile"
          />
        </div>
        <div className="namedPlayer">
          <div className="nameEdit">
            <h2 className="usersName">
              {gamer?.first_name} {gamer?.last_name}
            </h2>
          </div>

          <h3 className="userName">{gamer?.user_name}</h3>
          <h4 className="dutyStatus">{gamer?.service_branch}</h4>

          <Link to="/chats" className="messageButton">
            <span className="messageButton1">Message</span>
          </Link>
        </div>
        <div className="favGames" style={{ marginBottom: 20 }}>
          <p className="consoles">Find me on:</p>
          <div className="mygameTags">
            <div>
              <FaXbox /> <strong>Xbox:</strong> {gamer?.xbox}
            </div>
            <div>
              <FaPlaystation /> <strong>Playstation:</strong> {gamer?.psn}
            </div>
            <div>
              <SiNintendoswitch /> <strong>Nintendo:</strong> {gamer?.nes}
            </div>
            <div>
              <MdComputer /> <strong>PC:</strong> {gamer?.pc}
            </div>
            <div>
              <MdDevicesOther /> <strong>Other:</strong> {gamer?.other}
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default GamersProfile;
<file_sep>/client/src/components/Footer.jsx
import React from 'react';
import { Link } from 'react-router-dom';
import '../css/Footer.css';

const Footer = () => {
  return (
    <>
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      ></link>
      <div className="footer">
        <div className="nav">
          <Link style={{ textDecoration: 'none', color: 'black' }} to="/about">
            {' '}
            About Us{' '}
          </Link>
          <Link
            style={{ textDecoration: 'none', color: 'black' }}
            to="/contactus"
          >
            {' '}
            Contact Us{' '}
          </Link>
          <Link
            style={{ textDecoration: 'none', color: 'black' }}
            to="/veteranprograms"
          >
            {' '}
            Veteran Programs{' '}
          </Link>
          <Link style={{ textDecoration: 'none', color: 'black' }} to="/policy">
            {' '}
            Policy & Guidelines{' '}
          </Link>
        </div>

        <div className="icon-bar">
          <div>
            <p className="follow">Follow Us</p>
          </div>
          <div className="social">
            <a href="https://www.facebook.com/wyncode/" className="facebook">
              <i className="fa fa-facebook"></i>
            </a>
            <a href="https://twitter.com/wyncode?lang=en" className="twitter">
              <i className="fa fa-twitter"></i>
            </a>
            <a
              href="https://www.instagram.com/wyncode/?hl=en"
              className="instagram"
            >
              <i className="fa fa-instagram"></i>
            </a>
          </div>
        </div>
      </div>
    </>
  );
};

export default Footer;
<file_sep>/client/src/components/PasswordReset.jsx
import React, { useState } from 'react';
import axios from 'axios';
import swal from 'sweetalert';
import '../css/PasswordReset.css';
import NavBar from './NavBar';
import Footer from './Footer';

const ResetPassword = () => {
  const [email, setEmail] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();
    const form = event.target;
    try {
      const response = await axios.get(`api/password?email=${email}`);
      if (response) {
        swal(
          'Email sent',
          'Check your email for a link to reset your password.'
        );
      }
      form.reset();
    } catch (error) {
      swal('Error', 'Oops, something went wrong.');
    }
  };
  return (
    <div>
      <NavBar />
      <h1 className="resetPass">Reset Password</h1>
      <form className="PassResetForm" onSubmit={handleSubmit}>
        <label>Email address:</label>
        <input
          className="passemailReset"
          type="email"
          name="email"
          placeholder="Enter email"
          onChange={(event) => setEmail(event.target.value)}
          autoComplete="off"
          required
        ></input>
        <button className="resetPassButton" type="submit">
          Reset Password
        </button>
      </form>
      <Footer />
    </div>
  );
};

export default ResetPassword;
<file_sep>/client/src/components/GamerSearch.jsx
import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';
import '../css/GamerStyles.css';

const GamerSearch = () => {
  const { setSearch } = useContext(AppContext);

  const handleSearch = (event) => {
    setSearch(event.target.value);
  };

  return (
    <div className="searchgamer">
      <input
        className="gamersearch"
        onChange={handleSearch}
        type="text"
        placeholder="Search for a Gamer..."
      />
    </div>
  );
};

export default GamerSearch;
<file_sep>/client/src/components/Chatroom.jsx
import React from 'react';
import Chat from './Chats';
import NavBar from './NavBar';
import Footer from './Footer';

const Chatroom = () => {
  return (
    <>
      <NavBar />
      <div>
        <Chat />
      </div>
      <Footer />
    </>
  );
};
export default Chatroom;
<file_sep>/client/src/App.jsx
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { AppContextProvider } from './context/AppContext';
import SecureRoute from './components/SecureRoute';
import HomePage from './components/HomePage';
import SignUpPage from './components/SignUpPage';
import LoginPage from './components/LoginPage';
import PasswordReset from './components/PasswordReset';
import PasswordUpdate from './components/PasswordUpdate';
import Menu from './components/MenuPage';
import AboutPage from './components/AboutPage';
import PolicyGuide from './components/PolicyGuide';
import VeteranPrograms from './components/VeteranPrograms';
import ContactUs from './components/ContactUsPage';
import Events from './components/Events';
import Gamers from './components/Gamers';
import Chatroom from './components/Chatroom';
import ProfilePage from './components/ProfilePage';
import ProfileEdit from './components/ProfileEdit';
import GamersList from './components/GamersList';
import GamersProfile from './components/GamersProfile';

function App() {
  return (
    <AppContextProvider>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/signup" component={SignUpPage} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/passwordreset" component={PasswordReset} />
          <Route exact path="/passwordupdate" component={PasswordUpdate} />
          <Route exact path="/menu" component={Menu} />
          <Route exact path="/about" component={AboutPage} />
          <Route exact path="/policy" component={PolicyGuide} />
          <Route exact path="/veteranprograms" component={VeteranPrograms} />
          <Route exact path="/contactus" component={ContactUs} />
          <Route exact path="/event" component={Events} />
          <Route exact path="/search" component={Gamers} />
          <Route exact path="/gamers" component={GamersList} />
          <Route exact path="/gamersprofile/:id" component={GamersProfile} />
          <SecureRoute exact path="/chats" component={Chatroom} />
          <SecureRoute exact path="/profile" component={ProfilePage} />
          <SecureRoute exact path="/profileedit" component={ProfileEdit} />
        </Switch>
      </BrowserRouter>
    </AppContextProvider>
  );
}

export default App;
<file_sep>/client/src/components/Chats.jsx
import React, { useState, useEffect, useContext } from 'react';
import socketIo from '../utils/socket-io';
import { AppContext } from '../context/AppContext';
import '../css/Chat.css';
import { RiSendPlaneFill } from 'react-icons/ri';
import wyncode from '../images/wyncode.png';

const Chat = () => {
  const [message, setMessage] = useState('');
  const [chats, setChats] = useState([]);
  const { currentUser } = useContext(AppContext);

  useEffect(() => {
    socketIo.on('receive message', (data) => {
      console.log('receive message', data);
      addMessage(data);
    });
  }, [chats]);

  const addMessage = (msg) => {
    setChats(
      chats.concat({
        avatar: msg.avatar,
        author: msg.author,
        message: msg.message
      })
    );
  };

  const sendMessage = (event) => {
    event.preventDefault();
    socketIo.emit('send message', {
      avatar: `${currentUser?.avatar ? currentUser?.avatar : `${wyncode}`}`,
      author: `${currentUser?.user_name}`,
      message: message
    });
    setMessage('');
  };
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      sendMessage(event);
      setMessage('');
    }
  };

  return (
    <div className="container">
      <div className="messages">
        <div className="theMess">
          {chats.map((chat) => {
            let isSentByCurrentUser = chat.author === currentUser.user_name;
            return isSentByCurrentUser ? (
              <div className="messageMine justifyEnd">
                <img className="messagePic" src={chat.avatar} alt="user"></img>
                <div className="messageText">
                  <strong>{chat.author}:</strong> {chat.message}
                </div>
              </div>
            ) : (
              <div className="messageTheirs justifyStart">
                <img className="messagePic" src={chat.avatar} alt="user"></img>
                <div className="messageText">
                  <strong>{chat.author}:</strong> {chat.message}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div className="inputBox">
        <input
          className="form-control"
          type="text"
          name="messages"
          placeholder="Message"
          value={message}
          onKeyDown={handleKeyDown}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button className="sendButton" type="submit" onClick={sendMessage}>
          <RiSendPlaneFill size={30} style={{ color: 'rgba(5, 95, 158, 1)' }} />
        </button>
      </div>
    </div>
  );
};

export default Chat;
<file_sep>/client/src/components/ProfilePage.jsx
import React, { useContext, useState } from 'react';
import axios from 'axios';
import swal from 'sweetalert';
import '../css/ProfilePage.css';
import NavBar from './NavBar';
import Footer from './Footer';
import { Link } from 'react-router-dom';
import { AiOutlineCloudUpload } from 'react-icons/ai';
import { FiSave } from 'react-icons/fi';
import { BsTrash } from 'react-icons/bs';
import { VscSignOut } from 'react-icons/vsc';
import { AppContext } from '../context/AppContext';
import { MdComputer, MdDevicesOther } from 'react-icons/md';
import { FaXbox, FaPlaystation } from 'react-icons/fa';
import { SiNintendoswitch } from 'react-icons/si';

const ProfilePage = ({ history: { push } }) => {
  const { currentUser, setCurrentUser, setLoading } = useContext(AppContext);
  const [image, setImage] = useState(null);
  const [preview, setPreview] = useState(null);

  const handleImageSelect = (event) => {
    setPreview(URL.createObjectURL(event.target.files[0]));
    setImage(event.target.files[0]);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const avatar = new FormData();
    avatar.append('avatar', image, image.name);
    try {
      const updatedUser = await axios({
        method: 'POST',
        url: '/api/users/avatar',
        data: avatar,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      setCurrentUser({ ...currentUser, avatar: updatedUser.data.secure_url });
      swal('Your image has been updated!', 'success');
    } catch (error) {
      swal('Error', 'Oops, something went wrong.');
    }
  };

  const handleDelete = async () => {
    setLoading(true);
    try {
      const willDelete = await swal({
        title: 'Are you sure?',
        text: 'Once deleted, you will not be able to recover this account!',
        icon: 'warning',
        buttons: true,
        dangerMode: true
      });
      if (willDelete) {
        try {
          await axios({
            method: 'DELETE',
            url: '/api/users',
            withCredentials: true
          });
          swal('Your account has been deleted!', {
            icon: 'success'
          });
          setLoading(false);
          sessionStorage.removeItem('user');
          setCurrentUser(null);
          push('/login');
        } catch (error) {
          swal(`Oops!`, 'Something went wrong.');
        }
      } else {
        swal('Your account is safe!');
      }
    } catch (error) {
      swal(`Oops!`, 'Something went wrong.');
    }
  };

  const handleLogout = async () => {
    try {
      await axios({
        method: 'POST',
        url: '/api/users/logout',
        withCredentials: true
      });
      swal('You have been logged out!', {
        icon: 'success'
      });
      setLoading(false);
      sessionStorage.removeItem('user');
      setCurrentUser(null);
      push('/login');
    } catch (error) {
      swal(`Oops!`, 'Something went wrong.');
    }
  };

  return (
    <>
      <NavBar />
      <div className="pic">
        <img
          className="proPic"
          src={
            preview
              ? preview
              : currentUser?.avatar
              ? currentUser?.avatar
              : 'https://files.willkennedy.dev/wyncode/wyncode.png'
          }
          alt="profile"
        />
      </div>
      <form className="d-flex flex-column" onSubmit={handleSubmit}>
        <div className="proForm">
          <div className="fileInput">
            <input
              type="file"
              className="file"
              id="file"
              accept="image/*"
              onChange={handleImageSelect}
            />
            <label htmlFor="file">
              <AiOutlineCloudUpload
                size={15}
                style={{ color: 'rgba(5, 95, 158, 1)' }}
              />{' '}
              Profile Photo{' '}
            </label>
          </div>
          <button className="ProfileButtons" type="submit">
            <FiSave size={15} style={{ color: 'rgba(5, 95, 158, 1)' }} /> Save
            Image
          </button>
        </div>
      </form>
      <div className="namedPlayer">
        <div className="nameEdit">
          <h2 className="usersName">
            {currentUser?.first_name} {currentUser?.last_name}
          </h2>
          <Link to="/profileedit" className="editLink">
            <span className="editProfile">Edit Profile</span>
          </Link>
        </div>

        <h3 className="userName">{currentUser?.user_name}</h3>
        <h4 className="dutyStatus">{currentUser?.service_branch}</h4>

        <Link to="/chats" className="messageButton">
          <span className="messageButton1">Message</span>
        </Link>
      </div>
      <div className="favGames">
        <p className="consoles">Find me on:</p>
        <div className="mygameTags">
          <div>
            <FaXbox /> <strong>Xbox:</strong> {currentUser?.xbox}
          </div>
          <div>
            <FaPlaystation /> <strong>Playstation:</strong> {currentUser?.psn}
          </div>
          <div>
            <SiNintendoswitch /> <strong>Nintendo:</strong> {currentUser?.nes}
          </div>
          <div>
            <MdComputer /> <strong>PC:</strong> {currentUser?.pc}
          </div>
          <div>
            <MdDevicesOther /> <strong>Other:</strong> {currentUser?.other}
          </div>
        </div>
      </div>
      <div className="trash">
        <button className="ProfileButtons" onClick={handleDelete}>
          <BsTrash size={15} style={{ color: 'rgba(5, 95, 158, 1)' }} /> Delete
          Account
        </button>
        <button className="ProfileButtons" onClick={handleLogout}>
          <VscSignOut size={15} style={{ color: 'rgba(5, 95, 158, 1)' }} />{' '}
          Logout
        </button>
      </div>
      <Footer />
    </>
  );
};

export default ProfilePage;
<file_sep>/client/src/components/AboutPage.jsx
import React from 'react';
import '../css/AboutPage.css';
import NavBar from './NavBar';
import Footer from './Footer';

const AboutPage = () => {
  return (
    <>
      <NavBar />
      <div className="title">
        <h2>About Us</h2>
      </div>
      <div className="story">
        <h2 className="ourstory">Our Story</h2>
        <p className="ourstory1">
          We are a team of veterans and students at Wyncode in Miami, FL.
        </p>

        <p className="ourstory1">
          The purpose for <strong className="colorme">Outpost</strong> is to
          address suicide among veterans which is currently at an average of{' '}
          <strong className="colorme">22 veterans per day</strong>. With this
          app, we can help provide a safe space outlet for veterans to come
          together, schedule gaming days, attend online group chats and talk
          about whatever is on their mind.
        </p>

        <p className="ourstory1">
          Additionally, we want to provide resources to other military
          communities and mental health support/therapy.
        </p>
      </div>
      <div className="ourTeam">
        <h1 className="ourTeam1">Our Team</h1>
        <div className="webDev">
          <div>
            <div className="William"></div>
            <h1><NAME></h1>
            <h2>Web Developer</h2>
          </div>
          <div>
            <div className="kaylee"></div>
            <h1><NAME></h1>
            <h2>Web Developer</h2>
          </div>
        </div>
        <div className="uxui1">
          <div>
            <div className="Phil"></div>
            <h1><NAME></h1>
            <h2>Web Developer</h2>
          </div>
          <div>
            <div className="Gyovany"></div>
            <h1><NAME></h1>
            <h2>UX UI Designer</h2>
          </div>
        </div>
        <div className="uxui2">
          <div>
            <div className="Jorge"></div>
            <h1><NAME></h1>
            <h2>UX UI Designer</h2>
          </div>
          <div>
            <div className="Maria"></div>
            <h1><NAME></h1>
            <h2>UX UI Designer</h2>
          </div>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default AboutPage;
<file_sep>/client/src/components/MenuPage.jsx
import React, { useContext } from 'react';
import '../css/MenuPage.css';
import { RiArrowLeftSLine } from 'react-icons/ri';
import { AppContext } from '../context/AppContext';
import { Link } from 'react-router-dom';

const Menu = ({ history }) => {
  const { currentUser } = useContext(AppContext);

  return (
    <>
      <div className="menuHeader">
        <h1 className="menuTitle">MENU</h1>
        <button className="backButton" onClick={() => history.goBack()}>
          {' '}
          <RiArrowLeftSLine
            size={35}
            style={{ color: 'rgba(5, 95, 158, 1)' }}
          />
        </button>
      </div>
      <div className="line1">
        <Link className="searchMenu" to="/gamers">
          SEARCH
        </Link>
      </div>
      <div className="menuLinks">
        <div className="line1">
          {!currentUser ? (
            <Link to="/login" className="menuProfile">
              LOGIN
            </Link>
          ) : (
            <Link to="/profile" className="menuProfile">
              PROFILE
            </Link>
          )}
          <Link to="/about" className="menuAbout">
            ABOUT
          </Link>
        </div>
        <div className="line2">
          {!currentUser ? (
            <Link to="/login" className="menuChat">
              Chat Now
            </Link>
          ) : (
            <Link to="/chats" className="menuChat">
              Chat Now
            </Link>
          )}

          <Link to="/event" className="menuEvent">
            Events
          </Link>
        </div>
        <div className="line3">
          <Link to="/policy" className="MenuPolicy">
            Community Guidelines
          </Link>
          <Link to="/veteranprograms" className="menuVa">
            Veteran Programs
          </Link>
        </div>
      </div>
    </>
  );
};

export default Menu;
<file_sep>/client/src/components/Gamers.jsx
import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';
import { Link } from 'react-router-dom';
import wyncode from '../images/wyncode.png';
import '../css/GamerStyles.css';

const Task = ({ users }) => {
  const { search, currentUser } = useContext(AppContext);

  const filteredGamers = users?.filter((users) => {
    return users.user_name.toLowerCase().includes(search.toLowerCase());
  });
  return (
    <>
      {filteredGamers.map((users) => (
        <div key={users?._id}>
          {!currentUser ? (
            <Link to={'/login'} className="gamerbutton">
              <img
                src={users?.avatar ? users?.avatar : `${wyncode}`}
                alt="user"
                className="gamerPic"
              />
              <div>
                {users?.user_name}
                <div>
                  {users?.first_name} {users?.last_name}
                </div>
              </div>
            </Link>
          ) : (
            <Link to={`/gamersprofile/${users?._id}`} className="gamerbutton">
              <img
                src={users?.avatar ? users?.avatar : `${wyncode}`}
                alt="user"
                className="gamerPic"
              />
              <div>
                {users?.user_name}
                <div>
                  {users?.first_name} {users?.last_name}
                </div>
              </div>
            </Link>
          )}
        </div>
      ))}
    </>
  );
};

export default Task;
<file_sep>/client/src/components/ProfileEdit.jsx
import React, { useContext, useState } from 'react';
import { AppContext } from '../context/AppContext';
import { FiSave } from 'react-icons/fi';
import { Link } from 'react-router-dom';
import NavBar from './NavBar';
import Footer from './Footer';
import axios from 'axios';
import swal from 'sweetalert';
import '../css/ProfileEdit.css';

const EditUser = ({ history }) => {
  const { currentUser, setCurrentUser } = useContext(AppContext);
  const [formData, setFormData] = useState(null);

  const handleChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

  const handleUpDate = async (event) => {
    event.preventDefault();
    try {
      const response = await axios.patch('/api/users/profile', formData);
      sessionStorage.setItem('user', response.data);
      setCurrentUser(response.data.user);
      history.push('/profile');
    } catch (error) {
      swal('SignUp Error: ', error.toString());
    }
  };

  return (
    <div>
      <NavBar />
      <form className="editForm" onSubmit={handleUpDate}>
        <label>User Name: {currentUser?.user_name}</label>
        <input
          className="editFormUn"
          type="text"
          name="user_name"
          onChange={handleChange}
        />
        <label>Email: {currentUser?.email}</label>
        <input
          className="editFormUn"
          type="text"
          name="email"
          onChange={handleChange}
        />
        <label>First Name: {currentUser?.first_name}</label>
        <input
          className="editFormUn"
          type="text"
          name="first_name"
          onChange={handleChange}
        />
        <label>Last Name: {currentUser?.last_name}</label>
        <input
          className="editFormUn"
          type="text"
          name="last_name"
          onChange={handleChange}
        />
        <label>Branch: {currentUser?.service_branch}</label>
        <input
          className="editFormUn"
          type="text"
          name="service_branch"
          onChange={handleChange}
        />
        <div className="editForm">
          <h4>Gamer Tags:</h4>
          <label>XBOX: </label>
          <input
            className="editFormUn"
            type="text"
            name="xbox"
            onChange={handleChange}
          />
          <label>PSN: </label>
          <input
            className="editFormUn"
            type="text"
            name="psn"
            onChange={handleChange}
          />
          <label>NES: </label>
          <input
            className="editFormUn"
            type="text"
            name="nes"
            onChange={handleChange}
          />
          <label>PC: </label>
          <input
            className="editFormUn"
            type="text"
            name="pc"
            onChange={handleChange}
          />
          <label>other: </label>
          <input
            className="editFormUn"
            type="text"
            name="other"
            onChange={handleChange}
          />
        </div>
        <button className="editFormButton" type="submit">
          <FiSave size={25} style={{ color: 'rgba(5, 95, 158, 1)' }} /> Save
          Info
        </button>
        <Link to="/passwordupdate" className="editFormButton1">
          Update Password
        </Link>
      </form>

      <Footer />
    </div>
  );
};

export default EditUser;
<file_sep>/server/app.js
if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config();
}
require('./db/config/index');
const express = require('express'),
  path = require('path'),
  openRoutes = require('./routes/open/users'),
  passport = require('./middleware/authentication/index'),
  cookieParser = require('cookie-parser'),
  fileUpload = require('express-fileupload'),
  userRouter = require('./routes/secure/users');

const app = express();

app.use(express.json());

app.use(cookieParser());

app.use('/api', openRoutes);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '../client/build')));
}

app.use(
  fileUpload({
    useTempFiles: true,
    tempFileDir: '/tmp/images'
  })
);

app.use('/api/*', passport.authenticate('jwt', { session: false }));

app.use('/api/users', userRouter);

if (process.env.NODE_ENV === 'production') {
  app.get('*', (request, response) => {
    response.sendFile(
      path.join(__dirname, '..', 'client', 'build', 'index.html')
    );
  });
}

const http = require('http').createServer(app);
const io = require('socket.io')(http, {
  cors: {
    origin: true,
    methods: ['GET', 'POST']
  }
});

io.on('connection', (socket) => {
  socket.on('send message', function (msg) {
    io.emit('receive message', msg);
  });

  socket.on('disconnect', () => {});
});

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, 'client/build')));
  app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}

module.exports = http;
<file_sep>/client/src/context/AppContext.jsx
import React, { createContext, useState, useEffect } from 'react';
import axios from 'axios';
import swal from 'sweetalert';

const AppContext = createContext();

const AppContextProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState('');
  const [gamer, setGamer] = useState([]);
  const [gamers, setGamers] = useState([]);
  const [filteredGamers, setFilteredGamers] = useState([]);
  const user = sessionStorage.getItem('user');

  useEffect(() => {
    if (user && !currentUser) {
      axios
        .get(`/api/users/profile`, {
          withCredentials: true
        })
        .then(({ data }) => {
          setCurrentUser(data);
        })
        .catch((error) => {
          swal(`Oops!`, error.toString());
        });
    }
  }, [currentUser, user]);

  return (
    <AppContext.Provider
      value={{
        currentUser,
        setCurrentUser,
        loading,
        setLoading,
        search,
        setSearch,
        gamer,
        setGamer,
        gamers,
        setGamers,
        filteredGamers,
        setFilteredGamers
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

export { AppContext, AppContextProvider };
