Untitled

import { Badge, BlockStack, Divider, Page, useBreakpoints } from "@shopify/polaris";
import React, { useEffect } from 'react';
import { ConfigureBlock } from "../components/ui/ConfigureBlock.jsx";
import { authenticate } from "../shopify.server.js";
import { fetchListPages } from "../models/freeBar.server.js";
import { useLoaderData } from "@remix-run/react";
import { useStore } from "../zustandStore.jsx";

export async function loader({ request }) {
  const { admin, session } = await authenticate.admin(request);
  return await fetchListPages(admin, session);
}

function handleData(data) {
  let jsonData = [];
  data.forEach((item) => {
    jsonData.push({
      title: item.title,
      value: item.id,
    });
  });
  return jsonData;
}

export default function AppSettings() {
  const { smUp } = useBreakpoints();
  const data = useLoaderData();
  const { setListPages } = useStore();
  // const jsonData = handleData(data);
  // console.log('jsonData', jsonData);
  // setListPages(jsonData);

  useEffect(() => {
    const jsonData = handleData(data);
    console.log('jsonData', jsonData); // Kiểm tra giá trị ở đây
    if (jsonData.length > 0) {
      setListPages(jsonData);
    } else {
      console.log('jsonData is empty');
    }
    setListPages(jsonData);
  }, [data]);

  return (
    <Page
      backAction={{ content: 'Products', url: '#' }}
      title="Free shipping bar"
      titleMetadata={<Badge tone="success">Unsaved</Badge>}
      subtitle="Settings and options for your free shipping bar"
      compactTitle
      primaryAction={{ content: 'Save', disabled: true }}
      actionGroups={[
        {
          title: 'More actions',
          actions: [
            {
              content: 'Share on Facebook',
              accessibilityLabel: 'Individual action label',
              onAction: () => alert('Share on Facebook action'),
            },
          ],
        },
      ]}
    >
      <BlockStack gap={{ xs: "800", sm: "400" }}>
        {/*<ContentBlock/>*/}
        {smUp ? <Divider /> : null}
        <ConfigureBlock />
        {/*<StyleBlock/>*/}
        {/*<TabsFittedExample/>*/}
        {/*<TypographyBlock/>*/}
      </BlockStack>
    </Page>
  )
}


import {Autocomplete, BlockStack, InlineStack, Tag} from '@shopify/polaris';
import {useCallback, useMemo, useState} from 'react';
import {useStore} from "../../zustandStore.jsx";
export function ListPageComponent() {
  const {listPages} = useStore();
  console.log('listPages dmcm', listPages);

  const deselectedOptions = useMemo(
    () => listPages,
    [],
  );

  const [selectedOptions, setSelectedOptions] = useState(['']);
  const [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState(deselectedOptions);

  const updateText = useCallback(
    (value) => {
      setInputValue(value);

      if (value === '') {
        setOptions(deselectedOptions);
        return;
      }

      const filterRegex = new RegExp(value, 'i');
      const resultOptions = deselectedOptions.filter((option) =>
        option.label.match(filterRegex),
      );

      setOptions(resultOptions);
    },
    [deselectedOptions],
  );

  const removeTag = useCallback(
    (tag) => () => {
      const options = [...selectedOptions];
      options.splice(options.indexOf(tag), 1);
      setSelectedOptions(options);
    },
    [selectedOptions],
  );

  const verticalContentMarkup =
    selectedOptions.length > 0 ? (
      <BlockStack align="space-between" inlineAlign="stretch">
        <InlineStack gap="100">
          {selectedOptions.map((option) => {
            let tagLabel = '';
            tagLabel = option.replace('_', ' ');
            return (
              <Tag key={`option${option}`} onRemove={removeTag(option)}>
                {tagLabel}
              </Tag>
            );
          })}
        </InlineStack>
      </BlockStack>
    ) : null;

  const textField = (
    <Autocomplete.TextField
      onChange={updateText}
      label="Tags"
      value={inputValue}
      placeholder="Vintage, cotton, summer"
      verticalContent={verticalContentMarkup}
      autoComplete="off"
    />
  );

  return (
    <div>
      <Autocomplete
        allowMultiple
        options={options}
        selected={selectedOptions}
        textField={textField}
        onSelect={setSelectedOptions}
        listTitle="Suggested Tags"
      />
    </div>
  );

  function titleCase(string) {
    return string
      .toLowerCase()
      .split(' ')
      .map((word) => word.replace(word[0], word[0].toUpperCase()))
      .join('');
  }
}


import {create} from 'zustand';

export const useStore = create((set) => ({

  selected: {
    selectPlatform: '',
    selectPage: '',
    selectProduct: 'all',
  },
  setSelected: (name, value) => set((state) => {
    return {
      selected: {
        ...state.selected,
        [name]: value,
      },
    };
  }),

  listPages: [],
setListPages: (pages) => {
  console.log('Setting listPages:', pages);
  set({listPages: pages});
},

}));