📦 EqualifyEverything / equalify

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
146import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { useParams, useLocation, Link } from "react-router-dom";
import styles from "./Blocker.module.scss";
import * as API from "aws-amplify/api";
import { Card } from "#src/components/Card.tsx";
import { DataRow } from "#src/components/DataRow.tsx";
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
//import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
import { a11yDark as prism } from "react-syntax-highlighter/dist/esm/styles/prism";

const apiClient = API.generateClient();

interface BlockerTag {
  tag: {
    content: string;
  };
}

interface BlockerMessage {
  message: {
    category: string;
    content: string;
    message_tags: BlockerTag[];
  };
}

interface theBlocker {
  id: string;
  url: {
    url: string;
  };
  blocker_messages: BlockerMessage[];
  short_id: string;
  audit_id: string;
  ignored_blocker: null | Object;
  content: string;
  audits : {
      name: string;
      id: string;
  }
}

export const Blocker = () => {
  const { blockerId } = useParams();
  //const queryClient = useQueryClient();
  //const navigate = useNavigate();
  const location = useLocation();

  const { data: blocker } = useQuery({
    queryKey: ["blocker"],
    queryFn: async () => {
      const response = await apiClient.graphql({
        query: `query($blocker_id: String) 
        {
        blockers(where: {short_id: {_eq: $blocker_id}}) {
            id
            url {
                url
            }
            blocker_messages {
                message {
                    category
                    content
                    message_tags {
                        tag {
                            content
                        }
                    }
                }
            }
            short_id
            audit_id
            content
            ignored_blocker {
                blocker_id
            }
            audits {
                name
                id
            }
        }
      }
      `,
        variables: { blocker_id: blockerId },
      });
      const data = response as any;
      return data.data.blockers[0] as theBlocker;
    },
  });
  //console.log(blocker);

  return (
    <div className={styles["Blocker"]}>
      <Card variant="light" className={styles["Card"]}>
        {blocker ? (
          <>
            <h1>Blocker: {blocker.short_id}</h1>
            <DataRow the_key={"Appears on:"} the_value={<a href={blocker?.url.url}>{blocker?.url.url}</a>} />
            <DataRow the_key={"Audit:"} the_value={<Link to={"/shared/"+blocker?.audits.id}>{blocker?.audits.name}</Link>} />

            {blocker?.blocker_messages.map((messages, index) => {
              return <div key={index}>
                <DataRow the_key="Error:" the_value={messages.message.content} />

                <DataRow the_key="Category" the_value={
                  <div className="category tags">
                    <span className="tag">{messages.message.category}</span>
                  </div>
                } />

                <DataRow the_key="Tags" the_value=
                  {
                    <div className="tags">
                      {messages.message.message_tags.map((tag, index) => {
                        return <span key={index} className="tag">
                          {tag.tag.content}
                        </span>
                      })}
                    </div>
                  } />

              </div>
            })}

            <DataRow className={styles["dataRow_last"]} the_key="Code" the_value={
              <SyntaxHighlighter
                style={prism}
                language={"jsx"}
                className={styles["code"]}
                wrapLines={true}
                wrapLongLines={true}
              >
                {blocker.content}
              </SyntaxHighlighter>

            } />
          </>
        ) : (
          <>Error: Blocker {blockerId} not found.</>
        )}
      </Card >
    </div>
  );
};