From 7b0bac4ecadfc99a3cbd2dd2a389d0f0c6d454a1 Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Thu, 1 Dec 2022 11:37:04 +0300
Subject: [PATCH] Get User Data & i18n

---
 .../Pages/profile/ProfileSettingsPage.tsx     | 245 ++++++++++--------
 src/locales/ru.json                           |  16 +-
 2 files changed, 155 insertions(+), 106 deletions(-)

diff --git a/src/components/Pages/profile/ProfileSettingsPage.tsx b/src/components/Pages/profile/ProfileSettingsPage.tsx
index 29a405db..556ab1a6 100644
--- a/src/components/Pages/profile/ProfileSettingsPage.tsx
+++ b/src/components/Pages/profile/ProfileSettingsPage.tsx
@@ -1,125 +1,160 @@
 import { PageWrap } from '../../_shared/PageWrap'
+import { t } from '../../../utils/intl'
 import type { PageProps } from '../../types'
-import styles from './Settings.module.scss'
 import { Icon } from '../../_shared/Icon'
-import { clsx } from 'clsx'
 import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation'
+import { useSession } from '../../../context/session'
+import { createMemo, For, createSignal, Show, createEffect } from 'solid-js'
+import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
+import type { Author } from '../../../graphql/types.gen'
+import { clsx } from 'clsx'
+import styles from './Settings.module.scss'
 
 export const ProfileSettingsPage = (props: PageProps) => {
+  const [author, setAuthor] = createSignal<Author>(null)
+  const { session } = useSession()
+  const currentSlug = createMemo(() => session()?.user?.slug)
+  const { authorEntities } = useAuthorsStore({ authors: [] })
+  const currentAuthor = createMemo(() => authorEntities()[currentSlug()])
+
+  createEffect(async () => {
+    if (!currentSlug()) return
+    try {
+      await loadAuthor({ slug: currentSlug() })
+      setAuthor(currentAuthor())
+      console.log('!!! currentAuthor:', currentAuthor())
+    } catch (error) {
+      console.error(error)
+    }
+  })
+
   return (
     <PageWrap>
-      <div class="wide-container">
-        <div class="shift-content">
-          <div class="left-col">
-            <div class={clsx('left-navigation', styles.leftNavigation)}>
-              <ProfileSettingsNavigation />
+      <Show when={author()}>
+        <div class="wide-container">
+          <div class="shift-content">
+            <div class="left-col">
+              <div class={clsx('left-navigation', styles.leftNavigation)}>
+                <ProfileSettingsNavigation />
+              </div>
             </div>
-          </div>
-
-          <div class="row">
-            <div class="col-md-10 col-lg-9 col-xl-8">
-              <h1>Настройки профиля</h1>
-              <p class="description">Здесь можно настроить свой профиль так, как вы хотите.</p>
-
-              <form>
-                <h4>Аватар</h4>
-                <div class="pretty-form__item">
-                  <div class={styles.avatarContainer}>
-                    <img class={styles.avatar} />
-                    <input
-                      type="file"
-                      name="avatar"
-                      class={styles.avatarInput}
-                      accept="image/jpeg,image/png,image/gif,image/webp"
-                    />
-                  </div>
-                </div>
-
-                <h4>Имя</h4>
-                <p class="description">
-                  Ваше имя появится на&nbsp;странице вашего профиля и&nbsp;как ваша подпись
-                  в&nbsp;публикациях, комментариях и&nbsp;откликах
-                </p>
-                <div class="pretty-form__item">
-                  <input type="text" name="username" id="username" placeholder="Имя" />
-                  <label for="username">Имя</label>
-                </div>
-
-                <h4>Адрес на&nbsp;Дискурсе</h4>
-                <div class="pretty-form__item">
-                  <div class={styles.discoursName}>
-                    <label for="user-address">https://discours.io/user/</label>
-                    <div class={styles.discoursNameField}>
-                      <input type="text" name="user-address" id="user-address" class="nolabel" />
-                      <p class="form-message form-message--error">
-                        Увы, этот адрес уже занят, выберите другой
-                      </p>
+            <div class="row">
+              <div class="col-md-10 col-lg-9 col-xl-8">
+                <h1>{t('Profile settings')}</h1>
+                <p class="description">{t('Here you can customize your profile the way you want.')}</p>
+                <form>
+                  <h4>{t('Userpic')}</h4>
+                  <div class="pretty-form__item">
+                    <div class={styles.avatarContainer}>
+                      <img class={styles.avatar} src={author().userpic} />
+                      <input
+                        type="file"
+                        name="avatar"
+                        class={styles.avatarInput}
+                        accept="image/jpeg,image/png,image/gif,image/webp"
+                      />
                     </div>
                   </div>
-                </div>
 
-                <h4>Представление</h4>
-                <div class="pretty-form__item">
-                  <textarea name="presentation" id="presentation" placeholder="Представление" />
-                  <label for="presentation">Представление</label>
-                </div>
-
-                <h4>О себе</h4>
-                <div class="pretty-form__item">
-                  <textarea name="about" id="about" placeholder="О себе" />
-                  <label for="about">О себе</label>
-                </div>
-
-                <h4>Чем могу помочь/навыки</h4>
-                <div class="pretty-form__item">
-                  <input type="text" name="skills" id="skills" />
-                </div>
-
-                <h4>Откуда</h4>
-                <div class="pretty-form__item">
-                  <input type="text" name="location" id="location" placeholder="Откуда" />
-                  <label for="location">Откуда</label>
-                </div>
-
-                <h4>Дата рождения</h4>
-                <div class="pretty-form__item">
-                  <input
-                    type="date"
-                    name="birthdate"
-                    id="birthdate"
-                    placeholder="Дата рождения"
-                    class="nolabel"
-                  />
-                </div>
-
-                <div class={clsx(styles.multipleControls, 'pretty-form__item')}>
-                  <div class={styles.multipleControlsHeader}>
-                    <h4>Социальные сети</h4>
-                    <button class="button">+</button>
+                  <h4>{t('Name')}</h4>
+                  <p class="description">
+                    {t(
+                      'Your name will appear on your profile page and as your signature in publications, comments and responses.'
+                    )}
+                  </p>
+                  <div class="pretty-form__item">
+                    <input
+                      type="text"
+                      name="username"
+                      id="username"
+                      placeholder="Имя"
+                      value={author().name}
+                    />
+                    <label for="username">Имя</label>
                   </div>
-                  <div class={styles.multipleControlsItem}>
-                    <input type="text" name="social1" class="nolabel" />
-                    <button>
-                      <Icon name="remove" class={styles.icon} />
-                    </button>
-                  </div>
-                  <div class={styles.multipleControlsItem}>
-                    <input type="text" name="social1" class="nolabel" />
-                    <button>
-                      <Icon name="remove" class={styles.icon} />
-                    </button>
-                  </div>
-                </div>
 
-                <br />
-                <p>
-                  <button class="button button--submit">Сохранить настройки</button>
-                </p>
-              </form>
+                  <h4>{t('Address on Discourse')}</h4>
+                  <div class="pretty-form__item">
+                    <div class={styles.discoursName}>
+                      <label for="user-address">https://discours.io/user/</label>
+                      <div class={styles.discoursNameField}>
+                        <input
+                          type="text"
+                          name="user-address"
+                          id="user-address"
+                          value={currentSlug()}
+                          class="nolabel"
+                        />
+                        <p class="form-message form-message--error">
+                          {t('Sorry, this address is already taken, please choose another one.')}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <h4>{t('Introduce')}</h4>
+                  <div class="pretty-form__item">
+                    <textarea name="presentation" id="presentation" placeholder="Представление" />
+                    <label for="presentation">{t('Introduce')}</label>
+                  </div>
+
+                  <h4>{t('About myself')}</h4>
+                  <div class="pretty-form__item">
+                    <textarea name="about" id="about" placeholder="О себе">
+                      {author().bio}
+                    </textarea>
+                    <label for="about">{t('About myself')}</label>
+                  </div>
+
+                  <h4>{t('How can I help/skills')}</h4>
+                  <div class="pretty-form__item">
+                    <input type="text" name="skills" id="skills" />
+                  </div>
+
+                  <h4>{t('Where')}</h4>
+                  <div class="pretty-form__item">
+                    <input type="text" name="location" id="location" placeholder="Откуда" />
+                    <label for="location">{t('Where')}</label>
+                  </div>
+
+                  <h4>{t('Date of Birth')}</h4>
+                  <div class="pretty-form__item">
+                    <input
+                      type="date"
+                      name="birthdate"
+                      id="birthdate"
+                      placeholder="Дата рождения"
+                      class="nolabel"
+                    />
+                  </div>
+
+                  <div class={clsx(styles.multipleControls, 'pretty-form__item')}>
+                    <div class={styles.multipleControlsHeader}>
+                      <h4>{t('Social networks')}</h4>
+                      <button class="button">+</button>
+                    </div>
+                    <For each={author().links}>
+                      {(link) => (
+                        <div class={styles.multipleControlsItem}>
+                          <input type="text" value={link} name="social1" class="nolabel" />
+                          <button>
+                            <Icon name="remove" class={styles.icon} />
+                          </button>
+                        </div>
+                      )}
+                    </For>
+                  </div>
+
+                  <br />
+                  <p>
+                    <button class="button button--submit">{t('Save settings')}</button>
+                  </p>
+                </form>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </Show>
     </PageWrap>
   )
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
index a04a7365..53fae93b 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -189,5 +189,19 @@
   "create_group": "Создать группу",
   "discourse_theme": "Тема дискурса",
   "cancel": "Отмена",
-  "group_chat": "Общий чат"
+  "group_chat": "Общий чат",
+  "Profile settings": "Настройки профиля",
+  "Here you can customize your profile the way you want.": "Здесь можно настроить свой профиль так, как вы хотите.",
+  "Userpic": "Аватар",
+  "Name": "Имя",
+  "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Ваше имя появится на странице вашего профиля и как ваша подпись в публикациях, комментариях и откликах",
+  "Address on Discourse": "Адрес на Дискурсе",
+  "Sorry, this address is already taken, please choose another one.": "Увы, этот адрес уже занят, выберите другой",
+  "Introduce": "Представление",
+  "About myself": "О себе",
+  "How can I help/skills": "Чем могу помочь/навыки",
+  "Where": "Откуда",
+  "Date of Birth": "Дата рождения",
+  "Social networks": "Социальные сети",
+  "Save settings": "Сохранить настройки"
 }