Hugging Face's logo

Spaces:
Kaballas
/
auditforge
Runtime error

App Files Community
auditforge
File size: 4,379 Bytes 
56b6519
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

import PrimaryButton from '../../../components/button/PrimaryButton';
import EditCard from '../../../components/card/EditCard';
import SimpleInput from '../../../components/input/SimpleInput';
import {
  createLanguage,
  getLanguages,
  updateLanguages,
} from '../../../services/data';
import LanguageList from './LanguageList';

export const Languages: React.FC = () => {
  const { t } = useTranslation();
  const [newLanguage, setNewLanguage] = useState('');
  const [newLocale, setNewLocale] = useState('');

  const [languages, setLanguages] = useState<
    { language: string; locale: string }[]
  >([]);

  const [loading, setLoading] = useState<boolean>(true);
  const [isEditing, setIsEditing] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchLanguages = async () => {
      try {
        const data = await getLanguages();
        setLanguages(data.datas);
        setLoading(false);
      } catch (err) {
        setError('Error fetching company');
        setLoading(false);
      }
    };

    void fetchLanguages();
  }, [isEditing]);

  const handleAddLanguage = async () => {
    let resp: { datas: { language: string; locale: string }; status?: string };
    if (!newLanguage.trim()) {
      // eslint-disable-next-line sonarjs/no-duplicate-string
      setError(`${t('err.createEmptyField')}: ${t('language')}`);
      toast.error(`${t('err.createEmptyField')}: ${t('language')}`);
      return;
    }

    if (!newLocale.trim()) {
      setError(`${t('err.createEmptyField')}: ${t('locale')}`);
      toast.error(`${t('err.createEmptyField')}: ${t('locale')}`);
      return;
    }

    try {
      resp = await createLanguage({
        language: newLanguage,
        locale: newLocale,
      });
    } catch (error) {
      setError('Error creating language');
      toast.error(t('err.errorCreatingLang'));
      return;
    }
    toast.success(t('msg.languageCreatedOk'));
    setNewLanguage('');
    setNewLocale('');
    setLanguages(prevLanguages => [
      ...prevLanguages,
      { locale: resp.datas.locale, language: resp.datas.language },
    ]);
  };

  /**
   * Lógica para hacer update (PUT)
   * de los lenguajes.
   */
  const [newLanguageList, setNewLanguageList] = useState<
    { language: string; locale: string }[]
  >([]);

  const handleUpdateLanguageList = useCallback(
    (data: { language: string; locale: string }[]) => {
      setNewLanguageList(data);
    },
    [],
  );

  const onClickSave = async () => {
    try {
      await updateLanguages(newLanguageList);
      toast.success(t('msg.languagesUpdatedOk'));
      setIsEditing(false);
    } catch (error) {
      setError('Error updating languages');
      toast.error(t('err.failedUpdateLanguages'));
      setIsEditing(false);
      return;
    }
  };

  useEffect(() => {
    error && console.error(error);
  }, [error]);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <SimpleInput
          id="language"
          label={t('language')}
          name="language"
          onChange={setNewLanguage}
          placeholder={t('language')}
          type="text"
          value={newLanguage}
        />
        <SimpleInput
          id="locale"
          label={t('locale')}
          name="locale"
          onChange={setNewLocale}
          placeholder={t('locale')}
          type="text"
          value={newLocale}
        />
        <div>
          <PrimaryButton
            aria-label={t('addLanguage')}
            onClick={handleAddLanguage}
          >
            +
          </PrimaryButton>
        </div>
      </div>
      <EditCard
        editTitle={t('tooltip.edit')}
        isEditing={isEditing}
        onClickCancel={() => setIsEditing(false)}
        onClickEdit={() => setIsEditing(true)}
        onClickSave={onClickSave}
        title={t('listOfLanguages')}
      >
        {loading ? (
          <p>{t('loading')}</p>
        ) : (
          <LanguageList
            data={languages}
            isDisabled={!isEditing}
            onUpdateList={handleUpdateLanguageList}
          />
        )}
      </EditCard>
    </div>
  );
};