87 |
88 | ענן מילים זה מבוסס על אוסף כל הציטוטים של הח"כ כפי שזיהינו אותם
89 | במערכת שלנו.
90 |
91 |
92 | בעזרת מערכת בינה מלאכותית לעיבוד שפה טבעית{" "}
93 |
94 |
99 | https://hebrew-nlp.co.il
100 |
101 |
102 |
103 |
104 | ביצענו "נורמליזציה" לאוצר המילים של הח"כ, כך מילים בעלות משמעות
105 | זהה התקבלו בכתיב אחיד, למשל "בטחון", "הבטחון", "לבטחון",
106 | "בבטחון" כולן עברו נורמליזציה למילה "בטחון".
107 |
108 |
109 | כמו כן מענן מילים זה מחקנו מונחים רבים כגון מילות קישור או מילים
110 | חסרות הקשר.
111 |
112 |
113 | לאחר עיבוד זה ספרנו את שכיחות השימוש במונחים, ככל שהח"כ משתמש\ת
114 | יותר במילה - כך המילה תופיע גדולה יותר בענן המילים.
115 |
116 |
117 | );
118 | }
119 |
--------------------------------------------------------------------------------
/src/components/QuotesLoader/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef, useMemo } from "react";
2 | import TextTransition, { presets } from "react-text-transition";
3 | import CircularProgress from "@material-ui/core/CircularProgress";
4 |
5 | import quotes from "./quotes.json";
6 | import { useBigScreen, shuffleArray } from "../../utils";
7 | import { makeStyles } from "@material-ui/core";
8 |
9 | // initial shuffle to avoid seeding first render
10 | shuffleArray(quotes);
11 |
12 | const useStyles = makeStyles({
13 | root: {
14 | display: "flex",
15 | flexDirection: "column",
16 | justifyItems: "center",
17 | alignItems: "center",
18 | justifyContent: "center",
19 | position: "absolute",
20 | width: "100%",
21 | height: "100vh",
22 | top: 0,
23 | right: 0,
24 | background: "white",
25 | zIndex: 5,
26 | transition: "opacity .2s ease-in-out",
27 | pointerEvents: "none",
28 | },
29 | quote: {
30 | fontStyle: "italic",
31 | minWidth: "240px",
32 | "$bigLoader &": {
33 | marginTop: "-25px",
34 | marginRight: "2.5em",
35 | },
36 | "$smallLoader &": {
37 | width: "100%",
38 | },
39 | },
40 | text: {
41 | color: "#332",
42 | fontSize: "24px",
43 | fontWeight: "bold",
44 | "&::first-letter": {
45 | fontSize: "200%",
46 | lineHeight: "60px",
47 | },
48 | "$smallLoader &": {
49 | fontSize: "20px",
50 | },
51 | },
52 | name: {
53 | color: "#555",
54 | fontSize: "18px",
55 | fontFamily: "Helvetica, Verdana",
56 | paddingRight: "20px",
57 | "$smallLoader &": {
58 | fontSize: "15px",
59 | paddingRight: 0,
60 | },
61 | },
62 |
63 | smallLoader: {
64 | display: "flex",
65 | flexDirection: "column",
66 | alignContent: "center",
67 | justifyContent: "flex-start",
68 | alignItems: "stretch",
69 | justifyItems: "center",
70 | width: "100%",
71 | height: "30%",
72 | // XXX hacky, but the transition library sucks, so whaterver - OP
73 | "& .text-transition_inner > div": {
74 | margin: "0 7.5%",
75 | width: "85%",
76 | },
77 | },
78 | bigLoader: {
79 | display: "inline-flex",
80 | flexDirection: "row",
81 | placeContent: "center",
82 | placeItems: "center",
83 | width: "100%",
84 | paddingLeft: "25%",
85 | paddingBottom: "15%",
86 | },
87 | });
88 |
89 | const Loader = React.memo(function ({ show }) {
90 | const classes = useStyles();
91 | const isBigScreen = useBigScreen();
92 | const shuffled = useMemo(() => [...quotes], []);
93 | const [index, setIndex] = useState(0);
94 | const intervalId = useRef(null);
95 |
96 | useEffect(() => {
97 | if (show) {
98 | shuffleArray(shuffled);
99 | intervalId.current = setInterval(
100 | () => setIndex((index) => index + 1),
101 | 4000
102 | );
103 | } else {
104 | clearInterval(intervalId.current);
105 | }
106 | }, [show, shuffled]);
107 |
108 | const currentQuote = shuffled[index % shuffled.length];
109 |
110 | const contents = isBigScreen ? (
111 | <>
112 |
35 |
36 | צרו קשר
37 |
38 |
39 | פיתוח המערכת
40 |
41 |
42 |
59 |
60 | אם יש לכם רעיון מגניב ,
61 |
62 |
63 | אם מצאתם טעות מחרידה ,
64 |
65 |
66 |
67 | אם אתם רוצים להוסיף אפליקציה
68 |
69 |
70 | כמו{" "}
71 |
72 |
77 | סימולטור ההצבעות
78 |
79 | {" "}
80 | שיצרו
81 |
82 |
83 |
84 |
103 |
104 | אתם מוזמנים לפנות אלינו בכתובת
105 |
106 |
107 |
108 | betaknesset@gmail.com
109 |
110 |
111 |
112 | );
113 | }
114 |
115 | function NamedAvatar({ classStyle, imageUrl, linkedinUrl, EngName, HebName }) {
116 | return (
117 | ({
134 | highlight: query,
135 | ...d,
136 | }))}
137 | />
138 | );
139 | });
140 |
141 | function numberWithCommas(x) {
142 | return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
143 | }
144 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Suspense, lazy, useEffect } from "react";
2 | import clsx from "clsx";
3 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
4 | import { CircularProgress, ThemeProvider } from "@material-ui/core";
5 | import Particles from "react-particles";
6 | import { makeStyles } from "@material-ui/core/styles";
7 | import Typography from "@material-ui/core/Typography";
8 | import Modal from "@material-ui/core/Modal";
9 | import Fade from "@material-ui/core/Fade";
10 | import Backdrop from "@material-ui/core/Backdrop";
11 | import Container from "@material-ui/core/Container";
12 |
13 | import config from "./config";
14 | import theme from "./theme";
15 | import { useBigScreen } from "./utils";
16 | import particlesConfig from "./particles.config.json";
17 | import NavigationBar from "./components/NavigationBar";
18 | import ScrollableView from "./components/ScrollableView";
19 |
20 | const Main = lazy(() => import("./pages/Main"));
21 | const Document = lazy(() => import("./pages/Document"));
22 | const Quotes = lazy(() => import("./pages/Quotes"));
23 | const Calendar = lazy(() => import("./pages/Calendar"));
24 | const FrameApp = lazy(() => import("./pages/FrameApp"));
25 |
26 | const useStyles = makeStyles((theme) => ({
27 | root: {
28 | display: "flex",
29 | flexDirection: "column",
30 | placeItems: "stretch",
31 | overflowY: "auto",
32 | },
33 | particles: {
34 | position: "fixed",
35 | width: "100%",
36 | top: 0,
37 | left: 0,
38 | zIndex: 1,
39 | },
40 | modal: {
41 | display: "flex",
42 | alignItems: "center",
43 | justifyContent: "center",
44 | position: "relative",
45 | color: "#fff",
46 | },
47 | backdrop: {
48 | backgroundColor: theme.palette.primary.dark,
49 | },
50 | container: {
51 | outline: "none",
52 | padding: theme.spacing(2, 4, 3),
53 | textAlign: "center",
54 | display: "flex",
55 | flexDirection: "column",
56 | placeItems: "center",
57 | placeContent: "space-around",
58 | height: "100%",
59 | },
60 | }));
61 |
62 | export default function App() {
63 | const isBigScreen = useBigScreen();
64 | const classes = useStyles();
65 |
66 | if (config.showOverloadedScreen)
67 | return (
68 |
69 |
71 | );
72 |
73 | return (
74 |
75 |
81 |
82 |
84 |
87 | (
91 | (
97 | (
114 |
122 |
123 |
124 |
125 |
126 |
127 | );
128 | }
129 |
130 | function LightweightLoader() {
131 | return (
132 |
141 |
143 | );
144 | }
145 |
146 | function CustomParticles() {
147 | const isBigScreen = useBigScreen();
148 | const classes = useStyles();
149 |
150 | if (!isBigScreen) return null;
151 | return void 0}
167 | closeAfterTransition
168 | BackdropComponent={Backdrop}
169 | BackdropProps={{
170 | timeout: 500,
171 | className: classes.backdrop,
172 | }}
173 | >
174 |
175 |
176 |
177 | איזה עומס!
178 |
179 |
180 |
181 |
182 | לא ציפינו לכזו כמות של תעבורה,
183 |
184 |
185 | נחזור במהרה יותר מוכנים לכמות המשתמשים 😋
186 |
187 |
188 |
189 |
190 |
191 | );
192 | }
193 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | import { useCallback, useState, useEffect, useRef } from "react";
2 | import { useHistory, useLocation } from "react-router-dom";
3 | import useMediaQuery from "@material-ui/core/useMediaQuery";
4 | import axiosRetry from "axios-retry";
5 | import axios from "axios";
6 |
7 | axiosRetry(axios, { retries: 3 });
8 |
9 | /** helpers **/
10 | export const toNiceDate = (d, hours = false) => {
11 | let date = `${d.getDate()}.${d.getMonth() + 1}.${(d.getFullYear() % 100)
12 | .toString()
13 | .padStart(2, "0")}`;
14 | if (hours)
15 | date = `${d.getHours().toString().padStart(2, "0")}:${d
16 | .getMinutes()
17 | .toString()
18 | .padStart(2, "0")}, ${date}`;
19 | return date;
20 | };
21 |
22 | export function cleanTextFromDB(text) {
23 | if (text[0] === "״" || text[0] === '"') {
24 | text = text.substring(1);
25 | }
26 | if (text[text.length - 1] === "״" || text[text.length - 1] === '"') {
27 | text = text.substring(0, text.length - 1);
28 | }
29 |
30 | return text.replace(/"+/g, '"').replace(/״+/g, "״");
31 | }
32 |
33 | export function shuffleArray(array) {
34 | for (let i = array.length - 1; i > 0; i--) {
35 | const j = Math.floor(Math.random() * (i + 1));
36 | [array[i], array[j]] = [array[j], array[i]];
37 | }
38 | }
39 |
40 | export function imageOrDefault(url, identifier, size = 32) {
41 | if (url) return url;
42 |
43 | return `https://www.gravatar.com/avatar/${hashCode(
44 | identifier
45 | )}?s=${size}&d=identicon&r=PG`;
46 | }
47 |
48 | function hashCode(str) {
49 | var hash = 0,
50 | i,
51 | chr;
52 | for (i = 0; i < str.length; i++) {
53 | chr = str.charCodeAt(i);
54 | hash = (hash << 5) - hash + chr;
55 | hash |= 0; // Convert to 32bit integer
56 | }
57 | return hash;
58 | }
59 |
60 | export const getFullName = (p) => {
61 | if (!p) return "";
62 | const { FirstName, LastName } = p;
63 | return `${FirstName} ${LastName}`;
64 | };
65 |
66 | /** hooks **/
67 | export function useSearchParams() {
68 | return new URLSearchParams(useLocation().search);
69 | }
70 |
71 | export function useQuery() {
72 | const urlQuery = useSearchParams();
73 | return (urlQuery.get("q") || "").replace("״", '"').replace("׳", "'");
74 | }
75 |
76 | export function usePersonID() {
77 | const urlQuery = useSearchParams();
78 | const raw = urlQuery.get("personID");
79 | if (!raw) return undefined;
80 | return parseInt(raw);
81 | }
82 |
83 | export function useIndex() {
84 | const urlQuery = useSearchParams();
85 | const raw = urlQuery.get("index");
86 | if (!raw) return undefined;
87 | return parseInt(raw);
88 | }
89 |
90 | export function useNavigate() {
91 | const currentQuery = useQuery();
92 | const currentPersonID = usePersonID();
93 | const currentLocation = useLocation();
94 | const history = useHistory();
95 |
96 | return useCallback(
97 | ({ location, hash, q, personID, ...params }) => {
98 | const urlParams = new URLSearchParams(params);
99 |
100 | q = q !== undefined ? q : currentQuery;
101 | if (q) urlParams.append("q", q);
102 | personID = personID !== undefined ? personID : currentPersonID;
103 | if (personID) urlParams.append("personID", personID);
104 |
105 | history.push(
106 | `${location || currentLocation.pathname}?${urlParams}${
107 | hash || ""
108 | }`
109 | );
110 | },
111 | [currentQuery, currentPersonID, currentLocation, history]
112 | );
113 | }
114 |
115 | async function serverFetch({ url, params }) {
116 | return (
117 | await axios.get(url, {
118 | params,
119 | timeout: 10000,
120 | })
121 | ).data;
122 | }
123 |
124 | export function useWindowSize() {
125 | // Initialize state with undefined width/height so server and client renders match
126 | // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
127 | const [windowSize, setWindowSize] = useState({
128 | width: window.innerWidth,
129 | height: window.innerHeight,
130 | });
131 |
132 | useEffect(() => {
133 | // Handler to call on window resize
134 | function handleResize() {
135 | // Set window width/height to state
136 | setWindowSize({
137 | width: window.innerWidth,
138 | height: window.innerHeight,
139 | });
140 | }
141 |
142 | // Add event listener
143 | window.addEventListener("resize", handleResize);
144 |
145 | // Call handler right away so state gets updated with initial window size
146 | handleResize();
147 |
148 | // Remove event listener on cleanup
149 | return () => window.removeEventListener("resize", handleResize);
150 | }, []); // Empty array ensures that effect is only run on mount
151 |
152 | return windowSize;
153 | }
154 |
155 | export function useBigScreen() {
156 | return useMediaQuery("(min-width:600px) and (min-height:400px)");
157 | }
158 |
159 | // from https://usehooks.com/useLocalStorage/
160 | export function useSessionStorage(key, initialValue) {
161 | // State to store our value
162 | // Pass initial state function to useState so logic is only executed once
163 | const [storedValue, setStoredValue] = useState(() => {
164 | try {
165 | // Get from session storage by key
166 | const item = window.sessionStorage.getItem(key);
167 | // Parse stored json or if none return initialValue
168 | return item ? JSON.parse(item) : initialValue;
169 | } catch (error) {
170 | // If error also return initialValue
171 | console.log(error);
172 | return initialValue;
173 | }
174 | });
175 |
176 | // Return a wrapped version of useState's setter function that ...
177 | // ... persists the new value to sessionStorage.
178 | const setValue = (value) => {
179 | try {
180 | // Allow value to be a function so we have same API as useState
181 | const valueToStore =
182 | value instanceof Function ? value(storedValue) : value;
183 | // Save state
184 | setStoredValue(valueToStore);
185 | // Save to session storage
186 | window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
187 | } catch (error) {
188 | // A more advanced implementation would handle the error case
189 | console.log(error);
190 | }
191 | };
192 |
193 | return [storedValue, setValue];
194 | }
195 |
196 | export function useCancellableFetch() {
197 | const cancelSource = useRef(null);
198 | return useCallback(async (url) => {
199 | if (cancelSource.current) {
200 | cancelSource.current.cancel("Cancelled by hook");
201 | }
202 | const cancelToken = axios.CancelToken;
203 | cancelSource.current = cancelToken.source();
204 | try {
205 | return await serverFetch({
206 | url,
207 | cancelToken: cancelSource.current.token,
208 | });
209 | } catch (thrown) {
210 | if (axios.isCancel(thrown)) {
211 | console.debug("Request canceled", thrown.message);
212 | } else {
213 | throw thrown;
214 | }
215 | }
216 | }, []);
217 | }
218 |
--------------------------------------------------------------------------------
/src/components/QuotesSearch.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useState, useLayoutEffect, useRef } from "react";
2 | import Dialog from "./Dialog";
3 | import { Typography } from "@material-ui/core";
4 | import TextField from "@material-ui/core/TextField";
5 | import SearchIcon from "@material-ui/icons/Search";
6 | import ClearIcon from "@material-ui/icons/Clear";
7 | import InputAdornment from "@material-ui/core/InputAdornment";
8 | import HelpOutlineIcon from "@material-ui/icons/HelpOutline";
9 | import { FormatQuote } from "@material-ui/icons";
10 | import IconButton from "@material-ui/core/IconButton";
11 | import { useQuery, useNavigate } from "../utils";
12 |
13 | const QuotesSearch = React.memo(function ({
14 | style,
15 | variant,
16 | placeholder,
17 | showReset = true,
18 | }) {
19 | const textRef = useRef();
20 | const navigate = useNavigate();
21 | const query = useQuery();
22 | const [queryInput, setQueryInput] = useState(query);
23 | const [guideOpen, setGuideOpen] = useState(false);
24 |
25 | const search = useCallback(
26 | () => navigate({ q: queryInput }),
27 | [queryInput, navigate]
28 | );
29 |
30 | useLayoutEffect(() => {
31 | setQueryInput(query);
32 | }, [query]);
33 |
34 | return (
35 |
36 |
115 |
116 | );
117 | });
118 |
119 | export function SearchDialog(props) {
120 | const { setOpen } = props;
121 | const navigate = useNavigate();
122 |
123 | const showQuotes = (e, q) => {
124 | e.preventDefault();
125 | navigate({ q });
126 | setOpen(false);
127 | };
128 |
129 | return (
130 |
131 |
132 | חיפוש מתקדם
133 |
134 | איך מחפשים מונח?
136 | פשוט מקלידים את המילה ומחפשים, למשל:
137 |
138 |
139 |
140 | showQuotes(e, "פנסיה")}>
141 | פנסיה
142 |
143 |
144 |
145 |
146 | איך מחפשים משפט?
147 | פשוט מקלידים את המשפט ומחפשים, למשל:
148 |
149 |
150 |
151 | showQuotes(e, "ילדי תימן")}>
152 | ילדי תימן
153 |
154 |
155 |
156 |
157 | איך מחפשים כמה מונחים בו זמנית?
158 | פשוט מקלידים את המילים או המשפטים מופרדים עם התו ^, למשל:
159 |
160 |
161 |
162 | showQuotes(e, "בעד^הקהילה הגאה")}
165 | >
166 | בעד^הקהילה הגאה
167 |
168 |
169 |
170 |
171 |
172 | אם עדין אין לכם רעיון מה לחפש, מוזמנים לבחור באחת מבועות הנושאים
173 | שלנו.
174 |
175 |
176 | );
177 | }
178 |
179 | export default QuotesSearch;
180 |
181 | export function WhiteQuotesSearch({ style, ...props }) {
182 | return (
183 |
18 |
19 |
31 |
0 ? 1 : 0,
41 | zIndex: 10,
42 | bottom: 0,
43 | transition: "opacity .4s ease-in-out",
44 | pointerEvents: "none",
45 | }}
46 | >
47 | טוען...
48 |
49 |
139 | window.open(
140 | `https://docs.google.com/gview?url=${filePath}`,
141 | "_blank"
142 | )
143 | }
144 | >
145 | {/*
{eventInfo.timeText} */}
146 | {/* TODO -
{eventInfo.event.title} (need to parse it nicely, maybe in server)*/}
147 |
{event.title}
148 |
149 |
150 | {truncateName(
151 | items
152 | .slice(0, 5)
153 | .map((i) => i.itemName)
154 | .join(", "),
155 | 100
156 | )}{" "}
157 | -{" "}
158 | {items.length === 1 ? "נושא אחד" : `${items.length} נושאים`}
159 |
160 |
161 |
169 | window.open(
170 | `https://docs.google.com/viewer?url=${filePath}`,
171 | "_blank"
172 | )
173 | }
174 | >
175 | {/*
{eventInfo.timeText} */}
176 | {/* TODO -
{eventInfo.event.title} (need to parse it nicely, maybe in server)*/}
177 |
ישיבת מליאה
178 |
179 |
180 | {truncateName(
181 | items
182 | .slice(0, 5)
183 | .map((i) => i.itemName)
184 | .join(", "),
185 | 100
186 | )}{" "}
187 | -{" "}
188 | {items.length === 1 ? "נושא אחד" : `${items.length} נושאים`}
189 |
190 |
191 |
228 |
243 |
244 | );
245 | });
246 |
--------------------------------------------------------------------------------
/src/components/NavigationBar/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Link } from "react-router-dom";
3 | import { makeStyles } from "@material-ui/core/styles";
4 | import IconButton from "@material-ui/core/IconButton";
5 | import GitHubIcon from "@material-ui/icons/GitHub";
6 | import MenuIcon from "@material-ui/icons/Menu";
7 | import AppBar from "@material-ui/core/AppBar";
8 | import Divider from "@material-ui/core/Divider";
9 | import Button from "@material-ui/core/Button";
10 | import Tooltip from "@material-ui/core/Tooltip";
11 | import Typography from "@material-ui/core/Typography";
12 | import Drawer from "@material-ui/core/Drawer";
13 | import List from "@material-ui/core/List";
14 | import ListItem from "@material-ui/core/ListItem";
15 | import ListItemText from "@material-ui/core/ListItemText";
16 |
17 | import { useNavigate, useBigScreen } from "../../utils";
18 | import config from "../../config.json";
19 | import AboutDialog from "./About";
20 | import ContactUsDialog from "./ContactUs";
21 | import DisclaimerDialog from "./Disclaimer";
22 |
23 | const useStyles = makeStyles({
24 | title: {
25 | whiteSpace: "nowrap",
26 | fontSize: "2em",
27 | color: "white",
28 | letterSpacing: "-2px",
29 | transition: "all .2s ease-in",
30 | transform: "scale(1)",
31 | "& $bigLetter": {
32 | fontSize: "120%",
33 | },
34 | "&:hover, & a:active": {
35 | transform: "scale(1.03)",
36 | },
37 | },
38 | gridContainer: {
39 | display: "grid",
40 | gridTemplateColumns: "1fr min-content 1fr",
41 | gridTemplateRows: "1fr",
42 | gap: "0% 1%",
43 | gridTemplateAreas: '"nav logo links"',
44 | padding: ".2em 0",
45 | },
46 | nav: {
47 | gridArea: "nav",
48 | justifyItems: "flex-start",
49 | display: "flex",
50 | alignItems: "center",
51 |
52 | "& button, & a": {
53 | fontFamily: '"Varela Round", sans-serif',
54 | fontSize: "120%",
55 | flexGrow: 1,
56 | color: "white",
57 | textDecoration: "none",
58 | borderRadius: 0,
59 | },
60 | },
61 | logo: {
62 | gridArea: "logo",
63 | },
64 | links: {
65 | gridArea: "links",
66 | justifyItems: "flex-end",
67 | display: "flex",
68 | alignItems: "center",
69 |
70 | "& button, & a": {
71 | fontFamily: '"Varela Round", sans-serif',
72 | fontSize: "120%",
73 | flexGrow: 1,
74 | color: "white",
75 | textDecoration: "none",
76 | borderRadius: 0,
77 | },
78 | },
79 |
80 | flexSpacer: {
81 | flexGrow: 12,
82 | },
83 | drawerPaper: {
84 | minWidth: 150,
85 | },
86 |
87 | mobileAppBar: {
88 | display: "flex",
89 | flexDirection: "row",
90 | placeContent: "space-between",
91 | placeItems: "center",
92 | padding: " 0 1em 0 0",
93 | "& $logo": {
94 | fontSize: "85%",
95 | },
96 | },
97 | bigLetter: {},
98 | });
99 |
100 | export default function NavigationBar() {
101 | const [aboutOpen, setAboutOpen] = useState(false);
102 | const [contactUsOpen, setContactUsOpen] = useState(false);
103 | const [disclaimerOpen, setDisclaimerOpen] = useState(false);
104 | const isBigScreen = useBigScreen();
105 |
106 | const nav = [
107 | {
108 | navigate: { location: "/", hash: "#top" },
109 | contents: "ראשי",
110 | },
111 | {
112 | navigate: { location: "/", hash: "#person" },
113 | contents: "ח״כים",
114 | },
115 | {
116 | navigate: { location: "/quotes" },
117 | contents: "ציטוטים",
118 | },
119 | {
120 | navigate: { location: "/calendar" },
121 | contents: "לו״ז",
122 | },
123 | {
124 | navigate: { location: "/apps/votes" },
125 | contents: "הצבעות",
126 | },
127 | ];
128 |
129 | const links = [
130 | {
131 | callback: () => setAboutOpen(true),
132 | contents: "אודות",
133 | },
134 | {
135 | callback: () => setContactUsOpen(true),
136 | contents: "צרו קשר",
137 | },
138 | {
139 | callback: () => setDisclaimerOpen(true),
140 | contents: "גילוי נאות",
141 | },
142 | ];
143 |
144 | const main = isBigScreen ? (
145 |
167 |
180 | ב טא מחוקקי
181 | ם
182 |
183 |
184 |
185 | );
186 | }
187 |
188 | const NavBar = React.memo(function ({ nav, links }) {
189 | const classes = useStyles();
190 | const navigateFn = useNavigate();
191 | return (
192 | <>
193 |
194 |
195 |
196 | {nav.map(({ contents, navigate, callback }) => {
197 | const cb = navigate
198 | ? () => navigateFn(navigate)
199 | : callback;
200 | return (
201 |
202 | {contents}
203 |
204 | );
205 | })}
206 |
207 |
208 |
209 |
210 |
211 | {links.map(({ contents, navigate, callback }) => {
212 | const cb = navigate
213 | ? () => navigateFn(navigate)
214 | : callback;
215 | return (
216 |
217 | {contents}
218 |
219 | );
220 | })}
221 |
מזלגו אותנו ב-GitHub} arrow>
222 |
224 | window.open(config.gitUrl, "_blank")
225 | }
226 | >
227 |
229 |
230 |
231 |
233 |
234 |
235 | );
236 | });
237 |
238 | const NavDrawer = React.memo(function ({ nav, links }) {
239 | const classes = useStyles();
240 | const navigateFn = useNavigate();
241 | const [drawerOpen, setDrawerOpen] = useState(false);
242 |
243 | const createToggleDrawer = (open) => (event) => {
244 | if (
245 | event.type === "keydown" &&
246 | (event.key === "Tab" || event.key === "Shift")
247 | ) {
248 | return;
249 | }
250 |
251 | setDrawerOpen(open);
252 | };
253 |
254 | return (
255 | <>
256 |
257 |
259 |
261 |
269 |
270 | {nav.map(({ contents, navigate, callback }) => {
271 | const cb = () => {
272 | if (navigate) navigateFn(navigate);
273 | else callback();
274 | setDrawerOpen(false);
275 | };
276 | return (
277 |
278 |
280 | );
281 | })}
282 |
289 |
291 | );
292 | })}
293 | window.open(config.gitUrl, "_blank")}
296 | >
297 |
299 |
300 |
301 |
302 |
303 | );
304 | });
305 |
--------------------------------------------------------------------------------
/src/components/Chat/index.css:
--------------------------------------------------------------------------------
1 | /* M E N U */
2 |
3 | .menu {
4 | position: fixed;
5 | top: 0px;
6 | right: 0px;
7 | left: 0px;
8 | width: 100%;
9 | height: 50px;
10 | background: rgba(82, 179, 217, 0.9);
11 | z-index: 100;
12 | -webkit-touch-callout: none;
13 | -webkit-user-select: none;
14 | -moz-user-select: none;
15 | -ms-user-select: none;
16 | }
17 |
18 | .back {
19 | position: absolute;
20 | width: 90px;
21 | height: 50px;
22 | top: 0px;
23 | right: 0px;
24 | color: #eee;
25 | line-height: 50px;
26 | font-size: 30px;
27 | padding-right: 10px;
28 | cursor: pointer;
29 | }
30 | .back img {
31 | position: absolute;
32 | top: 5px;
33 | right: 30px;
34 | width: 40px;
35 | height: 40px;
36 | background-color: rgba(255, 255, 255, 0.98);
37 | border-radius: 100%;
38 | -webkit-border-radius: 100%;
39 | -moz-border-radius: 100%;
40 | -ms-border-radius: 100%;
41 | margin-right: 15px;
42 | }
43 | .back:active {
44 | background: rgba(255, 255, 255, 0.2);
45 | }
46 | .name {
47 | position: absolute;
48 | top: 3px;
49 | right: 110px;
50 | font-family: "Lato";
51 | font-size: 25px;
52 | font-weight: 300;
53 | color: rgba(255, 255, 255, 0.98);
54 | cursor: default;
55 | }
56 | .last {
57 | position: absolute;
58 | top: 30px;
59 | right: 115px;
60 | font-family: "Lato";
61 | font-size: 11px;
62 | font-weight: 400;
63 | color: rgba(255, 255, 255, 0.6);
64 | cursor: default;
65 | }
66 |
67 | /* M E S S A G E S */
68 |
69 | .chat {
70 | list-style: none;
71 | background: none;
72 | margin: 0;
73 | padding: 0 0 50px 0;
74 | margin-bottom: 10px;
75 | max-width: 800px;
76 | }
77 | .chat li {
78 | margin: 0;
79 | margin-top: 1.5em;
80 | padding: 0.5rem 0 0.5rem 0.5rem;
81 | overflow: hidden;
82 | display: flex;
83 | }
84 | .chat .avatar {
85 | width: 40px;
86 | height: 40px;
87 | position: relative;
88 | display: block;
89 | z-index: 2;
90 | border-radius: 100%;
91 | -webkit-border-radius: 100%;
92 | -moz-border-radius: 100%;
93 | -ms-border-radius: 100%;
94 | background-color: rgba(245, 245, 245, 0.9);
95 | }
96 | .chat .avatar .img {
97 | width: 40px;
98 | height: 40px;
99 | border-radius: 100%;
100 | -webkit-border-radius: 100%;
101 | -moz-border-radius: 100%;
102 | -ms-border-radius: 100%;
103 | background-color: rgba(245, 245, 245, 0.9);
104 | background-position: center;
105 | background-size: 100% auto;
106 | background-repeat: no-repeat;
107 | }
108 | .chat .day {
109 | position: relative;
110 | display: block;
111 | text-align: center;
112 | color: #c0c0c0;
113 | height: 20px;
114 | text-shadow: 7px 0px 0px #e5e5e5, 6px 0px 0px #e5e5e5, 5px 0px 0px #e5e5e5,
115 | 4px 0px 0px #e5e5e5, 3px 0px 0px #e5e5e5, 2px 0px 0px #e5e5e5,
116 | 1px 0px 0px #e5e5e5, 1px 0px 0px #e5e5e5, 0px 0px 0px #e5e5e5,
117 | -1px 0px 0px #e5e5e5, -2px 0px 0px #e5e5e5, -3px 0px 0px #e5e5e5,
118 | -4px 0px 0px #e5e5e5, -5px 0px 0px #e5e5e5, -6px 0px 0px #e5e5e5,
119 | -7px 0px 0px #e5e5e5;
120 | box-shadow: inset 20px 0px 0px #e5e5e5, inset -20px 0px 0px #e5e5e5,
121 | inset 0px -2px 0px #d7d7d7;
122 | line-height: 38px;
123 | margin-top: 5px;
124 | margin-bottom: 20px;
125 | cursor: default;
126 | -webkit-touch-callout: none;
127 | -webkit-user-select: none;
128 | -moz-user-select: none;
129 | -ms-user-select: none;
130 | }
131 |
132 | .other {
133 | justify-content: flex-end;
134 | align-items: flex-start;
135 | }
136 |
137 | .self {
138 | display: flex;
139 | flex-direction: row-reverse;
140 | }
141 |
142 | .self .msg {
143 | border-top-right-radius: 0px;
144 | box-shadow: -1px 2px 0px #d4d4d4;
145 | }
146 | .self .avatar:after {
147 | content: "";
148 | position: relative;
149 | display: inline-block;
150 | top: -41px;
151 | right: 0px;
152 | width: 0px;
153 | height: 0px;
154 | border: 7px solid rgba(245, 245, 245, 0.9);
155 | border-left-color: transparent;
156 | border-bottom-color: transparent;
157 | }
158 |
159 | .other {
160 | justify-content: flex-start;
161 | align-items: flex-end;
162 | }
163 | .other .msg {
164 | border-bottom-left-radius: 0px;
165 | box-shadow: 1px 2px 0px #d4d4d4;
166 | }
167 | .other .avatar {
168 | }
169 | .other:before {
170 | content: "";
171 | position: relative;
172 | display: inline-block;
173 | bottom: 0px;
174 | left: 0px;
175 | right: 40px;
176 | width: 0px;
177 | height: 0px;
178 | border: 5px solid rgba(211, 222, 255, 0.9);
179 | border-right-color: transparent;
180 | border-top-color: transparent;
181 | box-shadow: 0px 2px 0px #d4d4d4;
182 | }
183 |
184 | .msg {
185 | background: rgba(245, 245, 245, 0.9);
186 | min-width: 50px;
187 | padding: 10px;
188 | border-radius: 2px;
189 | box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
190 | position: relative;
191 | transition: background-color 0.2s;
192 | }
193 |
194 | .not-in-protocol .msg:hover {
195 | background: rgba(222, 232, 255, 0.9);
196 | }
197 |
198 | .not-in-protocol.expanded .msg {
199 | background: rgba(233, 211, 191, 0.9) !important;
200 | }
201 |
202 | .in-protocol .msg {
203 | max-width: 80%;
204 | }
205 |
206 | .other .msg {
207 | background: rgba(211, 222, 255, 0.9);
208 | }
209 |
210 | .msg p {
211 | font-size: 0.8rem;
212 | margin: 0 0 0.2rem 0;
213 | color: #777;
214 | transition: all 0.2s;
215 | word-spacing: nowrap;
216 | }
217 |
218 | .msg .go-suffix {
219 | font-weight: bold;
220 | transition: color 0.2s ease-in;
221 | }
222 | .expanded .msg .go-suffix,
223 | .expanded .msg svg,
224 | .msg:hover .go-suffix,
225 | .msg:hover svg {
226 | color: rgb(43, 86, 160);
227 | }
228 |
229 | .other .msg p {
230 | color: #474747;
231 | }
232 |
233 | .msg .speaker,
234 | .other .msg .speaker {
235 | font-weight: bold;
236 | color: #7092a3;
237 | font-size: 70%;
238 | }
239 |
240 | .msg img {
241 | position: relative;
242 | display: block;
243 | width: 450px;
244 | border-radius: 5px;
245 | box-shadow: 0px 0px 3px #eee;
246 | transition: all 0.4s cubic-bezier(0.565, -0.26, 0.255, 1.41);
247 | cursor: default;
248 | -webkit-touch-callout: none;
249 | -webkit-user-select: none;
250 | -moz-user-select: none;
251 | -ms-user-select: none;
252 | }
253 | @media screen and (max-width: 800px) {
254 | .msg img {
255 | width: 300px;
256 | }
257 | }
258 | @media screen and (max-width: 550px) {
259 | .msg img {
260 | width: 200px;
261 | }
262 | }
263 |
264 | .msg time {
265 | display: flex;
266 | width: 100%;
267 | justify-content: space-between;
268 | font-size: 0.7rem;
269 | color: #bbb;
270 | margin-top: 3px;
271 | float: left;
272 | cursor: default;
273 | -webkit-touch-callout: none;
274 | -webkit-user-select: none;
275 | -moz-user-select: none;
276 | -ms-user-select: none;
277 | }
278 |
279 | .msg time .date-string:after {
280 | content: "◴";
281 | color: #ddd;
282 | font-family: FontAwesome;
283 | display: inline-block;
284 | margin-right: 4px;
285 | }
286 |
287 | .msg time a {
288 | color: #6e96ac;
289 | font-size: 110%;
290 | vertical-align: middle;
291 | transition: color 0.25s;
292 | }
293 |
294 | .msg time a:hover,
295 | .expanded time a {
296 | color: #2b617e;
297 | }
298 |
299 | .other .msg time {
300 | color: #888;
301 | }
302 | .other .msg time .date-string:after {
303 | color: #aaa;
304 | }
305 |
306 | .continuation .avatar,
307 | .continuation.other::before {
308 | visibility: hidden;
309 | }
310 | .continuation .speaker {
311 | display: none;
312 | }
313 |
314 | .chat .continuation {
315 | margin: 0;
316 | }
317 |
318 | emoji {
319 | display: inline-block;
320 | height: 18px;
321 | width: 18px;
322 | background-size: cover;
323 | background-repeat: no-repeat;
324 | margin-top: -7px;
325 | margin-left: 2px;
326 | transform: translate3d(0px, 3px, 0px);
327 | }
328 | emoji.please {
329 | background-image: url(https://imgur.com/ftowh0s.png);
330 | }
331 | emoji.lmao {
332 | background-image: url(https://i.imgur.com/MllSy5N.png);
333 | }
334 | emoji.happy {
335 | background-image: url(https://imgur.com/5WUpcPZ.png);
336 | }
337 | emoji.pizza {
338 | background-image: url(https://imgur.com/voEvJld.png);
339 | }
340 | emoji.cryalot {
341 | background-image: url(https://i.imgur.com/UUrRRo6.png);
342 | }
343 | emoji.books {
344 | background-image: url(https://i.imgur.com/UjZLf1R.png);
345 | }
346 | emoji.moai {
347 | background-image: url(https://imgur.com/uSpaYy8.png);
348 | }
349 | emoji.suffocated {
350 | background-image: url(https://i.imgur.com/jfTyB5F.png);
351 | }
352 | emoji.scream {
353 | background-image: url(https://i.imgur.com/tOLNJgg.png);
354 | }
355 | emoji.hearth_blue {
356 | background-image: url(https://i.imgur.com/gR9juts.png);
357 | }
358 | emoji.funny {
359 | background-image: url(https://i.imgur.com/qKia58V.png);
360 | }
361 |
362 | @-webikt-keyframes pulse {
363 | from {
364 | opacity: 0;
365 | }
366 | to {
367 | opacity: 0.5;
368 | }
369 | }
370 |
371 | /* T Y P E */
372 |
373 | input.textarea {
374 | position: fixed;
375 | bottom: 0px;
376 | right: 0px;
377 | left: 0px;
378 | width: 100%;
379 | height: 50px;
380 | z-index: 99;
381 | background: #fafafa;
382 | border: none;
383 | outline: none;
384 | padding-right: 55px;
385 | padding-left: 55px;
386 | color: #666;
387 | font-weight: 400;
388 | }
389 | .emojis {
390 | position: fixed;
391 | display: block;
392 | bottom: 8px;
393 | right: 7px;
394 | width: 34px;
395 | height: 34px;
396 | background-image: url(https://i.imgur.com/5WUpcPZ.png);
397 | background-repeat: no-repeat;
398 | background-size: cover;
399 | z-index: 100;
400 | cursor: pointer;
401 | }
402 | .emojis:active {
403 | opacity: 0.9;
404 | }
405 |
406 | .chat li .share-buttons {
407 | text-align: center;
408 | opacity: 0;
409 | transform: scaleY(0) scaleX(0.9);
410 | transition: opacity 0.05s ease-in-out,
411 | transform 0.15s cubic-bezier(1, 0.32, 0.82, 1.6);
412 | }
413 | .chat li:hover .share-buttons {
414 | opacity: 1;
415 | transform: scale(1);
416 | }
417 |
418 | @media screen and (max-width: 600px), screen and (max-height: 400px) {
419 | .chat li .share-buttons {
420 | opacity: 1;
421 | transform: scale(1);
422 | }
423 | }
424 |
425 | .click-for-more {
426 | opacity: 0;
427 | cursor: pointer;
428 | position: absolute;
429 | height: 30px;
430 | top: 0;
431 | left: 0;
432 | padding: 0 2em 0 0.5em;
433 | display: flex;
434 | justify-items: flex-end;
435 | align-items: center;
436 | transition: opacity 0.2s ease-in;
437 | font-family: "Secular One", sans-serif;
438 | }
439 | .msg:hover .click-for-more {
440 | opacity: 1;
441 | }
442 | .click-for-more > * {
443 | padding: 0 0.25em;
444 | }
445 | .click-for-more a {
446 | color: #333;
447 | text-decoration: none;
448 | }
449 |
--------------------------------------------------------------------------------
/src/pages/Main/PersonProfile/PersonBills/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import CircularProgress from "@material-ui/core/CircularProgress";
3 | import { IconButton, Tooltip } from "@material-ui/core";
4 | import clsx from "clsx";
5 | import config from "../../../../config";
6 | import { makeStyles } from "@material-ui/core/styles";
7 | import Accordion from "@material-ui/core/Accordion";
8 | import AccordionDetails from "@material-ui/core/AccordionDetails";
9 | import AccordionSummary from "@material-ui/core/AccordionSummary";
10 | import Typography from "@material-ui/core/Typography";
11 | import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
12 | import CloseRoundedIcon from "@material-ui/icons/CloseRounded";
13 | import AccessTimeRoundedIcon from "@material-ui/icons/AccessTimeRounded";
14 | import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
15 | import LoopRoundedIcon from "@material-ui/icons/LoopRounded";
16 | import DescriptionRoundedIcon from "@material-ui/icons/DescriptionRounded";
17 | import HelpOutlineRoundedIcon from "@material-ui/icons/HelpOutlineRounded";
18 |
19 | import Dialog from "../../../../components/Dialog";
20 | import { useCancellableFetch } from "../../../../utils";
21 |
22 | export default React.memo(function PersonBills({ personID, filter }) {
23 | const [loading, setLoading] = useState(true);
24 | const [data, setData] = useState([]);
25 | const classes = useStyles();
26 | const serverFetch = useCancellableFetch();
27 |
28 | useEffect(() => {
29 | if (!personID) return;
30 | (async () => {
31 | setLoading(true);
32 | const res = await serverFetch(
33 | `${config.server}/PersonBills?personId=${personID}`
34 | );
35 | setData(res);
36 | setLoading(false);
37 | })();
38 | }, [personID, serverFetch]);
39 |
40 | if (loading) {
41 | return (
42 |
43 |
45 | );
46 | }
47 |
48 | const filteredData = data
49 | .filter((d) => filter == null || getReducedType(d) === filter)
50 | .slice(0, 100);
51 |
52 | return (
53 |
105 |
106 |
setDialog(null)}
109 | closeText="סגור"
110 | >
111 | {dialog?.billName}
112 | {dialog?.summaryLaw}
113 |
114 | {data.length > 0 ? (
115 | data.map((x, i) => (
116 |
126 |
133 |
134 |
135 | {x.billName}
136 |
137 |
138 |
139 | {x.billSubName && (
140 |
145 | {x.billSubName} - הכנסת ה-
146 | {x.knessetNum}
147 |
148 | )}
149 | {!x.billSubName && (
150 |
155 | הכנסת ה-{x.knessetNum}
156 |
157 | )}
158 |
159 |
{
163 | e.preventDefault();
164 | setDialog(x);
165 | }}
166 | >
167 |
169 | )}
170 |
171 |
172 |
173 |
175 |
176 |
177 | ))
178 | ) : (
179 |
187 | לא מצאנו הצעות חוק
188 | {!isFiltered && " שהח״כ יזם"}
189 |
190 | )}
191 |
192 |
{desc}} arrow>
277 | {icon}
278 |
279 | );
280 | }
281 |
282 | function getReducedType(bill) {
283 | switch (bill.statusID) {
284 | case 177:
285 | return "נעצרה";
286 | case 118:
287 | return "אושרה";
288 | case 120:
289 | case 126:
290 | case 158:
291 | case 161:
292 | case 162:
293 | case 165:
294 | case 169:
295 | case 175:
296 | return "אחר";
297 | default:
298 | return "בתהליך";
299 | }
300 | }
301 |
--------------------------------------------------------------------------------
/src/pages/Main/PersonProfile/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useMemo } from "react";
2 | import Typography from "@material-ui/core/Typography";
3 | import CircularProgress from "@material-ui/core/CircularProgress";
4 | import Button from "@material-ui/core/Button";
5 | import PeopleIcon from "@material-ui/icons/People";
6 |
7 | import PersonQuotes from "./PersonQuotes";
8 | import WordCloud from "../../../components/WordCloud";
9 | import PersonBills from "./PersonBills";
10 | import PersonBillsStats from "./PersonBillsStats";
11 | import config from "../../../config";
12 | import {
13 | useBigScreen,
14 | useCancellableFetch,
15 | useNavigate,
16 | imageOrDefault,
17 | usePersonID,
18 | getFullName,
19 | } from "../../../utils";
20 | import { ScrollPage } from "../../../components/ScrollableView";
21 | import PersonSearch from "../../../components/PersonSearch";
22 | import "./index.css";
23 | import { makeStyles } from "@material-ui/core";
24 |
25 | const useStyles = makeStyles({
26 | selection: {
27 | padding: "1em",
28 | width: "100%",
29 | height: "100%",
30 | display: "flex",
31 | flexDirection: "column",
32 | overflowY: "auto",
33 | },
34 |
35 | people: {
36 | display: "flex",
37 | flexWrap: "wrap",
38 | justifyItems: "center",
39 | alignItems: "space-between",
40 | placeContent: "space-around",
41 | width: "100%",
42 | flexGrow: 1,
43 | },
44 | });
45 |
46 | const PersonProfile = React.memo(function () {
47 | const personID = usePersonID();
48 | const isBigScreen = useBigScreen();
49 | const [persons, setPersons] = useState({});
50 | const [fallbackPerson, setFallbackPerson] = useState(null);
51 | const serverFetch = useCancellableFetch();
52 | const person = useMemo(() => persons[personID], [persons, personID]);
53 |
54 | useEffect(() => {
55 | (async () => {
56 | const res = await serverFetch(`${config.server}/PersonGetAll`);
57 | const mapping = {};
58 | for (const p of res) {
59 | mapping[parseInt(p.PersonID)] = p;
60 | }
61 | setPersons(mapping);
62 | })();
63 | }, [serverFetch]);
64 |
65 | useEffect(() => {
66 | if (person || !personID) return;
67 |
68 | (async () => {
69 | setFallbackPerson(null);
70 | const res = await serverFetch(
71 | `${config.server}/PersonEnrichment?personID=${personID}`
72 | );
73 | setFallbackPerson(parseResponse(res));
74 | })();
75 | }, [personID, person, serverFetch]);
76 |
77 | const chosenPerson = person || fallbackPerson;
78 |
79 | return (
80 |
85 | {personID &&
88 | );
89 | });
90 | export default PersonProfile;
91 |
92 | const PersonView = React.memo(function ({ persons, person }) {
93 | const [billsFilter, setBillsFilter] = useState(null);
94 |
95 | return (
96 |
100 |
101 |
111 | {person ? (
112 |
113 | ) : (
114 |
115 | )}
116 |
117 |
118 |
120 |
127 |
134 |
144 |
161 |
166 |
167 | {[...rands].map((id) => (
168 |
navigate({ personID: id, q: null })}
171 | style={{ maxWidth: 350 }}
172 | >
173 |
175 | ))}
176 |
navigate({ personID: null })}>
177 |
185 |
198 |
208 | עוד
209 |
210 |
219 | ח״כים מהשנים האחרונות
220 |
221 |
223 |
224 |
245 |
255 |
265 | {name}
266 |
267 |
276 | {desc.join(", ")}
277 |
278 |
111 |
112 |
113 |
114 |
131 |
133 |
142 |
144 |
145 |
147 | );
148 | });
149 | export default DocumentQuotes;
150 |
151 | const QuoteView = React.memo(function ({
152 | documentID,
153 | documentType,
154 | setLoading,
155 | }) {
156 | const [data, setData] = useState([]);
157 |
158 | const personID = usePersonID();
159 | const query = useQuery();
160 | const index = useIndex();
161 | const serverFetch = useCancellableFetch();
162 |
163 | useEffect(() => {
164 | (async () => {
165 | if (!documentID) return;
166 | setLoading(true);
167 | try {
168 | const quotes = await serverFetch(
169 | `${config.server}/DocumentQuotes?documentId=${documentID}&documentType=${documentType}&index=${index}`
170 | );
171 | setData(quotes);
172 | } catch (e) {
173 | // TODO handle errors
174 | console.error(e);
175 | setData([]);
176 | } finally {
177 | setLoading(false);
178 | }
179 | })();
180 | }, [documentID, documentType, index, setLoading, serverFetch]);
181 |
182 | let prevSpeaker = null;
183 | return (
184 |
194 | {
197 | const ret = {
198 | highlight: query,
199 | isSpeaker: personID === d.PersonID,
200 | isContinuation: prevSpeaker === d.Speaker,
201 | isInProtocol: true,
202 | ...d,
203 | };
204 | prevSpeaker = d.Speaker;
205 | return ret;
206 | })}
207 | />
208 |
210 | );
211 | });
212 |
213 | const Metadata = React.memo(function ({ documentID, documentType }) {
214 | const classes = useStyles();
215 | const [metadata, setMetadata] = useState(null);
216 | const serverFetch = useCancellableFetch();
217 |
218 | useEffect(() => {
219 | (async () => {
220 | if (!documentID) return;
221 | try {
222 | const enrichment = await serverFetch(
223 | `${config.server}/DocumentTopics?documentId=${documentID}&documentType=${documentType}`
224 | );
225 | if (!enrichment.length) {
226 | console.error("No metadata found, this is a server error");
227 | }
228 | setMetadata(enrichment);
229 | } catch (e) {
230 | // TODO handle errors
231 | console.error(e);
232 | setMetadata(null);
233 | }
234 | })();
235 | }, [documentID, documentType, serverFetch]);
236 |
237 | if (!metadata) return • ;
241 |
242 | return (
243 |
244 |
245 |
250 | צפיה בפרוטוקול
251 |
252 |
253 | {documentType === "committee" &&
254 | (md?.Name?.length ? md.Name : "ועדה (פרטים חלקיים)")}
255 | {documentType === "plenum" && "ישיבת מליאה"}
256 |
257 | {md?.KnessetNum && (
258 |
259 | הכנסת ה-{md.KnessetNum}
260 | {bull}
261 | {toNiceDate(new Date(md.StartDate))}
262 |
263 | )}
264 |
265 |
266 | {metadata
267 | ?.filter((m) => m.ItemName?.length)
268 | .map((m) => (
269 |
270 |
271 |
273 |
280 | ))}
281 |
282 |
283 |
284 |
285 |
292 | {md?.FilePath && (
293 |
323 |
324 |
325 | );
326 | });
327 |
328 | const FullProtocolButton = React.memo(function ({ url }) {
329 | if (!url) return null;
330 | return (
331 |
340 |
357 | );
358 | });
359 |
--------------------------------------------------------------------------------
/src/pages/Main/Search/Bubble/index.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo, useState, useEffect } from "react";
2 | import "react-vis/dist/style.css";
3 | import Highlighter from "react-highlight-words";
4 | import { Treemap } from "react-vis";
5 | import { makeStyles, withStyles } from "@material-ui/core/styles";
6 | import Tooltip from "@material-ui/core/Tooltip";
7 | import Link from "@material-ui/core/Link";
8 | import Snackbar from "@material-ui/core/Snackbar";
9 | import Drawer from "@material-ui/core/Drawer";
10 | import Container from "@material-ui/core/Container";
11 | import CardActions from "@material-ui/core/CardActions";
12 | import CardContent from "@material-ui/core/CardContent";
13 | import PersonIcon from "@material-ui/icons/Person";
14 | import Button from "@material-ui/core/Button";
15 | import { useHistory } from "react-router-dom";
16 |
17 | import QuotesLoader from "../../../../components/QuotesLoader";
18 | import {
19 | useCancellableFetch,
20 | useBigScreen,
21 | useQuery,
22 | useWindowSize,
23 | toNiceDate,
24 | imageOrDefault,
25 | shuffleArray,
26 | useNavigate,
27 | } from "../../../../utils";
28 | import config from "../../../../config";
29 |
30 | import HelpOutlineIcon from "@material-ui/icons/HelpOutline";
31 | import { SearchDialog } from "../../../../components/QuotesSearch";
32 |
33 | import defaultBubbles from "../../../../defaultTopics";
34 | import { Typography } from "@material-ui/core";
35 | import { getDocumentLink } from "../../../../components/DocumentLink";
36 | import { v4 as uuidv4 } from 'uuid';
37 |
38 | const uuid = uuidv4();
39 | const minSize = 50;
40 | const maxWidth = 750;
41 | const maxHeightRatio = 0.75;
42 | const minRatioForImage = 0.035;
43 | const minRatioForImageSmallScreen = Infinity;
44 | const maxBubblesForSmallScreen = 25;
45 |
46 | const useStyles = makeStyles({
47 | drawerPaper: {
48 | maxHeight: "65vh",
49 | },
50 | personCardFlex: {
51 | maxHeight: "65vh",
52 | display: "flex",
53 | flexDirection: "column",
54 | },
55 | });
56 |
57 | const makeDefaultBubbles = (queries, isBigScreen) => {
58 | shuffleArray(queries);
59 | const queriesCopy = queries.slice(
60 | 0,
61 | isBigScreen
62 | ? config.defaultBubblesCount
63 | : config.defaultBubblesCountMobile
64 | );
65 | const sizes = new Array(queriesCopy.length)
66 | .fill(null)
67 | .map((_) => 5 + Math.random() * 10);
68 | const max = Math.max(...sizes);
69 |
70 | const res = queriesCopy.map((s, i) =>
71 | makeDefaultBubble(s, sizes[i], max, isBigScreen)
72 | );
73 | res.push({
74 | element:
164 | אין תוצאות :( נסו ללחוץ על אחת הבועות?
165 |
166 | );
167 | setData(defaults);
168 | return;
169 | }
170 |
171 | const minRatio = isBigScreen
172 | ? minRatioForImage
173 | : minRatioForImageSmallScreen;
174 | const total = res
175 | .map((r) => r.Counter)
176 | .reduce((a, b) => a + b, 0);
177 |
178 | const filteredRes = res
179 | .filter(
180 | (r) =>
181 | r.Counter / total >= minRatio ||
182 | r.mk_imgPath !== null
183 | )
184 | .sort(function (a, b) {
185 | return b.Counter - a.Counter;
186 | })
187 | .slice(
188 | 0,
189 | isBigScreen ? undefined : maxBubblesForSmallScreen
190 | );
191 |
192 | setData(
193 | filteredRes.map((r) => ({
194 | result: r,
195 | element: (
196 |
232 | x.element}
248 | onLeafClick={(n) => {
249 | if (n.data.result) {
250 | if (isBigScreen) return;
251 | else setPersonPreview(n.data.result);
252 | } else if (n.data.query) navigate({ q: n.data.query });
253 | else if (n.data.query !== undefined) {
254 | setData(
255 | makeDefaultBubbles(defaultBubbles, isBigScreen)
256 | );
257 | setGuideOpen(true);
258 | }
259 | }}
260 | />
261 |
262 | {!isBigScreen && (
263 | setPersonPreview(null)}
267 | />
268 | )}
269 |
270 | );
271 | });
272 |
273 | const PersonPreview = React.memo(function ({ onClose, details, query }) {
274 | const classes = useStyles();
275 | return (
276 |
282 |
284 | );
285 | });
286 |
287 | const PersonShortName = React.memo(function ({ ...props }) {
288 | const { PersonID, FirstName, LastName, ratio } = props;
289 | const isBigScreen = useBigScreen();
290 | const navigate = useNavigate();
291 | const minRatio = isBigScreen
292 | ? minRatioForImage
293 | : minRatioForImageSmallScreen;
294 |
295 | return (
296 |
306 | isBigScreen
307 | ? navigate({ personID: PersonID, hash: "#person" })
308 | : void 0
309 | }
310 | style={{
311 | cursor: "pointer",
312 | display: "flex",
313 | justifyItems: "stretch",
314 | alignItems: "flex-end",
315 | width: "100%",
316 | }}
317 | >
318 | {ratio >= minRatio && (
319 |
320 |
321 | {FirstName} {LastName}
322 |
323 |
324 | )}
325 |
356 |
357 |
366 |
383 |
384 |
392 |
403 | {Counter} תוצאות
404 |
405 |
406 | {(FactionName || KnessetNum) && (
407 |
411 | {FactionName && `${FactionName}, `}הכנסת ה-
412 | {KnessetNum}
413 |
414 | )}
415 |
416 |
418 |
419 |
420 |
421 | ״
422 |
432 | {StartDate && toNiceDate(new Date(StartDate))}
433 |
434 |
435 |
436 |
437 |
438 |
447 |
458 | }
459 | style={{ marginLeft: "1em" }}
460 | onClick={(e) => {
461 | history.push(
462 | getDocumentLink({
463 | SessionType: Type,
464 | DocumentID,
465 | Index,
466 | PersonID,
467 | })
468 | );
469 | e.preventDefault();
470 | }}
471 | >
472 | לפרוטוקול המלא
473 |
474 |
485 | }
486 | onClick={gotoPerson}
487 | >
488 | לפרופיל ח"כ
489 |
490 |
492 |
493 | );
494 | });
495 |
496 | const PersonCard = React.memo(function ({
497 | PersonID,
498 | FirstName,
499 | LastName,
500 | Text,
501 | FactionName,
502 | KnessetNum,
503 | StartDate,
504 | Counter,
505 | DocumentID,
506 | Index,
507 | Type,
508 | query,
509 | }) {
510 | const navigate = useNavigate();
511 | const history = useHistory();
512 | const gotoPerson = () => {
513 | navigate({ personID: PersonID, hash: "#person" });
514 | };
515 |
516 | return (
517 |
518 |
526 |
527 | {FirstName} {LastName}
528 |
529 |
535 | {Counter} תוצאות
536 |
537 |
538 | {(FactionName || KnessetNum) && (
539 |
545 | {FactionName && `${FactionName}, `}הכנסת ה-{KnessetNum}
546 |
547 | )}
548 |
559 | ״
560 |
570 |
577 | {toNiceDate(new Date(StartDate))}
578 |
579 |
588 |
599 | }
600 | onClick={(e) => {
601 | history.push(
602 | getDocumentLink({
603 | SessionType: Type,
604 | DocumentID,
605 | Index,
606 | PersonID,
607 | })
608 | );
609 | e.preventDefault();
610 | }}
611 | >
612 | לפרוטוקול המלא
613 |
614 |
625 | }
626 | onClick={gotoPerson}
627 | >
628 | לפרופיל ח"כ
629 |
630 |
631 |