Removed hard-coded userId; fetching user info from Passport middleware

client/src/components/AddSnippet/AddSnippet.jsx

@@ -28,10 +28,6 @@ const AddSnippet = ({ closeModal, getUserData }) => {
   const [error, setError] = useState(false);
   const [openModal, setOpenModal] = useState(false);
 
-  //TODO: Pull user info from global state
-  //FIXME: HARCODING USER INFO FOR NOW
-  const userId = '6463eb52ab99bf89a84a3ebd';
-
   function handleSubmit(e) {
     e.preventDefault();
     if (title === '') {
@@ -42,7 +38,7 @@ const AddSnippet = ({ closeModal, getUserData }) => {
       setError(false);
     }
 
-    fetch('/snippets?' + new URLSearchParams({ userId }), {
+    fetch('/snippets', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'

client/src/components/SnippetDisplay/SnippetDisplay.jsx

@@ -25,18 +25,13 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
   const [copied, setCopied] = useState(false);
   const [editButtonState, setEditButtonState] = useState(false);
   const [currentDisplay, setCurrentDisplay] = useState(defaultDisplayValues);
-  //TODO: Pull userId from global state
-  //FIXME: HARDCODING USER ID FOR NOW
-  const userId = '6463eb52ab99bf89a84a3ebd';
-  // indSnippet = this.props
-  // create delete method using fetch request
 
   useEffect(() => {
     setCurrentDisplay(selectedSnippet);
   }, [selectedSnippet, getSnippet]);
 
-  const deleteSnippet = (snippetId, userId) => {
-    fetch('/snippets?' + new URLSearchParams({ snippetId, userId }), {
+  const deleteSnippet = (snippetId) => {
+    fetch('/snippets?' + new URLSearchParams({ snippetId }), {
       method: 'DELETE'
     })
       .then((response) => {
@@ -55,7 +50,7 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
   };
 
   const editSnippet = (snippetId) => {
-    fetch(`/snippets?${new URLSearchParams({ snippetId, userId })}`, {
+    fetch(`/snippets?${new URLSearchParams({ snippetId })}`, {
       method: 'PUT',
       headers: { 'Content-type': 'application/json' },
       body: JSON.stringify(currentDisplay)
@@ -174,7 +169,7 @@ const SnippetDisplay = ({ selectedSnippet, getSnippet }) => {
           <Button
             className="deleteButton"
             onClick={() => {
-              deleteSnippet(selectedSnippet._id, userId);
+              deleteSnippet(selectedSnippet._id);
             }}
           >
             Delete Snippet

client/src/containers/MainContainer/MainContainer.jsx

@@ -37,7 +37,7 @@ const MainContainer = () => {
       });
 
     //Bypass login requirement:
-    setLogin(true);
+    //setLogin(true);
   };
   //functino to handle showing the signup page
   const handleHaveAccount = () => setHaveAccount(false);

client/src/containers/Sidebar/Sidebar.jsx

@@ -34,13 +34,10 @@ const Sidebar = ({ handleLogin }) => {
     getUserData();
   }, []);
   //Get all snippets stored under user's account
-  //TODO: Get user ID from global state to include in request
-  //FIXME: HARD CODING ID FOR NOW
-  const userId = '6463eb52ab99bf89a84a3ebd';
 
   const getUserData = () => {
     setLoading(true);
-    fetch('/snippets?' + new URLSearchParams({ userId: userId }))
+    fetch('/snippets')
       .then((res) => res.json())
       .then((data) => {
         //As structured in snippets route, should receive an array of snippet objects

server/controllers/snippetsController.js

@@ -14,8 +14,11 @@ const createError = (method, log, status, message = log) => {
 //Retrieves all snippets associated with a user by looking up user (by ID) and referencing all snippets in the associated list
 //NOTE: WE SHOULD REALLY SEPARATE OUT STUFF LIKE THIS INTO A SEPARATE USER ROUTE AND USER CONTROLLER
 snippetsController.getSnippetsByUser = (req, res, next) => {
-  const { userId } = req.user._id;
-
+  console.log('In get snippets...');
+  const userId = req.user._id.toString();
+  console.log('Logging ID...');
+  console.log(userId);
+
   User.findById(userId)
     .populate('snippets')
     .exec()
@@ -48,7 +51,7 @@ snippetsController.createSnippet = (req, res, next) => {
 
 //Associates snippet with a particular user
 snippetsController.saveSnippetToUser = (req, res, next) => {
-  const { userId } = req.query;
+  const userId = req.user._id.toString();
   User.findById(userId)
     .then((user) => {
       user.snippets.push(res.locals.newSnippet._id);
@@ -82,8 +85,6 @@ snippetsController.saveSnippetToUser = (req, res, next) => {
 
 //Updates snippet with provided properties
 snippetsController.updateSnippet = (req, res, next) => {
-  console.log(req.query);
-  console.log(req.body);
   const { snippetId } = req.query;
   const { title, comments, storedCode, tags, language } = req.body;
   const updatedSnippet = { title, comments, storedCode, tags, language };
@@ -126,7 +127,8 @@ snippetsController.updateSnippet = (req, res, next) => {
 
 //Deletes snippet with provided ID and removes from users with associated ID
 snippetsController.deleteSnippet = (req, res, next) => {
-  const { userId, snippetId } = req.query;
+  const userId = req.user._id.toString();
+  const { snippetId } = req.query;
   Snippet.findByIdAndDelete(snippetId)
     .exec()
     .then((result) => {
@@ -180,7 +182,7 @@ snippetsController.recalcTagsAndLang = (req, res, next) => {
     return next();
   }
 
-  const { userId } = req.query;
+  const userId = req.user._id.toString();
   const tagList = new Set();
   const languageList = new Set();
   console.log(userId);

server/routes/authenticationRouter.js

@@ -12,22 +12,33 @@ router.post('/signup', authenticationController.signUp, (req, res) => {
   return res.status(201).json(res.locals.newUser);
 });
 
-router.post('/login',passport.authenticate('local', { session: false }),
+router.post(
+  '/login',
+  passport.authenticate('local', { session: false }),
   (req, res) => {
+    console.log(req.user);
     const token = jwt.sign({ userId: req.user.id }, secret, {
-      expiresIn: '1d',
+      expiresIn: '1d'
     });
     res.cookie('token', token, {
-      expires: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),// Expires in 30 days
-      httpOnly: true 
+      expires: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // Expires in 30 days
+      httpOnly: true
+    });
+    res.cookie('userId', req.user.id, {
+      expires: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // Expires in 30 days
+      httpOnly: true
     });
     return res.status(202).json({ token });
   }
 );
 
-router.get('/protected', passport.authenticate('jwt', {session: false }), (req, res) => {
-  console.log('at protected router, SUCCESS!');
-  res.send('Protected route accessed!');
-});
+router.get(
+  '/protected',
+  passport.authenticate('jwt', { session: false }),
+  (req, res) => {
+    console.log('at protected router, SUCCESS!');
+    res.send('Protected route accessed!');
+  }
+);
 
 module.exports = router;

server/routes/snippetsRouter.js

@@ -5,17 +5,23 @@ const snippetsController = require('../controllers/snippetsController');
 
 const router = express.Router();
 
-
-// This Route is Secure
-router.get('/', passport.authenticate('jwt', {session: false }), snippetsController.getSnippetsByUser, (req, res) =>{
-  return res
-    .status(200)
-    .json(res.locals.allSnippets);
-});
-
+router.get(
+  '/',
+  passport.authenticate('jwt', { session: false }),
+  snippetsController.getSnippetsByUser,
+  (req, res) => {
+    return res
+      .status(200)
+      .json({
+        snippets: res.locals.allSnippets,
+        tagsLangs: res.locals.userTagsLangs
+      });
+  }
+);
 
 router.post(
   '/',
+  passport.authenticate('jwt', { session: false }),
   snippetsController.createSnippet,
   snippetsController.saveSnippetToUser,
   snippetsController.recalcTagsAndLang,
@@ -24,6 +30,7 @@ router.post(
 
 router.put(
   '/',
+  passport.authenticate('jwt', { session: false }),
   snippetsController.updateSnippet,
   snippetsController.recalcTagsAndLang,
   (req, res) =>
@@ -35,6 +42,7 @@ router.put(
 
 router.delete(
   '/',
+  passport.authenticate('jwt', { session: false }),
   snippetsController.deleteSnippet,
   snippetsController.recalcTagsAndLang,
   (req, res) =>

webpack.config.js

@@ -14,7 +14,7 @@ module.exports = {
     rules: [
       {
         test: /\.(png|jp(e*)g|svg|gif)$/,
-        type: 'asset/resource',
+        type: 'asset/resource'
       },
       {
         test: /\.jsx?/,
@@ -24,36 +24,34 @@ module.exports = {
           options: {
             presets: [
               '@babel/preset-env',
-              ['@babel/preset-react', { runtime: 'automatic' }],
-            ],
-          },
-        },
+              ['@babel/preset-react', { runtime: 'automatic' }]
+            ]
+          }
+        }
       },
       {
         test: /\.s?css/,
-        use: [
-          'style-loader', 'css-loader', 'sass-loader'
-        ]
+        use: ['style-loader', 'css-loader', 'sass-loader']
       }
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Development',
-      template:'./public/index.html'
+      template: './public/index.html'
     })
   ],
   resolve: {
-    extensions: ['.js', '.jsx', '.scss'],
+    extensions: ['.js', '.jsx', '.scss']
   },
   devServer: {
     static: {
       publicPath: '/dist/',
       directory: path.resolve(__dirname, 'dist')
     },
     proxy: {
-      '/snippets': 'http://localhost:3000'
+      '/': 'http://localhost:3000'
     }
   },
   devtool: 'eval-source-map'
-};
+};