Мелкие улучшения вёрстки

frontend-park-mail-ru · Nov 27, 2024 · 8e06250 · 8e06250
1 parent f6ef403
commit 8e06250
Show file tree

Hide file tree

Showing 13 changed files with 275 additions and 287 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,7 @@ import { updateMe } from './stores/meStore';
 import { getFlagRoutes } from './routes/routesFlag';
 import { CsatPoll } from './screens/CsatPoll';
 import { CsatResults } from './screens/CsatResults';
+import { setCsatStore } from './stores/csatStore';
 
 const App: IComponentFunction = () => {
   const routerStore = useRouterStore();
@@ -34,6 +35,13 @@ setTimeout(() => {
   setRouterStore(getFlagRoutes(window.location.pathname));
 }, 0);
 
+window.addEventListener('message', (ev: MessageEvent<string>) => {
+  if (ev.data === 'close_csat') {
+    console.log('should output');
+    setCsatStore({ isOpened: false, questions: [] });
+  }
+});
+
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', function () {
     navigator.serviceWorker.register('/sw.js').then(

diff --git a/src/api/mocks/poll.ts b/src/api/mocks/poll.ts
@@ -1,6 +1,6 @@
-import { Question } from '@/types/poll';
+import { CsatQuestion } from '@/types/poll';
 
-export const pollMock: Question[] = [
+export const pollMock: CsatQuestion[] = [
   {
     id: 1,
     text: 'Насколько удобно пользоваться интерфейсом доски?',

diff --git a/src/api/responseTypes.ts b/src/api/responseTypes.ts
@@ -1,4 +1,4 @@
-import { PollQuestion } from '@/stores/csatStore';
+import { CsatQuestion } from '@/types/poll';
 
 export interface BoardContentResponse {
   myRole: 'viewer' | 'editor' | 'editor_chief' | 'admin';
@@ -50,7 +50,7 @@ export interface UserResponse {
   email: string;
   createdAt: string;
   avatarImageUrl: string;
-  pollQuestions?: PollQuestion[];
+  pollQuestions?: CsatQuestion[];
 }
 
 export interface UserPermissionsResponse {

diff --git a/src/jsxCore/core.ts b/src/jsxCore/core.ts
@@ -11,6 +11,7 @@ import {
 } from './types';
 import { _removeFromUpdateQueue, markDirty } from './updateQueue';
 import { _unsubscribeFromStores } from './hooks';
+import { flatten } from '@/utils/misc';
 
 // Тип нужен для хранения информации о существующих DOM-узлах, связанных именно с этим инстансом
 // и не имеющих отношения к под-инстансам
@@ -30,23 +31,35 @@ interface DOMTextNodeRepr {
 }
 type DOMNodeRepr = DOMTextNodeRepr | DOMElementRepr;
 
+function normalizeClassName(cn: any): string | undefined {
+  if (cn === undefined) {
+    return undefined;
+  }
+  if (Array.isArray(cn)) {
+    return flatten(cn).join(' ');
+  }
+  return cn.toString();
+}
+
 /**
  * Пропатчить элементу пропсы. Удалить неактуальные атрибуты. Заменить ранее назначенные обработчики событий
  * @param props Пропсы
  * @param elem Элемент, который будем менять
  */
 function patchProps(props: any, elem: DOMElementRepr) {
+  if (props.className !== undefined) {
+    props.class = normalizeClassName(props.className);
+    props.className = undefined;
+  }
+
   // Снять обработчики событий
   elem.eventListeners.forEach((listener) => {
     elem.node.removeEventListener(listener.type, listener.listener);
   });
   elem.eventListeners = [];
   for (let i = 0; i < elem.node.attributes.length; i++) {
     const attr = elem.node.attributes[i];
-    if (
-      props[attr.name] === undefined &&
-      props[attr.name === 'class' ? 'className' : 'asdfafdasf'] === undefined
-    ) {
+    if (props[attr.name] === undefined) {
       elem.node.removeAttributeNode(attr);
     }
   }
@@ -58,18 +71,7 @@ function patchProps(props: any, elem: DOMElementRepr) {
       }
       return;
     }
-    if (key === 'className') {
-      let newValue: string = '';
-      if (Array.isArray(value)) {
-        newValue = value.join(' ');
-      } else if (typeof value === 'string') {
-        newValue = value;
-      }
-      if (elem.existingAttrs.get('className') !== newValue.toString()) {
-        elem.existingAttrs.set('className', newValue.toString());
-        elem.node.className = newValue;
-      }
-    } else if (key.startsWith('ON_')) {
+    if (key.startsWith('ON_')) {
       if (typeof value !== 'function' && typeof value !== 'undefined') {
         throw new Error('Event handler should be function');
       }

diff --git a/src/jsxCore/hooks.ts b/src/jsxCore/hooks.ts
@@ -69,15 +69,16 @@ export function defineStore<S>(
   const useStore = () => {
     if (activeInstance !== undefined) {
       // Подписать инстанс на store
-      if (
-        !storeSubscribersIndex.has(activeInstance) ||
-        !storeSubscribersIndex.get(activeInstance)?.has(storeName)
-      ) {
+      if (!storeSubscribersIndex.has(activeInstance)) {
         storeSubscribersIndex.set(activeInstance, new Set());
+      }
+      if (!storeSubscribersIndex.get(activeInstance)?.has(storeName)) {
         storeSubscribersIndex.get(activeInstance)?.add(storeName);
         storeSubscribers.get(storeName)?.add(activeInstance);
       }
     }
+    console.log(storeName, activeInstance);
+    console.log(storeSubscribers);
     return storeMap.get(storeName);
   };
   const setStore = (newStoreContent: S) => {

diff --git a/src/screens/CsatPoll.scss b/src/screens/CsatPoll.scss
@@ -1,15 +1,8 @@
-.form-container {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-  background-color: #f4f4f4;
-}
-
-.form {
+.csat-poll__form {
   background-color: #fff;
   border-radius: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 20px;
+  padding-bottom: 0;
 }
 
 .title {
@@ -18,12 +11,10 @@
   margin-bottom: 20px;
 }
 
-.question {
-  margin-bottom: 20px;
-
-  p {
-    text-align: center;
-  }
+.csat-poll__question {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
 }
 
 .rating {
@@ -103,25 +94,18 @@
   }
 }
 
-.iframe-wrapper {
-  position: fixed;
-  top: 10%;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 90%;
-  max-width: 800px;
-  background: #fff;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  z-index: 1000;
+.csat-poll__star {
+  font-size: 2rem;
+  cursor: pointer;
+  transition: 0.5s ease-out;
 }
 
-.iframe-header {
-  display: flex;
-  justify-content: flex-end;
-  padding: 10px;
-  background: #f4f4f4;
-  border-bottom: 1px solid #ccc;
+.csat-poll__star__active {
+  color: #ffcb05;
+}
+
+.csat-poll__star__inactive {
+  color: gray;
 }
 
 .close-button {

diff --git a/src/screens/CsatPoll.tsx b/src/screens/CsatPoll.tsx
@@ -13,7 +13,7 @@ export const CsatPoll = (props: ComponentProps) => {
     questionType: 'answer_rating' | 'answer_text';
   }[] = JSON.parse(localStorage.getItem('csat_questions') as string);
   console.log('CSAT from local storage: ', csat);
-  // Состояние текущего индекса вопроса
+
   const [currentIndex, setCurrentIndex] = useState(0);
   const [currentRating, setCurrentRating] = useState(0);
   const [currentText, setCurrentText] = useState('');
@@ -41,58 +41,65 @@ export const CsatPoll = (props: ComponentProps) => {
   };
 
   return (
-    <div class="form-container">
-      <div class="form">
-        {currentIndex < csat.length && (
-          <div class="question">
-            <p>{currentQuestion.questionText}</p>
+    <div class="csat-poll__form">
+      {currentIndex < csat.length && (
+        <div class="csat-poll__question">
+          <p>{currentQuestion.questionText}</p>
 
-            {currentQuestion.questionType === 'answer_rating' && (
-              <div class="rating">
-                {[1, 2, 3, 4, 5].map((rating) => (
-                  <div ON_click={() => setCurrentRating(rating)}>
-                    <i
-                      class={
-                        rating > currentRating ? 'bi-star' : 'bi-star-fill'
-                      }
-                      style={
-                        rating > currentRating
-                          ? 'color: black'
-                          : 'color: yellow'
-                      }
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
+          {currentQuestion.questionType === 'answer_rating' && (
+            <div class="rating">
+              {[1, 2, 3, 4, 5].map((rating) => (
+                <div ON_click={() => setCurrentRating(rating)}>
+                  <i
+                    className={[
+                      'csat-poll__star',
+                      rating > currentRating
+                        ? 'bi-star csat-poll__star__inactive'
+                        : 'bi-star-fill csat-poll__star__active',
+                    ]}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
 
-            {currentQuestion.questionType === 'answer_text' && (
-              <Input
-                key="answer_question"
-                onChanged={(newValue) => setCurrentText(newValue)}
-              />
-            )}
-            <Button
-              key="next_button"
-              callback={() => {
-                console.log('next');
-                handleResponse();
-                setCurrentRating(0);
-                setCurrentText('');
-                setCurrentIndex(currentIndex + 1);
-              }}
-              text={
-                currentIndex < csat.length - 1
-                  ? 'Следующий вопрос'
-                  : 'Завершить'
-              }
-            ></Button>
-          </div>
-        )}
-        {currentIndex === csat.length && (
-          <div>Спасибо за Ваши ответы! Мы становимся лучше благодаря Вам!</div>
-        )}
-      </div>
+          {currentQuestion.questionType === 'answer_text' && (
+            <Input
+              key="answer_question"
+              onChanged={(newValue) => setCurrentText(newValue)}
+            />
+          )}
+          <Button
+            key="next_button"
+            callback={() => {
+              console.log('next');
+              handleResponse();
+              setCurrentRating(0);
+              setCurrentText('');
+              setCurrentIndex(currentIndex + 1);
+            }}
+            text={
+              currentIndex < csat.length - 1 ? 'Следующий вопрос' : 'Завершить'
+            }
+            variant={
+              currentRating > 0 || currentText.length > 0 ? 'accent' : 'default'
+            }
+          ></Button>
+        </div>
+      )}
+      {currentIndex === csat.length && (
+        <div>
+          Спасибо за Ваши ответы! Мы становимся лучше благодаря Вам!
+          <Button
+            key="close_window"
+            text="Закрыть"
+            variant="accent"
+            callback={() => {
+              postMessage('close_csat');
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 };