Implement state contexts

frontend/src/components/modals/CommitMessageModal.js

@@ -1,16 +1,27 @@
 import React, { useState } from 'react';
 import { Modal, Input } from '@geist-ui/core';
+import { useGitOperationsContext } from '../../contexts/GitOperationsContext';
+import { useUIStateContext } from '../../contexts/UIStateContext';
 
-const CommitMessageModal = ({ visible, onClose, onSubmit }) => {
+const CommitMessageModal = () => {
   const [message, setMessage] = useState('');
+  const { handleCommitAndPush } = useGitOperationsContext();
+  const { commitMessageModalVisible, setCommitMessageModalVisible } =
+    useUIStateContext();
 
-  const handleSubmit = () => {
-    onSubmit(message);
-    setMessage('');
+  const handleSubmit = async () => {
+    if (message) {
+      await handleCommitAndPush(message);
+      setMessage('');
+      setCommitMessageModalVisible(false);
+    }
   };
 
   return (
-    <Modal visible={visible} onClose={onClose}>
+    <Modal
+      visible={commitMessageModalVisible}
+      onClose={() => setCommitMessageModalVisible(false)}
+    >
       <Modal.Title>Enter Commit Message</Modal.Title>
       <Modal.Content>
         <Input
@@ -20,7 +31,7 @@ const CommitMessageModal = ({ visible, onClose, onSubmit }) => {
           onChange={(e) => setMessage(e.target.value)}
         />
       </Modal.Content>
-      <Modal.Action passive onClick={onClose}>
+      <Modal.Action passive onClick={() => setCommitMessageModalVisible(false)}>
         Cancel
       </Modal.Action>
       <Modal.Action onClick={handleSubmit}>Commit</Modal.Action>