use query component

src/app.rs

@@ -1,12 +1,11 @@
 use crate::{
-    components::{DatabasesComponent, TableComponent},
+    components::{DatabasesComponent, QueryComponent, TableComponent},
     user_config::{Connection, UserConfig},
 };
 use sqlx::mysql::MySqlPool;
 use strum::IntoEnumIterator;
 use strum_macros::EnumIter;
 use tui::widgets::ListState;
-use unicode_width::UnicodeWidthStr;
 
 #[derive(Debug, Clone, Copy, EnumIter)]
 pub enum Tab {
@@ -47,9 +46,7 @@ pub struct Column {
     pub null: String,
 }
 pub struct App {
-    pub input: String,
-    pub input_cursor_x: u16,
-    pub query: String,
+    pub query: QueryComponent,
     pub record_table: TableComponent,
     pub structure_table: TableComponent,
     pub focus_block: FocusBlock,
@@ -66,9 +63,7 @@ pub struct App {
 impl Default for App {
     fn default() -> App {
         App {
-            input: String::new(),
-            input_cursor_x: 0,
-            query: String::new(),
+            query: QueryComponent::default(),
             record_table: TableComponent::default(),
             structure_table: TableComponent::default(),
             focus_block: FocusBlock::DabataseList,
@@ -117,18 +112,6 @@ impl App {
         }
     }
 
-    pub fn increment_input_cursor_x(&mut self) {
-        if self.input_cursor_x > 0 {
-            self.input_cursor_x -= 1;
-        }
-    }
-
-    pub fn decrement_input_cursor_x(&mut self) {
-        if self.input_cursor_x < self.input.width() as u16 {
-            self.input_cursor_x += 1;
-        }
-    }
-
     pub fn selected_connection(&self) -> Option<&Connection> {
         match &self.user_config {
             Some(config) => match self.selected_connection.selected() {

src/components/mod.rs

@@ -6,6 +6,7 @@ pub mod utils;
 
 pub use command::{CommandInfo, CommandText};
 pub use databases::DatabasesComponent;
+pub use query::QueryComponent;
 pub use table::TableComponent;
 
 use anyhow::Result;

src/components/query.rs

@@ -0,0 +1,83 @@
+use super::{Component, DrawableComponent};
+use crate::event::Key;
+use anyhow::Result;
+use tui::{
+    backend::Backend,
+    layout::Rect,
+    style::{Color, Style},
+    widgets::{Block, Borders, Paragraph},
+    Frame,
+};
+use unicode_width::UnicodeWidthStr;
+
+pub struct QueryComponent {
+    pub input: String,
+    pub input_cursor_x: u16,
+}
+
+impl Default for QueryComponent {
+    fn default() -> Self {
+        Self {
+            input: String::new(),
+            input_cursor_x: 0,
+        }
+    }
+}
+
+impl QueryComponent {
+    pub fn increment_input_cursor_x(&mut self) {
+        if self.input_cursor_x > 0 {
+            self.input_cursor_x -= 1;
+        }
+    }
+
+    pub fn decrement_input_cursor_x(&mut self) {
+        if self.input_cursor_x < self.input.width() as u16 {
+            self.input_cursor_x += 1;
+        }
+    }
+}
+
+impl DrawableComponent for QueryComponent {
+    fn draw<B: Backend>(&mut self, f: &mut Frame<B>, area: Rect, focused: bool) -> Result<()> {
+        let query = Paragraph::new(self.input.as_ref())
+            .style(if focused {
+                Style::default()
+            } else {
+                Style::default().fg(Color::DarkGray)
+            })
+            .block(Block::default().borders(Borders::ALL).title("Query"));
+        f.render_widget(query, area);
+        if focused {
+            f.set_cursor(
+                area.x + self.input.width() as u16 + 1 - self.input_cursor_x,
+                area.y + 1,
+            )
+        }
+        Ok(())
+    }
+}
+
+impl Component for QueryComponent {
+    fn event(&mut self, key: Key) -> Result<()> {
+        match key {
+            Key::Char(c) => self.input.push(c),
+            Key::Delete | Key::Backspace => {
+                if self.input.width() > 0 {
+                    if self.input_cursor_x == 0 {
+                        self.input.pop();
+                        return Ok(());
+                    }
+                    if self.input.width() - self.input_cursor_x as usize > 0 {
+                        self.input
+                            .remove(self.input.width() - self.input_cursor_x as usize);
+                    }
+                }
+            }
+            Key::Left => self.decrement_input_cursor_x(),
+            Key::Right => self.increment_input_cursor_x(),
+            _ => (),
+        }
+        Ok(())
+    }
+}

src/handlers/query.rs

@@ -1,20 +1,19 @@
 use crate::app::{App, FocusBlock};
+use crate::components::Component as _;
 use crate::event::Key;
 use crate::utils::convert_column_value_to_string;
 use futures::TryStreamExt;
 use regex::Regex;
 use sqlx::Row;
-use unicode_width::UnicodeWidthStr;
 
 pub async fn handler(key: Key, app: &mut App) -> anyhow::Result<()> {
     match key {
         Key::Enter => {
-            app.query = app.input.drain(..).collect();
             let re = Regex::new(r"select .+ from ([^ ]+).*").unwrap();
-            match re.captures(app.query.as_str()) {
+            match re.captures(app.query.input.as_str()) {
                 Some(caps) => {
                     let mut rows =
-                        sqlx::query(app.query.as_str()).fetch(app.pool.as_ref().unwrap());
+                        sqlx::query(app.query.input.as_str()).fetch(app.pool.as_ref().unwrap());
                     let headers =
                         sqlx::query(format!("desc `{}`", caps.get(1).unwrap().as_str()).as_str())
                             .fetch_all(app.pool.as_ref().unwrap())
@@ -34,29 +33,14 @@ pub async fn handler(key: Key, app: &mut App) -> anyhow::Result<()> {
                     app.record_table.reset(headers, records);
                 }
                 None => {
-                    sqlx::query(app.query.as_str())
+                    sqlx::query(app.query.input.as_str())
                         .execute(app.pool.as_ref().unwrap())
                         .await?;
                 }
             }
         }
-        Key::Char(c) => app.input.push(c),
-        Key::Delete | Key::Backspace => {
-            if app.input.width() > 0 {
-                if app.input_cursor_x == 0 {
-                    app.input.pop();
-                    return Ok(());
-                }
-                if app.input.width() - app.input_cursor_x as usize > 0 {
-                    app.input
-                        .remove(app.input.width() - app.input_cursor_x as usize);
-                }
-            }
-        }
-        Key::Left => app.decrement_input_cursor_x(),
-        Key::Right => app.increment_input_cursor_x(),
         Key::Esc => app.focus_block = FocusBlock::DabataseList,
-        _ => {}
+        key => app.query.event(key)?,
     }
     Ok(())
 }

src/ui/mod.rs

@@ -4,13 +4,12 @@ use crate::event::Key;
 use database_tree::MoveSelection;
 use tui::{
     backend::Backend,
-    layout::{Constraint, Direction, Layout, Rect},
+    layout::{Constraint, Direction, Layout},
     style::{Color, Modifier, Style},
     text::{Span, Spans},
-    widgets::{Block, Borders, Cell, Clear, List, ListItem, Paragraph, Row, Table, Tabs},
+    widgets::{Block, Borders, Clear, List, ListItem, Paragraph, Tabs},
     Frame,
 };
-use unicode_width::UnicodeWidthStr;
 
 pub mod scrollbar;
 pub mod scrolllist;
@@ -115,19 +114,12 @@ pub fn draw<B: Backend>(f: &mut Frame<'_, B>, app: &mut App) -> anyhow::Result<(
         );
     f.render_widget(tabs, right_chunks[0]);
 
-    let query = Paragraph::new(app.input.as_ref())
-        .style(match app.focus_block {
-            FocusBlock::Query => Style::default(),
-            _ => Style::default().fg(Color::DarkGray),
-        })
-        .block(Block::default().borders(Borders::ALL).title("Query"));
-    f.render_widget(query, right_chunks[1]);
-    if let FocusBlock::Query = app.focus_block {
-        f.set_cursor(
-            right_chunks[1].x + app.input.width() as u16 + 1 - app.input_cursor_x,
-            right_chunks[1].y + 1,
-        )
-    }
+    app.query.draw(
+        f,
+        right_chunks[1],
+        matches!(app.focus_block, FocusBlock::Query),
+    )?;
+
     match app.selected_tab {
         Tab::Records => app.record_table.draw(
             f,