Dao Quang Huy

Ý bạn là muốn chỉnh sửa dữ liệu gửi lên trược khi gọi hàm validated()?

Bên phía bên VueJS thì bạn dùng cái này nhé https://kazupon.github.io/vue-i18n/

Cách đơn giản nhất để áp dụng loading như bạn muốn thì bạn chỉ cần tạo thêm một biến boolean chứa trạng thái loading mà thôi. Khi nào bạn thực hiện các async action thì bạn set biến này về true, ngược lại khi xong thì trả vê false:

const App = () => {
  const [isLoading, setIsLoading] = useState(false)
  
  async function handleLoadData() {
    try {
      setIsLoading(true);
      
      // Main logic
    } catch (error) {
      // Handle error
    } finally {
      setIsLoading(false);
    }
  }

  return (
    isLoading
    ? <SpinIcon />
    : <ListItem />
  )
}

Còn nếu trường hợp bạn muốn làm chi tiết hơn và đem đến UI tốt nhất cho từng trạng thái thì bạn nên áp dụng theo kiểu status như bên dưới.

const LOADING = 'LOADING';
const SUCCESS = 'SUCCESS';
const ERROR = 'ERROR';

const App = () => {
  const [status, setStatus] = useState(SUCCESS)
  
  async function handleLoadData() {
    try {
      setStatus(LOADING );
      // Main logic
      setStatus(SUCCESS);
    } catch (error) {
      setStatus(ERROR)
      // Handle error
    }
  }

  function renderData() {
    switch (status) {
      case LOADING:
        return <LoadingUI />
      case SUCCESS :
        return <ListItem />
      default:
        return <ErrorUI />
    }
  }

  return (
      {renderData()}
  )
}

Sao ở đây bạn lại muốn thay đổi checkbox bằng code như trên nhỉ?

• Nếu dùng các function thông thường thì bạn không thể dùng các hook có sẵn khác của React như useState, useEffect, ...
• Các function thông thường thì bạn có thể import vào bất cứ đầu để dùng còn với custom hook thì bạn chỉ có thể dùng trong custom hook khác hoặc functional component của react mà thôi.

2. Cách đặt tên bắt đầu bằng từ use giống như convention chung và là best practice vậy. Còn như mình đã từng thử thì bạn không đặt tên bắt đầu bằng use thì nó vẫn chạy nhé.

Phần này bạn có thể tạo một custom validation để sử dụng như bạn mong muốn. Bạn có thể tham khảo phần này trong document của Laravel. Về cơ bản code check của bạn sẽ có dạng:

public function passes($attribute, $value)
{
    return User::whereEmail($value)->whereIn('type', ['driver', 'client', 'admin'])->doesntExist();
}

Bạn thử sửa lại từ setTimer(timer - 1) sang setTimer(timer => timer - 1) xem. Trong document của React cũng nói đến ví dụ này https://reactjs.org/docs/hooks-reference.html#functional-updates

Thông tin cụ thể đây nhé bạn https://www.facebook.com/412710232234112/posts/1836526876519100/

Phàn bảng và popup bạn có thể sửa lại như này cho tối ưu code:

const ComponenA = () => {
   const [isPopupVisible, setPopupVisible] = useState(false);

   function handleOpenPopup(e) {
       const { id } = e.dataset; // id của item
   }

    return (
        <div>
           <TableData handleOpenPopup={handleOpenPopup} /> // Toàn bộ phận map để render ra bảng
           <PopupComponent /> // Chỉ duy nhất 1 pop-up component dùng chung cho toàn bộ các row trong bảng
        </div>
    )
}

Bên trong <TableData /> của bạn ở mỗi cái button bạn sửa thành:

<button onClick={handleOpenPopup} data-id={itemId}>
    // ...
</button>

itemId ở đây chính là id bạn muốn truyền vào và sử dụng ở popup

Nó sẽ xóa hết đi và thay thế bằng component 2 nhé bạn, vì React sẽ tiến hành so sánh và thấy ngay ở virtualDOM cũ có component là Component1 còn virtualDOM mới lại lf Component2 nên nó sẽ loại bỏ toàn bộ phần nội dung bên trong đó và tạo ra dom mới. Còn chi tiết thì bạn sẽ càn tìm hiểu về phần Reconciliation trong ReactJS

Bạn thử tham khảo phần này của mình xem: https://viblo.asia/p/huong-dan-deploy-project-laravel-cua-ban-len-heroku-maGK7WRbKj2#_deploy-project-laravel-5

bạn thử tìm hiểu về debounce để hiểu hơn nhé và sau đó bạn có thể dùng hàm _debounce trong lodash để xử lý trường hợp bạn đang gặp phải

Trên môi trường dev thì bạn có thể chạy trực tiếp command thử bằng lệnh php artisan log:demo để xem code xử lý bên trong hàm handle() của bạn có đúng như ý muốn không. Còn trên môi trường thực tế để chạy cronjob thứ bạn cần làm 2 việc như sau:

• Thêm lệnh của bạn vào trong function schedule(), với trường hợp của bạn chạy vào 16h t6 hàng tuần thì sẽ là:

protected function schedule(Schedule $schedule)
    {
        $schedule->command('log:demo')->cron('0 16 * * 5');
    }

• Thứ 2 là bạn cần khai báo đường dẫn đến project của bạn trên server bằng cách chạy lệnh sudo crontab -e. Sau đó bạn điền nội dung sau vào trong đó:

* * * * * cd /[đường dẫn đến project của bạn] && php artisan schedule:run >> /dev/null 2>&1

Bạn có thể tham khảo package này của React nhé: https://react-slick.neostack.com/docs/example/responsive

Từ mảng dữ liệu gốc ban đầu bạn có thể dùng hàm array_chunk để tách nó từ 1 mảng thành các mảng gồm 4 phần tử nhé

Bạn vẫn dùng unique rule như này nhé:

'title' => "unique:posts,title,$postId,id"

Thì nó sẽ vẫn áp dụng rule unique nhưng sẽ bỏ qua bài viết có id là $postId nhé bạn

1. Cái thứ nhất thì mình ko rõ lắm nhưng nếu bạn chỉ cần dùng Https và không có nhu cầu gì hơn thì có thể thử dùng cái Letencrypt này nó cũng hoàn toàn miễn phí và dễ setting. Bạn có thể xem hướng dẫn setting trên mạng có rất nhiều và rất đơn giản. Nếu dùng Nginx thì bạn tham khảo ở đây còn với Apache thì đây

2. Về login qua facebook thì bạn có thể dùng các phần mềm hỗ trợ forward localhost của bạn ra bên ngoài như 1 số dịch vụ dưới đây:

• Ngrok
• localhost.run
• Serveo ... Các dịnh vụ như trên đều hỗ trợ bạn trong quá trình dev bằng cách forward localhost của bạn sang 1 domain mới có https và có thể truy cập được từ máy tính khác. Bằng cách này bạn có thể dùng domain tạm thời này để sử djng cho việc đăng nhập với Facebook

co theo chiều cao hay rộng thế bạn ???

bạn check xem liệu có phải do chỗ khác bao bọc element của bạn cũng đang dùng background màu đó nên khi bạn xóa background của element đi thì nó sẽ nhận background của thằng bọc ngoài cùng kia

Bạn vẫn dùng unique rule nhưng thay vì dùng mặc định là:

'name' => "unique:products,name,$productId,id"

Thì nó sẽ vẫn áp dụng rule unique nhưng sẽ bỏ qua sản phẩm có id là $productId nhé bạn